.characterImg {
    position: absolute;
    display: inline-block
}

.characterImg.circle {
    width: 166px;
    height: 166px;
    border-radius: 50%;
    box-sizing: border-box;
    background-color: #fff;
    overflow: hidden
}

[id*="spriteAni"] .characterImg {
    cursor: pointer
}

.charSpriteAni {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 1;
    background-position: 0 0
}

.charImg {
    position: relative;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat
}

.playSequenceButton {
    position: absolute;
    width: 74px;
    height: 74px;
    border-radius: 50%;
    background: #f60 url(../images/icon/icon_play.svg) 28px center/27px no-repeat;
    box-shadow: 0 3px 4px rgba(0,0,0,0.2);
    cursor: pointer;
    z-index: 2
}
.playSequenceButton.hover {background-color: #fff;background-image: url(../images/icon/icon_play_hover.svg)}

.arrowImg {position: absolute}

.characterImg.charPosition.circle {margin-bottom: 11px}

.characterImg.circle div:not(.nameBox) {
    position: absolute;
    top: 10px;
    left: 50%;
    width: 340px;
    height: 431px;
    transform-origin: center top;
    transform: translate(-50%) scale(0.75) rotate(0.1deg) !important
}
.characterImg.rabbit.circle div:not(.nameBox) {
    transform: translate(-50%, -10px) scale(0.65) rotate(0.1deg) !important;
}
.handContainer .girl_3 {top:-17px !important;}

.charSpriteImg.boy_1,.charImg.boy_1 {
    background-image: url('../../contents/images/character/boy_1.png')
}

.charSpriteImg.boy_2,.charImg.boy_2 {
    background-image: url('../../contents/images/character/boy_2.png')
}

.charSpriteImg.boy_3,.charImg.boy_3 {
    background-image: url('../../contents/images/character/boy_3.png')
}

.charSpriteImg.boy_4,.charImg.boy_4 {
    background-image: url('../../contents/images/character/boy_4.png')
}

.charSpriteImg.girl_1,.charImg.girl_1 {
    background-image: url('../../contents/images/character/girl_1.png')
}

.charSpriteImg.girl_2,.charImg.girl_2 {
    background-image: url('../../contents/images/character/girl_2.png')
}

.charSpriteImg.girl_3,.charImg.girl_3 {
    background-image: url('../../contents/images/character/girl_3.png')
}

.charSpriteImg.girl_4,.charImg.girl_4 {
    background-image: url('../../contents/images/character/girl_4.png')
}

.charSpriteImg.woman {
    width: 320px;
    height: 510px;
    background-image: url('../../contents/images/character/teacher_woman.png')
}

.charSpriteImg.man {
    position: absolute;
    top: 7px;
    left: -5px;
    width: 270px;
    height: 539px;
    background-image: url('../../contents/images/character/teacher_man.png')
}

.charSpriteImg.motion {
    background-repeat: no-repeat;
    background-position: 0 0;
    background-size: auto 100%
}

.charSpriteImg.motion.on {
    transform: rotate(0.1deg);
    -ms-transform: rotate(0.1deg);
    -webkit-transform: rotate(0.1deg)
}

.charSpriteImg.motion.boy_1 {
    background-image: url('../../contents/images/character/boy_1_sprite.png')
}

.charSpriteImg.motion.boy_2 {
    background-image: url('../../contents/images/character/boy_2_sprite.png')
}

.charSpriteImg.motion.boy_3 {
    background-image: url('../../contents/images/character/boy_3_sprite.png')
}

.charSpriteImg.motion.boy_4 {
    background-image: url('../../contents/images/character/boy_4_sprite.png')
}

.charSpriteImg.motion.girl_1 {
    background-image: url('../../contents/images/character/girl_1_sprite.png')
}

.charSpriteImg.motion.girl_2 {
    background-image: url('../../contents/images/character/girl_2_sprite.png')
}

.charSpriteImg.motion.girl_3 {
    background-image: url('../../contents/images/character/girl_3_sprite.png')
}

.charSpriteImg.motion.girl_4 {
    background-image: url('../../contents/images/character/girl_4_sprite.png')
}

.charSpriteImg.motion.boy_1.on {
    -webkit-animation: boy_1 4s steps(200) infinite;
    -ms-animation: boy_1 4s steps(200) infinite;
    animation: boy_1 4s steps(200) infinite
}

.charSpriteImg.motion.boy_2.on {
    -webkit-animation: boy_2 4s steps(200) infinite;
    -ms-animation: boy_2 4s steps(200) infinite;
    animation: boy_2 4s steps(200) infinite
}

.charSpriteImg.motion.boy_3.on {
    -webkit-animation: boy_3 4s steps(200) infinite;
    -ms-animation: boy_3 4s steps(200) infinite;
    animation: boy_3 4s steps(200) infinite
}

.charSpriteImg.motion.boy_4.on {
    -webkit-animation: boy_4 4s steps(200) infinite;
    -ms-animation: boy_4 4s steps(200) infinite;
    animation: boy_4 4s steps(200) infinite
}

.charSpriteImg.motion.girl_1.on {
    -webkit-animation: girl_1 4s steps(200) infinite;
    -ms-animation: girl_1 4s steps(200) infinite;
    animation: girl_1 4s steps(200) infinite
}

.charSpriteImg.motion.girl_2.on {
    -webkit-animation: girl_2 4s steps(200) infinite;
    -ms-animation: girl_2 4s steps(200) infinite;
    animation: girl_2 4s steps(200) infinite
}

.charSpriteImg.motion.girl_3.on {
    -webkit-animation: girl_3 4s steps(200) infinite;
    -ms-animation: girl_3 4s steps(200) infinite;
    animation: girl_3 4s steps(200) infinite
}

.charSpriteImg.motion.girl_4.on {
    -webkit-animation: girl_4 4s steps(200) infinite;
    -ms-animation: girl_4 4s steps(200) infinite;
    animation: girl_4 4s steps(200) infinite
}
.single.charSpriteImg {width:340px;height:421px;background-repeat:no-repeat;display:inline-block}

@keyframes boy_1 {
    from {
        background-position: 0 0
    }

    to {
        background-position: -54000px 0
    }
}

@-webkit-keyframes boy_1 {
    from {
        background-position: 0 0
    }

    to {
        background-position: -54000px 0
    }
}

@-ms-keyframes boy_1 {
    from {
        background-position: 0 0
    }

    to {
        background-position: -54000px 0
    }
}

@keyframes boy_2 {
    from {
        background-position: 0 0
    }

    to {
        background-position: -54000px 0
    }
}

@-webkit-keyframes boy_2 {
    from {
        background-position: 0 0
    }

    to {
        background-position: -54000px 0
    }
}

@-ms-keyframes boy_2 {
    from {
        background-position: 0 0
    }

    to {
        background-position: -54000px 0
    }
}

@keyframes boy_3 {
    from {
        background-position: 0 0
    }

    to {
        background-position: -54000px 0
    }
}

@-webkit-keyframes boy_3 {
    from {
        background-position: 0 0
    }

    to {
        background-position: -54000px 0
    }
}

@-ms-keyframes boy_3 {
    from {
        background-position: 0 0
    }

    to {
        background-position: -54000px 0
    }
}

@keyframes boy_4 {
    from {
        background-position: 0 0
    }

    to {
        background-position: -54000px 0
    }
}

@-webkit-keyframes boy_4 {
    from {
        background-position: 0 0
    }

    to {
        background-position: -54000px 0
    }
}

@-ms-keyframes boy_4 {
    from {
        background-position: 0 0
    }

    to {
        background-position: -54000px 0
    }
}

@keyframes girl_1 {
    from {
        background-position: 0 0
    }

    to {
        background-position: -54000px 0
    }
}

@-webkit-keyframes girl_1 {
    from {
        background-position: 0 0
    }

    to {
        background-position: -54000px 0
    }
}

@-ms-keyframes girl_1 {
    from {
        background-position: 0 0
    }

    to {
        background-position: -54000px 0
    }
}

@keyframes girl_2 {
    from {
        background-position: 0 0
    }

    to {
        background-position: -54000px 0
    }
}

@-webkit-keyframes girl_2 {
    from {
        background-position: 0 0
    }

    to {
        background-position: -54000px 0
    }
}

@-ms-keyframes girl_2 {
    from {
        background-position: 0 0
    }

    to {
        background-position: -54000px 0
    }
}

@keyframes girl_3 {
    from {
        background-position: 0 0
    }

    to {
        background-position: -54000px 0
    }
}

@-webkit-keyframes girl_3 {
    from {
        background-position: 0 0
    }

    to {
        background-position: -54000px 0
    }
}

@-ms-keyframes girl_3 {
    from {
        background-position: 0 0
    }

    to {
        background-position: -54000px 0
    }
}

@keyframes girl_4 {
    from {
        background-position: 0 0
    }

    to {
        background-position: -54000px 0
    }
}

@-webkit-keyframes girl_4 {
    from {
        background-position: 0 0
    }

    to {
        background-position: -54000px 0
    }
}

@-ms-keyframes girl_4 {
    from {
        background-position: 0 0
    }

    to {
        background-position: -54000px 0
    }
}

.character-flex{
    display:  flex;
    justify-content: center;
    gap:50px;
    width: auto;
    margin:0 auto
}
.characterWrap+.balloon.bottom:after,.characterWrap+.balloon.top:after {
    left: 50%;
    transform: translate(-50%)
}

/* 말풍선추가 */
.characterWrap{position: relative;display: inline-block;top:0;cursor: pointer;padding: 0 50px;}
#girl_1 .characterWrap.left{padding: 0 27px;}
.characterWrap .characterImg{position: relative; z-index:3;cursor: pointer}
.characterWrap.speech.left:before {
    content:"";
    display: block;
    width:64px;
    height:64px;
    position: absolute;
    background:url("../images/button/btn_speech_balloon_right.png") no-repeat center / contain;
    top: 10px;
    left: 0;
    z-index: 4;
    pointer-events: none;
}
.characterWrap.speech.right:before {
    content:"";
    display: block;
    width:64px;
    height:64px;
    position: absolute;
    background:url("../images/button/btn_speech_balloon_left.png") no-repeat center / contain;
    top: -15px;
    left: 50%;
    z-index: 4;
    pointer-events: none;
    margin-left: 62px;
}
.characterWrap.speech.right.girl_1-wrap:before  {margin-left: 83px;}
.characterWrap.speech.right.girl_4-wrap:before  {margin-left: 57px;}
.characterWrap.speech.right.bot_3-wrap:before  {margin-left: 57px;}
#boy_3 .characterWrap.right {padding: 0 25px;}
#girl_1 .characterWrap.right {padding: 0 27px;}

.characterWrap.speech.right:hover:before {
    background:url("../images/button/btn_speech_balloon_left_hover.png") no-repeat center / contain;
}
.characterWrap.speech.left:hover:before {
    background:url("../images/button/btn_speech_balloon_right_hover.png") no-repeat center / contain;
}

.characterImg{left:0; transition: left .2s ease-out, right .2s ease-out;}

.characterWrap.speech::before{
    top:0px !important;
}
.characterWrap.left.speech::before{
    top:10px;
    left: 20px !important;
}
.characterWrap.left.girl_1-wrap.speech::before{left: -6px !important;}

.characterWrap.speech.circle.right:before{top:0px; margin-left: 74px;}
.characterWrap.speech.left.circle:before{top:0;left:-5px !important;}
.characterWrap.speech-not::before{display: none !important;}



.character-item { position: relative;}


.balloon.pink { border-color: #ffc4c9; }
.balloon.yellow { border-color: #ffd89e; }
.balloon.green { border-color: #d7dea3; }
.balloon.purple { border-color: #cabee0; }
.balloon.pink:after { border-top-color: #ffc4c9; }
.balloon.yellow:after { border-top-color: #ffd89e; }
.balloon.green:after { border-top-color: #d7dea3; }
.balloon.purple:after { border-top-color: #cabee0; }

.character-item.no-ani *, .character-item.no-ani {pointer-events: none;}
.character-item.no-ani .close-speech-button{display: none !important;}
.character-item.no-ani .balloon {display: block !important;}
.character-item.no-ani .characterWrap.speech:before{display: none !important;}