@-webkit-keyframes clickPrompt {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  75% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}@keyframes clickPrompt {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  75% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@-webkit-keyframes clickPrompt_line {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  75% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes clickPrompt_line {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  75% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@-webkit-keyframes clickPrompt_icon {
  0% {
    opacity: 1;
  }
  99% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes clickPrompt_icon {
  0% {
    opacity: 1;
  }
  99% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@-webkit-keyframes dragPrompt {
  0% {
    opacity: 1;
    right: 82px;
  }
  25% {
    opacity: 1;
    right: 15px;
  }
  50% {
    opacity: 1;
    right: 82px;
  }
  75% {
    opacity: 1;
    right: 15px;
  }
  99% {
    opacity: 1;
    right: 82px;
  }
  100% {
    opacity: 0;
    right: 82px;
  }
}
@keyframes dragPrompt {
  0% {
    opacity: 1;
    right: 82px;
  }
  25% {
    opacity: 1;
    right: 15px;
  }
  50% {
    opacity: 1;
    right: 82px;
  }
  75% {
    opacity: 1;
    right: 15px;
  }
  99% {
    opacity: 1;
    right: 82px;
  }
  100% {
    opacity: 0;
    right: 82px;
  }
}
@-webkit-keyframes dragPrompt_2 {
  0% {
    opacity: 1;
    right: 49px;
  }
  25% {
    opacity: 1;
    right: 0px;
  }
  50% {
    opacity: 1;
    right: 82px;
  }
  75% {
    opacity: 1;
    right: 15px;
  }
  99% {
    opacity: 1;
    right: 49px;
  }
  100% {
    opacity: 0;
    right: 49px;
  }
}
@keyframes dragPrompt_2 {
  0% {
    opacity: 1;
    right: 49px;
  }
  25% {
    opacity: 1;
    right: 0px;
  }
  50% {
    opacity: 1;
    right: 82px;
  }
  75% {
    opacity: 1;
    right: 15px;
  }
  99% {
    opacity: 1;
    right: 49px;
  }
  100% {
    opacity: 0;
    right: 49px;
  }
}
@-webkit-keyframes dragPrompt_3 {
  0% {
    opacity: 1;
    right: 31px;
  }
  25% {
    opacity: 1;
    right: 0px;
  }
  50% {
    opacity: 1;
    right: 82px;
  }
  75% {
    opacity: 1;
    right: 15px;
  }
  99% {
    opacity: 1;
    right: 31px;
  }
  100% {
    opacity: 0;
    right: 31px;
  }
}
@keyframes dragPrompt_3 {
  0% {
    opacity: 1;
    right: 31px;
  }
  25% {
    opacity: 1;
    right: 0px;
  }
  50% {
    opacity: 1;
    right: 82px;
  }
  75% {
    opacity: 1;
    right: 15px;
  }
  99% {
    opacity: 1;
    right: 31px;
  }
  100% {
    opacity: 0;
    right: 31px;
  }
}
@-webkit-keyframes dragPrompt_4 {
  0% {
    opacity: 1;
    bottom: -42px;
  }
  25% {
    opacity: 1;
    bottom: 0px;
  }
  50% {
    opacity: 1;
    bottom: -42px;
  }
  75% {
    opacity: 1;
    bottom: 0px;
  }
  99% {
    opacity: 1;
    bottom: -42px;
  }
  100% {
    opacity: 0;
    bottom: -42px;
  }
}
@keyframes dragPrompt_4 {
  0% {
    opacity: 1;
    bottom: -42px;
  }
  25% {
    opacity: 1;
    bottom: 0px;
  }
  50% {
    opacity: 1;
    bottom: -42px;
  }
  75% {
    opacity: 1;
    bottom: 0px;
  }
  99% {
    opacity: 1;
    bottom: -42px;
  }
  100% {
    opacity: 0;
    bottom: -42px;
  }
}
.h_s7_121_053 .tab-list-basic > li .button-tab span {
  margin-top: 0;
}
.h_s7_121_053 .page-view.modal-layer-activity-goals3 .tab-modal {
  padding-top: 150px;
  padding-left: 127.5px;
}
.h_s7_121_053 .scene .guide-wrap {
  z-index: 5;
  opacity: 0;
  left: calc(-100% - 56px);
  /* -webkit-transition-delay: 1s;
       -o-transition-delay: 1s; */
          transition-delay: 0.1s;
  -webkit-transition-duration: 0.6s;
       -o-transition-duration: 0.6s;
          transition-duration: 0.6s;
  left: initial;
}
.h_s7_121_053 .scene .guide-wrap.active {
  opacity: 1;
}
.h_s7_121_053 .modal-layer .aim-madal .bullet-list {
  width: 75%;
}
.h_s7_121_053 .choice-button-area .choice-button .image-item {
  width: 425px;
  height: 238.5px;
  margin-top: 40px;
}
.h_s7_121_053 .bottom-button-wrap > button {
  bottom: 22px;
}
.h_s7_121_053 .scene .guide-wrap .bubble-box .img-area > img {
  width: 121px;
  height: 121px;
}

.popupCont__head {
  margin-bottom: 35px;
}
.popupCont__tit {
  font-size: 40px;
  font-weight: 700;
  color: #303a46;
  position: relative;
}
.popupCont__item {
  margin-top: 45px;
}
.popupCont__item:first-child {
  margin-top: 0;
}
.popupCont__item-head {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-bottom: 10px;
}
.popupCont__num {
  width: 37.5px;
  height: 37.5px;
  background-color: #f58a00;
  border-radius: 100%;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  color: #fff;
  font-size: 24px;
  font-weight: 700;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}
.popupCont__item-tit {
  margin-left: 12.5px;
  font-size: 36px;
  font-weight: 700;
  color: #f58a00;
}
.popupCont__item-body {
  margin-left: 48px;
}
.popupCont__item-text {
  font-size: 36px;
  font-weight: 500;
  color: #303a46;
  line-height: 50px;
}
.popupCont__img {
  width: 187.5px;
  height: 225px;
  position: absolute;
  right: 200px;
  bottom: 95px;
}
.popupCont__license {
  display: inline-block;
  position: absolute;
  bottom: 85px;
  right: 109px;
  font-weight: 500;
  font-size: 20px;
  line-height: 30px;
  letter-spacing: -0.0125em;
}
.popupCont__item--nomargin .popupCont__item-body {
  margin-left: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 15px;
}
.popupCont__item--nomargin .popupCont__num {
  margin-top: 5px;
}

.scene {
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
  visibility: hidden;
  opacity: 0;
  -webkit-transition-duration: 0.3s;
       -o-transition-duration: 0.3s;
          transition-duration: 0.3s;
}
.scene.active {
  position: unset;
  visibility: unset;
  opacity: 1;
}
.scene-layer-area1 .guide-wrap {
  bottom: 160px;
  right: initial;
  top: initial;
  left: -1980px!important;
}
.scene-layer-area1 .guide-wrap.active {
  left: 65px !important;
}

.scene-layer {
  height: 100%;
}
.scene-layer-area2 .active-litle-area.green {
  width: 716px;
  height: 61.5px;
  background-color: #2bad9f;
}
.scene-layer-area2 .active-litle-area.green > span {
  font-size: 23px;
  width: 112px;
  height: 46px;
  line-height: 46px;
  background-image: -webkit-gradient(linear, left bottom, left top, from(rgb(15, 138, 125)), to(rgb(36, 160, 147)));
  background-image: -o-linear-gradient(bottom, rgb(15, 138, 125), rgb(36, 160, 147));
  background-image: linear-gradient(to top, rgb(15, 138, 125), rgb(36, 160, 147));
}
.scene-layer-area2 .active-litle-area.green > p {
  font-size: 24.625px;
  margin-left: 25px;
}
.scene-layer-area2 .guide-wrap {
  top: auto;
  bottom: 226.5px;
  /* right: 1157px; */
	right: initial;
	left: -1980px!important;
}
.scene-layer-area2 .guide-wrap.active {
  left: 65px !important;
}

.scene-layer-area2 .guide-wrap .bubble-box {
  min-width: 707px;
}
.scene-layer-area2 .guide-wrap .bubble-box .img-area {
  position: absolute;
  width: 169px;
  height: 121px;
}
.scene-layer-area2 .guide-wrap .bubble-txt {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 50%;
  left: 0;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  opacity: 0;
  -webkit-transition-duration: 0.3s;
       -o-transition-duration: 0.3s;
          transition-duration: 0.3s;
  pointer-events: none;
  display: block !important;
}
.scene-layer-area2 .guide-wrap .bubble-txt.active {
  opacity: 1;
  pointer-events: all;
}
.scene-layer-area2 .modal-layer-tip-wrap {
  height: 445px;
}
.scene-layer-area2 .modal-layer-tip-inner {
  height: auto;
}
.scene-layer-area2 .modal-layer-tip-inner .button-check {
  position: relative;
  bottom: auto;
  margin: 40px auto 0;
}
.scene-layer-area2 .modal-layer-tip-inner .text {
  text-align: left;
  line-height: 47px !important;
}
.scene-layer-area2 .modal-layer-tip-inner .text em {
  font-weight: 700;
}
.scene-layer-area2 .modal-layer-tip-inner .text em.ke {
  color: #df731b;
}
.scene-layer-area2 .modal-layer-tip-inner .text em.peg {
  color: #1b60df;
}
.scene-layer-area2 .modal-layer-tip-inner .text em.pee {
  color: #6ec3cd;
}
.scene-layer-area2 .modal-layer-tip-inner .text em.e {
  color: #252423;
}
.scene-layer__box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  height: 100%;
}
.scene-layer__img-box {
  width: 1094.5px;
  height: 447.5px;
}
.scene-layer__cont-box {
  width: 504px;
  height: 369.5px;
  position: relative;
  margin: 0 80px;
}

.board {
  position: relative;
}
.board__svg {
  overflow: initial;
}
.board__road, .board__point, .board__board {
  display: none;
}
.board__road.active, .board__point.active, .board__board.active {
  display: block;
}
.board__img {
  -webkit-transform: translate(93%, 24%) rotate(-58deg);
          transform: translate(93%, 24%) rotate(-58deg);
  opacity: 0;
  -webkit-transition-delay: 1s;
       -o-transition-delay: 1s;
          transition-delay: 1s;
  -webkit-transition-duration: 0;
       -o-transition-duration: 0;
          transition-duration: 0;
  -webkit-transition-property: -webkit-transform;
  transition-property: -webkit-transform;
  -o-transition-property: transform;
  transition-property: transform;
  transition-property: transform, -webkit-transform;
}
.board__img.active {
  -webkit-transform: rotate(-6deg);
          transform: rotate(-6deg);
  opacity: 1;
  -webkit-transition-property: opacity;
  -o-transition-property: opacity;
  transition-property: opacity;
  -webkit-transition-duration: 0.25s;
       -o-transition-duration: 0.25s;
          transition-duration: 0.25s;
}
.board__path {
  stroke-width: 28px;
  stroke-linecap: round;
}
.board__path--line {
  stroke-width: 3px;
  stroke-dasharray: 9, 12;
  pointer-events: none;
}
.board__path--bg {
  stroke-width: 34px;
  pointer-events: none;
}
.board__centerPoint {
  width: 65.5px;
  height: 56.5px;
  -webkit-transform: translate(46.5%, 94%);
          transform: translate(46.5%, 94%);
}
.board__dragTrigger-box {
  width: 121.5px;
  height: 216px;
  position: absolute;
  right: -39px;
  bottom: -11px;
  cursor: pointer;
}
.board__dragTrigger-box.active {
  display: none;
}
.board__dragTrigger {
  display: block;
  position: absolute;
  top: 700px;
  left: 1240px;
  width: 121.5px;
  height: 216px;
}
.board__dragTrigger.active {
  position: relative;
}
.board__dragTrigger.active::before {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 15px;
  padding: 5px 3px;
  -webkit-box-sizing: content-box;
          box-sizing: content-box;
  border: 7px dotted #5aa5ff;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  opacity: 0;
  z-index: 5;
  -webkit-animation-name: clickPrompt_line;
          animation-name: clickPrompt_line;
  -webkit-animation-direction: normal;
          animation-direction: normal;
  -webkit-animation-duration: 4s;
          animation-duration: 4s;
  -webkit-animation-timing-function: ease;
          animation-timing-function: ease;
  pointer-events: none;
}
.board__dragTrigger.active::after {
  content: "";
  position: absolute;
  right: -40px;
  bottom: -40px;
  width: 83px;
  height: 75px;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url(../../images/h_s7_121_053/drag-hand-left.png);
  opacity: 0;
  z-index: 6;
  -webkit-animation-name: clickPrompt;
          animation-name: clickPrompt;
  -webkit-animation-direction: normal;
          animation-direction: normal;
  -webkit-animation-duration: 4s;
          animation-duration: 4s;
  -webkit-animation-timing-function: ease;
          animation-timing-function: ease;
  pointer-events: none;
}
.board__dragTrigger.active::before {
  width: 117.5px;
  height: 117.5px;
  border: none;
  background: url(../../images/h_s7_121_053/dragPrompt.png) no-repeat center/100%;
}
.board .board__dragTrigger.active::after {
  right: -22px;
  bottom: 38px;
}

.act1 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  width: 100%;
  height: 100%;
}
.act1__control {
  height: 115px;
  padding-top: 10px;
  background: #262f39;
  position: relative;
}
.act1__control::before {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background: #262f39;
  background: -webkit-gradient(linear, left top, left bottom, from(#262f39), color-stop(50%, #374351), to(#262f39));
  background: -o-linear-gradient(top, #262f39 0%, #374351 50%, #262f39 100%);
  background: linear-gradient(to bottom, #262f39 0%, #374351 50%, #262f39 100%);
  opacity: 0.6;
}
.act1__control::after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 10px;
  background-color: #7e8a98;
  left: 0;
  top: 0;
}
.act1__control-box {
  position: relative;
  padding-left: 70px;
  padding-right: 290px;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
.act1__control-checkbox {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 5px;
}
.act1__visual {
  height: calc(100% - 115px);
  position: relative;
  background-color: #175fb5;
  z-index: 1;
}
.act1__board {
  width: 887px;
  height: 400px;
  position: absolute;
  bottom: 16px;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}
.act1__action {
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.act1__btn-box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 5px;
  margin-right: 55px;
}
.act1__stopBtn {
  width: 84.5px;
  height: 84.5px;
  background: url("../../images/h_s7_121_053/activity1__stopBtn.png") no-repeat center/100%;
}
.act1__stopBtn.active {
  background: url("../../images/h_s7_121_053/activity1__stopBtn_2.png") no-repeat center/100%;
}
.act1__startBtn {
  width: 59px;
  height: 59px;
  background: url("../../images/h_s7_121_053/activity1__startBtn.png") no-repeat center/100%;
}
.act1__startBtn.active {
  background: url("../../images/h_s7_121_053/activity1__startBtn_2.png") no-repeat center/100%;
}
.act1__startBtn.off {
  background: url("../../images/h_s7_121_053/activity1__startBtn_3.png") no-repeat center/100%;
}
.act1__radio-box {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 20px;
}
.act1__mark-1 {
  width: 168px;
  height: 168px;
  border-radius: 100%;
  border: 7px dotted #1a68c5;
  display: block;
  position: absolute;
  right: -39px;
  top: -60px;
  z-index: 13;
  pointer-events: none;
  opacity: 0;
}
.act1__mark-1.active {
  -webkit-animation-name: clickPrompt_line;
          animation-name: clickPrompt_line;
  -webkit-animation-direction: normal;
          animation-direction: normal;
  -webkit-animation-duration: 4s;
          animation-duration: 4s;
  -webkit-animation-timing-function: ease;
          animation-timing-function: ease;
  opacity: 1;
}
.act1__graph {
  position: absolute;
  left: 56px;
  top: 235px;
}
.act1__remote {
  position: absolute;
  right: 56px;
  top: 109px;
}
.act1__speedometer {
  position: absolute;
  left: 56px;
  bottom: 222px;
}
.act1__btn-wrap.active {
  position: relative;
}
.act1__btn-wrap.active::before {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 15px;
  padding: 5px 3px;
  -webkit-box-sizing: content-box;
          box-sizing: content-box;
  border: 7px dotted #5aa5ff;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  opacity: 0;
  z-index: 5;
  -webkit-animation-name: clickPrompt_line;
          animation-name: clickPrompt_line;
  -webkit-animation-direction: normal;
          animation-direction: normal;
  -webkit-animation-duration: 4s;
          animation-duration: 4s;
  -webkit-animation-timing-function: ease;
          animation-timing-function: ease;
  pointer-events: none;
}
.act1__btn-wrap.active::after {
  content: "";
  position: absolute;
  right: -40px;
  bottom: -40px;
  width: 83px;
  height: 75px;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url(../../images/h_s7_121_053/drag-hand-left.png);
  opacity: 0;
  z-index: 6;
  -webkit-animation-name: clickPrompt;
          animation-name: clickPrompt;
  -webkit-animation-direction: normal;
          animation-direction: normal;
  -webkit-animation-duration: 4s;
          animation-duration: 4s;
  -webkit-animation-timing-function: ease;
          animation-timing-function: ease;
  pointer-events: none;
}
.act1__point-prompt {
  width: 485px;
  height: 205px;
  display: block;
  position: absolute !important;
  left: 21%;
  bottom: -7%;
  pointer-events: none;
}
.act1__point-prompt.active.active {
  position: relative;
}
.act1__point-prompt.active.active::before {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 15px;
  padding: 5px 3px;
  -webkit-box-sizing: content-box;
          box-sizing: content-box;
  border: 7px dotted #5aa5ff;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  opacity: 0;
  z-index: 5;
  -webkit-animation-name: clickPrompt_line;
          animation-name: clickPrompt_line;
  -webkit-animation-direction: normal;
          animation-direction: normal;
  -webkit-animation-duration: 4s;
          animation-duration: 4s;
  -webkit-animation-timing-function: ease;
          animation-timing-function: ease;
  pointer-events: none;
}
.act1__point-prompt.active.active::after {
  content: "";
  position: absolute;
  right: -40px;
  bottom: -40px;
  width: 83px;
  height: 75px;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url(../../images/h_s7_121_053/drag-hand-left.png);
  opacity: 0;
  z-index: 6;
  -webkit-animation-name: clickPrompt;
          animation-name: clickPrompt;
  -webkit-animation-direction: normal;
          animation-direction: normal;
  -webkit-animation-duration: 4s;
          animation-duration: 4s;
  -webkit-animation-timing-function: ease;
          animation-timing-function: ease;
  pointer-events: none;
}
.act1__point-prompt.active .act1__point-prompt-2 {
  width: 117.5px;
  height: 117.5px;
  display: block;
  position: absolute;
  left: -33px;
  bottom: -39px;
  background: url(../../images/h_s7_121_053/dragPrompt.png) no-repeat center/100% !important;
}
.act1__point-prompt.active.active::after {
  right: 383px;
  bottom: -42px;
  -webkit-animation-name: dragPrompt_4;
          animation-name: dragPrompt_4;
}
.act1__grid {
  display: none;
  width: 100%;
  height: 1002.5px;
  position: absolute;
  left: 0;
  bottom: 0;
  background: url(../../images/h_s7_121_053/act1__grid.png) no-repeat center/100% !important;
}
.act1__grid.active {
  display: block;
}

.checkbox {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}
.checkbox__checkbox {
  width: 33.5px;
  height: 33.5px;
  background: url("../../images/h_s7_121_053/checkbox_off.png") no-repeat center/100%;
  cursor: pointer;
}
.checkbox__label {
  margin-left: 12px;
  font-size: 24px;
  font-weight: 500;
  color: #848f9c;
}
.checkbox__checkbox:checked {
  background: url("../../images/h_s7_121_053/checkbox_on.png") no-repeat center/100%;
}
.checkbox.type2 .checkbox__label {
  font-size: 18.5px;
  font-weight: 700;
  color: #303a46;
  margin-left: 10px;
}
.checkbox.type2 .checkbox__checkbox {
  width: 27px;
  height: 27px;
  background: url(../../images/h_s7_121_053/checkbox_2_off.png) no-repeat center/100%;
}
.checkbox.type2 .checkbox__checkbox:checked {
  background: url(../../images/h_s7_121_053/checkbox_2_on.png) no-repeat center/100%;
}
.checkbox.wAuto {
  width: auto;
}
.checkbox__color {
  width: 15px;
  height: 15px;
  display: block;
  border-radius: 100%;
  background-color: #fa0000;
  margin-left: auto;
}
.checkbox__color.green {
  background-color: #62a585;
}
.checkbox__color.blue {
  background-color: #3e6df1;
}
.checkbox.active {
  position: relative;
}
.checkbox.active::before {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 15px;
  padding: 5px 3px;
  -webkit-box-sizing: content-box;
          box-sizing: content-box;
  border: 7px dotted #5aa5ff;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  opacity: 0;
  z-index: 5;
  -webkit-animation-name: clickPrompt_line;
          animation-name: clickPrompt_line;
  -webkit-animation-direction: normal;
          animation-direction: normal;
  -webkit-animation-duration: 4s;
          animation-duration: 4s;
  -webkit-animation-timing-function: ease;
          animation-timing-function: ease;
  pointer-events: none;
}
.checkbox.active::after {
  content: "";
  position: absolute;
  right: -40px;
  bottom: -40px;
  width: 83px;
  height: 75px;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url(../../images/h_s7_121_053/drag-hand-left.png);
  opacity: 0;
  z-index: 6;
  -webkit-animation-name: clickPrompt;
          animation-name: clickPrompt;
  -webkit-animation-direction: normal;
          animation-direction: normal;
  -webkit-animation-duration: 4s;
          animation-duration: 4s;
  -webkit-animation-timing-function: ease;
          animation-timing-function: ease;
  pointer-events: none;
}

.radio {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}
.radio__radio {
  width: 30px;
  height: 30px;
  cursor: pointer;
  background: url("../../images/h_s7_121_053/radio_off.png") no-repeat center/100%;
}
.radio__radio:checked {
  background: url("../../images/h_s7_121_053/radio_on.png") no-repeat center/100%;
}
.radio__label {
  font-size: 22px;
  color: #fff;
  font-weight: 500;
  margin-left: 15px;
}
.radio.active {
  position: relative;
}
.radio.active::before {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 15px;
  padding: 5px 3px;
  -webkit-box-sizing: content-box;
          box-sizing: content-box;
  border: 7px dotted #5aa5ff;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  opacity: 0;
  z-index: 5;
  -webkit-animation-name: clickPrompt_line;
          animation-name: clickPrompt_line;
  -webkit-animation-direction: normal;
          animation-direction: normal;
  -webkit-animation-duration: 4s;
          animation-duration: 4s;
  -webkit-animation-timing-function: ease;
          animation-timing-function: ease;
  pointer-events: none;
}
.radio.active::after {
  content: "";
  position: absolute;
  right: -40px;
  bottom: -40px;
  width: 83px;
  height: 75px;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url(../../images/h_s7_121_053/drag-hand-left.png);
  opacity: 0;
  z-index: 6;
  -webkit-animation-name: clickPrompt;
          animation-name: clickPrompt;
  -webkit-animation-direction: normal;
          animation-direction: normal;
  -webkit-animation-duration: 4s;
          animation-duration: 4s;
  -webkit-animation-timing-function: ease;
          animation-timing-function: ease;
  pointer-events: none;
}

.act1Graph {
  width: 1055.5px;
  background: -webkit-gradient(linear, left top, left bottom, from(#ccd4e8), to(#dce2ea));
  background: -o-linear-gradient(top, #ccd4e8 0%, #dce2ea 100%);
  background: linear-gradient(to bottom, #ccd4e8 0%, #dce2ea 100%);
  border-radius: 20px;
  border: 1px solid rgba(64, 70, 79, 0.35);
  -webkit-box-shadow: 5px 11px 25px 0px rgba(0, 0, 0, 0.25);
          box-shadow: 5px 11px 25px 0px rgba(0, 0, 0, 0.25);
}
.act1Graph__head {
  height: 64px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  position: relative;
  padding: 0 33px 0 10px;
}
.act1Graph__title {
  font-size: 19px;
  font-weight: 700;
  color: #303a46;
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.act1Graph__toggle {
  width: 36.5px;
  height: 36.5px;
  background: url("../../images/h_s7_121_053/act1Graph__toggle.png") no-repeat center/100%;
}
.act1Graph__btns {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 6px;
}
.act1Graph__btn {
  width: 47.5px;
  height: 36.5px;
  border-radius: 6.5px;
  background: -webkit-gradient(linear, left bottom, left top, from(#b3bcc6), to(#e2e7ed));
  background: -o-linear-gradient(bottom, #b3bcc6 0%, #e2e7ed 100%);
  background: linear-gradient(to top, #b3bcc6 0%, #e2e7ed 100%);
  border: 1px solid #bec7d5;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.act1Graph__btn.active {
  position: relative;
}
.act1Graph__btn.active::before {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 15px;
  padding: 5px 3px;
  -webkit-box-sizing: content-box;
          box-sizing: content-box;
  border: 7px dotted #5aa5ff;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  opacity: 0;
  z-index: 5;
  -webkit-animation-name: clickPrompt_line;
          animation-name: clickPrompt_line;
  -webkit-animation-direction: normal;
          animation-direction: normal;
  -webkit-animation-duration: 4s;
          animation-duration: 4s;
  -webkit-animation-timing-function: ease;
          animation-timing-function: ease;
  pointer-events: none;
}
.act1Graph__btn.active::after {
  content: "";
  position: absolute;
  right: -40px;
  bottom: -40px;
  width: 83px;
  height: 75px;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url(../../images/h_s7_121_053/drag-hand-left.png);
  opacity: 0;
  z-index: 6;
  -webkit-animation-name: clickPrompt;
          animation-name: clickPrompt;
  -webkit-animation-direction: normal;
          animation-direction: normal;
  -webkit-animation-duration: 4s;
          animation-duration: 4s;
  -webkit-animation-timing-function: ease;
          animation-timing-function: ease;
  pointer-events: none;
}
.act1Graph__btn.active::after {
  right: -61px;
  bottom: -58px;
}
.act1Graph__icon-1 {
  width: 21px;
  height: 21.5px;
  background: url("../../images/h_s7_121_053/act1Graph__icon-1.png") no-repeat center/100%;
}
.act1Graph__icon-2 {
  width: 21px;
  height: 21.5px;
  background: url("../../images/h_s7_121_053/act1Graph__icon-2.png") no-repeat center/100%;
}
.act1Graph__icon-3 {
  width: 29px;
  height: 23px;
  background: url("../../images/h_s7_121_053/act1Graph__icon-3.png") no-repeat center/100%;
}
.act1Graph__body {
  padding: 0 35px 15px 40px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
.act1Graph__checkboxs {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 12px;
}
.act1Graph__graph {
  width: 866px;
  height: 162.5px;
  background: url(../../images/h_s7_121_053/act1Graph__graph.png) no-repeat center/100%;
  position: relative;
}
.act1Graph__graph-box {
  width: 808.025px;
  height: 126px;
  position: absolute;
  right: 2.5px;
  top: 0;
}

.act1Speedometer {
  width: 210px;
  height: 210px;
  background: url(../../images/h_s7_121_053/act1Speedometer.png) no-repeat center/100%;
  display: none;
  position: relative;
}
.act1Speedometer.active {
  display: block;
}
.act1Speedometer__center {
  width: 0px;
  height: 0px;
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.act1Speedometer__meter {
  width: 100px;
  height: 5px;
  background-color: #e55466;
  display: block;
  position: absolute;
  right: 0;
  top: 50%;
  -webkit-transform: translateY(-50%) rotate(-20deg);
          transform: translateY(-50%) rotate(-20deg);
  -webkit-transform-origin: 100% 50%;
          transform-origin: 100% 50%;
  -webkit-transition: all 0.35s;
  -o-transition: all 0.35s;
  transition: all 0.35s;
}
.act1Speedometer__center-dot {
  width: 15px;
  height: 15px;
  background-color: #2f3946;
  border-radius: 100%;
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.act1Speedometer__text-box {
  width: 100px;
  height: 35px;
  border-radius: 5px;
  border: 1px solid #2f3946;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  position: absolute;
  left: 50%;
  bottom: 15%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}
.act1Speedometer__text {
  font-size: 17px;
  font-weight: 500;
  color: #2f3946;
}
.act1Speedometer__unit {
  font-size: 13px;
  font-weight: 500;
  color: #2f3946;
  margin-left: 5px;
  margin-top: 2px;
}

.smallUnit {
  font-size: 7.5px;
  font-weight: 500;
  -webkit-transform: translateY(-7px);
          transform: translateY(-7px);
  display: inline-block;
}

.act1Remote__checkboxs {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 5px;
  margin-bottom: 15px;
}
.act1Remote__tab {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 10px;
}
.act1Remote__tabBtn-box {
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  -ms-flex-preferred-size: 50%;
      flex-basis: 50%;
  height: 50px;
}
.act1Remote__tabBtn-box.active {
  position: relative;
}
.act1Remote__tabBtn-box.active::before {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 15px;
  padding: 5px 3px;
  -webkit-box-sizing: content-box;
          box-sizing: content-box;
  border: 7px dotted #5aa5ff;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  opacity: 0;
  z-index: 5;
  -webkit-animation-name: clickPrompt_line;
          animation-name: clickPrompt_line;
  -webkit-animation-direction: normal;
          animation-direction: normal;
  -webkit-animation-duration: 4s;
          animation-duration: 4s;
  -webkit-animation-timing-function: ease;
          animation-timing-function: ease;
  pointer-events: none;
}
.act1Remote__tabBtn-box.active::after {
  content: "";
  position: absolute;
  right: -40px;
  bottom: -40px;
  width: 83px;
  height: 75px;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url(../../images/h_s7_121_053/drag-hand-left.png);
  opacity: 0;
  z-index: 6;
  -webkit-animation-name: clickPrompt;
          animation-name: clickPrompt;
  -webkit-animation-direction: normal;
          animation-direction: normal;
  -webkit-animation-duration: 4s;
          animation-duration: 4s;
  -webkit-animation-timing-function: ease;
          animation-timing-function: ease;
  pointer-events: none;
}
.act1Remote__tabBtn {
  height: 50px;
  width: 100%;
  background-color: #e4ebf7;
  border-radius: 10px;
  border: 2px solid #cfd5e4;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.act1Remote__tabBtn.active {
  border-color: #8cacdd;
}
.act1Remote__tabIcon-2 {
  width: 52.5px;
  height: 30.5px;
  background: url(../../images/h_s7_121_053/act1Remote__tabIcon-2.png) no-repeat center/100%;
}
.act1Remote__tabBtn.active .act1Remote__tabIcon-2 {
  background: url(../../images/h_s7_121_053/act1Remote__tabIcon-2_on.png) no-repeat center/100%;
}
.act1Remote__tabIcon-1 {
  width: 48.5px;
  height: 26.5px;
  background: url(../../images/h_s7_121_053/act1Remote__tabIcon-1.png) no-repeat center/100%;
}
.act1Remote__tabBtn.active .act1Remote__tabIcon-1 {
  background: url(../../images/h_s7_121_053/act1Remote__tabIcon-1_on.png) no-repeat center/100%;
}
.act1Remote__tit {
  font-size: 17px;
  font-weight: 700;
  color: #303a46;
}
.act1Remote__item {
  padding-top: 16.5px;
  padding-bottom: 16.5px;
  position: relative;
}
.act1Remote__item::before, .act1Remote__item::after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 1px;
  top: 0;
  left: 0;
}
.act1Remote__item::before {
  background-color: #e2e8f2;
  top: -1px;
}
.act1Remote__item::after {
  background-color: #c7cfda;
}
.act1Remote__item:first-child {
  padding-top: 0;
}
.act1Remote__item:first-child::before, .act1Remote__item:first-child::after {
  display: none;
}
.act1Remote__item:last-child {
  padding-bottom: 0;
}
.act1Remote__wrap.active {
  position: relative;
}
.act1Remote__wrap.active::before {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 15px;
  padding: 5px 3px;
  -webkit-box-sizing: content-box;
          box-sizing: content-box;
  border: 7px dotted #5aa5ff;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  opacity: 0;
  z-index: 5;
  -webkit-animation-name: clickPrompt_line;
          animation-name: clickPrompt_line;
  -webkit-animation-direction: normal;
          animation-direction: normal;
  -webkit-animation-duration: 4s;
          animation-duration: 4s;
  -webkit-animation-timing-function: ease;
          animation-timing-function: ease;
  pointer-events: none;
}
.act1Remote__wrap.active::after {
  content: "";
  position: absolute;
  right: -40px;
  bottom: -40px;
  width: 83px;
  height: 75px;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url(../../images/h_s7_121_053/drag-hand-left.png);
  opacity: 0;
  z-index: 6;
  -webkit-animation-name: clickPrompt;
          animation-name: clickPrompt;
  -webkit-animation-direction: normal;
          animation-direction: normal;
  -webkit-animation-duration: 4s;
          animation-duration: 4s;
  -webkit-animation-timing-function: ease;
          animation-timing-function: ease;
  pointer-events: none;
}
.act1Remote__wrap.active::after {
  right: 82px;
  bottom: -62px;
  -webkit-animation-name: dragPrompt;
          animation-name: dragPrompt;
}
.act1Remote__wrap.b.active::after {
  bottom: -18px;
  -webkit-animation-name: dragPrompt_2;
          animation-name: dragPrompt_2;
}
.act1Remote__wrap.c.active::after {
  bottom: -18px;
  -webkit-animation-name: dragPrompt_3;
          animation-name: dragPrompt_3;
}
.act1Remote .spring__slide-numcont.bigSize {
  width: 92px;
  height: 26px;
}

.point-box-speed,
.point-box-grid,
.point-box {
  display: none;
  pointer-events: none;
  position: absolute;
  border: 7px dotted #5aa5ff;
  z-index: 5;
}
.point-box-speed.active,
.point-box-grid.active,
.point-box.active {
  display: block;
  pointer-events: none;
  -webkit-animation-name: clickPrompt_line;
          animation-name: clickPrompt_line;
  -webkit-animation-direction: normal;
          animation-direction: normal;
  -webkit-animation-duration: 4s;
          animation-duration: 4s;
  -webkit-animation-timing-function: ease;
          animation-timing-function: ease;
}

.drag-hand-left {
  display: none;
  pointer-events: none;
  position: absolute;
  z-index: 5;
}
.drag-hand-left.active {
  display: block;
  pointer-events: none;
}
.drag-hand-left.active.active {
  position: relative;
}
.drag-hand-left.active.active::after {
  content: "";
  position: absolute;
  right: -40px;
  bottom: -40px;
  width: 83px;
  height: 75px;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url(../../images/h_s7_121_053/drag-hand-left.png);
  opacity: 1;
  z-index: 6;
  pointer-events: none;
}

.cont {
  width: 100%;
  height: 100%;
}
.cont__wrap {
  width: 1799px;
  height: 990px;
  margin: 90px auto 0 60px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
}

.act2__remote {
  margin-top: 129.5px;
  z-index: 2;
}
.act2__remote .checkbox {
  width: 100%;
  position: relative;
}
.act2__remote .checkbox__label--act2 {
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  margin-left: 12px;
}
.act2__remote .act1Remote {
  width: 265px;
  padding-bottom: 38.5px;
}
.act2__checklist {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 10px;
  position: relative;
}
.act2__checklist.has-line::after {
  content: "";
  display: block;
  width: 5px;
  height: 30px;
  position: absolute;
  left: -7px;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  border: 1px solid #7d8694;
  border-right: none;
}
.act2__check-label {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.act2__check-label-name {
  font-weight: 400;
  font-size: 17px;
}
.act2__check-label-line1 {
  width: 47px;
  height: 17.5px;
  display: block;
  background-image: url("../../images/h_s7_121_053/active2_arrow-line.png");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
.act2__check-label-line2 {
  width: 47px;
  height: 2px;
  display: block;
  background-image: url("../../images/h_s7_121_053/active2_line1.png");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
.act2__check-label-line3 {
  width: 47px;
  height: 2px;
  display: block;
  background-image: url("../../images/h_s7_121_053/active2_line2.png");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
.act2__check-label-line4 {
  width: 47px;
  height: 2px;
  display: block;
  background-image: url("../../images/h_s7_121_053/active2_line3.png");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
.act2__action {
  position: absolute;
  bottom: 22.5px;
  right: 280px;
}
.act2__action .act1__radio-box {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 9px;
}
.act2__slidebox {
  margin-top: 20px;
  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;
}
.act2__slidebox-btn {
  display: block;
  width: 100.5px;
  height: 33px;
  border-radius: 30px;
  border: 1.5px solid #7d8694 !important;
  background-color: #e8f0f8;
  line-height: 33px;
  padding-left: 20px;
  padding-right: 27px;
  font-size: 17px;
  font-weight: 700;
  color: #303a46;
  letter-spacing: -0.0125em;
  position: relative;
  text-align: start;
}
.act2__slidebox-btn::after {
  content: "";
  width: 14.11px;
  height: 11.5px;
  display: block;
  background-image: url("../../images/h_s7_121_053/active2_slide_arrow.png");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  position: absolute;
  top: 9.5px;
  right: 12.5px;
}
.act2__slide {
  display: block;
  width: 100.5px;
  padding: 20px 22px;
  border: 1.5px solid #7d8694;
  background-color: #e8f0f8;
  position: absolute;
  left: 50%;
  bottom: -7px;
  border-radius: 16.5px;
  -webkit-transform: translate(-50%, 100%);
          transform: translate(-50%, 100%);
  opacity: 0;
  pointer-events: none;
  -webkit-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
}
.act2__slide.active {
  opacity: 1;
  pointer-events: all;
}
.act2__slide-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 5px;
}
.act2__slide-item-t {
  font-size: 17px;
  font-weight: 700;
  color: #303a46;
}
.act2__weight {
  position: absolute;
  left: 548px;
  bottom: 21px;
}
.act2__chckbox-guide {
  position: absolute;
  display: block;
  width: 354px;
  height: 57px;
  top: 84px;
  left: 781px;
  pointer-events: none;
  border: 4px dashed #5297ea;
  border-radius: 20px;
  opacity: 0;
  z-index: 2;
}
.act2__chckbox-guide::after {
  content: "";
  display: block;
  width: 75px;
  height: 84px;
  opacity: 1;
  -webkit-transform: rotate(-90deg);
          transform: rotate(-90deg);
  /* background-image: url("../../images/h_s7_121_053/drag-hand-right.png"); */
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  cursor: pointer;
  position: absolute;
  top: 10px;
  left: 15px;
}
.act2__chckbox-guide.active {
  -webkit-animation-name: clickPrompt;
          animation-name: clickPrompt;
  -webkit-animation-direction: normal;
          animation-direction: normal;
  -webkit-animation-duration: 2.5s;
          animation-duration: 2.5s;
  -webkit-animation-timing-function: ease;
          animation-timing-function: ease;
}
.act2__radio-box {
  position: relative;
}
.act2__action-guide {
  position: absolute;
  display: block;
  width: 268px;
  height: 90px;
  top: -10px;
  left: -10px;
  pointer-events: none;
  border: 4px dashed #5297ea;
  border-radius: 20px;
  opacity: 0;
}
.act2__action-guide::after {
  content: "";
  display: block;
  width: 75px;
  height: 84px;
  opacity: 1;
  -webkit-transform: rotate(-270deg);
          transform: rotate(-270deg);
  /* background-image: url("../../images/h_s7_121_053/drag-hand-right.png"); */
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  cursor: pointer;
  position: absolute;
  top: -17.5px;
  left: -52.5px;
}
.act2__action-guide.active {
  -webkit-animation-name: clickPrompt;
          animation-name: clickPrompt;
  -webkit-animation-direction: normal;
          animation-direction: normal;
  -webkit-animation-duration: 2.5s;
          animation-duration: 2.5s;
  -webkit-animation-timing-function: ease;
          animation-timing-function: ease;
}

.graph {
  margin-top: 129.5px;
}
.graph__head {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.graph__toggle {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid #6f99ca;
  -webkit-box-shadow: 2px 5px 5px 0px rgba(28, 36, 46, 0.33);
          box-shadow: 2px 5px 5px 0px rgba(28, 36, 46, 0.33);
  background-image: -webkit-gradient(linear, left bottom, left top, from(rgb(122, 160, 211)), to(rgb(171, 193, 223)));
  background-image: -o-linear-gradient(bottom, rgb(122, 160, 211), rgb(171, 193, 223));
  background-image: linear-gradient(to top, rgb(122, 160, 211), rgb(171, 193, 223));
  margin-left: -13px;
}
.graph__toggle::after {
  content: "";
  display: inline-block;
  width: 14px;
  height: 8.5px;
  background-image: url("../../images/h_s7_121_053/toggle_ico.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.graph__head-tit {
  margin-left: 57.5px;
  font-weight: 700;
  font-size: 19px;
  letter-spacing: -0.0125em;
  color: #303a46;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.graph__cont {
  padding-top: 0;
  height: 0px;
  -webkit-transition: 0.4s;
  -o-transition: 0.4s;
  transition: 0.4s;
}
.graph__cont-wrap {
  height: 100%;
  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: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
.graph__content {
  width: 100%;
  height: 671px;
  background-color: #eaf0fa;
  border: 1px solid #b9c1cf;
  padding: 32px 35px 21px 53px;
  position: relative;
}
.graph__content::after {
  content: "";
  display: inline-block;
  position: absolute;
  width: 199px;
  height: 552.5px;
  background-image: url("../../images/h_s7_121_053/active2_graph.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  top: 33px;
  left: 25px;
}
.graph__list {
  position: relative;
  width: 100%;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: 12px;
  z-index: 1;
}
.graph__item {
  position: relative;
  width: 30px;
  height: 100%;
  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;
  padding-top: 37px;
}
.graph__item::after {
  content: "";
  display: block;
  position: absolute;
  width: 28px;
  height: 30px;
  top: 0;
  left: 1px;
  opacity: 0;
  -webkit-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
}
.graph__item.ke::after {
  background-image: url("../../images/h_s7_121_053/active2_arrow-ke.png");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
.graph__item.peg::after {
  background-image: url("../../images/h_s7_121_053/active2_arrow-peg.png");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
.graph__item.pee::after {
  background-image: url("../../images/h_s7_121_053/active2_arrow-pee.png");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
.graph__item.e::after {
  background-image: url("../../images/h_s7_121_053/active2_arrow-e.png");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
.graph__item.active::after {
  opacity: 1;
}
.graph__item-linewrap {
  -ms-flex-negative: 1;
      flex-shrink: 1;
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  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;
  overflow: hidden;
}
.graph__item-line {
  width: 100%;
  -ms-flex-preferred-size: 10%;
      flex-basis: 10%;
  -ms-flex-negative: 1;
      flex-shrink: 1;
  -webkit-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
}
.graph__item-line--ke {
  background-color: #df731b;
}
.graph__item-line--peg {
  background-color: #507ee5;
}
.graph__item-line--pee {
  background-color: #a4bcf4;
}
.graph__item-namewrap {
  position: relative;
  width: 100%;
  width: 30px;
  height: 64px;
}
.graph__item-name {
  position: absolute;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  top: -21px;
  left: -32px;
  -webkit-transform: rotate(-90deg);
          transform: rotate(-90deg);
  -webkit-transform-origin: bottom right;
          transform-origin: bottom right;
  word-break: keep-all;
  line-height: 30px;
  font-size: 15px;
  letter-spacing: -0.0125em;
  font-weight: 400;
  width: 64px;
}
.graph__item-name em {
  font-weight: 700;
}
.graph__item-name--ke {
  color: #df731b;
}
.graph__item-name--peg {
  color: #1b60df;
}
.graph__item-name--pee {
  color: #6ec3cd;
}
.graph__item-name--e {
  color: #252423;
}
.graph__foot {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 7px;
  position: relative;
}
.graph__info {
  width: 30px;
  height: 30px;
  display: block;
  background-color: #9ca7c0;
  border: 1px solid #fff !important;
  border-radius: 50%;
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.0125em;
  color: #fff;
  line-height: 30px;
  margin-right: auto;
}
.graph__small {
  width: 45px;
  height: 34px;
  border-radius: 5.5px;
  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: 1px solid #bec7d5;
  background-image: -webkit-gradient(linear, left bottom, left top, from(rgb(179, 188, 198)), to(rgb(226, 231, 237)));
  background-image: -o-linear-gradient(bottom, rgb(179, 188, 198), rgb(226, 231, 237));
  background-image: linear-gradient(to top, rgb(179, 188, 198), rgb(226, 231, 237));
}
.graph__small::after {
  content: "";
  display: block;
  width: 20px;
  height: 20.5px;
  background-image: url("../../images/h_s7_121_053/active2_small.png");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
.graph__small:hover {
  background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(179, 188, 198)), to(rgb(226, 231, 237)));
  background-image: -o-linear-gradient(top, rgb(179, 188, 198), rgb(226, 231, 237));
  background-image: linear-gradient(to bottom, rgb(179, 188, 198), rgb(226, 231, 237));
}
.graph__big {
  width: 45px;
  height: 34px;
  border-radius: 5.5px;
  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: 1px solid #bec7d5;
  background-image: -webkit-gradient(linear, left bottom, left top, from(rgb(179, 188, 198)), to(rgb(226, 231, 237)));
  background-image: -o-linear-gradient(bottom, rgb(179, 188, 198), rgb(226, 231, 237));
  background-image: linear-gradient(to top, rgb(179, 188, 198), rgb(226, 231, 237));
}
.graph__big::after {
  content: "";
  display: block;
  width: 20px;
  height: 20.5px;
  background-image: url("../../images/h_s7_121_053/active2_big.png");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
.graph__big:hover {
  background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(179, 188, 198)), to(rgb(226, 231, 237)));
  background-image: -o-linear-gradient(top, rgb(179, 188, 198), rgb(226, 231, 237));
  background-image: linear-gradient(to bottom, rgb(179, 188, 198), rgb(226, 231, 237));
}
.graph__guide {
  position: absolute;
  display: block;
  width: 127px;
  height: 54px;
  top: 727px;
  right: -235px;
  pointer-events: none;
  border: 4px dashed #5297ea;
  border-radius: 20px;
  opacity: 0;
  z-index: 2;
}
.graph__guide::after {
  content: "";
  display: block;
  width: 75px;
  height: 84px;
  opacity: 1;
  -webkit-transform: rotate(-90deg);
          transform: rotate(-90deg);
  /* background-image: url("../../images/h_s7_121_053/drag-hand-right.png"); */
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  cursor: pointer;
  position: absolute;
  top: 17px;
  left: 25.5px;
}
.graph__guide.active {
  -webkit-animation-name: clickPrompt;
          animation-name: clickPrompt;
  -webkit-animation-direction: normal;
          animation-direction: normal;
  -webkit-animation-duration: 2.5s;
          animation-duration: 2.5s;
  -webkit-animation-timing-function: ease;
          animation-timing-function: ease;
}
.graph.active .graph__cont {
  padding-top: 22.5px;
  height: 750px;
}

.spring {
  margin-left: 190px;
  margin-right: 244px;
  z-index: 2;
}
.spring__wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.spring__slide-tit {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.0125em;
  color: #303a46;
}
.spring__mass {
  margin-top: 10px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: 5.5px;
}
.spring__constant {
  margin-top: 22.5px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: 5.5px;
}
.spring__mass-less {
  width: 25px;
  height: 25px;
  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: 1px solid #bfc8d9;
  border-radius: 50%;
  background-image: -webkit-gradient(linear, left bottom, left top, from(rgb(200, 207, 221)), to(rgb(233, 237, 243)));
  background-image: -o-linear-gradient(bottom, rgb(200, 207, 221), rgb(233, 237, 243));
  background-image: linear-gradient(to top, rgb(200, 207, 221), rgb(233, 237, 243));
}
.spring__mass-less::after {
  content: "";
  display: inline-block;
  width: 10px;
  height: 11.5px;
  background-image: url("../../images/h_s7_121_053/active2_arrow-mass.png");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  margin-right: 2px;
}
.spring__mass-more {
  width: 25px;
  height: 25px;
  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: 1px solid #bfc8d9;
  border-radius: 50%;
  background-image: -webkit-gradient(linear, left bottom, left top, from(rgb(200, 207, 221)), to(rgb(233, 237, 243)));
  background-image: -o-linear-gradient(bottom, rgb(200, 207, 221), rgb(233, 237, 243));
  background-image: linear-gradient(to top, rgb(200, 207, 221), rgb(233, 237, 243));
}
.spring__mass-more::after {
  content: "";
  display: inline-block;
  width: 10px;
  height: 11.5px;
  background-image: url("../../images/h_s7_121_053/active2_arrow-mass.png");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  margin-left: 2px;
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}
.spring__slide-wrap {
  width: 130.5px;
}
.spring__slide-numarea {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  margin-top: 5px;
}
.spring__slide-numtxt {
  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;
  font-weight: 400;
  font-size: 11.5px;
  letter-spacing: -0.0125em;
  color: #465464;
}
.spring__slide-numtxt::before {
  content: "";
  display: inline-block;
  width: 1px;
  height: 7.5px;
  background-color: #465464;
}
.spring__slide-numtxt:first-of-type {
  margin-left: -3px;
}
.spring__slide-numtxt:last-of-type {
  margin-right: -11px;
}
.spring__slide-numcont {
  margin-top: 15px;
  width: 78px;
  height: 26px;
  border-radius: 26px;
  border: 1px solid #b8c1d4;
  background-color: #e8edf7;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 5px;
  padding-top: 5px;
}
.spring__slide-num {
  font-size: 15px;
  line-height: 26px;
  font-weight: 700;
  letter-spacing: -0.0125em;
  color: #303a46;
}
.spring__slide-numunit {
  font-size: 12px;
  line-height: 26px;
  font-weight: 400;
  letter-spacing: -0.0125em;
  color: #303a46;
}
.spring__slide-area {
  width: calc(100% - 36px);
  position: relative;
  margin-right: 46px;
}
.spring__slide-area--mass {
  margin-top: 11.5px;
}
.spring__slide-area--constant {
  margin-top: 3.5px;
}
.spring__slide-track {
  width: calc(100% + 36px);
  height: 6px;
  border-radius: 6px;
  background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(158, 169, 182)), to(rgb(196, 202, 214)));
  background-image: -o-linear-gradient(top, rgb(158, 169, 182), rgb(196, 202, 214));
  background-image: linear-gradient(to bottom, rgb(158, 169, 182), rgb(196, 202, 214));
}
.spring__slide-btn {
  position: absolute;
  width: 38.5px;
  height: 24px;
  border-radius: 24px;
  background-image: -webkit-gradient(linear, left bottom, left top, from(rgb(70, 84, 100)), to(rgb(115, 122, 125)));
  background-image: -o-linear-gradient(bottom, rgb(70, 84, 100), rgb(115, 122, 125));
  background-image: linear-gradient(to top, rgb(70, 84, 100), rgb(115, 122, 125));
  top: -10px;
  left: 0%;
  -webkit-box-shadow: 2px 2px 5.5px 0 rgba(28, 36, 46, 0.28);
          box-shadow: 2px 2px 5.5px 0 rgba(28, 36, 46, 0.28);
  cursor: pointer;
}
.spring__slide-btn::after {
  content: "";
  display: block;
  width: 13px;
  height: 3.5px;
  border-radius: 4px;
  background-color: #dadfe7;
  position: absolute;
  top: calc(50% - 1.75px);
  left: calc(50% - 7.5px);
}
.spring__constant-min {
  font-weight: 400;
  font-size: 13px;
  letter-spacing: -0.0125em;
  color: #303a46;
}
.spring__constant-max {
  font-weight: 400;
  font-size: 13px;
  letter-spacing: -0.0125em;
  color: #303a46;
}
.spring__cont {
  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: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 138px;
  margin: 0 33px 0 31.5px;
  position: relative;
}
.spring__head {
  width: 93.5px;
  height: 89.5px;
  position: relative;
  z-index: 3;
}
.spring__head::after {
  content: "";
  display: block;
  width: 93.5px;
  height: 95.5px;
  position: absolute;
  top: 0;
  left: 0;
  background-image: url("../../images/h_s7_121_053/active2_spring_head.png");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
.spring__body {
  width: 100%;
  -webkit-transition: 0.3s cubic-bezier(0.06, -1.52, 0.85, 2.73);
  -o-transition: 0.3s cubic-bezier(0.06, -1.52, 0.85, 2.73);
  transition: 0.3s cubic-bezier(0.06, -1.52, 0.85, 2.73);
  position: relative;
  z-index: 2;
  padding-top: 41.5px;
  padding-bottom: 51.5px;
}
.spring__body img {
  display: none;
  width: 100%;
  height: 100%;
}
.spring__body::before {
  content: "";
  display: block;
  width: 51.5px;
  height: 51.5px;
  position: absolute;
  top: -8px;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  z-index: -1;
}
.spring__body::after {
  content: "";
  display: block;
  width: 51.5px;
  height: 51.5px;
  position: absolute;
  bottom: 2px;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  z-index: -1;
}
.spring__body.active-1::before {
  background-image: url("../../images/h_s7_121_053/act2_ring_1.png");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
.spring__body.active-1::after {
  background-image: url("../../images/h_s7_121_053/act2_ring_1.png");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
.spring__body.active-1 .spring__content {
  background-image: url("../../images/h_s7_121_053/act2_spring_1.png");
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}
.spring__body.active-2::before {
  background-image: url("../../images/h_s7_121_053/act2_ring_2.png");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
.spring__body.active-2::after {
  background-image: url("../../images/h_s7_121_053/act2_ring_2.png");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
.spring__body.active-2 .spring__content {
  background-image: url("../../images/h_s7_121_053/act2_spring_2.png");
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}
.spring__body.active-3::before {
  background-image: url("../../images/h_s7_121_053/act2_ring_3.png");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
.spring__body.active-3::after {
  background-image: url("../../images/h_s7_121_053/act2_ring_3.png");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
.spring__body.active-3 .spring__content {
  background-image: url("../../images/h_s7_121_053/act2_spring_3.png");
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}
.spring__body.active-4::before {
  background-image: url("../../images/h_s7_121_053/act2_ring_4.png");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
.spring__body.active-4::after {
  background-image: url("../../images/h_s7_121_053/act2_ring_4.png");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
.spring__body.active-4 .spring__content {
  background-image: url("../../images/h_s7_121_053/act2_spring_4.png");
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}
.spring__body.active-5::before {
  background-image: url("../../images/h_s7_121_053/act2_ring_5.png");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
.spring__body.active-5::after {
  background-image: url("../../images/h_s7_121_053/act2_ring_5.png");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
.spring__body.active-5 .spring__content {
  background-image: url("../../images/h_s7_121_053/act2_spring_5.png");
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}
.spring__body.active-6::before {
  background-image: url("../../images/h_s7_121_053/act2_ring_6.png");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
.spring__body.active-6::after {
  background-image: url("../../images/h_s7_121_053/act2_ring_6.png");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
.spring__body.active-6 .spring__content {
  background-image: url("../../images/h_s7_121_053/act2_spring_6.png");
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}
.spring__body.active-7::before {
  background-image: url("../../images/h_s7_121_053/act2_ring_7.png");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
.spring__body.active-7::after {
  background-image: url("../../images/h_s7_121_053/act2_ring_7.png");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
.spring__body.active-7 .spring__content {
  background-image: url("../../images/h_s7_121_053/act2_spring_7.png");
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}
.spring__body.active-8::before {
  background-image: url("../../images/h_s7_121_053/act2_ring_8.png");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
.spring__body.active-8::after {
  background-image: url("../../images/h_s7_121_053/act2_ring_8.png");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
.spring__body.active-8 .spring__content {
  background-image: url("../../images/h_s7_121_053/act2_spring_8.png");
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}
.spring__body.active-9::before {
  background-image: url("../../images/h_s7_121_053/act2_ring_9.png");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
.spring__body.active-9::after {
  background-image: url("../../images/h_s7_121_053/act2_ring_9.png");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
.spring__body.active-9 .spring__content {
  background-image: url("../../images/h_s7_121_053/act2_spring_9.png");
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}
.spring__body.active-10::before {
  background-image: url("../../images/h_s7_121_053/act2_ring_10.png");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
.spring__body.active-10::after {
  background-image: url("../../images/h_s7_121_053/act2_ring_10.png");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
.spring__body.active-10 .spring__content {
  background-image: url("../../images/h_s7_121_053/act2_spring_10.png");
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}
.spring__content {
  display: block;
  width: 100%;
  height: 100%;
}
.spring__weight {
  width: 99px;
  height: 149px;
  position: relative;
  z-index: 1;
}
.spring__weight.active::after {
  opacity: 1;
}
.spring__weight.active .spring__weight-num {
  pointer-events: all;
  opacity: 1;
}
.spring__weight-guide {
  position: absolute;
  display: block;
  width: 161px;
  height: 161px;
  border-radius: 50%;
  border: 7px dotted #5297ea;
  opacity: 0;
  top: -50px;
  left: 522px;
}
.spring__weight-guide.active {
  -webkit-animation-name: clickPrompt;
          animation-name: clickPrompt;
  -webkit-animation-duration: 2.5s;
          animation-duration: 2.5s;
  -webkit-animation-timing-function: ease;
          animation-timing-function: ease;
}
.spring__weight-guide2 {
  position: absolute;
  top: 75px;
  left: 508px;
  z-index: 1;
  opacity: 0;
  -webkit-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
  pointer-events: none;
}
.spring__weight-guide2::before {
  content: "";
  display: block;
  width: 38.5px;
  height: 117.5px;
  background-image: url("../../images/h_s7_121_053/dragprompt_length.png");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  margin: 0 auto;
}
.spring__weight-guide2::after {
  content: "";
  display: block;
  width: 161px;
  height: 161px;
  border-radius: 50%;
  border: 7px dotted #5297ea;
  margin-top: 7px;
}
.spring__weight-guide2.active {
  -webkit-animation-name: act2_drag1-2;
          animation-name: act2_drag1-2;
  -webkit-animation-direction: normal;
          animation-direction: normal;
  -webkit-animation-duration: 2.5s;
          animation-duration: 2.5s;
  -webkit-animation-timing-function: ease;
          animation-timing-function: ease;
}
.spring__weight-guide2.active::after {
  -webkit-animation-name: clickPrompt;
          animation-name: clickPrompt;
  -webkit-animation-duration: 2.5s;
          animation-duration: 2.5s;
  -webkit-animation-timing-function: ease;
          animation-timing-function: ease;
}
.spring__weight-guide2.active .spring__weight-guide2-hand {
  -webkit-animation-name: act2_drag2;
          animation-name: act2_drag2;
  -webkit-animation-duration: 2.5s;
          animation-duration: 2.5s;
  -webkit-animation-timing-function: ease;
          animation-timing-function: ease;
}
.spring__weight-guide2-hand {
  position: absolute;
  top: 50px;
  left: 50%;
}
.spring__weight-guide2-hand::after {
  content: "";
  display: block;
  width: 75px;
  height: 84px;
  opacity: 1;
  -webkit-transform: rotate(-90deg);
          transform: rotate(-90deg);
  /* background-image: url("../../images/h_s7_121_053/drag-hand-right.png"); */
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  cursor: pointer;
}
@-webkit-keyframes act2_drag2 {
  0% {
    opacity: 0;
    top: 50px;
  }
  25% {
    opacity: 1;
    top: 150px;
  }
  50% {
    opacity: 1;
    top: 50px;
  }
  75% {
    opacity: 1;
    top: 150px;
  }
  99% {
    opacity: 1;
    top: 50px;
  }
  100% {
    opacity: 0;
    top: 50px;
  }
}
@keyframes act2_drag2 {
  0% {
    opacity: 0;
    top: 50px;
  }
  25% {
    opacity: 1;
    top: 150px;
  }
  50% {
    opacity: 1;
    top: 50px;
  }
  75% {
    opacity: 1;
    top: 150px;
  }
  99% {
    opacity: 1;
    top: 50px;
  }
  100% {
    opacity: 0;
    top: 50px;
  }
}
.spring__stop {
  position: relative;
  margin-top: 129.5px;
  margin-right: 20px;
}
.spring__stop-btn {
  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;
  width: 50px;
  height: 50px;
  border-radius: 15px;
  border: 1px solid #40464f !important;
  background-image: -webkit-gradient(linear, left bottom, left top, from(rgb(204, 212, 232)), to(rgb(220, 226, 234)));
  background-image: -o-linear-gradient(bottom, rgb(204, 212, 232), rgb(220, 226, 234));
  background-image: linear-gradient(to top, rgb(204, 212, 232), rgb(220, 226, 234));
  opacity: 0.5;
  -webkit-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
}
.spring__stop-btn::after {
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #ff0000;
  border: 1px solid #40464f;
}
.spring__stop-btn.active {
  opacity: 1;
}
.spring__stop-guide {
  position: absolute;
  display: block;
  width: 70px;
  height: 70px;
  top: -3px;
  left: 518px;
  pointer-events: none;
  border: 4px dashed #5297ea;
  border-radius: 20px;
  opacity: 0;
  z-index: 1;
}
.spring__stop-guide::after {
  content: "";
  display: block;
  width: 75px;
  height: 84px;
  opacity: 1;
  -webkit-transform: rotate(-90deg);
          transform: rotate(-90deg);
  /* background-image: url("../../images/h_s7_121_053/drag-hand-right.png"); */
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  cursor: pointer;
  position: absolute;
  top: 50%;
  left: 50%;
}
.spring__stop-guide.active {
  -webkit-animation-name: clickPrompt;
          animation-name: clickPrompt;
  -webkit-animation-direction: normal;
          animation-direction: normal;
  -webkit-animation-duration: 2.5s;
          animation-duration: 2.5s;
  -webkit-animation-timing-function: ease;
          animation-timing-function: ease;
}
.spring__line {
  width: calc(100% + 50px);
  height: 2px;
  display: inline-block;
  position: absolute;
  left: -25px;
  pointer-events: none;
  opacity: 0;
  -webkit-transition: 0.3s height;
  -o-transition: 0.3s height;
  transition: 0.3s height;
}
.spring__line.active {
  opacity: 1;
}
.spring__line.line1 {
  z-index: 0;
  background-image: url("../../images/h_s7_121_053/active2_line2.png");
  background-size: contain;
  background-position: center;
  background-repeat: repeat;
}
.spring__line.line2 {
  z-index: 0;
  background-image: url("../../images/h_s7_121_053/active2_line3.png");
  background-size: contain;
  background-position: center;
  background-repeat: repeat;
  pointer-events: all;
}
.spring__line.line2.active {
  cursor: pointer;
}
.spring__line-g {
  width: calc(100% + 50px);
  display: block;
  position: absolute;
  left: -25px;
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  -webkit-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
  overflow: visible;
  height: 2px;
}
.spring__line-g.active {
  opacity: 1;
}
.spring__line-g .spring__line {
  opacity: 1;
  display: block;
  position: absolute;
  bottom: 0;
  left: auto;
  right: 0;
  width: 17.5px;
  min-height: 10.5px;
}
.spring__line-g .spring__line.active-minus {
  -webkit-transform: translateY(100%) rotate(180deg);
          transform: translateY(100%) rotate(180deg);
}
.spring__line-g .spring__line::after {
  content: "";
  display: block;
  width: 17.5px;
  min-height: 10.5px;
  background-image: url("../../images/h_s7_121_053/active2_arrow-head.png");
  background-size: contain;
  background-position: center;
  background-repeat: repeat;
  position: absolute;
  top: 0;
  left: 0;
}
.spring__line-g .spring__line::before {
  content: "";
  display: block;
  width: 2px;
  height: calc(100% - 1px);
  background-color: #df731b;
  position: absolute;
  top: 1px;
  left: 8.25px;
}
.spring__line-g::after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background-image: url("../../images/h_s7_121_053/active2_line1.png");
  background-size: contain;
  background-position: center;
  background-repeat: repeat;
}
.spring__guide {
  position: absolute;
  display: block;
  width: 281px;
  height: 129px;
  top: 225px;
  right: 1089px;
  pointer-events: none;
  opacity: 0;
}
.spring__guide-line {
  display: block;
  width: 100%;
  height: 100%;
  top: 0;
  right: 0;
  border: 4px dashed #5297ea;
  border-radius: 20px;
  opacity: 0;
}
.spring__guide::before {
  content: "";
  display: block;
  width: 117.5px;
  height: 38.5px;
  background-image: url("../../images/h_s7_121_053/dragprompt_hori.png");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.spring__guide::after {
  content: "";
  display: block;
  width: 75px;
  height: 84px;
  opacity: 1;
  /* background-image: url("../../images/h_s7_121_053/drag-hand-right.png"); */
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  cursor: pointer;
  position: absolute;
  top: 0%;
  left: 50%;
  -webkit-transform: rotate(-90deg) translate(-80%, -10%);
          transform: rotate(-90deg) translate(-80%, -10%);
}
.spring__guide.active {
  -webkit-animation-name: act2_drag1-2;
          animation-name: act2_drag1-2;
  -webkit-animation-direction: normal;
          animation-direction: normal;
  -webkit-animation-duration: 2.5s;
          animation-duration: 2.5s;
  -webkit-animation-timing-function: ease;
          animation-timing-function: ease;
}
.spring__guide.active::after {
  -webkit-animation-name: act2_drag3;
          animation-name: act2_drag3;
  -webkit-animation-duration: 2.5s;
          animation-duration: 2.5s;
  -webkit-animation-timing-function: ease;
          animation-timing-function: ease;
}
.spring__guide.active .spring__guide-line {
  -webkit-animation-name: clickPrompt;
          animation-name: clickPrompt;
  -webkit-animation-duration: 2.5s;
          animation-duration: 2.5s;
  -webkit-animation-timing-function: ease;
          animation-timing-function: ease;
}
@-webkit-keyframes act2_drag3 {
  0% {
    opacity: 0;
    left: 50%;
  }
  25% {
    opacity: 1;
    left: 75%;
  }
  50% {
    opacity: 1;
    left: 50%;
  }
  75% {
    opacity: 1;
    left: 25%;
  }
  99% {
    opacity: 1;
    left: 50%;
  }
  100% {
    opacity: 0;
    left: 50%;
  }
}
@keyframes act2_drag3 {
  0% {
    opacity: 0;
    left: 50%;
  }
  25% {
    opacity: 1;
    left: 75%;
  }
  50% {
    opacity: 1;
    left: 50%;
  }
  75% {
    opacity: 1;
    left: 25%;
  }
  99% {
    opacity: 1;
    left: 50%;
  }
  100% {
    opacity: 0;
    left: 50%;
  }
}

.weight__wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  gap: 89px;
}
.weight__cont {
  position: relative;
}
.weight__cont .spring__weight {
  display: inline-block;
  cursor: pointer;
  position: absolute;
  bottom: 0;
  left: 50%;
  -webkit-transform: translateY(10px) translateX(-50%);
          transform: translateY(10px) translateX(-50%);
}
.weight__guide {
  position: absolute;
  width: 360px;
  height: 570px;
  left: 0px;
  bottom: 0px;
  z-index: 1;
}
.weight__guide.active .weight__guide-arrow {
  -webkit-animation-name: clickPrompt;
          animation-name: clickPrompt;
  -webkit-animation-direction: normal;
          animation-direction: normal;
  -webkit-animation-duration: 2.5s;
          animation-duration: 2.5s;
  -webkit-animation-timing-function: ease;
          animation-timing-function: ease;
}
.weight__guide.active .weight__guide-hand {
  -webkit-animation-name: act2_drag1-2;
          animation-name: act2_drag1-2;
  -webkit-animation-direction: normal;
          animation-direction: normal;
  -webkit-animation-duration: 2.5s;
          animation-duration: 2.5s;
  -webkit-animation-timing-function: ease;
          animation-timing-function: ease;
}
.weight__guide.active .weight__guide-hand::after {
  -webkit-animation-name: act2_drag1;
          animation-name: act2_drag1;
  -webkit-animation-direction: normal;
          animation-direction: normal;
  -webkit-animation-duration: 2.5s;
          animation-duration: 2.5s;
  -webkit-animation-timing-function: ease;
          animation-timing-function: ease;
}
.weight__guide-arrow {
  width: 296px;
  height: 460px;
  position: absolute;
  right: 0;
  top: 0;
  background-image: url("../../images/h_s7_121_053/active2_arrow_guide.png");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
}
.weight__guide-hand {
  position: absolute;
  bottom: 0;
  left: 0;
  opacity: 0;
}
.weight__guide-hand::before {
  content: "";
  display: block;
  width: 117.5px;
  height: 117.5px;
  background-image: url("../../images/h_s7_121_053/dragprompt.png");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
.weight__guide-hand::after {
  content: "";
  display: block;
  position: absolute;
  width: 75px;
  height: 84px;
  top: 49px;
  left: 50px;
  opacity: 0;
  -webkit-transform: rotate(-90deg);
          transform: rotate(-90deg);
  /* background-image: url("../../images/h_s7_121_053/drag-hand-right.png"); */
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  cursor: pointer;
}
@-webkit-keyframes act2_drag1 {
  0% {
    opacity: 1;
    top: 49px;
    left: 50px;
  }
  95% {
    opacity: 1;
    top: -390px;
    left: 340px;
  }
  100% {
    opacity: 0;
    top: -390px;
    left: 340px;
  }
}
@keyframes act2_drag1 {
  0% {
    opacity: 1;
    top: 49px;
    left: 50px;
  }
  95% {
    opacity: 1;
    top: -390px;
    left: 340px;
  }
  100% {
    opacity: 0;
    top: -390px;
    left: 340px;
  }
}
@-webkit-keyframes act2_drag1-2 {
  0% {
    opacity: 1;
  }
  95% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes act2_drag1-2 {
  0% {
    opacity: 1;
  }
  95% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
.weight__guideline {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 15px;
}
.weight__guideline::before {
  content: "";
  display: block;
  width: 185px;
  height: 5px;
  background-image: url("../../images/h_s7_121_053/active2__guideline.png");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
.weight__guideline-txt {
  font-size: 19.5px;
  letter-spacing: -0.0125em;
  font-weight: 700;
  color: #9da5b2;
}

.h_s7_121_053 .scene-layer-area1.active ~ .tab-list-basic {
  top: 70%;
  z-index: 15;
}
.h_s7_121_053 .scene-layer-area1.active ~ .tab-list-basic > li .button-tab span {
  padding-top: 8px;
}
.h_s7_121_053 .scene-layer-area2.active ~ .tab-list-basic {
  top: 60%;
  z-index: 15;
}
.h_s7_121_053 .scene-layer-area2.active ~ .tab-list-basic > li .button-tab span {
  padding-top: 8px;
}
/*# sourceMappingURL=../maps/page/h_s7_121_053.css.map */


/* Add */
body{
	overscroll-behavior: none;
	-webkit-touch-callout: none !important;
	touch-action : none;
}
#container_Spring.active .active-litle-area.green{z-index:3;}
#container_Spring.active #iframe_Spring{z-index:2;}