.h_s6_011_013 .guide-wrap {
  top: auto;
  bottom: 121.5px;
  z-index: 10;
  opacity: 0;
  right: calc(-100% - 94px);
  -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;
  pointer-events: none;
}
.h_s6_011_013 .guide-wrap.active {
  right: 94px;
  opacity: 1;
}
.h_s6_011_013 .guide-wrap .bubble-box.is-line3 {
  height: 193.5px;
  border-radius: 13px 100px 100px 13px;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
.h_s6_011_013 .guide-wrap .bubble-box.is-line3 .img-area.type3 {
  top: 77px;
  right: 29.5px;
}
.h_s6_011_013 .scene-layer1 {
  width: 100%;
  height: 100%;
}
.h_s6_011_013 .bubble-txt {
  display: none;
}
.h_s6_011_013 .bubble-txt .flex {
  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: start;
      -ms-flex-align: start;
          align-items: flex-start;
  height: 100%;
}
.h_s6_011_013 .bubble-txt .flex p {
  height: auto !important;
}
.h_s6_011_013 .cont {
  width: 100%;
  height: 100%;
}
.h_s6_011_013 .cont__wrap {
  width: 100%;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  padding-top: 250px;
}
.h_s6_011_013 .numerator {
  width: 194px;
  margin-right: 118px;
  margin-top: 98px;
  position: relative;
}
.h_s6_011_013 .numerator__tit-wrap {
  width: 100%;
  margin-bottom: 32px;
}
.h_s6_011_013 .numerator__tit {
  display: block;
  width: 100%;
  height: 60px;
  line-height: 60px;
  text-align: center;
  border-radius: 12.5px;
  background-image: -webkit-gradient(linear, left bottom, left top, from(rgb(69, 79, 92)), to(rgb(94, 108, 125)));
  background-image: -o-linear-gradient(bottom, rgb(69, 79, 92), rgb(94, 108, 125));
  background-image: linear-gradient(to top, rgb(69, 79, 92), rgb(94, 108, 125));
  -webkit-box-shadow: 6px 0 16px rgba(0, 0, 0, 0.53);
          box-shadow: 6px 0 16px rgba(0, 0, 0, 0.53);
  color: #b0dbe3;
  font-weight: 700;
  font-size: 24px;
  overflow: hidden;
}
.h_s6_011_013 .numerator__tit em {
  font-weight: 500;
  margin-left: 4px;
}
.h_s6_011_013 .numerator__btn-wrap {
  width: 100%;
  background-image: -webkit-gradient(linear, left bottom, left top, from(rgb(128, 135, 144)), color-stop(60%, rgb(212, 216, 221)));
  background-image: -o-linear-gradient(bottom, rgb(128, 135, 144), rgb(212, 216, 221) 60%);
  background-image: linear-gradient(to top, rgb(128, 135, 144), rgb(212, 216, 221) 60%);
  -webkit-box-shadow: 7px 0 27px rgba(0, 0, 0, 0.79);
          box-shadow: 7px 0 27px rgba(0, 0, 0, 0.79);
  border-radius: 21px;
  padding: 11px;
  position: relative;
}
.h_s6_011_013 .numerator__btn-wrap::after {
  content: "";
  display: block;
  width: calc(100% + 20px);
  height: calc(100% + 20px);
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  pointer-events: none;
  border: 7px dashed #5aa5ff;
  border-radius: 40px;
  z-index: 1;
  opacity: 0;
}
.h_s6_011_013 .numerator__btn-wrap.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;
}
.h_s6_011_013 .numerator__btn-box {
  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;
  width: 100%;
  background-image: -webkit-gradient(linear, left bottom, left top, from(rgb(195, 200, 205)), to(rgb(169, 175, 185)));
  background-image: -o-linear-gradient(bottom, rgb(195, 200, 205), rgb(169, 175, 185));
  background-image: linear-gradient(to top, rgb(195, 200, 205), rgb(169, 175, 185));
  border-radius: 15px;
  padding: 10px;
}
.h_s6_011_013 .numerator__btn {
  width: 100%;
  height: 44px;
  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;
  text-align: center;
  border-radius: 10px;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.0125em;
  color: #303a46;
  background-image: -webkit-gradient(linear, left bottom, left top, from(rgb(173, 180, 189)), to(rgb(212, 216, 221)));
  background-image: -o-linear-gradient(bottom, rgb(173, 180, 189), rgb(212, 216, 221));
  background-image: linear-gradient(to top, rgb(173, 180, 189), rgb(212, 216, 221));
  -webkit-box-shadow: 6px 0 10px rgba(0, 0, 0, 0.35);
          box-shadow: 6px 0 10px rgba(0, 0, 0, 0.35);
  padding-top: 5px;
  -webkit-transition: 0.4s ease;
  -o-transition: 0.4s ease;
  transition: 0.4s ease;
}
.h_s6_011_013 .numerator__btn em {
  font-weight: 700;
  font-style: italic;
  pointer-events: none;
}
.h_s6_011_013 .numerator__btn.active {
  background-image: -webkit-gradient(linear, left bottom, left top, from(rgb(44, 100, 121)), to(rgb(128, 147, 171)));
  background-image: -o-linear-gradient(bottom, rgb(44, 100, 121), rgb(128, 147, 171));
  background-image: linear-gradient(to top, rgb(44, 100, 121), rgb(128, 147, 171));
  color: #fff;
}
.h_s6_011_013 .numerator__check-wrap {
  margin-top: 36.5px;
  position: relative;
}
.h_s6_011_013 .numerator__check-wrap.active .guide-hand::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;
}
.h_s6_011_013 .numerator__check-wrap.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;
}
.h_s6_011_013 .numerator__check-wrap::after {
  content: "";
  display: block;
  width: calc(100% + 40px);
  height: calc(100% + 20px);
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  pointer-events: none;
  border: 7px dashed #5aa5ff;
  border-radius: 40px;
  z-index: 1;
  opacity: 0;
}
.h_s6_011_013 .numerator__check-label {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 18.5px;
  font-size: 25px;
  letter-spacing: -0.0125em;
  font-weight: 500;
  color: #b0dbe3;
}
.h_s6_011_013 .numerator__check {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  border: 1px solid #0f275d;
  background-image: -webkit-gradient(linear, left bottom, left top, from(rgb(48, 58, 79)), to(rgb(63, 75, 90)));
  background-image: -o-linear-gradient(bottom, rgb(48, 58, 79), rgb(63, 75, 90));
  background-image: linear-gradient(to top, rgb(48, 58, 79), rgb(63, 75, 90));
  -webkit-box-shadow: 7px 0 27px rgba(28, 36, 46, 0.79);
          box-shadow: 7px 0 27px rgba(28, 36, 46, 0.79);
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.h_s6_011_013 .numerator__check::after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  background-image: url(../../images/h_s6_011_013/check_none.png);
  background-size: cover;
}
.h_s6_011_013 .numerator__check:checked {
  background-image: -webkit-gradient(linear, left bottom, left top, from(rgb(23, 56, 162)), to(rgb(76, 150, 239)));
  background-image: -o-linear-gradient(bottom, rgb(23, 56, 162), rgb(76, 150, 239));
  background-image: linear-gradient(to top, rgb(23, 56, 162), rgb(76, 150, 239));
}
.h_s6_011_013 .numerator__check:checked::after {
  background-image: url(../../images/h_s6_011_013/check_on.png);
}
.h_s6_011_013 .numerator__hand {
  position: absolute;
  left: 17.5px;
  bottom: 17.5px;
}
.h_s6_011_013 .numerator__hand .guide-hand::after {
  left: 0;
  -webkit-transform: rotateY(180deg);
          transform: rotateY(180deg);
}
.h_s6_011_013 .piston {
  width: 663.5px;
  height: 791px;
}
.h_s6_011_013 .piston__wrap {
  width: 100%;
  height: 100%;
  background-image: url(../../images/h_s6_011_013/beaker.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  border-radius: 0 0 65px 65px;
  padding: 8px 21.5px 57px 21.5px;
}
.h_s6_011_013 .piston__box {
  width: 100%;
  height: calc(100% - 31px);
  position: relative;
  top: 66px;
}
.h_s6_011_013 .piston__box .piston-inner {
  width: 100%;
  position: absolute;
  bottom: 10px;
}
.h_s6_011_013 .piston__box .particle-area {
  width: calc(100% - 8px);
  position: relative;
  border-radius: 35px 35px 0 0;
  -webkit-transition-duration: 0;
       -o-transition-duration: 0;
          transition-duration: 0;
  -webkit-transform: matrix(1, 0, 0, -1, 0, 0);
          transform: matrix(1, 0, 0, -1, 0, 0);
  top: 17px;
}
.h_s6_011_013 .piston__box .particle-item {
  position: absolute;
  top: 100px;
  left: 100px;
  display: block;
  width: 15px;
  height: 15px;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url("../../images/h_s6_011_013/particle.png");
  border-radius: 50%;
  -webkit-transform: matrix(1, 0, 0, -1, 0, 0);
          transform: matrix(1, 0, 0, -1, 0, 0);
}
.h_s6_011_013 .piston__box::after {
  content: "";
  display: block;
  width: calc(100% - 15px);
  height: calc(100% - 31px);
  position: absolute;
  left: 15px;
  top: 0px;
  background-image: url(../../images/h_s6_011_013/beaker_unit.png);
  background-size: contain;
  background-position: bottom left;
  background-repeat: no-repeat;
  pointer-events: none;
}
.h_s6_011_013 .piston__bar {
  width: 100%;
  height: 66px;
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
  background-image: url(../../images/h_s6_011_013/piston_bar.png);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  cursor: pointer;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
.h_s6_011_013 .piston__bar-area {
  position: absolute;
  top: 445px;
  height: 66px;
  width: 100%;
}
.h_s6_011_013 .piston__bar-area.active .start-top::after {
  -webkit-animation-name: TopBottom;
          animation-name: TopBottom;
  -webkit-animation-duration: 2.5s;
          animation-duration: 2.5s;
  -webkit-animation-timing-function: ease;
          animation-timing-function: ease;
}
.h_s6_011_013 .piston__bar-area.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;
}
.h_s6_011_013 .piston__bar-area::after {
  content: "";
  display: block;
  width: calc(100% + 20px);
  height: calc(100% + 20px);
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  pointer-events: none;
  border: 7px dashed #5aa5ff;
  border-radius: 40px;
  position: relative;
  z-index: 1;
  opacity: 0;
}
.h_s6_011_013 .piston__hand {
  position: absolute;
  left: 50px;
  top: 50%;
  z-index: 3;
}
.h_s6_011_013 .piston__bubble {
  width: 281.5px;
  height: 170px;
  position: absolute;
  top: 4.5px;
  left: 90px;
  -webkit-transform: translateY(-170px);
          transform: translateY(-170px);
  background-image: url(../../images/h_s6_011_013/piston_bubble.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  z-index: 2;
}
.h_s6_011_013 .piston__bubble-wrap {
  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;
  height: 170px;
}
.h_s6_011_013 .piston__bubble-txt {
  font-size: 21px;
  line-height: 34px;
  letter-spacing: -0.025em;
  color: #303a46;
  font-weight: 700;
  padding-bottom: 20px;
}
.h_s6_011_013 .piston__bubble-txt .unit {
  font-weight: 500;
}
.h_s6_011_013 .tempe {
  width: 200px;
  margin-left: 123px;
  margin-top: 98px;
  position: relative;
}
.h_s6_011_013 .tempe__tit-wrap {
  width: 100%;
  margin-bottom: 32px;
}
.h_s6_011_013 .tempe__tit {
  display: block;
  width: 100%;
  height: 60px;
  line-height: 60px;
  text-align: center;
  border-radius: 12.5px;
  background-image: -webkit-gradient(linear, left bottom, left top, from(rgb(69, 79, 92)), to(rgb(94, 108, 125)));
  background-image: -o-linear-gradient(bottom, rgb(69, 79, 92), rgb(94, 108, 125));
  background-image: linear-gradient(to top, rgb(69, 79, 92), rgb(94, 108, 125));
  -webkit-box-shadow: 6px 0 16px rgba(0, 0, 0, 0.53);
          box-shadow: 6px 0 16px rgba(0, 0, 0, 0.53);
  color: #b0dbe3;
  font-weight: 700;
  font-size: 24px;
  overflow: hidden;
}
.h_s6_011_013 .tempe__tit em {
  font-weight: 500;
  margin-left: 4px;
}
.h_s6_011_013 .tempe__bubble-wrap {
  width: 186px;
  height: 85px;
  margin: 0 auto 15px;
  background-image: url("../../images/h_s6_011_013/tempe_bubble.png");
  background-size: contain;
  background-position: top center;
  background-repeat: no-repeat;
}
.h_s6_011_013 .tempe__bubble {
  width: 100%;
  height: 66px;
  margin-bottom: 15px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 11.5px;
  padding-top: 5px;
}
.h_s6_011_013 .tempe__bubble-num {
  font-size: 35px;
  font-weight: 700;
  letter-spacing: -0.0125em;
  color: #fff;
}
.h_s6_011_013 .tempe__bubble-unit {
  font-size: 35px;
  font-weight: 700;
  letter-spacing: -0.0125em;
  color: #657587;
}
.h_s6_011_013 .tempe__cont {
  border: 5px solid #c5cbd3;
  width: 38px;
  height: 500px;
  margin: 0 auto;
  background-image: -webkit-gradient(linear, left bottom, left top, from(rgb(20, 37, 121)), to(rgb(215, 38, 30)));
  background-image: -o-linear-gradient(bottom, rgb(20, 37, 121), rgb(215, 38, 30));
  background-image: linear-gradient(to top, rgb(20, 37, 121), rgb(215, 38, 30));
  border-radius: 38px;
  position: relative;
}
.h_s6_011_013 .tempe__cont::after {
  content: "";
  display: block;
  width: calc(100% + 40px);
  height: calc(100% + 40px);
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  pointer-events: none;
  border: 7px dashed #5aa5ff;
  border-radius: 40px;
  z-index: 1;
  opacity: 0;
}
.h_s6_011_013 .tempe__cont-wrap.active .guide-hand::after {
  -webkit-animation-name: TopBottom;
          animation-name: TopBottom;
  -webkit-animation-duration: 2.5s;
          animation-duration: 2.5s;
  -webkit-animation-timing-function: ease;
          animation-timing-function: ease;
}
.h_s6_011_013 .tempe__cont-wrap.active .tempe__cont::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;
}
.h_s6_011_013 .tempe__btn {
  width: 48.5px;
  height: 92px;
  display: inline-block;
  position: absolute;
  top: 290px;
  left: calc(50% - 24.25px) !important;
  background-image: url("../../images/h_s6_011_013/tempe_btn.png");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  cursor: pointer;
}
.h_s6_011_013 .tempe__hand {
  position: absolute;
  left: 17.5px;
  -webkit-transform: translateY(25px);
          transform: translateY(25px);
}
.h_s6_011_013 .tempe__hand .guide-hand::after {
  left: 0;
  -webkit-transform: rotateY(180deg);
          transform: rotateY(180deg);
}
.h_s6_011_013 .pop__wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding-top: 146.5px;
  gap: 90px;
}
.h_s6_011_013 .pop__txt {
  font-weight: 700;
  font-size: 44.175px;
  line-height: 50px;
  letter-spacing: -0.0125em;
  color: #303a46;
}
.h_s6_011_013 .pop__txt .flex {
  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: start;
      -ms-flex-align: start;
          align-items: flex-start;
}
.h_s6_011_013 .pop__txt .flex p {
  height: auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.h_s6_011_013 .pop__img {
  width: 143px;
  height: 170px;
  margin-top: 70px;
}
.h_s6_011_013 .fountain {
  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;
}
.h_s6_011_013 .fountain > span:first-of-type {
  border-bottom: 1px solid #000;
}
.h_s6_011_013 .fountain.l-p {
  margin-left: 14px;
}
.h_s6_011_013 .guide-hand::after {
  content: "";
  display: block;
  position: absolute;
  width: 75px;
  height: 84px;
  left: 0;
  opacity: 0;
  background-image: url("../../images/m_s1_311_082/drag-hand-right.png");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  cursor: pointer;
}
.h_s6_011_013 .is-disalble {
  pointer-events: none !important;
}
.h_s6_011_013 .tab-list-basic {
  z-index: 15;
}

@-webkit-keyframes TopBottom {
  0% {
    top: 0;
    opacity: 0;
  }
  10% {
    top: 0;
    opacity: 1;
  }
  40% {
    top: -150px;
    opacity: 1;
  }
  60% {
    top: 15px;
    opacity: 1;
  }
  80% {
    top: -150px;
    opacity: 1;
  }
  100% {
    top: -10px;
    opacity: 0;
  }
}

@keyframes TopBottom {
  0% {
    top: 0;
    opacity: 0;
  }
  10% {
    top: 0;
    opacity: 1;
  }
  40% {
    top: -150px;
    opacity: 1;
  }
  60% {
    top: 15px;
    opacity: 1;
  }
  80% {
    top: -150px;
    opacity: 1;
  }
  100% {
    top: -10px;
    opacity: 0;
  }
}
@-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;
  }
}
/*# sourceMappingURL=../maps/page/h_s6_011_013.css.map */