@font-face {
  font-family: 'CLCF-Regular';
  font-style: normal;
  font-weight: normal;
  src: url('./font/NanumSquareR.woff2') format('woff2');
}

@font-face {
  font-family: 'CLCF-Bold';
  font-style: normal;
  font-weight: normal;
  src: url('./font/NanumSquareB.woff2') format('woff2');
}

p {
  margin-block-start: 1px;
  margin-block-end: 1px;
}

.uiCommonRoot {
  width: 100%;
  height: 100%;
}

.uiBaseDiv {
  position: absolute;
  left: 0px;
  top: 0px;
  overflow: hidden;
  width: 100%;
  height: 100%;
  z-index: 15;
}

.uiBasePage {
  position: absolute;
  left: 0px;
  top: 0px;
  overflow: hidden;
  width: 100%;
  height: 100%;
  z-index: 16;
}

.uiBaseNoCtrls {
  position: absolute;
  z-index: 18;
  background-color: transparent;
  pointer-events: none;
}

.uiBaseCtrls {
  position: absolute;
  z-index: 18;
  background-color: transparent;
  pointer-events: all;
}

.uiBaseBackground {
  position: absolute;
  z-index: 17;
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
}

.uiBaseImage {
  position: absolute;
  z-index: 18;
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  border: 0px solid white;
  pointer-events: none;
}

.uiBaseTextLeft {
  text-align: left;
}

.uiBaseTextCenter {
  text-align: center;
}

.uiBaseTextRight {
  text-align: right;
}

.uiBaseTextVScroll {
  overflow-x: hidden;
  overflow-y: auto;
  pointer-events: auto;
}

.uiBaseOverflowHidden {
  overflow: hidden;
}

.uiProgressBack {
  background-color: black;
  color: white;
  text-align: center;
  z-index: 20;
}

.uiProgressBar {
  background-color: rgba(255, 212, 0, 0.7);
  z-index: 21;
}

.uiProgressMsg {
  background-color: transparent;
  color: white;
  z-index: 21;
  text-align: center;
  text-shadow: 0 0 0.2em yellow, 0 0 0.2em orange;
}

.ViewStepList_Back {
  position: absolute;
  float: left;
  pointer-events: auto;
  left: 0px;
  top: 0px;
  width: calc(100% - 32px);
  height: calc(100% - 32px);
  background-color: transparent;
  color: black;
  z-index: 40;
  padding: 16px;
  overflow-x: hidden;
  overflow-y: auto;
}

.ViewStepList_Item {
  position: relative;
  float: left;
  width: calc(100% - 16px);
  height: 64px;
  background-position: center;
  background-size: 100% 100%;
  background-image: url('./images/item_step_main_normal.png');
  margin: 0px;
  z-index: 42;
}

.ViewStepList_Item_Selected {
  background-image: url('./images/item_step_main_pushed.png');
}

.ViewStepList_Item_Icon {
  position: absolute;
  left: 5%;
  top: 20%;
  width: 6%;
  height: 50%;
  background-position: center;
  background-size: 100% 100%;
  background-image: url('./images/icon_step.png');
}

.ViewStepList_Item_Text {
  position: absolute;
  left: 12%;
  top: 24%;
  width: 80%;
  height: 50%;
  font-family: 'CLCF-Regular';
  font-size: 2.5vh;
  color: white;
  overflow: hidden;
}

.ViewSubstepList_Back {
  position: absolute;
  float: left;
  pointer-events: auto;
  left: 0px;
  top: 0px;
  width: calc(100% - 32px);
  height: calc(100% - 32px);
  background-color: transparent;
  color: black;
  z-index: 40;
  padding: 16px;
  overflow-x: hidden;
  overflow-y: auto;
}

.ViewSubstepList_Item {
  position: relative;
  float: left;
  left: 10%;
  width: calc(90% - 16px);
  height: 64px;
  background-position: center;
  background-size: 100% 100%;
  background-image: url('./images/item_step_sub_normal.png');
  margin: 0px;
  z-index: 42;
}

.ViewSubstepList_Item_Selected {
  background-image: url('./images/item_step_sub_pushed.png');
}

.ViewSubstepList_Item_Line {
  position: absolute;
  left: -2.5%;
  bottom: 47%;
  width: 3%;
  height: 110%;
  z-index: 41;
  background-position: center;
  background-size: 100% 100%;
  background-image: url('./images/line_substep.png');
}

.ViewSubstepList_Item_Icon {
  position: absolute;
  left: 2%;
  top: 12%;
  width: 5%;
  height: 60%;
  background-position: center;
  background-size: 100% 100%;
  background-image: url('./images/icon_substep.png');
}

.ViewSubstepList_Item_Text {
  position: absolute;
  left: 8%;
  top: 21%;
  width: 85%;
  height: 50%;
  font-family: 'CLCF-Regular';
  font-size: 2.5vh;
  color: white;
  overflow: hidden;
}

.ViewConceptList_Back {
  position: absolute;
  float: left;
  pointer-events: auto;
  left: 0px;
  top: 0px;
  width: calc(100% - 32px);
  height: calc(100% - 32px);
  background-color: transparent;
  color: black;
  z-index: 40;
  padding: 16px;
  overflow-x: hidden;
  overflow-y: auto;
}

.ViewConceptList_Item {
  position: relative;
  float: left;
  width: calc(100% - 16px);
  height: 64px;
  background-position: center;
  background-size: 100% 100%;
  background-image: url('./images/item_concept_normal.png');
  margin-top: 1%;
  margin-bottom: 1%;
  z-index: 42;
  pointer-events: auto;
}

.ViewConceptList_Item:hover {
  background-image: url('./images/item_concept_pushed.png');
}

.ViewConceptList_Item:active {
  background-image: url('./images/item_concept_pushed.png');
}

.ViewConceptList_Item_Selected {
  background-image: url('./images/item_concept_pushed.png');
}

.ViewConceptList_Item_TwoCols {
  position: relative;
  float: left;
  width: calc(50% - 8px);
  height: 64px;
  background-position: center;
  background-size: 100% 100%;
  background-image: url('./images/item_concept_normal.png');
  margin-top: 1%;
  margin-bottom: 1%;
  margin-right: 8px;
  z-index: 42;
  pointer-events: auto;
}

.ViewConceptList_Item_TwoCols:hover {
  background-image: url('./images/item_concept_pushed.png');
}

.ViewConceptList_Item_TwoCols:active {
  background-image: url('./images/item_concept_pushed.png');
}

.ViewConceptList_Item_TwoCols_Selected {
  background-image: url('./images/item_concept_pushed.png');
}

.ViewConceptList_Item_Icon {
  position: absolute;
  left: 4%;
  top: 24%;
  width: 5.8%;
  height: 52%;
  background-position: center;
  background-size: 100% 100%;
  background-image: url('./images/icon_step.png');
}

.ViewConceptList_Item_Text {
  position: absolute;
  left: 12%;
  top: 28%;
  width: 80%;
  height: 50%;
  font-family: 'CLCF-Regular';
  font-size: 2.5vh;
  color: white;
  overflow: hidden;
  pointer-events: none;
}

.ViewConceptList_Item2 {
  position: relative;
  float: left;
  width: calc(100% - 16px);
  height: 64px;
  background-position: center;
  background-size: 100% 100%;
  background-image: url('./images/item_concept2_normal.png');
  margin-top: 1%;
  margin-bottom: 1%;
  z-index: 42;
  pointer-events: auto;
}

.ViewConceptList_Item2:hover {
  background-image: url('./images/item_concept2_pushed.png');
}

.ViewConceptList_Item2:active {
  background-image: url('./images/item_concept2_pushed.png');
}

.ViewConceptList_Item2_Selected {
  background-image: url('./images/item_concept2_pushed.png');
}

.ViewConceptList_Item_TwoCols2 {
  position: relative;
  float: left;
  width: calc(50% - 8px);
  height: 64px;
  background-position: center;
  background-size: 100% 100%;
  background-image: url('./images/item_concept2_normal.png');
  margin-top: 1%;
  margin-bottom: 1%;
  margin-right: 8px;
  z-index: 42;
  pointer-events: auto;
}

.ViewConceptList_Item_TwoCols2:hover {
  background-image: url('./images/item_concept2_pushed.png');
}

.ViewConceptList_Item_TwoCols2:active {
  background-image: url('./images/item_concept2_pushed.png');
}

.ViewConceptList_Item_TwoCols2_Selected {
  background-image: url('./images/item_concept2_pushed.png');
}

/* animate.css stlye rotateOnly */
@-webkit-keyframes rotateOnlyLeft {
  from {
    -webkit-transform: rotate3d(0, 0, 1, 180deg);
    transform: rotate3d(0, 0, 1, 180deg);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes rotateOnlyLeft {
  from {
    -webkit-transform: rotate3d(0, 0, 1, 180deg);
    transform: rotate3d(0, 0, 1, 180deg);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.animate__rotateOnlyLeft {
  -webkit-animation-name: rotateOnlyLeft;
  animation-name: rotateOnlyLeft;
  -webkit-transform-origin: center;
  transform-origin: center;
  animation-timing-function: linear;
}

@-webkit-keyframes rotateOnlyRight {
  from {
    -webkit-transform: rotate3d(0, 0, 1, -180deg);
    transform: rotate3d(0, 0, 1, -180deg);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes rotateOnlyRight {
  from {
    -webkit-transform: rotate3d(0, 0, 1, -180deg);
    transform: rotate3d(0, 0, 1, -180deg);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.animate__rotateOnlyRight {
  -webkit-animation-name: rotateOnlyRight;
  animation-name: rotateOnlyRight;
  -webkit-transform-origin: center;
  transform-origin: center;
  animation-timing-function: linear;
}