/******************************
    landing
 ******************************/
.landing {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  margin: 0 auto;
  transition: 1s;
  background-color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  opacity: 1;
}

.landing.hide {
  opacity: 0;
}

.landing img {
  margin-top: -5vh;
  width: min(calc(var(--vw, 1vw) * 53), 1280px);
}

/******************************
    main
 ******************************/
section.main {
  margin: 0 auto;
  padding: 240px 42px 0;
}

section.main .list-wrap {
  position: relative;
  left: -100px;
}

section.main ul {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
}

section.main ul li {
  cursor: pointer;
  position: absolute;
  width: 360px;
  height: 540px;
  border-radius: 20px 20px 0 0;
  background-color: var(--darkblue);
  transition: var(--transition-time-long);
  top: 0;
}

section.main ul li:after {
  position: absolute;
  left: 0;
  top: 540px;
  width: 100%;
  height: 180px;
  content: '';
  background-color: var(--blue);
  padding-top: 69px;
  text-align: center;
  font-size: var(--font-size-36);
  font-weight: bold;
  line-height: 42px;
  color: var(--white);
  opacity: 1;
  border-radius: 0 0 20px 20px;
  transition: var(--transition-time-long);
}

section.main ul li.pump:after {
  content: '펌프성능시험';
}

section.main ul li.ptype:after {
  content: 'P형 수신기 점검';
}

section.main ul li.sprinkler:after {
  content: '습식스프링클러 점검';
}

section.main ul li.control:after {
  content: '제어반 점검';
}

section.main ul li div.bg-img {
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  width: 360px;
  height: 540px;
  background-repeat: no-repeat;
  opacity: 1;
  transition: var(--transition-time-long);
  border-radius: 20px;
}

section.main ul li div.contents {
  z-index: -1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  position: absolute;
  opacity: 0;
  border-radius: 20px;
  transition: var(--transition-time-long);
  /*background-color: red;*/
}

section.main ul li div.contents:before {
  position: absolute;
  content: '';
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 108px;
  height: 108px;
  background-image: url('../static/img/logo-small.png');
  background-size: contain;
  opacity: 0.6;
}

section.main ul li div.contents div.btn-back {
  position: absolute;
  top: 42px;
  left: 42px;
  text-align: left;
}

section.main ul li div.contents div.btn-back button {
  font-weight: bold;
  font-size: var(--font-size-24);
  line-height: 30px;
  height: 30px;
  letter-spacing: 0px;
  color: var(--white);
  opacity: 1;
  transition: var(--transition-time-long);
}

section.main ul li div.contents div.btn-back button:disabled {
  color: var(--txt-gray);
}

section.main ul li div.contents div.mode-list {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  transition: var(--transition-time-long);
}

section.main ul li div.contents div.mode-list div.btn-wrapper {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 60px;
  width: 240px;
  height: 240px;
  background: var(--blue) 0% 0% no-repeat padding-box;
  border-radius: 20px;
  padding: 32px 0 30px;
  transition: var(--transition-time-long);
  opacity: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

section.main ul li div.contents div.mode-list div.btn-wrapper p.btn-img {
  width: 120px;
  height: 120px;
  transition: var(--transition-time-long);
  text-align: center;
}

section.main ul li div.contents div.mode-list div.btn-wrapper p.btn-img {
  display: inline-block;
}

section.main ul li div.contents div.mode-list div.btn-wrapper p.btn-tit {
  font-weight: bold;
  font-size: var(--font-size-36);
  line-height: 42px;
  letter-spacing: 0px;
  color: #FFFFFF;
  opacity: 1;
  margin-top: 16px;
  transition: var(--transition-time-long);
  text-align: center;
}

section.main ul li div.contents div.mode-list div.btn-wrapper .btn-appendix {
  opacity: 0;
  position: absolute;
  transition: var(--transition-time-long);
}

section.main ul li div.contents div.mode-list div.btn-wrapper .btn-list {
  position: absolute;
  right: 80px;
  bottom: -36px;
  display: grid;
  grid-template-columns: repeat(2, 270px);
  row-gap: 12px;
  column-gap: 20px;
  opacity: 0;
  transition: var(--transition-time-long);
}

section.main ul li div.contents div.mode-list div.btn-wrapper .btn-list button {
  display: none;
  width: 270px;
  height: 80px;
  background: var(--white) 0% 0% no-repeat padding-box;
  border-radius: 10px;
  padding: 8px 12px;
  justify-content: space-between;
  align-items: center;
  position: relative;
}

section.main ul li div.contents div.mode-list div.btn-wrapper .btn-list button div:first-child {
  width: 49px;
  position: relative;
  text-align: left;
  height: 100%;
}

section.main ul li div.contents div.mode-list div.btn-wrapper .btn-list button div:first-child:after {
  content: '';
  position: absolute;
  right: -2px;
  width: 4px;
  height: 100%;
  background-color: #F1F1F3;
  border-radius: 4px;
}

section.main ul li div.contents div.mode-list div.btn-wrapper .btn-list button div:first-child span {
  font-weight: bold;
  font-size: var(--font-size-48);
  line-height: 62px;
  letter-spacing: 0px;
  color: var(--blue);
}

section.main ul li div.contents div.mode-list div.btn-wrapper .btn-list button div:last-child {
  width: 184px;
}

section.main ul li div.contents div.mode-list div.btn-wrapper .btn-list button div:last-child p {
  text-align: left;
  font-size: var(--font-size-24);
  line-height: 30px;
  letter-spacing: 0px;
  color: var(--blue);
}

/* section.main ul li.expanded */
section.main ul li.expanded {
  width: 1836px;
  height: 720px;
  border-radius: 20px;
}

section.main ul li.expanded div.bg-img {
  opacity: 0;
}

section.main ul li.expanded div.contents {
  z-index: 9999;
  opacity: 1;
}

section.main ul li.expanded:after {
  z-index: -1;
  opacity: 0;
  transition: var(--transition-time-long);
}

section.main ul li.expanded div.contents {
  opacity: 1;
}

section.main ul li.expanded div.contents div.mode-list {
  width: 100%;
}

section.main ul li.expanded div.contents div.mode-list div.btn-wrapper {
  opacity: 1;
}

section.main ul li.expanded div.contents div.mode-list div.btn-wrapper:first-child {
  left: 558px;
}

section.main ul li.expanded div.contents div.mode-list div.btn-wrapper:last-child {
  left: 1068px;
}

section.main ul li.expanded div.contents div.mode-list div.btn-wrapper.expanded {
  width: 720px;
}

section.main ul li.expanded div.contents div.mode-list div.btn-wrapper.expanded:last-child {
  left: 558px;
}

section.main ul li.expanded div.contents div.mode-list div.btn-wrapper.hidden {
  opacity: 0;
}

/* div.btn-wrapper.expanded > * */
section.main ul li.expanded div.contents div.mode-list div.btn-wrapper.expanded>*:not(.btn-list) {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}

section.main ul li.expanded div.contents div.mode-list div.btn-wrapper.expanded p.btn-img {
  opacity: 0.1;
}

section.main ul li.expanded div.contents div.mode-list div.btn-wrapper.expanded p.btn-tit {
  margin-top: -84px;
  font-weight: bold;
  font-size: var(--font-size-48);
  line-height: 56px;
  height: 56px;
}

section.main ul li.expanded div.contents div.mode-list div.btn-wrapper.expanded .btn-appendix {
  opacity: 1;
}

/* div.btn-wrapper.expanded.multi-choice > * */
section.main ul li.expanded div.contents div.mode-list div.btn-wrapper.expanded.multi-choice {
  height: 360px;
}

section.main ul li.expanded div.contents div.mode-list div.btn-wrapper.expanded.multi-choice .btn-list {
  right: 80px;
  bottom: 24px;
  opacity: 1;
}

section.main ul li.expanded div.contents div.mode-list div.btn-wrapper.expanded.multi-choice .btn-list button {
  display: flex;
}

/* appendix */
section.main ul li.pump.expanded div.contents div.mode-list div.btn-wrapper.expanded .btn-appendix {
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
  width: 200px;
  height: 59px;
  text-align: center;
  font-size: var(--font-size-24);
  line-height: 30px;
  letter-spacing: 0px;
  color: #F4F4F8;
}

section.main ul li.pump.expanded div.contents div.mode-list div.btn-wrapper.expanded .text.on {
  opacity: 1;
}

/******************************
    index-list
 ******************************/
.index-list {
  position: absolute;
  top: -1182px;
  left: 24px;
  width: 460px;
  height: calc(100% - 24px);
  background: var(--blue) 0% 0% no-repeat padding-box;
  box-shadow: 0px 3px 6px #00000080;
  border: 12px solid var(--blue);
  border-radius: 0px 0px 20px 20px;
  z-index: 9999;
  transition: var(--transition-time-long);
}

.index-list.show {
  top: 0;
}

.index-list>div {
  height: 48px;
  padding-top: 3px;
  padding-bottom: 16px;
  box-sizing: border-box;
  text-align: center;
}

.index-list>div button {
  display: inline-block;
  height: 29px;
  width: 50px;
  opacity: 1;
}

.index-list>div button img {
  width: 50px;
}

.index-list ul {
  height: calc(100% - 48px);
  padding-top: 190px;
  background-color: var(--white);
  border-radius: 0 0 15px 15px;
}

.index-list ul li {
  margin: 0 auto;
  width: 100%;
  height: 140px;
  text-align: center;
}

.index-list ul li button {
  width: 100%;
  height: 140px;
  font-weight: 900;
  font-size: var(--font-size-40);
  line-height: 40px;
  letter-spacing: 2.88px;
  color: var(--txt-black);
  opacity: 1;
}

.index-list ul li button span {
  font-size: var(--font-size-32);
}

.index-list ul li:not(:first-child) {
  border-top: 4px solid var(--index-blue);
  box-sizing: border-box;
}

/******************************
    pump-practice
 ******************************/
section.pump {
  padding: 42px;
}

section.pump .left-section {
  width: 420px;
  position: relative;
}

section.pump .right-section {
  width: 1374px;
  position: relative;
}

/* header */
section .left-section .header {
  height: 64px;
  margin-bottom: 100px;
}

section .left-section .header button {
  position: relative;
  width: 200px;
  height: 64px;
  background-color: var(--blue);
  border-radius: 20px;
  text-align: center;
  font-weight: bold;
  font-size: var(--font-size-24);
  line-height: 30px;
  letter-spacing: 0px;
  color: #FFFFFF;
  opacity: 1;
  z-index: 9998;
}

body.practice-mode section .left-section .header button.btn-complete {
  display: none;
}

body:not(.practice-mode) section .left-section .header button.btn-index {
  display: none;
}

section .left-section .header button.btn-back:before {
  position: absolute;
  content: '←';
  left: 22px;
  color: #F4F4F8;
}

section .left-section .txt-tit {
  height: 40px;
  text-align: center;
  font-weight: bold;
  font-size: var(--font-size-18);
  line-height: 40px;
  letter-spacing: 0.9px;
  color: #FFFFFF;
}

/* supervisory-control */
section .left-section .supervisory-control {
  height: 260px;
  background: var(--darkblue) 0% 0% no-repeat padding-box;
  border-radius: 20px;
  overflow: hidden;
  margin-bottom: 20px;
}

section .left-section .supervisory-control .control-panel {
  height: 220px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--green) 0% 0% no-repeat padding-box;
  padding: 0 20px;
}

section .left-section .supervisory-control .control-panel li {
  height: 180px;
  width: 180px;
  background-size: contain;
}

section .left-section .supervisory-control .control-panel li.main-pump-supervisory {
  background-image: url('../static/img/PanelMainPumpSupervisory@2x.png');
}

section .left-section .supervisory-control .control-panel li.jockey-pump-supervisory {
  background-image: url('../static/img/PanelJockeyPumpSupervisory@2x.png');
}

/* power-control */
section .left-section .power-control {
  height: 460px;
  background: var(--darkblue) 0% 0% no-repeat padding-box;
  border-radius: 20px;
  overflow: hidden;
  margin-bottom: 20px;
}

section .left-section .power-control .control-panel {
  height: 420px;
  background: var(--red) 0% 0% no-repeat padding-box;
  background-image: url('../static/img/MCC.png');
  background-size: contain;
}

/* pump-control */
section.pump .right-section .pump-control {
  position: relative;
  height: 904px;
  margin-bottom: 20px;
  border-radius: 20px;
  background-color: var(--white);
}

section.pump .right-section .pump-control:before {
  content: '';
  position: absolute;
  top: 15px;
  right: 20px;
  width: 200px;
  height: 34px;
  background-image: url('../static/img/KFSi_Main@2x.png');
  background-size: contain;
  background-repeat: no-repeat;
}

section.pump .right-section .pump-control .control-panel {
  height: 100%;
  background-image: url('../static/img/PumpMain.png');
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

/* table */
section.pump .wrapper.table {
  height: 192px;
  border-radius: 20px;
  background-color: #FFF;
}

section.pump .wrapper.table ul {
  font-size: 0;
}

section.pump .wrapper.table li {
  vertical-align: middle;
  height: 100%;
  display: inline-block;
  position: relative;
}

section.pump .wrapper.table li>div {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

section.pump .wrapper.table li span,
section.pump .wrapper.table li p {
  font-weight: bold;
  font-size: var(--font-size-24);
  line-height: 30px;
  text-align: center;
}

section.pump .wrapper.table li:not(:last-child):after {
  content: '';
  top: 10px;
  right: -2px;
  position: absolute;
  height: calc(100% - 20px);
  width: 4px;
}

/* table-head */
section.pump .wrapper.table .table-head {
  height: 50px;
  background-color: var(--blue);
  border-radius: 20px 20px 0 0;
}

section.pump .wrapper.table .table-head li>div {
  /*line-height: 29px;*/
  /*color: var(--white);*/
}

section.pump .wrapper.table .table-head li>div>* {
  line-height: 29px;
  color: var(--white) !important;
}

section.pump .wrapper.table .table-head li:not(:last-child):after {
  background-color: var(--table-darkblue);
}

/* table-body */
section.pump .wrapper.table .table-body {
  height: 142px;
  border-radius: 0 0 20px 20px;
}

section.pump .wrapper.table .table-body>li:not(:last-child):after {
  background-color: var(--table-lightgray);
}

section.pump .wrapper.table .table-body>li>div {
  text-align: center;
  line-height: 29px;
  padding: 56px 0;
}

section.pump .wrapper.table .table-body>li>div>* {
  color: var(--txt-black);
}

/* .right-section .table li */
section.pump .right-section .table li:last-child span {
  font-weight: bold;
  font-size: var(--font-size-18);
  letter-spacing: -0.08em;
}

section.pump .right-section .table .table-head li div .txt-s {
  font-size: var(--font-size-12);
  line-height: 14px;
}

section.pump .right-section .table .table-body>li div .txt-s {
  font-size: var(--font-size-18);
  line-height: 18px;
}

/* table li - width */
section.pump .left-section .table li {
  width: 50%;
}

section.pump .right-section .table li:last-child {
  width: 624px;
}

/* table-val */
section.pump .right-section .table .table-val {
  position: relative;
  transition: var(--transition-time-long);
  opacity: 1;
}

section.pump .right-section .table .table-val.hide button {
  opacity: 0;
}

section.pump .right-section .table .table-val>div {
  position: relative;
}

/* btn-show-list */
section .right-section .table .table-val>div button.btn-show-list {
  width: 45px;
  height: 45px;
  background: var(--grey) 0% 0% no-repeat padding-box;
  border-radius: 50%;
  font-weight: bold;
  font-size: var(--font-size-24);
  line-height: 29px;
  letter-spacing: 0px;
  color: var(--txt-black);
}

section .right-section .table .table-val>div button.btn-show-list.submitted {
  font-weight: bold;
  font-size: var(--font-size-18);
  line-height: 21px;
  background-color: var(--white);
}

section .right-section .table .table-val>div button.btn-answer.btn-show-list.submitted:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
}

section.completed .right-section .table .table-val>div button.btn-answer.btn-show-list.submitted[data-answer-true="true"]:before {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 4px solid #1DE145;
}

section.completed .right-section .table .table-val>div button.btn-answer.btn-show-list.submitted[data-answer-true="false"]:before {
  top: -3px;
  left: 20px;
  width: 4px;
  height: 50px;
  background-color: #E6362D;
  transform: rotate(-45deg);
}

section.completed .right-section .table .table-val>div button.btn-answer.btn-show-list.submitted[data-answer-true="false"]:after {
  top: -3px;
  left: 20px;
  width: 4px;
  height: 50px;
  background-color: #E6362D;
  transform: rotate(45deg);
  transition: unset;
}

section.completed .right-section .table .table-wrapper-tf {
  position: relative;
}

section.completed .right-section .table .table-wrapper-tf[data-answer-true="true"]:after {
  content: '';
  position: absolute;
  top: -1.5px;
  left: 13px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 4px solid #1DE145;
}

section.completed .right-section .table .table-wrapper-tf[data-answer-true="false"]:before {
  content: '';
  position: absolute;
  top: -2px;
  left: 23px;
  width: 4px;
  height: 24px;
  background-color: #E6362D;
  transform: rotate(-45deg);
}

section.completed .right-section .table .table-wrapper-tf[data-answer-true="false"]:after {
  content: '';
  position: absolute;
  top: -2px;
  left: 23px;
  width: 4px;
  height: 24px;
  background-color: #E6362D;
  transform: rotate(45deg);
}

/* .answer-list button */
section .right-section .table .table-val>div .answer-list {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0px;
  height: 0px;
  transform: translate(-50%, -50%);
  transition: var(--transition-time-medium);
}

section .right-section .table .table-val>div .answer-list.show {
  top: -132px;
  transform: translateX(-50%);
  width: 382px;
  height: 118px;
  background: var(--grey) 0% 0% no-repeat padding-box;
  box-shadow: 1px 3px 6px #00000080;
  border-radius: 20px;
  opacity: 1;
  z-index: 9;
}

section .right-section .table .table-val>div .answer-list ul {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 0;
  height: 0;
}

section .right-section .table .table-val>div .answer-list.show ul {
  padding: 14px;
  width: 100%;
  height: 100%;
}

section .right-section .table .table-val>div .answer-list ul li {
  opacity: 0;
  background: var(--blue) 0% 0% no-repeat padding-box;
  border-radius: 10px;
  transition: var(--transition-time-medium);
}

section .right-section .table .table-val>div .answer-list.show ul li {
  width: 90px;
  height: 90px;
}

section .right-section .table .table-val>div .answer-list.show.loaded ul li {
  opacity: 1;
}

section .right-section .table .table-val>div .answer-list.show.loaded ul li button {
  font-weight: bold;
  font-size: var(--font-size-24);
  line-height: 29px;
  letter-spacing: 0px;
  color: var(--white);
}

/* li:last-child .table-val */
section.pump .right-section .table li:last-child .table-val {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 150px;
}

section.pump .right-section .table li:last-child .table-val button {
  width: 50px;
  height: 40px;
  padding: 5px 10px;
  margin: 2px 0;
}

section.pump .right-section .table li:last-child .table-val button img {
  margin: 0 auto;
  width: 100%;
}

section.pump .right-section .table li:last-child .table-val button.btn-submit-answer.deselected {
  opacity: 0.3;
}

/* supervisory-control */
.supervisory-control .control-panel li {
  position: relative;
}

.supervisory-control .control-panel li div {
  position: absolute;
}

.supervisory-control .control-panel li div.switch-light {
  width: 42px;
  height: 42px;
  left: 36px;
  opacity: 0;
  transition: var(--transition-time-medium);
}

.supervisory-control .control-panel li div.switch-light:first-child {
  top: 32px;
}

.supervisory-control .control-panel li div.switch-light:nth-child(2) {
  top: 61px;
}

.supervisory-control .control-panel li div.switch-light:nth-child(3) {
  top: 90px;
}

.supervisory-control .control-panel li[data-pump-supervisory="auto"] div[class$="auto"],
.supervisory-control .control-panel li[data-pump-supervisory="stop"] div[class$="stop"],
.supervisory-control .control-panel li[data-pump-supervisory="manual"] div[class$="manual"] {
  opacity: 1;
}

.supervisory-control .control-panel li div.switch-manipulate {
  width: 40px;
  height: 45px;
  bottom: 14px;
}

.supervisory-control .control-panel li div.switch-manipulate.select {
  left: 78px;
}

.supervisory-control .control-panel li div.switch-manipulate.activate {
  left: 126px;
}

.supervisory-control .control-panel .supervisory-power {
  top: 32px;
  width: 42px;
  height: 42px;
  right: 0;
  opacity: 0;
  transition: var(--transition-time-medium);
}

.supervisory-control .control-panel li[data-pump-power="on"] .supervisory-power {
  opacity: 1;
}

/* power-control */
.power-control .control-panel li {
  position: relative;
}

.power-control .control-panel li div {
  position: absolute;
}

.power-control .control-panel li div:first-child {
  top: 42px;
  width: 148px;
  height: 148px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.power-control .control-panel li div:first-child button {
  width: 62px;
  height: 62px;
  transition: var(--transition-time-medium);
}

.power-control .control-panel li div:first-child button img {
  object-fit: contain;
}

.power-control .control-panel li div:first-child button[data-val="manual"] {
  transform: matrix(0.26, -0.97, 0.97, 0.26, 0, 0);
}

.power-control .control-panel li div:nth-child(2),
.power-control .control-panel li div:nth-child(3) {
  width: 148px;
  height: 148px;
}

.power-control .control-panel li div:nth-child(2) {
  top: 165px;
}

.power-control .control-panel li div:nth-child(3) {
  top: 288px;
}

.power-control .control-panel li:first-child div:first-child,
.power-control .control-panel li:first-child div:nth-child(2),
.power-control .control-panel li:first-child div:nth-child(3) {
  left: 50px;
}

.power-control .control-panel li:last-child div:first-child,
.power-control .control-panel li:last-child div:nth-child(2),
.power-control .control-panel li:last-child div:nth-child(3) {
  right: 50px;
}

.power-control .control-panel li div:nth-child(2) img,
.power-control .control-panel li div:nth-child(3) img {
  opacity: 0;
  transition: var(--transition-time-medium);
}

.power-control .control-panel li[data-pump-power="on"] div[class$="on"] img,
.power-control .control-panel li[data-pump-power="off"] div[class$="off"] img {
  opacity: 1;
}

.power-control .control-panel li div:first-child button:not([data-val="manual"]) {
  margin-right: 4px;
}

/**** .object-wrap ****/
/* .pump-control .relief-valve-cap */
.pump-control .relief-valve-cap {
  top: 226px;
  left: 275.5px;
  width: 41px;
  height: 80px;
}

.pump-control .relief-valve-cap button {
  margin-top: 47px;
  width: 100%;
  height: 33px;
  opacity: 1;
  transition: var(--transition-time-medium);
}

.pump-control .relief-valve-cap button[data-val="open"] {
  margin-top: 0;
  opacity: 0.5;
}

/* .pump-control .pressure-indicator-small */
.pump-control .pressure-indicator-small {
  top: 502px;
  left: 693px;
  width: 68px;
  height: 68px;
}

.pump-control .pressure-indicator-small img {
  transition: var(--transition-time-medium);
}

/* water-fall-left */
.pump-control .water-fall-left {
  top: 473px;
  left: 174px;
  width: 0;
  height: 0;
  transition: var(--transition-time-long);
}

.pump-control .water-fall-left[data-main-pump-power="on"][data-relief-valve-bolt="open"][data-gate-valve-state="closed"],
.pump-control .water-fall-left.show {
  left: 154px;
  width: 40px;
  height: 430px;
}

.pump-control .water-fall-left img {
  height: 100%;
  width: 100%;
}

/* water-fall-right */
.pump-control .water-fall-right {
  top: 419px;
  left: 1191px;
  width: 0;
  height: 0;
  transition: var(--transition-time-long);
}

.pump-control .water-fall-right[data-main-pump-power="on"][data-gate-valve-state="open"]:not([data-flow-control-valve-state="0"]),
.pump-control .water-fall-right.show {
  left: 1166px;
  width: 50px;
  height: 484px;
}

.pump-control .water-fall-right img {
  height: 100%;
  width: 100%;
}

/* flow-meter-object */
.pump-control .flow-meter-object {
  top: 158px;
  left: 919px;
  width: 15px;
  height: 100px;
}

.pump-control .flow-meter-object .flow-meter-indicator {
  position: absolute;
  left: 0;
  bottom: 0;
  text-align: center;
  width: 100%;
  padding: 0 3px 0 4px;
  box-sizing: border-box;
  background-color: #358EB1;
  transition: var(--transition-time-long);
  height: 2px;
}

.pump-control .flow-meter-object .flow-meter-indicator img {
  margin: -1px auto 0;
  width: 8px;
  height: 3px;
}

.pump-control .flow-meter-object .flow-meter-metric {
  position: absolute;
  top: 0;
  left: 0;
  width: 15px;
  height: 100px;
}

/* discharge-valve-object */
.pump-control .discharge-valve-object {
  top: 157px;
  left: 660px;
  width: 50px;
  height: 95px;
  position: relative;
}

.pump-control .discharge-valve-object .discharge-valve-axis {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  height: 14px;
  z-index: 1;
}

.pump-control .discharge-valve-object .discharge-valve-axis[data-discharge-valve-state="closed"] {
  left: 1px;
}

.pump-control .discharge-valve-object .discharge-valve-axis[data-discharge-valve-state="open"] {
  left: 20px;
}

.pump-control .discharge-valve-object .discharge-valve-head {
  position: absolute;
  top: 0;
  left: 0;
  width: 25px;
  height: 95px;
  z-index: 2;
}

/* gate-valve-object */
.pump-control .gate-valve-object {
  top: 246px;
  left: 760px;
  width: 68px;
  height: 44px;
}

.pump-control .gate-valve-object .gate-valve-axis {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 10px;
  height: 27px;
}

.pump-control .gate-valve-object .gate-valve-axis[data-gate-valve-state="closed"] {
  top: 28px;
}

.pump-control .gate-valve-object .gate-valve-axis[data-gate-valve-state="open"] {
  top: 0;
}

.pump-control .gate-valve-object .gate-valve-head {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 68px;
  height: 17px;
}

/* flow-control-valve-object */
.pump-control .flow-control-valve-object {
  top: 238px;
  left: 1028px;
  width: 51px;
  height: 47px;
}

.pump-control .flow-control-valve-object .flow-control-valve-axis {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 13px;
  height: 34px;
}

.pump-control .flow-control-valve-object .flow-control-valve-axis[data-flow-control-valve-state="0"] {
  top: 35px;
}

.pump-control .flow-control-valve-object .flow-control-valve-axis[data-flow-control-valve-state="50"] {
  top: 22px;
}

.pump-control .flow-control-valve-object .flow-control-valve-axis[data-flow-control-valve-state="100"] {
  top: 11px;
}

.pump-control .flow-control-valve-object .flow-control-valve-axis[data-flow-control-valve-state="150"] {
  top: 0;
}

.pump-control .flow-control-valve-object .flow-control-valve-head {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 51px;
  height: 13px;
}

/**** .enlarge-wrap ****/
/* .pump-control .discharge-valve-detail-wrap */
section.pump .pump-control .discharge-valve-detail-wrap {
  top: 89px;
  left: 648px;
}

section.pump .pump-control .discharge-valve-detail-wrap.condensed {
  top: 204px;
  left: 723px;
}

.pump-control .discharge-valve-detail-wrap .discharge-valve-image-wrap .discharge-valve-bg img {
  height: 100%;
  object-fit: cover;
}

.pump-control .discharge-valve-detail-wrap .discharge-valve-image-wrap .discharge-valve-lever {
  width: 100%;
  height: 100%;
}

.pump-control .discharge-valve-detail-wrap .discharge-valve-image-wrap .discharge-valve-lever img {
  height: 100%;
  object-fit: cover;
}

.pump-control .discharge-valve-detail-wrap .discharge-valve-btn-wrap div:first-child button {
  padding-top: 5px;
  padding-bottom: 47px;
}

.pump-control .discharge-valve-detail-wrap .discharge-valve-btn-wrap div:last-child button {
  padding-top: 47px;
  padding-bottom: 5px;
}

/* .pump-control .relief-valve-detail-wrap */
.pump-control .relief-valve-detail-wrap {
  top: 224px;
  left: 184px;
}

.pump-control .relief-valve-detail-wrap.condensed {
  top: 299px;
  left: 299px;
}

.pump-control .relief-valve-detail-wrap .relief-valve-image-wrap {
  top: 0;
  left: 40px;
}

.pump-control .relief-valve-detail-wrap .relief-valve-image-wrap .relief-valve-detail-bg img {
  height: 100%;
  object-fit: cover;
}

.pump-control .relief-valve-detail-wrap .relief-valve-image-wrap .relief-valve-detail-icon {
  width: 50px;
  height: 50px;
}

.pump-control .relief-valve-detail-wrap .relief-valve-image-wrap .relief-valve-detail-icon img {
  height: 100%;
  object-fit: contain;
}

.pump-control .relief-valve-detail-wrap .relief-valve-image-wrap .relief-valve-detail-icon.rotate img {
  transition: 1s;
}

.pump-control .relief-valve-detail-wrap .relief-valve-image-wrap .relief-valve-detail-icon.rotate img {
  -webkit-transform: rotate(150deg);
  -moz-transform: rotate(150deg);
}

.pump-control .relief-valve-detail-wrap .relief-valve-detail-btn-wrap div:first-child button {
  text-align: left;
  padding-left: 6px;
}

.pump-control .relief-valve-detail-wrap .relief-valve-detail-btn-wrap div:last-child button {
  text-align: right;
  padding-left: 39px;
}

.pump-control .relief-valve-detail-wrap .relief-valve-detail-btn-wrap div button img {
  width: 46px;
  height: 51px;
}

/* .pump-control .pressure-metric-detail-wrap */
.pump-control .pressure-metric-detail-wrap {
  top: 409px;
  left: 640px;
  width: 200px;
  height: 200px;
}

.pump-control .pressure-metric-detail-wrap.condensed {
  top: 509px;
  left: 740px;
}

.pump-control .pressure-metric-detail-wrap .pressure-metric-image-wrap {
  top: 0;
  left: 0;
  width: 200px;
  height: 200px;
  cursor: pointer;
}

.pump-control .pressure-metric-detail-wrap .pressure-metric-image-wrap .pressure-metric-bg {
  opacity: 1;
}

.pump-control .pressure-metric-detail-wrap .pressure-metric-image-wrap .pressure-metric-bg img {
  object-fit: none;
}

.pump-control .pressure-metric-detail-wrap .pressure-metric-image-wrap .pressure-metric-icon {
  width: 97px;
  height: 97px;
}

.pump-control .pressure-metric-detail-wrap .pressure-metric-image-wrap .pressure-metric-icon img {
  object-fit: none;
}

/* .pump-control .flow-meter-detail-wrap */
.pump-control .flow-meter-detail-wrap {
  top: 8px;
  left: 847px;
  width: 160px;
  height: 320px;
}

.pump-control .flow-meter-detail-wrap.condensed {
  top: 168px;
  left: 927px;
}

.pump-control .flow-meter-detail-wrap .flow-meter-image-wrap {
  top: 0;
  left: 0;
  width: 160px;
  height: 320px;
  cursor: pointer;
}

.pump-control .flow-meter-detail-wrap .flow-meter-image-wrap .flow-meter-bg {
  position: relative;
  opacity: 1;
  background-image: url('../static/img/FlowMeter_Crop.png');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}

.pump-control .flow-meter-detail-wrap .flow-meter-image-wrap .flow-meter-bg .flow-meter-metric {
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
}

.pump-control .flow-meter-detail-wrap .flow-meter-image-wrap .flow-meter-bg .flow-meter-indicator {
  position: absolute;
  left: 50%;
  bottom: -30px;
  transform: translateX(-50%);
  text-align: center;
  width: 50px;
  height: 10px;
  background-color: #358EB1;
  transition: var(--transition-time-long);
}

.pump-control .flow-meter-detail-wrap .flow-meter-image-wrap .flow-meter-bg .flow-meter-indicator img {
  margin: -5px auto 0;
  width: 25px;
  height: 10px;
}

/* .pump-control .gate-valve-detail-wrap */
.pump-control .gate-valve-detail-wrap {
  top: 168px;
  left: 721px;
}

.pump-control .gate-valve-detail-wrap.condensed {
  top: 283px;
  left: 796px;
}

.pump-control .gate-valve-detail-wrap .gate-valve-image-wrap .gate-valve-bg img {
  height: 100%;
  object-fit: cover;
}

.pump-control .gate-valve-detail-wrap .gate-valve-image-wrap .gate-valve-lever {
  width: 100%;
  height: 100%;
}

.pump-control .gate-valve-detail-wrap .gate-valve-image-wrap .gate-valve-lever img {
  height: 100%;
  object-fit: cover;
}

.pump-control .gate-valve-detail-wrap .gate-valve-image-wrap .gate-valve-lever.rotate img {
  margin-top: -5px;
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
}

/* .pump-control .flow-control-valve-detail-wrap */
.pump-control .flow-control-valve-detail-wrap {
  top: 168px;
  left: 988px;
}

.pump-control .flow-control-valve-detail-wrap.condensed {
  top: 283px;
  left: 1063px;
}

.pump-control .flow-control-valve-detail-wrap .flow-control-valve-image-wrap .flow-control-valve-bg img {
  height: 100%;
  object-fit: cover;
}

.pump-control .flow-control-valve-detail-wrap .flow-control-valve-image-wrap .flow-control-valve-lever {
  width: 100%;
  height: 100%;
}

.pump-control .flow-control-valve-detail-wrap .flow-control-valve-image-wrap .flow-control-valve-lever img {
  height: 100%;
  object-fit: cover;
}

.pump-control .flow-control-valve-detail-wrap .flow-control-valve-image-wrap .flow-control-valve-lever[data-val="50"] img {
  -webkit-transform: rotate(-120deg);
  -moz-transform: rotate(-120deg);
}

.pump-control .flow-control-valve-detail-wrap .flow-control-valve-image-wrap .flow-control-valve-lever[data-val="100"] img {
  -webkit-transform: rotate(-240deg);
  -moz-transform: rotate(-240deg);
}

.pump-control .flow-control-valve-detail-wrap .flow-control-valve-image-wrap .flow-control-valve-lever[data-val="150"] img {
  -webkit-transform: rotate(-360deg);
  -moz-transform: rotate(-360deg);
}

.pump-control .flow-control-valve-detail-wrap .flow-control-valve-etc-wrap {
  position: absolute;
  top: 50%;
  right: 50%;
  transform: translate(-50%, -50%);
  height: 0px;
  width: 0px;
  text-align: left;
  font-size: 0;
  opacity: 0;
}

.pump-control .flow-control-valve-detail-wrap:not(.condensed) .flow-control-valve-etc-wrap {
  right: -112px;
  transform: translateY(-50%);
  height: 33px;
  width: 100px;
  opacity: 1;
  transition: var(--transition-time-medium);
  font-weight: bold;
  font-size: var(--font-size-28);
  line-height: 38px;
  letter-spacing: -1.4px;
  color: var(--blue);
}

.pump-control .flow-control-valve-detail-wrap .flow-control-valve-btn-wrap div:first-child button {
  padding-top: 10px;
  padding-bottom: 42px;
}

.pump-control .flow-control-valve-detail-wrap .flow-control-valve-btn-wrap div:last-child button {
  padding-top: 42px;
  padding-bottom: 10px;
}

.pump-control .flow-control-valve-detail-wrap .flow-control-valve-btn-wrap button span {
  font-weight: bold;
  font-size: var(--font-size-28);
  line-height: 38px;
  letter-spacing: -1.4px;
}

/**** .tooltip-wrap ****/
.pump-control .relief-valve-tooltip-wrap {
  top: 294px;
  left: 294px;
}

.pump-control .relief-valve-tooltip-wrap.enlarged {
  top: 224px;
  left: 224px;
}

/* .discharge-valve-tooltip-wrap */
.pump-control .discharge-valve-tooltip-wrap {
  top: 89px;
  left: 648px;
}

.pump-control .discharge-valve-tooltip-wrap.enlarged {
  height: 190px;
}

/* .pressure-metric-tooltip-wrap */
.pump-control .pressure-metric-tooltip-wrap {
  top: 457px;
  left: 735px;
}

.pump-control .pressure-metric-tooltip-wrap.enlarged {
  top: 409px;
  left: 640px;
  width: 200px;
  height: 200px;
}

.pump-control .pressure-metric-tooltip-wrap .tooltip[data-val="enlarged"] {
  width: 200px;
  height: 200px;
}

/* .flow-meter-tooltip-wrap */
.pump-control .flow-meter-tooltip-wrap {
  top: 89px;
  left: 935px;
}

.pump-control .flow-meter-tooltip-wrap.enlarged {
  top: 8px;
  left: 847px;
  width: 160px;
  height: 320px;
}

.pump-control .flow-meter-tooltip-wrap .tooltip[data-val="enlarged"] {
  width: 160px;
  height: 320px;
}

/* .gate-valve-tooltip-wrap */
.pump-control .gate-valve-tooltip-wrap {
  top: 208px;
  left: 791px;
}

.pump-control .gate-valve-tooltip-wrap.enlarged {
  left: 721px;
}

/* flow-control-valve-tooltip-wrap */
.pump-control .flow-control-valve-tooltip-wrap {
  top: 208px;
  left: 1058px;
}

.pump-control .flow-control-valve-tooltip-wrap.enlarged {
  left: 988px;
}

/* blur-bg */
.blur-container {
  display: none;
  z-index: -1;
  opacity: 0;
}

section.completed .blur-container {
  display: block;
  opacity: 1;
  z-index: 50;
}

.blur-bg {
  position: absolute;
  top: 0;
  left: 0;
  filter: blur(10px);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 101;
}

section.completed .blur-bg {
  width: 100%;
  height: 100%;
}

.blurred-screen {
  width: 100%;
  height: 100%;
  background: #171717 0% 0% no-repeat padding-box;
  opacity: 0.5;
}

.blur-txt {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  color: var(--white);
  padding-top: 84px;
  z-index: 9999999999;
}

.blur-txt h1 {
  text-align: center;
  font-weight: bold;
  font-size: var(--font-size-72);
  line-height: 85px;
  letter-spacing: 5.18px;
  margin-bottom: 20px;
}

.blur-txt p {
  text-align: center;
  font-weight: 600;
  font-size: var(--font-size-36);
  line-height: 42px;
  letter-spacing: 2.59px;
  margin-bottom: 42px;
}

.blur-txt ul {
  width: 460px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}

.blur-txt ul li {
  width: 100%;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.blur-txt ul li:not(:last-child) {
  margin-bottom: 24px;
}

.blur-txt ul li span.img {
  width: 100px;
  min-width: 100px;
  height: 100px;
  margin-right: 48px;
  border-radius: 50px;
}

.blur-txt ul li[data-val="passed"] span.img {
  background-color: #1DE145;
}

.blur-txt ul li[data-val="failed"] span.img {
  background-color: #E6362D;
}

.blur-txt ul li span.txt {
  text-align: left;
  font-weight: bold;
  font-size: var(--font-size-54);
  line-height: 54px;
  letter-spacing: 3.89px;
  white-space: nowrap;
}

.blur-txt ul li span.img img {
  display: none;
}

.blur-txt ul li[data-val="passed"] span.img .img-pass {
  display: block;
}

.blur-txt ul li[data-val="failed"] span.img .img-fail {
  display: block;
}

section.completed .right-section .wrapper.table {
  position: absolute;
  z-index: 9999999999;
}

section.completed .left-section .header button:first-child {
  position: absolute;
  z-index: 9999999999;
}