@-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;
  }
  99% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes clickPrompt_line {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  75% {
    opacity: 1;
  }
  99% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-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: -40px;
    bottom: 670px;
  }
  25% {
    opacity: 1;
    right: -160px;
    bottom: 520px;
  }
  26% {
    opacity: 0;
    right: -160px;
    bottom: 520px;
  }
  27% {
    opacity: 0;
    right: -40px;
    bottom: 670px;
  }
  28% {
    opacity: 1;
    right: -40px;
    bottom: 670px;
  }
  50% {
    opacity: 1;
    right: -160px;
    bottom: 520px;
  }
  51% {
    opacity: 0;
    right: -160px;
    bottom: 520px;
  }
  52% {
    opacity: 0;
    right: -40px;
    bottom: 670px;
  }
  53% {
    opacity: 1;
    right: -40px;
    bottom: 670px;
  }
  75% {
    opacity: 1;
    right: -160px;
    bottom: 520px;
  }
  76% {
    opacity: 0;
    right: -160px;
    bottom: 520px;
  }
  77% {
    opacity: 0;
    right: -40px;
    bottom: 670px;
  }
  78% {
    opacity: 1;
    right: -40px;
    bottom: 670px;
  }
  99% {
    opacity: 1;
    right: -160px;
    bottom: 520px;
  }
  100% {
    opacity: 0;
    right: -160px;
    bottom: 520px;
  }
}
@keyframes dragPrompt {
  0% {
    opacity: 1;
    right: -40px;
    bottom: 670px;
  }
  25% {
    opacity: 1;
    right: -160px;
    bottom: 520px;
  }
  26% {
    opacity: 0;
    right: -160px;
    bottom: 520px;
  }
  27% {
    opacity: 0;
    right: -40px;
    bottom: 670px;
  }
  28% {
    opacity: 1;
    right: -40px;
    bottom: 670px;
  }
  50% {
    opacity: 1;
    right: -160px;
    bottom: 520px;
  }
  51% {
    opacity: 0;
    right: -160px;
    bottom: 520px;
  }
  52% {
    opacity: 0;
    right: -40px;
    bottom: 670px;
  }
  53% {
    opacity: 1;
    right: -40px;
    bottom: 670px;
  }
  75% {
    opacity: 1;
    right: -160px;
    bottom: 520px;
  }
  76% {
    opacity: 0;
    right: -160px;
    bottom: 520px;
  }
  77% {
    opacity: 0;
    right: -40px;
    bottom: 670px;
  }
  78% {
    opacity: 1;
    right: -40px;
    bottom: 670px;
  }
  99% {
    opacity: 1;
    right: -160px;
    bottom: 520px;
  }
  100% {
    opacity: 0;
    right: -160px;
    bottom: 520px;
  }
}
@-webkit-keyframes dragPrompt_2 {
  0% {
    opacity: 1;
    right: 20px;
  }
  25% {
    opacity: 1;
    right: 300px;
  }
  50% {
    opacity: 1;
    right: 20px;
  }
  75% {
    opacity: 1;
    right: 300px;
  }
  99% {
    opacity: 1;
    right: 20px;
  }
  100% {
    opacity: 0;
    right: 20px;
  }
}
@keyframes dragPrompt_2 {
  0% {
    opacity: 1;
    right: 20px;
  }
  25% {
    opacity: 1;
    right: 300px;
  }
  50% {
    opacity: 1;
    right: 20px;
  }
  75% {
    opacity: 1;
    right: 300px;
  }
  99% {
    opacity: 1;
    right: 20px;
  }
  100% {
    opacity: 0;
    right: 20px;
  }
}
@-webkit-keyframes dragPrompt_3 {
  0% {
    opacity: 1;
    left: 55px;
    top: -45px;
  }
  25% {
    opacity: 1;
    left: -45px;
    top: -45px;
  }
  26% {
    opacity: 0;
    left: -45px;
    top: -45px;
  }
  27% {
    opacity: 0;
    left: 55px;
    top: -45px;
  }
  28% {
    opacity: 1;
    left: 55px;
    top: -45px;
  }
  50% {
    opacity: 1;
    left: -45px;
    top: -45px;
  }
  51% {
    opacity: 0;
    left: -45px;
    top: -45px;
  }
  52% {
    opacity: 0;
    left: 55px;
    top: -45px;
  }
  53% {
    opacity: 1;
    left: 55px;
    top: -45px;
  }
  75% {
    opacity: 1;
    left: -45px;
    top: -45px;
  }
  76% {
    opacity: 0;
    left: -45px;
    top: -45px;
  }
  77% {
    opacity: 0;
    left: 55px;
    top: -45px;
  }
  78% {
    opacity: 1;
    left: 55px;
    top: -45px;
  }
  99% {
    opacity: 1;
    left: -45px;
    top: -45px;
  }
  100% {
    opacity: 0;
    left: -45px;
    top: -45px;
  }
}
@keyframes dragPrompt_3 {
  0% {
    opacity: 1;
    left: 55px;
    top: -45px;
  }
  25% {
    opacity: 1;
    left: -45px;
    top: -45px;
  }
  26% {
    opacity: 0;
    left: -45px;
    top: -45px;
  }
  27% {
    opacity: 0;
    left: 55px;
    top: -45px;
  }
  28% {
    opacity: 1;
    left: 55px;
    top: -45px;
  }
  50% {
    opacity: 1;
    left: -45px;
    top: -45px;
  }
  51% {
    opacity: 0;
    left: -45px;
    top: -45px;
  }
  52% {
    opacity: 0;
    left: 55px;
    top: -45px;
  }
  53% {
    opacity: 1;
    left: 55px;
    top: -45px;
  }
  75% {
    opacity: 1;
    left: -45px;
    top: -45px;
  }
  76% {
    opacity: 0;
    left: -45px;
    top: -45px;
  }
  77% {
    opacity: 0;
    left: 55px;
    top: -45px;
  }
  78% {
    opacity: 1;
    left: 55px;
    top: -45px;
  }
  99% {
    opacity: 1;
    left: -45px;
    top: -45px;
  }
  100% {
    opacity: 0;
    left: -45px;
    top: -45px;
  }
}
@-webkit-keyframes dragPrompt_4 {
  0% {
    opacity: 1;
    left: -135px;
    top: -45px;
  }
  25% {
    opacity: 1;
    left: -45px;
    top: -45px;
  }
  26% {
    opacity: 0;
    left: -45px;
    top: -45px;
  }
  27% {
    opacity: 0;
    left: -135px;
    top: -45px;
  }
  28% {
    opacity: 1;
    left: -135px;
    top: -45px;
  }
  50% {
    opacity: 1;
    left: -45px;
    top: -45px;
  }
  51% {
    opacity: 0;
    left: -45px;
    top: -45px;
  }
  52% {
    opacity: 0;
    left: -135px;
    top: -45px;
  }
  53% {
    opacity: 1;
    left: -135px;
    top: -45px;
  }
  75% {
    opacity: 1;
    left: -45px;
    top: -45px;
  }
  76% {
    opacity: 0;
    left: -45px;
    top: -45px;
  }
  77% {
    opacity: 0;
    left: -135px;
    top: -45px;
  }
  78% {
    opacity: 1;
    left: -135px;
    top: -45px;
  }
  99% {
    opacity: 1;
    left: -45px;
    top: -45px;
  }
  100% {
    opacity: 0;
    left: -45px;
    top: -45px;
  }
}
@keyframes dragPrompt_4 {
  0% {
    opacity: 1;
    left: -135px;
    top: -45px;
  }
  25% {
    opacity: 1;
    left: -45px;
    top: -45px;
  }
  26% {
    opacity: 0;
    left: -45px;
    top: -45px;
  }
  27% {
    opacity: 0;
    left: -135px;
    top: -45px;
  }
  28% {
    opacity: 1;
    left: -135px;
    top: -45px;
  }
  50% {
    opacity: 1;
    left: -45px;
    top: -45px;
  }
  51% {
    opacity: 0;
    left: -45px;
    top: -45px;
  }
  52% {
    opacity: 0;
    left: -135px;
    top: -45px;
  }
  53% {
    opacity: 1;
    left: -135px;
    top: -45px;
  }
  75% {
    opacity: 1;
    left: -45px;
    top: -45px;
  }
  76% {
    opacity: 0;
    left: -45px;
    top: -45px;
  }
  77% {
    opacity: 0;
    left: -135px;
    top: -45px;
  }
  78% {
    opacity: 1;
    left: -135px;
    top: -45px;
  }
  99% {
    opacity: 1;
    left: -45px;
    top: -45px;
  }
  100% {
    opacity: 0;
    left: -45px;
    top: -45px;
  }
}
.h_s5_015_034 .modal-layer .aim-madal .title-round.wAuto {
  width: auto;
  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;
  padding: 0 40px;
  background-color: #303a46;
}
.h_s5_015_034 .page-view.modal-layer .modal-layer-box.aim-madal.hAuto {
  height: auto;
}
.h_s5_015_034 .examplePop.page-view.modal-layer .modal-layer-box.aim-madal {
  background: #303a46;
}
.h_s5_015_034 .examplePop.modal-layer .aim-madal .title-round span {
  color: #fff;
}
.h_s5_015_034 .modal-layer .aim-madal .bullet-list {
  width: 80%;
}
.h_s5_015_034 .tab-list-basic > li .button-tab span {
  margin-top: 0;
}
.h_s5_015_034 .page-view.modal-layer-activity-goals3.active .tab-modal {
  padding: 100px 125px 40px 20px;
}
.h_s5_015_034 .scene .guide-wrap {
  top: initial;
  bottom: 210px;
  z-index: 10;
  opacity: 0;
  right: calc(-100% - 56px);
  -webkit-transition-delay: 1s;
       -o-transition-delay: 1s;
          transition-delay: 1s;
  -webkit-transition-duration: 0.6s;
       -o-transition-duration: 0.6s;
          transition-duration: 0.6s;
}
.h_s5_015_034 .scene .guide-wrap.active {
  right: 56px;
  opacity: 1;
}
.h_s5_015_034 .scene .guide-wrap .bubble-box .img-area {
  left: -58px;
}
.h_s5_015_034 .scene .guide-wrap .bubble-box .img-area.type4 > img {
  width: 123.5px;
  height: 135px;
}

.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 {
  height: 100%;
  position: relative;
  pointer-events: none;
}
.scene-layer__menu {
  position: absolute;
  left: 68.5px;
  top: 120px;
}
.scene-layer__minusPlus {
  position: absolute;
  left: 258px;
  bottom: 50px;
}
.scene-layer__remote {
  position: absolute;
  right: 64px;
  top: 120px;
}
.scene-layer__example {
  position: absolute;
  right: 360px;
  top: 120px;
}
.scene-layer__action {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  height: 100%;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  -webkit-user-drag: none;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  -ms-touch-action: none;
      touch-action: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-transform-origin: left top;
          transform-origin: left top;
  cursor: default;
}
.scene-layer__triggers {
  position: absolute;
  bottom: 35px;
  right: 230px;
}
.scene-layer__controller {
  position: absolute;
  bottom: 80px;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 20px;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.actionMenu {
  width: 120px;
}
.actionMenu__menu {
  padding: 10px;
  background-color: none;
  position: relative;
  z-index: 2;
  width: 120px;
  height: 784px;
  top: 20px;
}
.actionMenu__menu.active {
  position: relative;
}
.actionMenu__menu.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: 1;
  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;
}
.actionMenu__menu.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_s5_015_034/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;
}
.actionMenu__menu.active::after {
  width: 139px;
  height: 125px;
  background-image: url("../../images/h_s5_015_034/drag-hand-left.png");
  bottom: 650px;
  -webkit-animation-name: dragPrompt;
          animation-name: dragPrompt;
  -webkit-animation-duration: 6s;
          animation-duration: 6s;
}
.actionMenu__item {
  margin-top: 6px;
}
.actionMenu__item:first-child {
  margin-top: 0;
}
.actionMenu__box {
  height: 95px;
  border-radius: 14px;
  border: 1.5px solid rgba(146, 158, 172, 0.4);
  background: -webkit-gradient(linear, left bottom, left top, from(#b0b8c6), to(#dce2ea));
  background: -o-linear-gradient(bottom, #b0b8c6 0%, #dce2ea 100%);
  background: linear-gradient(to top, #b0b8c6 0%, #dce2ea 100%);
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding-bottom: 8.5px;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: end;
  cursor: pointer;
}
.actionMenu__img {
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}
.actionMenu__img.a {
  width: 88px;
  height: 31.5px;
  background: url("../../images/h_s5_015_034/actionMenu__img_1.png") no-repeat center/100%;
  top: 23px;
  left: 52%;
}
.actionMenu__img.b {
  width: 89.5px;
  height: 45px;
  background: url("../../images/h_s5_015_034/actionMenu__img_2.png") no-repeat center/100%;
  top: 19px;
  left: 54%;
}
.actionMenu__img.c {
  width: 67px;
  height: 68px;
  background: url("../../images/h_s5_015_034/actionMenu__img_3.png") no-repeat center/100%;
  top: 6px;
  left: 53%;
}
.actionMenu__img.d {
  width: 97px;
  height: 59.5px;
  background: url("../../images/h_s5_015_034/actionMenu__img_4.png") no-repeat center/100%;
  top: 8px;
  left: 52%;
}
.actionMenu__img.e {
  width: 92px;
  height: 37px;
  background: url("../../images/h_s5_015_034/actionMenu__img_5.png") no-repeat center/100%;
  top: 20px;
  left: 53%;
}
.actionMenu__img.f {
  width: 97.5px;
  height: 65px;
  background: url("../../images/h_s5_015_034/actionMenu__img_6.png") no-repeat center/100%;
  top: 4px;
  left: 53%;
}
.actionMenu__img.g {
  width: 98.5px;
  height: 55.5px;
  background: url("../../images/h_s5_015_034/actionMenu__img_7.png") no-repeat center/100%;
  top: 9px;
  left: 52%;
}
.actionMenu__img.h {
  width: 110px;
  height: 55px;
  background: url("../../images/h_s5_015_034/actionMenu__img_8.png") no-repeat center/100%;
  top: 9px;
  left: 52%;
}
.actionMenu__text {
  font-size: 18px;
  color: #303a46;
  font-weight: 700;
}
.actionMenu__tab {
  height: 75px;
  background-color: #485565;
  border-radius: 0 0 20px 20px;
  border: 1px solid #40464f;
  -webkit-transform: translateY(-15px);
          transform: translateY(-15px);
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-shadow: 5px 5px 15px 0px rgba(29, 36, 46, 0.25);
          box-shadow: 5px 5px 15px 0px rgba(29, 36, 46, 0.25);
}
.actionMenu__tab-box {
  -ms-flex-preferred-size: 50%;
      flex-basis: 50%;
}
.actionMenu__tab-btn {
  width: 100%;
  height: 100%;
  border-radius: 0 0 20px 20px;
  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;
}
.actionMenu__tab-btn.active {
  background-color: #bac2cf;
}
.actionMenu__tab-icon {
  margin-top: 5px;
  opacity: 0.5;
}
.actionMenu__tab-btn.active .actionMenu__tab-icon {
  opacity: 1;
}
.actionMenu__tab-icon.img {
  width: 39px;
  height: 15.5px;
  background: url("../../images/h_s5_015_034/actionMenu__tab-icon_1.png") no-repeat center/100%;
}
.actionMenu__tab-icon.pictogram {
  width: 37.5px;
  height: 22px;
  background: url("../../images/h_s5_015_034/actionMenu__tab-icon_2.png") no-repeat center/100%;
}

.minusPlus__btns {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 9px;
}
.minusPlus__btns-box {
  -ms-flex-preferred-size: 62.5px;
      flex-basis: 62.5px;
  height: 48px;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}
.minusPlus__btn {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  width: 100%;
  height: 100%;
  border-radius: 5.5px;
  border: 1px solid #bec7d5;
  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%);
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.minusPlus__btn:active {
  background: -webkit-gradient(linear, left top, left bottom, from(#b3bcc6), to(#e2e7ed));
  background: -o-linear-gradient(top, #b3bcc6 0%, #e2e7ed 100%);
  background: linear-gradient(to bottom, #b3bcc6 0%, #e2e7ed 100%);
}
.minusPlus__btn-icon {
  width: 28px;
  height: 28.5px;
  display: block;
}
.minusPlus__btn-icon.minus {
  background: url("../../images/h_s5_015_034/actionMenu__btn-icon_1.png") no-repeat center/100%;
}
.minusPlus__btn-icon.plus {
  background: url("../../images/h_s5_015_034/actionMenu__btn-icon_2.png") no-repeat center/100%;
}

.remote__box {
  background-color: none;
  padding: 30px;
  width: 265px;
  height: 511px;
}
.remote__item {
  padding: 22.5px 0;
  position: relative;
}
.remote__item::after, .remote__item::before {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 1px;
  top: 0;
  left: 0;
}
.remote__item::after {
  background-color: #c7cfda;
}
.remote__item::before {
  background-color: #e2e8f2;
  top: -1px;
}
.remote__item:first-child {
  padding-top: 0;
}
.remote__item:first-child::after, .remote__item:first-child::before {
  display: none;
}
.remote__item:last-child {
  padding-bottom: 0;
}
.remote__checkbox-item {
  margin-top: 10px;
}
.remote__checkbox-item:first-child {
  margin-top: 0;
}
.remote__checkbox-depth {
  margin-left: 45px;
  margin-right: 25px;
  margin-top: 10px;
}
.remote__radio {
  margin-top: 5px;
  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;
}
.remote__radio:first-child {
  margin-top: 0;
}
.remote__radio-img.a {
  width: 25px;
  height: 25px;
  background: url("../../images/h_s5_015_034/remote__radio-img_1.png") no-repeat center/100%;
  margin-right: 2.5px;
}
.remote__radio-img.b {
  width: 28px;
  height: 17px;
  background: url("../../images/h_s5_015_034/remote__radio-img_2.png") no-repeat center/100%;
}
.remote__product {
  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;
  margin-top: 15px;
  cursor: pointer;
  position: relative;
}
.remote__product.active {
  position: relative;
}
.remote__product.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: 1;
  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;
}
.remote__product.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_s5_015_034/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;
}
.remote__product.active::after {
  right: 80px;
  -webkit-animation-name: dragPrompt_2;
          animation-name: dragPrompt_2;
}
.remote__product:first-child {
  margin-top: 0;
}
.remote__product-text {
  font-weight: 700;
  color: #303a46;
  font-size: 24px;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  margin-left: 10px;
}
.remote__product-text.a {
  margin-top: 10px;
}
.remote__product-img.a {
  width: 92px;
  height: 100px;
  background: url("../../images/h_s5_015_034/remote__product-img_1.png") no-repeat center/100%;
  margin-left: 30px;
}
.remote__product-img.b {
  width: 136px;
  height: 60.5px;
  background: url("../../images/h_s5_015_034/remote__product-img_2.png") no-repeat center/100%;
}

.exampleBtn {
  height: 69px;
  border-radius: 32.5px;
  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;
  background: -webkit-gradient(linear, left top, left bottom, from(#c8435d), to(#751f30));
  background: -o-linear-gradient(top, #c8435d 0%, #751f30 100%);
  background: linear-gradient(to bottom, #c8435d 0%, #751f30 100%);
  -webkit-box-shadow: 5px 5px 15px 0px rgba(29, 36, 46, 0.25);
          box-shadow: 5px 5px 15px 0px rgba(29, 36, 46, 0.25);
  padding: 0 40px;
  position: relative;
  z-index: 2;
  margin-top: 30px;
  margin-right: 30px;
}
.exampleBtn.active {
  position: relative;
}
.exampleBtn.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: 1;
  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;
}
.exampleBtn.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_s5_015_034/hand-pointer-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;
}
.exampleBtn.active::before {
  border-radius: 57.5px;
}
.exampleBtn__text {
  color: #fff;
  font-size: 24px;
  font-weight: 500;
}
.exampleBtn:active {
  background: -webkit-gradient(linear, left top, left bottom, from(#8b2c3e), to(#551320));
  background: -o-linear-gradient(top, #8b2c3e 0%, #551320 100%);
  background: linear-gradient(to bottom, #8b2c3e 0%, #551320 100%);
}
.exampleBtn:active .exampleBtn__text {
  font-weight: 700;
  opacity: 0.33;
}

.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_s5_015_034/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_s5_015_034/checkbox_on.png") no-repeat center/100%;
}
.checkbox.type2 .checkbox__label {
  font-weight: 700;
  color: #303a46;
  margin-left: 10px;
}
.checkbox.type2 .checkbox__checkbox {
  width: 27px;
  height: 27px;
  background: url("../../images/h_s5_015_034/checkbox_2_off.png") no-repeat center/100%;
}
.checkbox.type2 .checkbox__checkbox:checked {
  background: url("../../images/h_s5_015_034/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: 1;
  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_s5_015_034/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: 22.5px;
  height: 22.5px;
  cursor: pointer;
  background: url("../../images/h_s5_015_034/radio_off.png") no-repeat center/100%;
}
.radio__radio:checked {
  background: url("../../images/h_s5_015_034/radio_on.png") no-repeat center/100%;
}
.radio__label {
  font-size: 22px;
  color: #303a46;
  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: 1;
  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_s5_015_034/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;
}

.triggers__btn-wrap.active {
  position: relative;
}
.triggers__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: 1;
  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;
}
.triggers__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_s5_015_034/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;
}
.triggers__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;
}
.triggers__stopBtn {
  width: 84.5px;
  height: 84.5px;
  background: url("../../images/h_s5_015_034/activity1__stopBtn.png") no-repeat center/100%;
}
.triggers__stopBtn:active {
  background: url("../../images/h_s5_015_034/activity1__stopBtn_2.png") no-repeat center/100%;
}
.triggers__stopBtn.active {
  background: url("../../images/h_s5_015_034/triggers__stopBtn.png") no-repeat center/100% !important;
}
.triggers__startBtn {
  width: 59px;
  height: 59px;
  background: url("../../images/h_s5_015_034/activity1__startBtn.png") no-repeat center/100%;
}
.triggers__startBtn:active {
  background: url("../../images/h_s5_015_034/activity1__startBtn_2.png") no-repeat center/100%;
}
.triggers__startBtn.active {
  background: url("../../images/h_s5_015_034/activity1__startBtn_3.png") no-repeat center/100% !important;
}

.actionSvg {
  width: 100%;
  height: 100%;
}
.actionSvg__svg {
  width: 100%;
  height: 100%;
}

.dragLinePrompt {
  width: 165.5px;
  height: 38px;
  display: block;
  position: absolute;
  background: url("../../images/h_s5_015_034/dragLinePrompt.png") no-repeat center/100%;
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
  top: 19%;
  left: -53%;
  pointer-events: none;
  display: none;
}
.dragLinePrompt.active {
  display: block;
}

.modalCont {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 100%;
  position: relative;
}
.modalCont__img {
  width: 1085.5px;
  height: 813.5px;
  margin-right: 60px;
}
.modalCont__text {
  font-size: 40px;
  line-height: 50px;
  font-weight: 700;
  color: #303a46;
  margin-top: 145px;
  position: relative;
}
.modalCont__text::after {
  content: "";
  display: block;
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 100%;
  background-color: #303a46;
  left: -25px;
  top: 15px;
}
.modalCont__character {
  width: 187.5px;
  height: 225px;
  position: absolute;
  bottom: 85px;
  right: 90px;
}

.modalCont__license {
  display: inline-block;
  position: absolute;
  bottom: 60px;
  right: 0;
  font-weight: 500;
  font-size: 20px;
  line-height: 30px;
  letter-spacing: -0.0125em;
}
.controller {
  display: none;
}
.controller.active {
  display: block;
}
.controller__box {
  padding: 20px 35px;
  background: -webkit-gradient(linear, left bottom, left top, from(#ccd4e8), to(#dce2ea));
  background: -o-linear-gradient(bottom, #ccd4e8 0%, #dce2ea 100%);
  background: linear-gradient(to top, #ccd4e8 0%, #dce2ea 100%);
  -webkit-box-shadow: 5px 5px 15px 0px rgba(29, 36, 46, 0.25);
          box-shadow: 5px 5px 15px 0px rgba(29, 36, 46, 0.25);
  border-radius: 20px;
  border: 1px solid rgba(64, 70, 79, 0.2235294118);
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 18px;
}
.controller__clear {
  width: 62px;
  height: 62px;
  border-radius: 100%;
  background: url("../../images/h_s5_015_034/controller__clear.png") no-repeat center/100%;
  -webkit-box-shadow: 5px 5px 15px 0px rgba(29, 36, 46, 0.25);
          box-shadow: 5px 5px 15px 0px rgba(29, 36, 46, 0.25);
}
.controller__btn {
  width: 52px;
  height: 52px;
  background-color: #c2cada;
  background: -webkit-gradient(linear, left top, left bottom, from(#d2d7e1), to(#bec5d2));
  background: -o-linear-gradient(top, #d2d7e1 0%, #bec5d2 100%);
  background: linear-gradient(to bottom, #d2d7e1 0%, #bec5d2 100%);
  border-radius: 10px;
  border: 2px solid #e5e9f1;
  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;
}
.controller__icon {
  width: 42.5px;
  height: 42.5px;
  background: red;
}
.controller__icon.a {
  background: url("../../images/h_s5_015_034/controller__icon_1.png") no-repeat center/100%;
}
.controller__tit-area {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 20px;
}
.controller__tit {
  font-size: 21.24px;
  font-weight: 700;
  color: #303a46;
}
.controller__value {
  height: 28.5px;
  border-radius: 5px;
  background-color: #fff;
  padding-inline: 17.5px;
  font-size: 17px;
  font-weight: 700;
  color: #303a46;
  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;
}
.controller__slider {
  margin-top: 20px;
}
.controller__control {
  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;
}

.slider {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 12px;
}
.slider__btn-area {
  -ms-flex-negative: 0;
      flex-shrink: 0;
}
.slider__btn {
  width: 25px;
  height: 25px;
  border-radius: 100%;
  background: -webkit-gradient(linear, left bottom, left top, from(#c8cfdd), to(#e9edf3));
  background: -o-linear-gradient(bottom, #c8cfdd 0%, #e9edf3 100%);
  background: linear-gradient(to top, #c8cfdd 0%, #e9edf3 100%);
  border: 1px solid #bfc8d9;
  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;
}
.slider__btn-icon {
  width: 9.5px;
  height: 9.5px;
}
.slider__btn-icon.left {
  background: url("../../images/h_s5_015_034/slider__btn-icon_1.png") no-repeat center/100%;
}
.slider__btn-icon.right {
  background: url("../../images/h_s5_015_034/slider__btn-icon_2.png") no-repeat center/100%;
}
.slider__slider {
  width: 160.5px;
  height: 8px;
  position: relative;
}
.slider__bg {
  height: 100%;
  width: 100%;
  border-radius: 3px;
  background: -webkit-gradient(linear, left top, left bottom, from(#9ea9b6), to(#c4cbd6));
  background: -o-linear-gradient(top, #9ea9b6 0%, #c4cbd6 100%);
  background: linear-gradient(to bottom, #9ea9b6 0%, #c4cbd6 100%);
  border: 1px solid #bfc8d9;
  display: block;
}
.slider__trigger {
  width: 38.5px;
  height: 24px;
  background: url("../../images/h_s5_015_034/slider__trigger.png") no-repeat center/100%;
  position: absolute;
  left: 0%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  -webkit-box-shadow: 5px 5px 15px 0px rgba(29, 36, 46, 0.25);
          box-shadow: 5px 5px 15px 0px rgba(29, 36, 46, 0.25);
  border-radius: 12px;
  cursor: pointer;
}

.scene-layer.active {
  background-color: #99c1ff;
}
.scene-layer.active .actionMenu__img.a {
  width: 90px;
  height: 4px;
  background: url("../../images/h_s5_015_034/actionMenu__img_1_p.png") no-repeat center/100%;
  top: 36px;
}
.scene-layer.active .actionMenu__img.b {
  width: 92px;
  height: 50px;
  background: url("../../images/h_s5_015_034/actionMenu__img_2_p.png") no-repeat center/100%;
  top: 9px;
  left: 50%;
}
.scene-layer.active .actionMenu__img.c {
  width: 46px;
  height: 46.5px;
  background: url("../../images/h_s5_015_034/actionMenu__img_3_p.png") no-repeat center/100%;
  top: 9px;
  left: 50%;
}
.scene-layer.active .actionMenu__img.d {
  width: 44px;
  height: 44px;
  background: url("../../images/h_s5_015_034/actionMenu__img_4_p.png") no-repeat center/100%;
  top: 9px;
  left: 50%;
}
.scene-layer.active .actionMenu__img.e {
  width: 87.5px;
  height: 30.5px;
  background: url("../../images/h_s5_015_034/actionMenu__img_5_p.png") no-repeat center/100%;
  top: 19px;
  left: 50%;
}
.scene-layer.active .actionMenu__img.f {
  width: 86.5px;
  height: 47px;
  background: url("../../images/h_s5_015_034/actionMenu__img_6_p.png") no-repeat center/100%;
  top: 12px;
  left: 50%;
}
.scene-layer.active .actionMenu__img.g {
  width: 86.5px;
  height: 11.5px;
  background: url("../../images/h_s5_015_034/actionMenu__img_7_p.png") no-repeat center/100%;
  top: 28px;
  left: 50%;
}
.scene-layer.active .actionMenu__img.h {
  width: 89px;
  height: 26.5px;
  background: url("../../images/h_s5_015_034/actionMenu__img_8_p.png") no-repeat center/100%;
  top: 18px;
  left: 50%;
}

.exampleImg {
  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;
}
.exampleImg img {
  width: 800px;
}

.electricCurrentImg {
  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;
}
.electricCurrentImg img {
  position: absolute;
  top: 600px;
  left: 1070px;
  width: 300px;
}

.leftDragMotion {
  position: absolute;
  left: 630px;
  top: 260px;
  width: 45px;
  height: 45px;
  padding: 10px;
  z-index: 2;
}
.leftDragMotion.active {
  position: relative;
}
.leftDragMotion.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: 1;
  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;
}
.leftDragMotion.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_s5_015_034/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;
}
.leftDragMotion.active::after {
  width: 139px;
  height: 125px;
  background-image: url("../../images/h_s5_015_034/drag-hand-left.png");
  bottom: 650px;
  -webkit-animation-name: dragPrompt_3;
          animation-name: dragPrompt_3;
  -webkit-animation-duration: 6s;
          animation-duration: 6s;
}

.rightDragMotion {
  position: absolute;
  left: 830px;
  top: 260px;
  width: 45px;
  height: 45px;
  padding: 10px;
  z-index: 2;
}
.rightDragMotion.active {
  position: relative;
}
.rightDragMotion.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: 1;
  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;
}
.rightDragMotion.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_s5_015_034/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;
}
.rightDragMotion.active::after {
  width: 139px;
  height: 125px;
  background-image: url("../../images/h_s5_015_034/drag-hand-left.png");
  bottom: 650px;
  -webkit-animation-name: dragPrompt_4;
          animation-name: dragPrompt_4;
  -webkit-animation-duration: 6s;
          animation-duration: 6s;
}

.electricCurrentDragMotion {
  position: absolute;
  left: 968px;
  top: 611px;
  width: 45px;
  height: 45px;
  padding: 10px;
  z-index: 2;
}
.electricCurrentDragMotion.active {
  position: relative;
}
.electricCurrentDragMotion.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: 1;
  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;
}
.electricCurrentDragMotion.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_s5_015_034/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;
}
.electricCurrentDragMotion.active::after {
  width: 139px;
  height: 125px;
  background-image: url("../../images/h_s5_015_034/drag-hand-left.png");
  bottom: 650px;
  -webkit-animation-name: dragPrompt_3;
          animation-name: dragPrompt_3;
  -webkit-animation-duration: 6s;
          animation-duration: 6s;
}

.h_s5_015_034 .scene-layer__example .exampleBtn__text {
  padding-top: 10px;
}
.h_s5_015_034 .tab-list-basic {
  top: 65%;
}
.h_s5_015_034 .tab-list-basic .button-tab > span {
  padding-top: 10px;
}
.h_s5_015_034 .menu-drag-view {
  width: 145px;
  height: 840px;
  position: absolute;
  top: 135px;
  left: 64px;
  border: 7px dotted #5aa5ff;
  border-radius: 15px;
  z-index: 3;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  -webkit-transition-duration: 0.3s;
       -o-transition-duration: 0.3s;
          transition-duration: 0.3s;
}
.h_s5_015_034 .menu-drag-view.active {
  visibility: unset;
  opacity: 1;
}
.h_s5_015_034 .menu-drag-guide-hand {
  position: absolute;
  top: 200px;
  left: 133px;
  display: block;
  width: 84px;
  height: 76px;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url("../../images/h_s5_015_034/hand-pointer-left.png");
  visibility: hidden;
  opacity: 0;
  -webkit-transition-duration: 0.3s;
       -o-transition-duration: 0.3s;
          transition-duration: 0.3s;
  z-index: 3;
  pointer-events: none;
}
.h_s5_015_034 .menu-drag-guide-hand.active {
  visibility: unset;
  -webkit-animation-name: handMove2;
          animation-name: handMove2;
  -webkit-animation-delay: 1.5s;
          animation-delay: 1.5s;
  -webkit-animation-duration: 1.5s;
          animation-duration: 1.5s;
  -webkit-animation-iteration-count: 2;
          animation-iteration-count: 2;
  -webkit-animation-direction: normal;
          animation-direction: normal;
}
@-webkit-keyframes handMove2 {
  0% {
    opacity: 1;
    top: 200px;
    left: 133px;
  }
  99% {
    opacity: 1;
    top: 350px;
    left: 500px;
  }
  100% {
    opacity: 0;
    top: 350px;
    left: 500px;
  }
}
@keyframes handMove2 {
  0% {
    opacity: 1;
    top: 200px;
    left: 133px;
  }
  99% {
    opacity: 1;
    top: 350px;
    left: 500px;
  }
  100% {
    opacity: 0;
    top: 350px;
    left: 500px;
  }
}
/*# sourceMappingURL=../maps/page/h_s5_015_034.css.map */