#pwsadari {
    width: 830px; height: 646px;
    background-image: url('/resource/images/escapesadari/bg.png?v=10');
    background-repeat: no-repeat;
    background-position: center;
    position: relative;
}
#pwsadari #wait {
    width: 396px; height: 78px; opacity: 1;
    border: 3px solid #9ccef8; border-radius: 42px;
    background-color: #1e0c27;
    /*background-image: url('/resource/images/escapesadari/wait_bg.png?v=10');
    background-repeat: no-repeat;
    background-position: center;*/
    position: absolute; top: 50%; left: 50%;
    -webkit-transform: translate(-50%, -50%);
    overflow: hidden;
}

#pwsadari .wait-text {
    text-align: center; line-height: 84px;
    color: #aa9be5; font-size: 1.2rem; font-weight: 900;
    -webkit-text-stroke: 1px #3a3f54;
    position: relative;
}
#pwsadari .wait-bar {
    width: 394px; height: 76px; /*opacity: 1;*/
    background-image: url('/resource/images/escapesadari/wait_bar.png?v=10');
    background-repeat: no-repeat;
    background-position: center;
    position: absolute; top: 1px; right: 402px;
}
#pwsadari #round {
    font-size: 1.2rem;
}

#pwsadari .sadari {
    width: 210px; height: 312px;
    position: absolute; top: 57%; left: 50%;
    -webkit-transform: translate(-50%, -50%);

    background-image: url('/resource/images/escapesadari/line_3.png?v=10');
    background-repeat: no-repeat;
}
#pwsadari .result_txt {
    width: 127px; height: 30px; opacity: 1;
    position: absolute; top: 96px; left: 351px;
    /*-webkit-transform: translate(-50%, -50%);*/
    text-align: center; font-size: .9rem; font-weight: 800; line-height: 30px;
    background-color: transparent; color: #faeb00;
    -webkit-text-stroke: 1px #e1660c;

    animation-duration: .3s;
    animation-fill-mode: forwards;
    animation-timing-function: linear;
}
#pwsadari .character {
    width: 71px; height: 109px;
    position: absolute;
}
#pwsadari .character.c_blue {
    background-image: url('/resource/images/escapesadari/character_blue.png?v=10');
    top: 210px; left: 230px; display: none;
}
#pwsadari .character.c_red {
    background-image: url('/resource/images/escapesadari/character_red.png?v=10');
    top: 210px; left: 525px; display: none;
}
#pwsadari .character.c_blue.active_l3e {
    /* 좌3짝 */
    animation-duration: 10s;
    animation-fill-mode: forwards;
    animation-timing-function: linear;
    animation-name: motion_l3e;
}
@keyframes motion_l3e {
    0% { top: 245px; left: 230px; opacity: 0; }
    20% { top: 245px; left: 230px; opacity: 1; }
    30% { top: 245px; left: 525px; }
    35% { top: 320px; left: 525px; }
    45% { top: 320px; left: 230px; }
    50% { top: 400px; left: 230px; }
    60% { top: 400px; left: 525px; }
    65% { top: 440px; left: 525px; }

    90% { opacity: 1; top: 440px; left: 525px; }
    100% { opacity: 0; top: 440px; left: 525px; }
}

#pwsadari .character.c_blue.active_l4o {
    /* 좌4홀 */
    animation-duration: 10s;
    animation-fill-mode: forwards;
    animation-timing-function: linear;
    animation-name: motion_l4o;
}
@keyframes motion_l4o {
    0% { top: 210px; left: 230px; opacity: 0; }
    20% { top: 210px; left: 230px; opacity: 1; }
    30% { top: 210px; left: 525px; }
    35% { top: 280px; left: 525px; }
    45% { top: 280px; left: 230px; }
    50% { top: 360px; left: 230px; }
    60% { top: 360px; left: 525px; }
    65% { top: 440px; left: 525px; }
    75% { top: 440px; left: 230px; }
    90% { opacity: 1; top: 440px; left: 230px; }
    100% { opacity: 0; top: 440px; left: 230px; }
}

#pwsadari .character.c_red.active_r3o {
    /* 우3홀 */
    animation-duration: 10s;
    animation-fill-mode: forwards;
    animation-timing-function: linear;
    animation-name: motion_r3o;
}
@keyframes motion_r3o {
    0% { top: 245px; left: 525px; opacity: 0; }
    20% { top: 245px; left: 525px; opacity: 1; }
    30% { top: 245px; left: 230px; }
    35% { top: 320px; left: 230px; }
    45% { top: 320px; left: 525px; }
    50% { top: 400px; left: 525px; }
    60% { top: 400px; left: 230px; }
    65% { top: 440px; left: 230px; }

    90% { opacity: 1; top: 440px; left: 230px; }
    100% { opacity: 0; top: 440px; left: 230px; }
}

#pwsadari .character.c_red.active_r4e {
    /* 우4짝 */
    animation-duration: 10s;
    animation-fill-mode: forwards;
    animation-timing-function: linear;
    animation-name: motion_r4e;
}
@keyframes motion_r4e {
    0% { top: 210px; left: 525px; opacity: 0; }
    20% { top: 210px; left: 525px; opacity: 1; }
    30% { top: 210px; left: 230px; }
    35% { top: 280px; left: 230px; }
    45% { top: 280px; left: 525px; }
    50% { top: 360px; left: 525px; }
    60% { top: 360px; left: 230px; }
    65% { top: 440px; left: 230px; }
    75% { top: 440px; left: 525px; }
    90% { opacity: 1; top: 440px; left: 525px; }
    100% { opacity: 0; top: 440px; left: 525px; }
}

/* -------------------------------------------------- result -------------------------------------------------- */
#pwsadari .board_result {
    width: 396px; height: 78px; display: none;
    border: 3px solid #9ccef8; border-radius: 42px;
    background-color: #1e0c27;
    position: absolute; top: 50%; left: 50%;
    -webkit-transform: translate(-50%, -50%);
    overflow: hidden;

    text-align: center; line-height: 84px;
    color: #aa9be5; font-size: 1.2rem; font-weight: 900;
    -webkit-text-stroke: 1px #3a3f54;
}
#pwsadari .board_result.active {
    display: block;
    animation-name: board_result;
    animation-duration: 1.5s;
    animation-fill-mode: both;
    animation-timing-function: linear;
    animation-delay: 5.5s;
}
@keyframes board_result {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* -------------------------------------------------- audio -------------------------------------------------- */
#pwsadari .audio-btn {
    width: 52px; height: 55px;
    position: absolute; top: 24px; right: 45px;
    cursor: pointer;
}
#pwsadari .audio-btn > img {
    display: block;
    position: absolute; top: 0; left: 0;
    width: inherit; height: inherit;
}

/* -------------------------------------------------- gauge -------------------------------------------------- */
#pwsadari .gauge-group {
    width: 351px; height: 111px;
    position: absolute; bottom: -12px; left: calc(50% + 3px);
    -webkit-transform: translate(-50%, 0);
}
#pwsadari .gauge-group dl { position: absolute; }
#pwsadari .gauge-group dl dt {
    width: 33px; height: 43px;
    position: absolute; top: 20%; left: 50%;
    -webkit-transform: translate(-50%, -50%);
    z-index: 10;
}
#pwsadari .gauge-group dl:nth-of-type(1) {
    top: 0;
}
#pwsadari .gauge-group dl:nth-of-type(2) {
    top: 36px;
}
#pwsadari .gauge-group dl:nth-of-type(3) {
    top: 72px;
}

#pwsadari .gauge-group dl:nth-of-type(1) dt {
    background-image: url('/resource/images/escapesadari/icons/icon_left_right.png?v=10');
}
#pwsadari .gauge-group dl:nth-of-type(2) dt {
    background-image: url('/resource/images/escapesadari/icons/icon_lines.png?v=10');
}
#pwsadari .gauge-group dl:nth-of-type(3) dt {
    background-image: url('/resource/images/escapesadari/icons/icon_odd_even.png?v=10');
}

#pwsadari .gauge-group dl dd {
    /*background-image: url('/resource/images/escapesadari/gauge_bg.png?v=10');
    background-repeat: no-repeat;
    background-size: 355px 30px;
    background-position: -10px;*/
}
#pwsadari .gauge-group dl dd:after {
    content: ''; display: block; clear: both;
}
#pwsadari .gauge-group dl dd span {
    display: block; float: left;
    overflow: hidden; position: relative;
    background-repeat: no-repeat;
}
#pwsadari .gauge-group dl dd span:nth-of-type(1) {
    width: 175px; height: 27px;
    background-image: url('/resource/images/escapesadari/gauge_left_bg.png?v=10');
}
#pwsadari .gauge-group dl dd span:nth-of-type(1) img {
    position: absolute; top: 2px; right: -251px;
}
#pwsadari .gauge-group dl dd span:nth-of-type(2) {
    width: 176px; height: 27px;
    background-image: url('/resource/images/escapesadari/gauge_right_bg.png?v=10');
}
#pwsadari .gauge-group dl dd span:nth-of-type(2) img {
    position: absolute; top: 2px; left: -251px;
}
/*
#pwsadari .gauge-group dl dd span img:before {
    position: absolute;
    content: '';
    width: 100%;
    height: 24px;
    border-radius: 10px;
    animation: animate_stripes2 .5s linear infinite;
    background: url(http://ntry.com/public/img/score/ui_game/bg_dist_gauge.png?v=10);
}
@keyframes animate_stripes2{from{background-position:0 0}to{background-position:12px 0}}
*/