@charset "UTF-8";
/* CSS Document */
* {
  margin: 0;
  padding: 0;
  font-family: "Nanum Gothic Coding", monospace;
}
/* start */
.start_box {position: absolute; width: 100%; text-align: center; top: 0; bottom: 0; background-size: 100%; text-align: center;}
.start_box img {height: 100%;}
.bg_start{position: absolute; width: 100%; height:100%; z-index: 1;}
.rocket {position: absolute; width: 100%; height:100%; z-index: 10; top:0; cursor: pointer;}
.rocket.on{-moz-animation: rocket 1s infinite alternate; -webkit-animation: rocket 1s infinite alternate; animation: rocket 1s infinite alternate;}
.btn_start {position: absolute; width: 100%; height:100%; z-index: 100; top:0; cursor: pointer;}
.wrap {text-align: center;}

a {display: block;}
.step_02,.step_03,.step_04,.step_05,.step_06,.step_07,.step_08,.step_09,.step_10,.step_11,.step_12{display: none;}
/* step_01 */
.step_01 {position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: hidden; text-align: center; display: none;}
.step_01 .talk_01 {position: absolute; width: 100%; top: 0; bottom: 0; text-align: center; background: none;}
.step_01 .talk_01 img {height: 100%;}
.step_01 .talk_02 {position: absolute; width: 100%; top: 0; bottom: 0; text-align: center; display: none;}
.step_01 .talk_02 img {height: 100%;}
.step_01 .finger_s01 {position: absolute; width: 100%; top: 0; bottom: 0; text-align: center; background: none; display: none; cursor: pointer;}
.step_01 .finger_s01 img { position: absolute; left: 50%; height: 100%; -moz-animation: finger02 1s infinite alternate; -webkit-animation: finger02 1s infinite alternate; animation: finger02 1s infinite alternate; transform: translateX(-50%); -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%);}

/* step_02 */
.step_02 {position: absolute; left: 0;top: 0; right: 0;bottom: 0;overflow: hidden; text-align: center;}
.step_02 .talk_01 { position: absolute;width: 100%; top: 0; bottom: 0;text-align: center;background: none;}
.step_02 .talk_01 img {height: 100%;}
.step_02 .talk_02 { position: absolute;width: 100%; top: 0; bottom: 0;text-align: center;background: none; display: none;}
.step_02 .talk_02 img {height: 100%;}
.step_02 .talk_03 { position: absolute;width: 100%; top: 0; bottom: 0;text-align: center;background: none; display: none;}
.step_02 .talk_03 img {height: 100%;}
.step_02 .finger_s01 {position: absolute; width: 100%;top: 0;bottom: 0;text-align: center; background: none; display: none; cursor: pointer;}
.step_02 .finger_s01 img { position: absolute; left: 50%; height: 100%; -moz-animation: finger02 1s infinite alternate; -webkit-animation: finger02 1s infinite alternate; animation: finger02 1s infinite alternate; transform: translateX(-50%); -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%);}

/* step_03 */
.step_03 {position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: hidden; text-align: center;}
.step_03 .talk_01 {position: absolute; width: 100%; top: 0; bottom: 0; text-align: center; background: none;}
.step_03 .talk_01 img {height: 100%;}
.step_03 .finger_s01 {position: absolute; width: 100%; top: 0; bottom: 0; text-align: center; background: none; cursor: pointer;}
.step_03 .finger_s01 img { position: absolute; left: 50%; height: 100%; -moz-animation: finger02 1s infinite alternate; -webkit-animation: finger02 1s infinite alternate; animation: finger02 1s infinite alternate; transform: translateX(-50%); -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%);}

/* step_04 */
.step_04 {position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: hidden; text-align: center;}
.step_04 .talk_01 {position: absolute; width: 100%; top: 0; bottom: 0; text-align: center; background: none;}
.step_04 .talk_01 img {height: 100%;}
.step_04 .talk_02 {position: absolute; width: 100%; top: 0; bottom: 0; text-align: center; background: none; display:none;}
.step_04 .talk_02 img {height: 100%;}
.step_04 .talk_03 {position: absolute; width: 100%; top: 0; bottom: 0; text-align: center; background: none; display:none;}
.step_04 .talk_03 img {height: 100%;}
.step_04 .finger_s01 {position: absolute; width: 100%; top: 0; bottom: 0; text-align: center; background: none; cursor: pointer;}
.step_04 .finger_s01 img { position: absolute; left: 50%; height: 100%; -moz-animation: finger02 1s infinite alternate; -webkit-animation: finger02 1s infinite alternate; animation: finger02 1s infinite alternate; transform: translateX(-50%); -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%);}
.step_04 .finger_s02 {position: absolute; width: 100%; top: 0; bottom: 0; text-align: center; background: none; cursor: pointer; display: none;}
.step_04 .finger_s02 img { position: absolute; left: 50%; height: 100%; -moz-animation: finger02 1s infinite alternate; -webkit-animation: finger02 1s infinite alternate; animation: finger02 1s infinite alternate; transform: translateX(-50%); -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%);}

/* step_05 */
.step_05 {position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: hidden; text-align: center;}
.step_05 .talk_01 {position: absolute; width: 100%; top: 0; bottom: 0; text-align: center; background: none;}
.step_05 .talk_01 img {height: 100%;}
.step_05 .talk_02 {position: absolute; width: 100%; top: 0; bottom: 0; text-align: center; background: none; display:none;}
.step_05 .talk_02 img {height: 100%;}
.step_05 .talk_03 {position: absolute; width: 100%; top: 0; bottom: 0; text-align: center; background: none; display:none;}
.step_05 .talk_03 img {height: 100%;}
.step_05 .finger_s01 {position: absolute; width: 100%; top: 0; bottom: 0; text-align: center; background: none; cursor: pointer;}
.step_05 .finger_s01 img { position: absolute; left: 50%; height: 100%; -moz-animation: finger02 1s infinite alternate; -webkit-animation: finger02 1s infinite alternate; animation: finger02 1s infinite alternate; transform: translateX(-50%); -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%);}
.step_05 .finger_s02 {position: absolute; width: 100%; top: 0; bottom: 0; text-align: center; background: none; cursor: pointer; display: none;}
.step_05 .finger_s02 img { position: absolute; left: 50%; height: 100%; -moz-animation: finger02 1s infinite alternate; -webkit-animation: finger02 1s infinite alternate; animation: finger02 1s infinite alternate; transform: translateX(-50%); -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%);}

/* step_06 */
.step_06 {position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: hidden; text-align: center;}
.step_06 .talk_01 {position: absolute; width: 100%; top: 0; bottom: 0; text-align: center; background: none;}
.step_06 .talk_01 img {height: 100%;}
.step_06 .finger_s01 {position: absolute; width: 100%; top: 0; bottom: 0; text-align: center; background: none; cursor: pointer; display:none;}
.step_06 .finger_s01 img { position: absolute; left: 50%; height: 100%; -moz-animation: finger02 1s infinite alternate; -webkit-animation: finger02 1s infinite alternate; animation: finger02 1s infinite alternate; transform: translateX(-50%); -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%);}
.step_06 .video {position: absolute; width: 100%; top: 0; bottom: 0; text-align: center; background: none; display: none;}
.step_06 .video video{height: 100%;}

/* step_07 */
.step_07 {position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: hidden; text-align: center;}
.step_07 .talk_01 {position: absolute; width: 100%; top: 0; bottom: 0; text-align: center; background: none;}
.step_07 .talk_01 img {height: 100%;}

/* step_08 */
.step_08 {position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: hidden; text-align: center;}
.step_08 .talk_01 {position: absolute; width: 100%; top: 0; bottom: 0; text-align: center; background: none;}
.step_08 .talk_01 img {height: 100%;}
.step_08 .finger_s01 {position: absolute; width: 100%; top: 0; bottom: 0; text-align: center; background: none; cursor: pointer; display:none;}
.step_08 .finger_s01 img { position: absolute; left: 50%; height: 100%; -moz-animation: finger02 1s infinite alternate; -webkit-animation: finger02 1s infinite alternate; animation: finger02 1s infinite alternate; transform: translateX(-50%); -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%);}
.step_08 .finger_s02 {position: absolute; width: 100%; top: 0; bottom: 0; text-align: center; background: none; cursor: pointer; display:none;}
.step_08 .finger_s02 img { position: absolute; left: 50%; height: 100%; -moz-animation: finger02 1s infinite alternate; -webkit-animation: finger02 1s infinite alternate; animation: finger02 1s infinite alternate; transform: translateX(-50%); -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%);}
.step_08 .finger_s03 {position: absolute; width: 100%; top: 0; bottom: 0; text-align: center; background: none; cursor: pointer; display:none;}
.step_08 .finger_s03 img { position: absolute; left: 50%; height: 100%; -moz-animation: finger02 1s infinite alternate; -webkit-animation: finger02 1s infinite alternate; animation: finger02 1s infinite alternate; transform: translateX(-50%); -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%);}
.step_08 .finger_s04 {position: absolute; width: 100%; top: 0; bottom: 0; text-align: center; background: none; cursor: pointer; display:none;}
.step_08 .finger_s04 img { position: absolute; left: 50%; height: 100%; -moz-animation: finger02 1s infinite alternate; -webkit-animation: finger02 1s infinite alternate; animation: finger02 1s infinite alternate; transform: translateX(-50%); -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%);}
.train{display: none; position: absolute; top: 0; bottom:0; text-align: center; background:url("./images/009_02.png") center top no-repeat; background-size: auto 100%; overflow: hidden; left: 50%;
       transform: translateX(-50%); -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%);
	   -moz-animation: train 2s alternate; -webkit-animation: train 2s alternate; animation: train 2s  alternate;}
.train.on{background:url("./images/009_03.png") center top no-repeat; background-size: auto 100%; -moz-animation: train_02 2s 2s alternate forwards; -webkit-animation: train_02 2s 2s alternate forwards; animation: train_02 2s 2s alternate forwards;}
.train.on.ch{background:url("./images/009_04.png") 88% top no-repeat; background-size: auto 100%;}
.train_02, .train_03{display:none;}

/* step_09 */
.step_09 {position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: hidden; text-align: center;}
.step_09 .talk_01 {position: absolute; width: 100%; top: 0; bottom: 0; text-align: center; background: none;}
.step_09 .talk_01 img {height: 100%;}
.step_09 .finger_s01 {position: absolute; width: 100%; top: 0; bottom: 0; text-align: center; background: none; cursor: pointer; display:none;}
.step_09 .finger_s01 img { position: absolute; left: 50%; height: 100%; -moz-animation: finger02 1s infinite alternate; -webkit-animation: finger02 1s infinite alternate; animation: finger02 1s infinite alternate; transform: translateX(-50%); -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%);}
.step_09 .video {position: absolute; width: 100%; top: 0; bottom: 0; text-align: center; background: none; display: none;}
.step_09 .video video{height: 100%;}

/* step_10 */
.step_10 {position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: hidden; text-align: center;}
.step_10 .talk_01 {position: absolute; width: 100%; top: 0; bottom: 0; text-align: center; background: none;}
.step_10 .talk_01 img {height: 100%;}
.step_10 .sin_01,.step_10 .sin_02,.step_10 .sin_03,.step_10 .sin_04,.step_10 .sin_05,.step_10 .sin_06,.step_10 .sin_07,.step_10 .sin_08,.step_10 .sin_09 {position: absolute; width: 100%; top: 0; bottom: 0; text-align: center; background: none; display:none;}
.step_10 img {height: 100%;}
.step_10 .sin_01{display:none;}
.step_10 .finger_s01 {position: absolute; width: 100%; top: 0; bottom: 0; text-align: center; background: none; cursor: pointer; display:none;}
.step_10 .finger_s01 img { position: absolute; left: 50%; height: 100%; -moz-animation: finger02 1s infinite alternate; -webkit-animation: finger02 1s infinite alternate; animation: finger02 1s infinite alternate; transform: translateX(-50%); -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%);}
.step_10 .finger_s02 {position: absolute; width: 100%; top: 0; bottom: 0; text-align: center; background: none; cursor: pointer; display:none;}
.step_10 .finger_s02 img { position: absolute; left: 50%; height: 100%; -moz-animation: finger02 1s infinite alternate; -webkit-animation: finger02 1s infinite alternate; animation: finger02 1s infinite alternate; transform: translateX(-50%); -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%);}
.step_10 .finger_s03 {position: absolute; width: 100%; top: 0; bottom: 0; text-align: center; background: none; cursor: pointer; display:none;}
.step_10 .finger_s03 img { position: absolute; left: 50%; height: 100%; -moz-animation: finger02 1s infinite alternate; -webkit-animation: finger02 1s infinite alternate; animation: finger02 1s infinite alternate; transform: translateX(-50%); -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%);}
.step_10 .finger_s04 {position: absolute; width: 100%; top: 0; bottom: 0; text-align: center; background: none; cursor: pointer; display:none;}
.step_10 .finger_s04 img { position: absolute; left: 50%; height: 100%; -moz-animation: finger02 1s infinite alternate; -webkit-animation: finger02 1s infinite alternate; animation: finger02 1s infinite alternate; transform: translateX(-50%); -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%);}
.step_10 .finger_s05 {position: absolute; width: 100%; top: 0; bottom: 0; text-align: center; background: none; cursor: pointer; display:none;}
.step_10 .finger_s05 img { position: absolute; left: 50%; height: 100%; -moz-animation: finger02 1s infinite alternate; -webkit-animation: finger02 1s infinite alternate; animation: finger02 1s infinite alternate; transform: translateX(-50%); -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%);}
.step_10 .finger_s06 {position: absolute; width: 100%; top: 0; bottom: 0; text-align: center; background: none; cursor: pointer; display:none;}
.step_10 .finger_s06 img { position: absolute; left: 50%; height: 100%; -moz-animation: finger02 1s infinite alternate; -webkit-animation: finger02 1s infinite alternate; animation: finger02 1s infinite alternate; transform: translateX(-50%); -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%);}

/* step_11 */
.step_11 {position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: hidden; text-align: center;}
.step_11 .talk_01,.step_11 .talk_02 {position: absolute; width: 100%; top: 0; bottom: 0; text-align: center; background: none;}
.step_11 .talk_01 img {height: 100%;}
.step_11 .talk_03, .step_11 .talk_04, .step_11 .talk_05, .step_11 .talk_06, .step_11 .talk_07, .step_11 .talk_08, .step_11 .talk_09, .step_11 .talk_10, .step_11 .talk_11 {position: absolute; width: 100%; top: 0; bottom: 0; text-align: center; background: none; display: none;}
.step_11 img {height: 100%;}

/* step_12 */
.step_12 {position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: hidden; text-align: center;}
.step_12 .talk_01{position: absolute; width: 100%; top: 0; bottom: 0; text-align: center; background: none;}
.step_12 .talk_01 img {height: 100%;}
.step_12 .talk_02{position: absolute; width: 100%; top: 0; bottom: 0; text-align: center; background: none; display: none;}
.step_12 img {height: 100%;}
/* Landscape mode */
@media only screen and (orientation: landscape) {
  .port {
    display: none;
  }
  .wrap {
    background: #333;
    position: fixed;
    width: 100%;
    top: 0;
    bottom: 0;
  }
}

/* Portrait mode */
@media only screen and (orientation: portrait) {
  .wrap {
    display: none;
  }
  .port {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background: #ccc;
  }
  .popup_p {
    position: absolute;
    width: 252px;
    height: 240px;
    left: 50%;
    top: 50% !important;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    background: #fff;
    border-radius: 25px;
    padding: 40px 20px 30px 20px;
  }
  .p_img {
    width: 100%;
    text-align: center;
  }
  .p_txt {
    padding-top: 24px;
    font-size: 17px;
    line-height: 30px;
    font-weight: bold;
    text-align: center;
    color: #555;
  }
}


.b0{background:url("./images/009_03.png") center top no-repeat; position: absolute; width:120px; height:800px; left:-100000000000px;}
.b1{background:url("./images/009_04.png") top no-repeat; position: absolute; width:120px; height:800px; left:-100000000000px;}
/*animation*/
@keyframes rocket {
  0% {
    top: 0;
  }
	
  100% {
    top: -150px;
  }
}
@keyframes train {
  0% {
    background-position: left;
  }
	
  100% {
    background-position: center;
  }
}

@keyframes train_02 {
  0% {
    background-position: center;
  }
	
  100% {
    background-position: 88%;
  }
}

@keyframes finger02 {
  0% {
    bottom: 0;
  }
  50% {
    bottom: -10px;
  }
  100% {
    bottom: 0;
  }
}

@keyframes finger03 {
  0% {
    bottom: -15%;
  }
  50% {
    bottom: -20%;
  }
  100% {
    bottom: -15%;
  }
}