/*
    ************************************ 공통 레이아웃 ************************************
*/

* {padding:0; border:0; margin:0;}
html, body {height:100%; overscroll-behavior: none;}

a {text-decoration:none; color:#000000;}
a:visited {text-decoration:none; color:#000000;}
a:active {text-decoration:none; color:#000000;}
a:link {text-decoration:none; color:#000000;}

ul, ol, dl {list-style: none;}

:focus {outline:none;}


/*
    ************************************ intro ************************************
*/
.pageOutWrap {display:block; position:relative; width:100%; height:100%; overflow: hidden; background-size:cover; background-position:center center;}
/*스케일로 리사이징 되는 영역*/
.contentsOutWrap {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform-origin: top left;
}
#intro {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 100%;
    height: 100%;
    background: url("../images/introBg.png") no-repeat;
    background-size: cover;
}
#intro .bgChar {position: absolute; left: 182px; top:30px;}
#intro .startBtn {margin-top: 120px;}
#intro .fox {position: relative; z-index: 2;}
#intro .shadow {position: absolute; bottom: 0; left: 48%; transform: translateX(-50%); z-index: 1;}
#intro .introTitle {animation: introTitle 0.7s ease-in-out;}

@keyframes introTitle {
    0% {transform: scale(0.5); opacity: 0;}
    90% {transform: scale(1.05); }
    100% {transform: scale(1); opacity: 1;}

}
/*
    ************************************ 버튼 ************************************
*/
.button {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "NPSfontB";
    font-size: 36px;
    color: #fff;
    cursor: pointer;
    box-sizing: border-box;
    user-select: none;
    -webkit-tap-highlight-color : transparent;
}
.startBtn {position: relative; width: 200px;height: 72px;background: url("../images/btnBasicstart.png") no-repeat;}
.startBtn.on {background: url("../images/btnPushedStart.png") no-repeat; user-select: none;}
.startBtn:active {background: url("../images/btnPushedStart.png") no-repeat; user-select: none;}
.compBtn {width: 150px;height: 72px;background: url("../images/btnBasicComp.png") no-repeat;}
.compBtn.on {background: url("../images/btnPushedComp.png") no-repeat;}
.compBtn:active {background: url("../images/btnPushedComp.png") no-repeat;}
.compBtn.off {background: url("../images/btnNonClk.png") no-repeat; cursor: auto;}
.nextBtn {justify-content: flex-start !important; width: 150px; height: 72px; background: url("../../COMM_LH/images/btnBasicNext.png") no-repeat; padding: 0 30px; }
.nextBtn.on {background: url("../../COMM_LH/images/btnPushedNext.png")no-repeat;  }
.nextBtn:active {background: url("../../COMM_LH/images/btnPushedNext.png")no-repeat;  }
.nextBtn.off {background: url("../../COMM_LH/images/btnNonClkNext.png")no-repeat; cursor: auto;}
.reBtn {justify-content: flex-start !important; width: 245px; height: 72px; background: url("../../COMM_LH/images/btnBasicRe.png") no-repeat; padding: 0 30px;}
.reBtn.on { background: url("../../COMM_LH/images/btnPushedRe.png")no-repeat; }
.reBtn:active { background: url("../../COMM_LH/images/btnPushedRe.png")no-repeat; }

.startBtn::after {content: '시작하기';}
.compBtn::after {content: '완료';}
.nextBtn::after {content: '다음';}
.reBtn::after {content: '다시 하기';}