@charset "UTF-8";
.cl_btnArea { display: flex; justify-content: center; align-items: center; width: 153px; height: 36px; border-radius: 20px; background-color: #ffb400; font-size: 16px; color: #232426;  font-family: 'SCDream5'; cursor: pointer;}
body,html { width: 100%; height: 100vh; overflow: hidden;}
.pageOutWrap { position: absolute; width: 920px; height: 400px; overflow: hidden ; transform-origin: top left;}
.signRoadmap { display: flex;  background-color: #dbeaba }
.signRoadmap .bgArea { position: relative; margin-right:35px;}
.signRoadmap .bgArea .bg{ width: 480px;}
.signRoadmap .cha{ position: absolute; top: 15px; left: 108px;;}
.signRoadmap .cha img { width: 52px;}
.signRoadmap .cha.change { transform: scaleX(-1)}

.signRoadmap  .cha.step1 { animation: move1 1.2s ease-in-out forwards;}
.signRoadmap  .cha.step2 { animation: move2 1.2s ease-in-out forwards;}
.signRoadmap  .cha.step3 { animation: move3 1.4s ease-in-out forwards;}
.signRoadmap  .cha.step4 { animation: move4 1.6s ease-in-out forwards;}
.signRoadmap  .cha.step5 { animation: move5 1.2s ease-in-out forwards;}
.signRoadmap  .cha.step6 { animation: move6 1.6s ease-in-out forwards;}

@keyframes move1 {
    0%{
        top: 15px;
        left: 108px;
    }
    100%{
        top: 39px;
        left: 173px;
    }
}
@keyframes move2 {
    0%{
        top: 39px;
        left: 173px;
    }
    100%{
        top: 83px;
        left: 268px;
    }
}
@keyframes move3 {
    0%{
        top: 83px;
        left: 268px;
    }
    50%{
        top: 141px;
        left: 246px;
    }
    100%{
        top: 132px;
        left: 188px;
    }
}
@keyframes move4 {
    0%{
        top: 132px;
        left: 188px;
    }
    50%{
        top: 148px;
        left: 95px;
    }
    100%{
        top: 184px;
        left: 95px;
    }
}
@keyframes move5 {
    0%{
        top: 184px;
        left: 95px;
    }
    50%{
        top: 226px;
        left: 148px;
    }
    100%{
        top: 226px;
        left: 189px;
    }
}
@keyframes move6 {
    0%{
        top: 226px;
        left: 189px;
    }
    50%{
        top: 247px;
        left: 237px;
    }
    100%{
        top: 289px;
        left: 220px;
    }
}



.signRoadmap .selectArea { position: relative; padding-top: 75px; flex: 1; /*width: 400px; height: 380px; border:4px dashed #eff0f2; border-radius: 20px;*/}
/*
.signRoadmap .startText {  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); white-space: nowrap; text-align: center;}
.signRoadmap .startText .startTit { font-size: 24px; color: #232426; font-family: 'SCDream5'; margin-bottom: 28px;}
.signRoadmap .startText .startBtn { display: flex; justify-content: center; align-items: center; width: 274px; height: 48px; border-radius: 10px; font-size: 24px; color: #fff; font-family: 'SUIT-M'; background-color: #275ce7; cursor: pointer;}*/
.signRoadmap .cl_btnArea.startBtn { position: absolute; top: 50%; left: 80px; transform: translateY(-50%); display: flex;}
.signRoadmap .gameBg { position: relative; display: none; flex-direction: column; }
.signRoadmap .gameBg .title {position: absolute;top: -160px; text-align: left; font-size: 24px; color: #232426; font-family: 'SCDream5'; margin-bottom: 10px;}

.signRoadmap .gameBg .road img { width: 273px;}

.signRoadmap .gameBg .sign { position: absolute; top: 110px; width: 100%; display: none ;animation: blink 1.5s infinite;}
/*@keyframes blink {
    0%{opacity: 1}
    50%{opacity: 0}
    100%{ opacity: 1}

}*/
.signRoadmap .gameBg .sign.none { animation: none;}
.signRoadmap .gameBg .sign.show { display: block;}
.signRoadmap .gameBg .sign .signIcon { position: relative; cursor: pointer;}
.signRoadmap .gameBg .sign .signIcon.left{ left: 0;}
.signRoadmap .gameBg .sign .signIcon.right{ left: 159px;}
.signRoadmap .gameBg .sign .signIcon img { width: 116px; position: absolute;}

.signRoadmap .gameBg .sign .signIcon .on { display: none;}
.signRoadmap .gameBg .sign .signIcon.on .off{ display: none;}
.signRoadmap .gameBg .sign .signIcon.on .on{ display: block; top: -2px; left: -2px; width: 120px;}
.signRoadmap .gameBg .sign .signIcon .text { position: absolute; top: 9px;left: 1px; font-size: 30px; color: #232426; font-family: 'SCDream5';}
.signRoadmap .gameBg .sign .signIcon .text.type1 { left: 14px;}
.signRoadmap .gameBg .hideBg { display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: transparent; z-index: 99999;}



.signRoadmap .gameBg .nextBtn { position: absolute; top: 163px; right: 19px; pointer-events: none; background-color:#ffffff; color:#6a6d73;  }
.signRoadmap .gameBg .nextBtn.show { pointer-events: auto;cursor: pointer;  background-color: #ffb400; color: #232426;}

.signRoadmap .alertBg {display: none; position: absolute; bottom: 43px; left: 34%; transform: translateX(-50%);}
.signRoadmap .alertBg .alert { display: flex; justify-content: center; align-items: center; width: 220px; height: 64px; background-color: rgba(35,36,38,0.5);font-size: 16px;  font-family: 'SUIT-B'; color: #fff; border-radius: 10px; }
.signRoadmap .alertBg .alert img { width: 31px; margin-right: 12px;}


.alertBg {display: none; justify-content: center; align-items: center; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.6); z-index: 9999;}
.alertBg .alert { display: flex; justify-content: center; align-items: center; flex-direction: column; width: 235px; height: 180px; background-color: #ffffff; font-size: 16px;  font-family: 'SUIT-B'; color: #232426; border-radius: 10px; }
.alertBg .alert img { width: 31px; margin-bottom: 15px;}
.alertBg .alert .closeBtn { font-size: 14px; color: #fff; padding: 8px 20px; box-sizing: border-box; background-color: #232426; margin-top: 15px;border-radius: 15px; cursor: pointer;}







/*

.selectBox {display: none;}

.selectBox .select .selectIcon{ display: flex; justify-content: center; align-items: center; margin-bottom: 50px;}
.selectBox .select .selectIcon:last-child { margin-bottom: 0;}
.selectBox .select .selectIcon .img { position: relative;width: 175px; margin-right: 50px; cursor: pointer;}
.selectBox .select .selectIcon .img .roundBg { display: none;position: absolute; top: 0; left: 0; width: 175px; height: 175px; border: 5px solid #1e6efa; box-sizing: border-box; border-radius: 100%; z-index: 9}
.selectBox .select .selectIcon .img.on .roundBg { display: block;}
.selectBox .select .selectIcon .img:last-child { margin-right: 0;}
.selectBox .select .selectIcon .img img { width: 100%;}

.ansBox { display: none; }
*/