@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;
}