.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
}
.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.rabbit,.charImg.rabbit {
    background-image: url('../../contents/images/character/rabbit.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-item .balloon span{pointer-events: none;}
.character-item{position: relative;}
.character-flex{
    display:  flex;
    justify-content: center;
    gap:100px;
    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;
}
.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: 0;
    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: 0;
    z-index: 4;
   /* pointer-events: none; */
}
.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{
    right:-25px;
}
.characterWrap.left.speech::before{
    left:-40px !important;
}
.characterWrap{padding: 0 20px;}
.characterWrap.speech.boy_1-wrap::before{right:0;}
.characterWrap.speech.boy_2-wrap::before{right:0;}
.characterWrap.speech.boy_3-wrap::before{right:-14px;}
.characterWrap.speech.boy_4-wrap::before{right:0;}
.characterWrap.left.speech.boy_1-wrap::before{left:0 !important;}
.characterWrap.left.speech.boy_2-wrap::before{left:0 !important;}
.characterWrap.left.speech.boy_3-wrap::before{left:0 !important;}
.characterWrap.left.speech.boy_4-wrap::before{left:0 !important;}

.characterWrap.speech.girl_1-wrap::before{right:0;}
.characterWrap.speech.girl_2-wrap::before{right:0;}
.characterWrap.speech.girl_3-wrap::before{right:0;}
.characterWrap.speech.girl_4-wrap::before{right:0;}
.characterWrap.left.speech.girl_1-wrap::before{left:-10px !important;}
.characterWrap.left.speech.girl_2-wrap::before{left:0 !important;}
.characterWrap.left.speech.girl_3-wrap::before{left:0 !important;}
.characterWrap.left.speech.girl_4-wrap::before{left:0 !important;}

.character-item{transition: left .2s ease-out;}
.characterWrap.speech.circle.right:before{
    top:0px;
    right:-5px;
}
.characterWrap.speech.left.circle:before{
    top:0;
    left:-5px;
}
.characterWrap.speech-not::before{
    display: none !important;
}
.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;}
.characterWrap + .balloon{cursor: pointer;}