@charset "UTF-8";

/* z-index */
/* 
    * modal: 10000
    * menu: 9000
    * float: 8000
    * guide: 20
    * nodes: 1~15
    * scroll-guide: 1
    * flag: 1
    * dice: 1
*/

/* Lesson 1 */

#scene2 .grp-dice .obj-sp-dice {
    background: url(../img/map/img-dice-ani-1.webp) 0 0 / 4872px 540px no-repeat;
}

/* Scene 3 - M1 */
#scene3 .background {
    height: 1040px;
    background: #85cf51 url(../img/1-m1/bg-1-m1.webp) 50% 50% / auto 100% no-repeat;
}

#scene3 .obj-guide {
    left: 930px;
    top: 500px;
}

#scene3 #scene3_guide {
    opacity: 0;
}
#scene3 #scene3_guide.animated {
    opacity: 1;
    animation: ky-finger-move 3s 2;
}

#scene3 .grp-map {
    position: absolute;
    top: 340px;
    left: -76px;
    width: 700px;
    height: 667px;
    background: url(../img/1-m1/bg-map.webp) 50% 50% / 100% auto no-repeat;
}

#scene3 .grp-map .obj-pin {
    position: absolute;
    top: 30px;
    left: 50%;
    margin-left: -30px;
    width: 59px;
    height: 63px;
    background: url(../img/1-m1/bg-pin.webp) 50% 50% / 100% auto no-repeat;
}

#scene3 .grp-map .obj-drop-here {
    right: 90px;
    top: 300px;
    width: 80px;
    height: 80px;
    opacity: .5;
}

#scene3 .obj-spot {
    position: absolute;
    top: 355px;
    left: 873px;
    width: 230px;
    height: 249px;
    background: url(../img/1-m1/img-flag-spot.webp) 50% 50% / 100% auto no-repeat;
}

#scene3 .obj-null-point {
    top: 564px;
    left: 873px;
    width: 40px;
    height: 40px;
    z-index: 1;
}

#scene3 .obj-null-point .obj-flag {
    bottom: 9px;
    left: 8px;
    width: 212px;
    height: 231px;
    background: url(../img/1-m1/img-flag-korea.webp) 50% 50% / 100% auto no-repeat;
    transform-origin: left bottom;
}

#scene3 .grp-hint {
    position: absolute;       
    top: 570px;
    left: 660px;
}

#scene3 .item-hint {
    position: relative;
    margin-top: 58px;
    width: 580px;
    height: 85px;
    background: url(../img/1-m1/hint-close-1.webp) 0 0 / 100% auto no-repeat;
    
}
#scene3 .item-hint::before {
    content: '';
    position: absolute;
    top: 4px;
    left: 12px;
    margin: -4px;
    width: 1px;
    height: 84px;
    box-sizing: border-box;
    overflow: hidden;
    transition: all 0.3s ease-in-out;
    white-space: nowrap;
}
#scene3 .item-hint.opened::before {
    width: 100%;
}
#scene3 .item1.opened::before {
    background: url(../img/1-m1/hint-open-1.webp) 0 0 / auto 100% no-repeat;
}
#scene3 .item2.opened::before {
    background: url(../img/1-m1/hint-open-2.webp) 0 0 / auto 100% no-repeat;
}
#scene3 .item3.opened::before {
    background: url(../img/1-m1/hint-open-3.webp) 0 0 / auto 100% no-repeat;
}

#scene3 .obj-envalop {
    top: -60px;
    left: -55px;
    width: 148px;
    height: 154px;
    cursor: pointer;
}
#scene3 .item1.help .obj-envalop,
#scene3 .item3.help .obj-envalop  {
    animation: headShake 1s 5;
}

#scene3 .item2.help .obj-envalop {
    animation: headShake 1s 5 .5s;
}

#scene3 .item1 .obj-envalop {
    background: url(../img/1-m1/img-envalop-closed-1.webp) 50% 50% / 100% auto no-repeat;
}
#scene3 .item2 .obj-envalop {
    background: url(../img/1-m1/img-envalop-closed-2.webp) 50% 50% / 100% auto no-repeat;
}
#scene3 .item3 .obj-envalop {
    background: url(../img/1-m1/img-envalop-closed-3.webp) 50% 50% / 100% auto no-repeat;
}
#scene3 .item-hint.opened .obj-envalop {
    background: url(../img/1-m1/img-envalop-open.webp) 50% 50% / 100% auto no-repeat;
    cursor: default;
}

/* Scene 4 - M1-1 */
#scene4 .background {
    height: 1040px;
    background: #51b9d3 url(../img/1-m1/pt-wave.png) 0 0 / 318px auto repeat;
}

#scene4 .obj-guide {
    left: 480px;
    top: 410px;
    z-index: 1;
}

#scene4 #scene4_guide {
    opacity: 0;
}
#scene4 #scene4_guide.animated {
    opacity: 1;
    animation: ky-finger-blink 1s infinite;
}

#scene4 .quiz-panel {
    position: absolute;
    top: 0;
    width: 100%;
    margin: 60px auto 0;
    padding: 34px 0;
    background-color: rgba(13,150,184,.5);
}

#scene4 .quiz-panel p {
    width: 100%;
    margin: 0 auto;
    margin-bottom: 10px;
    white-space: nowrap;
}
#scene4 .quiz-panel p:nth-child(1) {
    height: 37px;
    transition-delay: 400ms;
    background: url(../img/1-m1/desc-1.webp) 50% 0 / auto 100% no-repeat;
}
#scene4 .quiz-panel p:nth-child(2) {
    height: 35px;
    transition-delay: 800ms;
    background: url(../img/1-m1/desc-2.webp) 50% 0 / auto 100% no-repeat;
}
#scene4 .quiz-panel p:nth-child(3) {
    height: 44px;
    transition-delay: 1200ms;
    background: url(../img/1-m1/desc-3.webp) 50% 0 / auto 100% no-repeat;
}

/* 독도 호버 Trick */
#scene4 .dokdo-wrapper {
    position: absolute;
    left: -133px;
    top: 325px;
    width: 908px;
    height: 461px;
    background: url(../img/1-m1/img-dokdo.webp) 50% 50% / 100% auto no-repeat;
}

#scene4 .dokdo-wrapper .svg-item {
    position: absolute;
    width: 10px;
    height: 10px;
    background-color: rgba(100,155,61,.6);
    opacity: 0;
}

#scene4 .dokdo-wrapper .svg-embed {
    position: absolute;
    left: 14px;
    top: -2px;
    width: 100%;
    height: 100%;
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    z-index: 1;
}

#scene4 .dokdo-wrapper .svg-item.east,
#scene4 .dokdo-wrapper .svg-item.west {
    cursor: pointer;
    opacity: 0;
    transition: opacity .5s;
    z-index: 3;
}
#scene4 .dokdo-wrapper .svg-item + .name {
    opacity: 0;
}

#scene4 .dokdo-wrapper .svg-item:hover {
    opacity: 1;
}
#scene4 .dokdo-wrapper .svg-item:hover + .name {
    opacity: 1;
}
#scene4 .dokdo-wrapper .svg-item.active {
    animation: flash 4s infinite;
}
#scene4 .dokdo-wrapper .svg-item.active + .name {
    animation: flash 4s infinite;
}

#scene4 .cover {
    top: auto;
    bottom: 0;
    height: 315px;
    background: url(../img/1-m1/bg-conc.webp) bottom 0 left 50% / 100% auto no-repeat;
}

#scene4 .obj-bird {
    left: 315px;
    bottom: 154px;
    width: 185px;
    height: 158px;
    background: url(../img/1-m1/img-bird.webp) 50% 50% / 100% auto no-repeat;
}

#scene4 .cover div[class^="obj-sign-"] {
    display: none;
    position: absolute;
    left: 1052px;
    bottom: 70px;
    width: 550px;
    height: 404px;
}
#scene4 .cover div[class^="obj-sign-non"] {
    display: block;
    background: url(../img/1-m1/img-sign-0.webp) 50% 50% / 100% auto no-repeat;
    animation: shakeY 1.5s 1 ease-in-out;
}
#scene4 .cover .obj-sign-east {
    background: url(../img/1-m1/img-sign-1.webp) 50% 50% / 100% auto no-repeat;
    animation: shakeY 1.5s 1 ease-in-out;
}
#scene4 .cover .obj-sign-west {
    background: url(../img/1-m1/img-sign-2.webp) 50% 50% / 100% auto no-repeat;
    animation: shakeY 1.5s 1 ease-in-out;
}

#scene4 .cover div[class^="obj-answer"] {
    display: none;
    position: absolute;
    left: 1178px;
    bottom: 490px;
    width: 379px;
    height: 293px;
}
#scene4 .cover .obj-answer-east {
    background: url(../img/1-m1/img-answer-1.webp) 50% 50% / 100% auto no-repeat;
    animation: tada 2s ease-out 2;
    transform-origin: bottom center;
    
}
#scene4 .cover .obj-answer-west {
    background: url(../img/1-m1/img-answer-2.webp) 50% 50% / 100% auto no-repeat;
    animation: tada 2s ease-out 2;
    transform-origin: bottom center;
}

/* Scene 5 - M2 */
#scene5 .background {
    height: 1040px;
    background: #43d38f url(../img/1-m2/bg-scene-5.webp) 50% 50% / auto 100% no-repeat;
}

#scene5 .obj-air,
#scene5 .obj-air-light {
    left: 423px;
    top: 295px;
    width: 415px;
    height: 130px;
    background: url(../img/1-m2/img-on-air.webp) 50% 50% / 383px auto no-repeat;
}
#scene5 .obj-air-light {
    background: url(../img/1-m2/img-on-air-light.webp) 50% 50% / 383px auto no-repeat;
    animation: flash 5s infinite;
}

#scene5 .obj-wifi {
    left: 3px;
    top: 337px;
    width: 132px;
    height: 131px;
    background: url(../img/1-m2/bg-wifi.webp) 50% 50% / 100% auto no-repeat;
}

#scene5 .grp-vid {
    position: absolute;
    bottom: 0;
    width: 1260px;
    height: 614px;
    margin: 0 auto;
    background: url(../img/1-m2/bg-vcr.webp) 50% 50% / 100% auto no-repeat;
}

#scene5 .grp-vid .vid-wrap {
    width: 1066px;
    height: 563px;
    padding: 12px 10px;
    margin: 0 auto;
    border-radius: 27px;
    overflow: hidden;
}

#scene5 .grp-vid .vid-wrap iframe {
    width: 100%;
    height: 100%;
}

#scene5 .grp-vid .btn-play-vid {
    display: block;
    position: absolute;
    left: 50%;
    top: 230px;
    width: 140px;
    height: 131px;
    margin-left: -70px;
    background: url(../img/1-m2/btn-play.webp) 50% 50% / 140px auto no-repeat;
    animation: tada 2s infinite;
}

#scene5 .obj-help {
    right: -180px;
    bottom: 0;
    width: 386px;
    height: 377px;
    pointer-events: none;
}

#scene5 .obj-bird-wing {
    left: 70px;
    bottom: 40px;
    width: 123px;
    height: 110px;
    background: url(../img/1-m2/bird-wing.webp) 50% 50% / 100% auto no-repeat;
    animation: ky-wing .5s infinite forwards alternate;
    transform-origin: bottom right;
}

#scene5 .obj-bird {
    left: 120px;
    bottom: 0px;
    width: 201px;
    height: 206px;
    background: url(../img/1-m2/bird.webp) 50% 50% / 100% auto no-repeat;
}

#scene5 .obj-talk {
    left: -20px;
    top: 20px;
    width: 386px;
    height: 152px;
    background: url(../img/1-m2/bird-talk.webp) 50% 50% / 100% auto no-repeat;
    animation: jello 1s 3;
    transform-origin: center bottom;
}