.characterImg { position: relative; display:inline-block; cursor: pointer; } /*.charSpriteImg { width: 250px; height: 310px; }*/ .charSpriteImg { width: 300px; height: 370px; background-repeat: no-repeat; } .charSpriteAni { position: absolute; top: 0; left: 0; width: 250px; height: 310px; opacity: 1; background-position: 0 0; } .charSpriteAni.noEvent { cursor: auto; } .characterText.paleOrange { background:#f6e7d4; } .characterText.paleYellow { background:#f6f0d4; } .characterText.paleBlue { background:#d4f3f6; } /* 캐릭터 말풍선 색상 수정 */ .characterText.girlBg3, .characterText.boyBg1 { /* yellow */ background:#fff1d0; } .characterText.girlBg2, .characterText.boyBg3 { /* pink */ background:#ffe5e7; } .characterText.girlBg4, .characterText.boyBg2 { /* green */ background:#f3fcd0; } .characterText.girlBg1, .characterText.boyBg4 { /* purple */ background:#ece5ff; } .characterText.paleOrange.line, .characterText.paleYellow.line, .characterText.paleBlue.line { background:#fff; padding:10px 12px; border-radius:30px; } .characterText.paleOrange.line { border:4px solid #f6e7d4; } .characterText.paleYellow.line { border:4px solid #f6f0d4; } .characterText.paleBlue.line { border:4px solid #d4f3f6; } .characterText.pale.line { border:4px solid #eef8bf; } .characterText.paleOrange .bubbleArrow { position: absolute; width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 20px solid #f6e7d4; margin-top: -10px; } .characterText.paleYellow .bubbleArrow { position: absolute; width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 20px solid #f6f0d4; margin-top: -10px; } .characterText.paleBlue .bubbleArrow { position: absolute; width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 20px solid #d4f3f6; margin-top: -10px; } .characterText.pale .bubbleArrow { position: absolute; width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 20px solid #eef8bf; margin-top: -10px; } /* 캐릭터 말풍선 색상 수정 */ .characterText.girlBg3 .bubbleArrow, .characterText.boyBg1 .bubbleArrow { /* yellow */ position: absolute; width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 20px solid #fff1d0; margin-top: -10px; } .characterText.girlBg2 .bubbleArrow, .characterText.boyBg3 .bubbleArrow { /* pink */ position: absolute; width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 20px solid #ffe5e7; margin-top: -10px; } .characterText.girlBg4 .bubbleArrow, .characterText.boyBg2 .bubbleArrow { /* green */ position: absolute; width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 20px solid #f3fcd0; margin-top: -10px; } .characterText.girlBg1 .bubbleArrow, .characterText.boyBg4 .bubbleArrow { /* purple */ position: absolute; width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 20px solid #ece5ff; margin-top: -10px; } .playSequenceButton { position: absolute; width: 100px; cursor: pointer; pointer-events: auto; } .arrowImg { position: absolute; } /*동그란 이미지*/ .characterImg.circle div { width:250px; height: 310px; } .characterImg.circle div.charSpriteImg{ background-size: 100%; } .charSpriteImg.boy_1{ background-image: url('../../common/images/character/boy_1.png'); } .charSpriteImg.boy_2{ background-image: url('../../common/images/character/boy_2.png'); } .charSpriteImg.boy_3{ background-image: url('../../common/images/character/boy_3.png'); } .charSpriteImg.boy_4{ background-image: url('../../common/images/character/boy_4.png'); } .charSpriteImg.girl_1{ background-image: url('../../common/images/character/girl_1.png'); } .charSpriteImg.girl_2{ background-image: url('../../common/images/character/girl_2.png'); } .charSpriteImg.girl_3{ background-image: url('../../common/images/character/girl_3.png'); } .charSpriteImg.girl_4{ background-image: url('../../common/images/character/girl_4.png'); } /* ********************************************************** */ .bg_cartoon_01, .bg_cartoon_02, .bg_cartoon_03, .bg_cartoon_04,.bg_cartoon_05, .bg_cartoon_06 { width: 1170px; /*height: 654px;*/ height: 616px; } .bg_cartoon_01 { background:url('../../common/images/background_cartoon_01.png') center no-repeat; background-size: auto 100%; } .bg_cartoon_02 { background:url('../../common/images/background_cartoon_02.png') center no-repeat; background-size: auto 100%; } .bg_cartoon_03 { background:url('../../common/images/background_cartoon_03.png') center no-repeat; background-size: auto 100%; } .bg_cartoon_04 { background:url('../../common/images/background_cartoon_04.png') center no-repeat; background-size: auto 100%; } .bg_cartoon_05 { background:url('../../common/images/background_cartoon_05.png') center no-repeat; background-size: auto 100%; } .bg_cartoon_05_table{background: url(../../common/images/background_cartoon_05_table.png) center bottom no-repeat; width: 806px; height: 188px; background-size: auto 100%; position: absolute; bottom: 38px; left: 145px; border-radius: 50% 50% 0 0; } .bg_cartoon_05_table::before{ content: ''; display: block; clear: both; background: url(../../common/images/background_cartoon_05_table2.png) no-repeat center; width: 46px; height: 80px; position: absolute; top: -33px; left: 198px; background-size: 100%; } .bg_cartoon_06 { background:url('../../common/images/background_cartoon_06.png') center no-repeat; background-size: auto 100%; } .bg_cartoon_01 .charSpriteImg.boy_1{ background-image: url('../../common/images/character/cartoon_01_boy_1.png'); } .bg_cartoon_01 .charSpriteImg.boy_2{ background-image: url('../../common/images/character/cartoon_01_boy_2.png'); } .bg_cartoon_01 .charSpriteImg.boy_3{ background-image: url('../../common/images/character/cartoon_01_boy_3.png'); } .bg_cartoon_01 .charSpriteImg.boy_4{ background-image: url('../../common/images/character/cartoon_01_boy_4.png'); } .bg_cartoon_01 .charSpriteImg.girl_1{ background-image: url('../../common/images/character/cartoon_01_girl_1.png'); } .bg_cartoon_01 .charSpriteImg.girl_2{ background-image: url('../../common/images/character/cartoon_01_girl_2.png'); } .bg_cartoon_01 .charSpriteImg.girl_3{ background-image: url('../../common/images/character/cartoon_01_girl_3.png'); } .bg_cartoon_01 .charSpriteImg.girl_4{ background-image: url('../../common/images/character/cartoon_01_girl_4.png'); } .bg_cartoon_01 .charSpriteImg.boy_1.charHover{ background-image: url('../../common/images/character/cartoon_01_boy_1_on.png'); } .bg_cartoon_01 .charSpriteImg.boy_2.charHover{ background-image: url('../../common/images/character/cartoon_01_boy_2_on.png'); } .bg_cartoon_01 .charSpriteImg.boy_3.charHover{ background-image: url('../../common/images/character/cartoon_01_boy_3_on.png'); } .bg_cartoon_01 .charSpriteImg.boy_4.charHover{ background-image: url('../../common/images/character/cartoon_01_boy_4_on.png'); } .bg_cartoon_01 .charSpriteImg.girl_1.charHover{ background-image: url('../../common/images/character/cartoon_01_girl_1_on.png'); } .bg_cartoon_01 .charSpriteImg.girl_2.charHover{ background-image: url('../../common/images/character/cartoon_01_girl_2_on.png'); } .bg_cartoon_01 .charSpriteImg.girl_3.charHover{ background-image: url('../../common/images/character/cartoon_01_girl_3_on.png'); } .bg_cartoon_01 .charSpriteImg.girl_4.charHover{ background-image: url('../../common/images/character/cartoon_01_girl_4_on.png'); } .bg_cartoon_01 .charSpriteImg.boy_1.charHover:hover, .bg_cartoon_01 .charSpriteImg.boy_1.charHover.active{ background-image: url('../../common/images/character/cartoon_01_boy_1_hover.png'); } .bg_cartoon_01 .charSpriteImg.boy_2.charHover:hover, .bg_cartoon_01 .charSpriteImg.boy_2.charHover.active{ background-image: url('../../common/images/character/cartoon_01_boy_2_hover.png'); } .bg_cartoon_01 .charSpriteImg.boy_3.charHover:hover, .bg_cartoon_01 .charSpriteImg.boy_3.charHover.active{ background-image: url('../../common/images/character/cartoon_01_boy_3_hover.png'); } .bg_cartoon_01 .charSpriteImg.boy_4.charHover:hover, .bg_cartoon_01 .charSpriteImg.boy_4.charHover.active{ background-image: url('../../common/images/character/cartoon_01_boy_4_hover.png'); } .bg_cartoon_01 .charSpriteImg.girl_1.charHover:hover, .bg_cartoon_01 .charSpriteImg.girl_1.charHover.active{ background-image: url('../../common/images/character/cartoon_01_girl_1_hover.png'); } .bg_cartoon_01 .charSpriteImg.girl_2.charHover:hover, .bg_cartoon_01 .charSpriteImg.girl_2.charHover.active{ background-image: url('../../common/images/character/cartoon_01_girl_2_hover.png'); } .bg_cartoon_01 .charSpriteImg.girl_3.charHover:hover, .bg_cartoon_01 .charSpriteImg.girl_3.charHover.active{ background-image: url('../../common/images/character/cartoon_01_girl_3_hover.png'); } .bg_cartoon_01 .charSpriteImg.girl_4.charHover:hover, .bg_cartoon_01 .charSpriteImg.girl_4.charHover.active{ background-image: url('../../common/images/character/cartoon_01_girl_4_hover.png'); } .bg_cartoon_02 .charSpriteImg.boy_1{ background-image: url('../../common/images/character/cartoon_02_boy_1.png'); } .bg_cartoon_02 .charSpriteImg.boy_2{ background-image: url('../../common/images/character/cartoon_02_boy_2.png'); } .bg_cartoon_02 .charSpriteImg.boy_3{ background-image: url('../../common/images/character/cartoon_02_boy_3.png'); } .bg_cartoon_02 .charSpriteImg.boy_4{ background-image: url('../../common/images/character/cartoon_02_boy_4.png'); } .bg_cartoon_02 .charSpriteImg.girl_1{ background-image: url('../../common/images/character/cartoon_02_girl_1.png'); } .bg_cartoon_02 .charSpriteImg.girl_2{ background-image: url('../../common/images/character/cartoon_02_girl_2.png'); } .bg_cartoon_02 .charSpriteImg.girl_3{ background-image: url('../../common/images/character/cartoon_02_girl_3.png'); } .bg_cartoon_02 .charSpriteImg.girl_4{ background-image: url('../../common/images/character/cartoon_02_girl_4.png'); } .bg_cartoon_02 .charSpriteImg.boy_1.charHover{ background-image: url('../../common/images/character/cartoon_02_boy_1_on.png'); } .bg_cartoon_02 .charSpriteImg.boy_2.charHover{ background-image: url('../../common/images/character/cartoon_02_boy_2_on.png'); } .bg_cartoon_02 .charSpriteImg.boy_3.charHover{ background-image: url('../../common/images/character/cartoon_02_boy_3_on.png'); } .bg_cartoon_02 .charSpriteImg.boy_4.charHover{ background-image: url('../../common/images/character/cartoon_02_boy_4_on.png'); } .bg_cartoon_02 .charSpriteImg.girl_1.charHover{ background-image: url('../../common/images/character/cartoon_02_girl_1_on.png'); } .bg_cartoon_02 .charSpriteImg.girl_2.charHover{ background-image: url('../../common/images/character/cartoon_02_girl_2_on.png'); } .bg_cartoon_02 .charSpriteImg.girl_3.charHover{ background-image: url('../../common/images/character/cartoon_02_girl_3_on.png'); } .bg_cartoon_02 .charSpriteImg.girl_4.charHover{ background-image: url('../../common/images/character/cartoon_02_girl_4_on.png'); } .bg_cartoon_02 .charSpriteImg.boy_1.charHover:hover, .bg_cartoon_02 .charSpriteImg.boy_1.charHover.active{ background-image: url('../../common/images/character/cartoon_02_boy_1_hover.png'); } .bg_cartoon_02 .charSpriteImg.boy_2.charHover:hover, .bg_cartoon_02 .charSpriteImg.boy_2.charHover.active{ background-image: url('../../common/images/character/cartoon_02_boy_2_hover.png'); } .bg_cartoon_02 .charSpriteImg.boy_3.charHover:hover, .bg_cartoon_02 .charSpriteImg.boy_3.charHover.active{ background-image: url('../../common/images/character/cartoon_02_boy_3_hover.png'); } .bg_cartoon_02 .charSpriteImg.boy_4.charHover:hover, .bg_cartoon_02 .charSpriteImg.boy_4.charHover.active{ background-image: url('../../common/images/character/cartoon_02_boy_4_hover.png'); } .bg_cartoon_02 .charSpriteImg.girl_1.charHover:hover, .bg_cartoon_02 .charSpriteImg.girl_1.charHover.active{ background-image: url('../../common/images/character/cartoon_02_girl_1_hover.png'); } .bg_cartoon_02 .charSpriteImg.girl_2.charHover:hover, .bg_cartoon_02 .charSpriteImg.girl_2.charHover.active{ background-image: url('../../common/images/character/cartoon_02_girl_2_hover.png'); } .bg_cartoon_02 .charSpriteImg.girl_3.charHover:hover, .bg_cartoon_02 .charSpriteImg.girl_3.charHover.active{ background-image: url('../../common/images/character/cartoon_02_girl_3_hover.png'); } .bg_cartoon_02 .charSpriteImg.girl_4.charHover:hover, .bg_cartoon_02 .charSpriteImg.girl_4.charHover.active{ background-image: url('../../common/images/character/cartoon_02_girl_4_hover.png'); } .bg_cartoon_03 .charSpriteImg.boy_1{ background-image: url('../../common/images/character/cartoon_03_boy_1.png'); } .bg_cartoon_03 .charSpriteImg.boy_2{ background-image: url('../../common/images/character/cartoon_03_boy_2.png'); } .bg_cartoon_03 .charSpriteImg.boy_3{ background-image: url('../../common/images/character/cartoon_03_boy_3.png'); } .bg_cartoon_03 .charSpriteImg.boy_4{ background-image: url('../../common/images/character/cartoon_03_boy_4.png'); } .bg_cartoon_03 .charSpriteImg.girl_1{ background-image: url('../../common/images/character/cartoon_03_girl_1.png'); } .bg_cartoon_03 .charSpriteImg.girl_2{ background-image: url('../../common/images/character/cartoon_03_girl_2.png'); } .bg_cartoon_03 .charSpriteImg.girl_3{ background-image: url('../../common/images/character/cartoon_03_girl_3.png'); } .bg_cartoon_03 .charSpriteImg.girl_4{ background-image: url('../../common/images/character/cartoon_03_girl_4.png'); } .bg_cartoon_03 .charSpriteImg.boy_1.charHover{ background-image: url('../../common/images/character/cartoon_03_boy_1_on.png'); } .bg_cartoon_03 .charSpriteImg.boy_2.charHover{ background-image: url('../../common/images/character/cartoon_03_boy_2_on.png'); } .bg_cartoon_03 .charSpriteImg.boy_3.charHover{ background-image: url('../../common/images/character/cartoon_03_boy_3_on.png'); } .bg_cartoon_03 .charSpriteImg.boy_4.charHover{ background-image: url('../../common/images/character/cartoon_03_boy_4_on.png'); } .bg_cartoon_03 .charSpriteImg.girl_1.charHover{ background-image: url('../../common/images/character/cartoon_03_girl_1_on.png'); } .bg_cartoon_03 .charSpriteImg.girl_2.charHover{ background-image: url('../../common/images/character/cartoon_03_girl_2_on.png'); } .bg_cartoon_03 .charSpriteImg.girl_3.charHover{ background-image: url('../../common/images/character/cartoon_03_girl_3_on.png'); } .bg_cartoon_03 .charSpriteImg.girl_4.charHover{ background-image: url('../../common/images/character/cartoon_03_girl_4_on.png'); } .bg_cartoon_03 .charSpriteImg.boy_1.charHover:hover, .bg_cartoon_03 .charSpriteImg.boy_1.charHover.active{ background-image: url('../../common/images/character/cartoon_03_boy_1_hover.png'); } .bg_cartoon_03 .charSpriteImg.boy_2.charHover:hover, .bg_cartoon_03 .charSpriteImg.boy_2.charHover.active{ background-image: url('../../common/images/character/cartoon_03_boy_2_hover.png'); } .bg_cartoon_03 .charSpriteImg.boy_3.charHover:hover, .bg_cartoon_03 .charSpriteImg.boy_3.charHover.active{ background-image: url('../../common/images/character/cartoon_03_boy_3_hover.png'); } .bg_cartoon_03 .charSpriteImg.boy_4.charHover:hover, .bg_cartoon_03 .charSpriteImg.boy_4.charHover.active{ background-image: url('../../common/images/character/cartoon_03_boy_4_hover.png'); } .bg_cartoon_03 .charSpriteImg.girl_1.charHover:hover, .bg_cartoon_03 .charSpriteImg.girl_1.charHover.active{ background-image: url('../../common/images/character/cartoon_03_girl_1_hover.png'); } .bg_cartoon_03 .charSpriteImg.girl_2.charHover:hover, .bg_cartoon_03 .charSpriteImg.girl_2.charHover.active{ background-image: url('../../common/images/character/cartoon_03_girl_2_hover.png'); } .bg_cartoon_03 .charSpriteImg.girl_3.charHover:hover, .bg_cartoon_03 .charSpriteImg.girl_3.charHover.active{ background-image: url('../../common/images/character/cartoon_03_girl_3_hover.png'); } .bg_cartoon_03 .charSpriteImg.girl_4.charHover:hover, .bg_cartoon_03 .charSpriteImg.girl_4.charHover.active{ background-image: url('../../common/images/character/cartoon_03_girl_4_hover.png'); } .bg_cartoon_04 .charSpriteImg.boy_1{ background-image: url('../../common/images/character/cartoon_04_boy_1.png'); } .bg_cartoon_04 .charSpriteImg.boy_2{ background-image: url('../../common/images/character/cartoon_04_boy_2.png'); } .bg_cartoon_04 .charSpriteImg.boy_3{ background-image: url('../../common/images/character/cartoon_04_boy_3.png'); } .bg_cartoon_04 .charSpriteImg.boy_4{ background-image: url('../../common/images/character/cartoon_04_boy_4.png'); } .bg_cartoon_04 .charSpriteImg.girl_1{ background-image: url('../../common/images/character/cartoon_04_girl_1.png'); } .bg_cartoon_04 .charSpriteImg.girl_2{ background-image: url('../../common/images/character/cartoon_04_girl_2.png'); } .bg_cartoon_04 .charSpriteImg.girl_3{ background-image: url('../../common/images/character/cartoon_04_girl_3.png'); } .bg_cartoon_04 .charSpriteImg.girl_4{ background-image: url('../../common/images/character/cartoon_04_girl_4.png'); } .bg_cartoon_04 .charSpriteImg.boy_1.charHover{ background-image: url('../../common/images/character/cartoon_04_boy_1_on.png'); } .bg_cartoon_04 .charSpriteImg.boy_2.charHover{ background-image: url('../../common/images/character/cartoon_04_boy_2_on.png'); } .bg_cartoon_04 .charSpriteImg.boy_3.charHover{ background-image: url('../../common/images/character/cartoon_04_boy_3_on.png'); } .bg_cartoon_04 .charSpriteImg.boy_4.charHover{ background-image: url('../../common/images/character/cartoon_04_boy_4_on.png'); } .bg_cartoon_04 .charSpriteImg.girl_1.charHover{ background-image: url('../../common/images/character/cartoon_04_girl_1_on.png'); } .bg_cartoon_04 .charSpriteImg.girl_2.charHover{ background-image: url('../../common/images/character/cartoon_04_girl_2_on.png'); } .bg_cartoon_04 .charSpriteImg.girl_3.charHover{ background-image: url('../../common/images/character/cartoon_04_girl_3_on.png'); } .bg_cartoon_04 .charSpriteImg.girl_4.charHover{ background-image: url('../../common/images/character/cartoon_04_girl_4_on.png'); } .bg_cartoon_04 .charSpriteImg.boy_1.charHover:hover, .bg_cartoon_04 .charSpriteImg.boy_1.charHover.active{ background-image: url('../../common/images/character/cartoon_04_boy_1_hover.png'); } .bg_cartoon_04 .charSpriteImg.boy_2.charHover:hover, .bg_cartoon_04 .charSpriteImg.boy_2.charHover.active{ background-image: url('../../common/images/character/cartoon_04_boy_2_hover.png'); } .bg_cartoon_04 .charSpriteImg.boy_3.charHover:hover, .bg_cartoon_04 .charSpriteImg.boy_3.charHover.active{ background-image: url('../../common/images/character/cartoon_04_boy_3_hover.png'); } .bg_cartoon_04 .charSpriteImg.boy_4.charHover:hover, .bg_cartoon_04 .charSpriteImg.boy_4.charHover.active{ background-image: url('../../common/images/character/cartoon_04_boy_4_hover.png'); } .bg_cartoon_04 .charSpriteImg.girl_1.charHover:hover, .bg_cartoon_04 .charSpriteImg.girl_1.charHover.active{ background-image: url('../../common/images/character/cartoon_04_girl_1_hover.png'); } .bg_cartoon_04 .charSpriteImg.girl_2.charHover:hover, .bg_cartoon_04 .charSpriteImg.girl_2.charHover.active{ background-image: url('../../common/images/character/cartoon_04_girl_2_hover.png'); } .bg_cartoon_04 .charSpriteImg.girl_3.charHover:hover, .bg_cartoon_04 .charSpriteImg.girl_3.charHover.active{ background-image: url('../../common/images/character/cartoon_04_girl_3_hover.png'); } .bg_cartoon_04 .charSpriteImg.girl_4.charHover:hover, .bg_cartoon_04 .charSpriteImg.girl_4.charHover.active{ background-image: url('../../common/images/character/cartoon_04_girl_4_hover.png'); } .bg_cartoon_04 .charSpriteImg.boy_1{ background-image: url('../../common/images/character/cartoon_04_boy_1.png'); } .bg_cartoon_04 .charSpriteImg.boy_2{ background-image: url('../../common/images/character/cartoon_04_boy_2.png'); } .bg_cartoon_04 .charSpriteImg.boy_3{ background-image: url('../../common/images/character/cartoon_04_boy_3.png'); } .bg_cartoon_04 .charSpriteImg.boy_4{ background-image: url('../../common/images/character/cartoon_04_boy_4.png'); } .bg_cartoon_04 .charSpriteImg.girl_1{ background-image: url('../../common/images/character/cartoon_04_girl_1.png'); } .bg_cartoon_04 .charSpriteImg.girl_2{ background-image: url('../../common/images/character/cartoon_04_girl_2.png'); } .bg_cartoon_04 .charSpriteImg.girl_3{ background-image: url('../../common/images/character/cartoon_04_girl_3.png'); } .bg_cartoon_04 .charSpriteImg.girl_4{ background-image: url('../../common/images/character/cartoon_04_girl_4.png'); } } .charSpriteImg.boy_2{ background-image: url('../../common/images/character/boy_2.png'); } .charSpriteImg.boy_3{ background-image: url('../../common/images/character/boy_3.png'); } .charSpriteImg.boy_4{ background-image: url('../../common/images/character/boy_4.png'); } .charSpriteImg.girl_1{ background-image: url('../../common/images/character/girl_1.png'); } .charSpriteImg.girl_2{ background-image: url('../../common/images/character/girl_2.png'); } .charSpriteImg.girl_3{ background-image: url('../../common/images/character/girl_3.png'); } .charSpriteImg.girl_4{ background-image: url('../../common/images/character/girl_4.png'); } /* ********************************************************** */ .bg_cartoon_01, .bg_cartoon_02, .bg_cartoon_03, .bg_cartoon_04,.bg_cartoon_05, .bg_cartoon_06 { width: 1170px; /*height: 654px;*/ height: 616px; } .bg_cartoon_01 { background:url('../../common/images/background_cartoon_01.png') center no-repeat; background-size: auto 100%; } .bg_cartoon_02 { background:url('../../common/images/background_cartoon_02.png') center no-repeat; background-size: auto 100%; } .bg_cartoon_03 { background:url('../../common/images/background_cartoon_03.png') center no-repeat; background-size: auto 100%; } .bg_cartoon_04 { background:url('../../common/images/background_cartoon_04.png') center no-repeat; background-size: auto 100%; } .bg_cartoon_05 { background:url('../../common/images/background_cartoon_05.png') center no-repeat; background-size: auto 100%; } .bg_cartoon_06 { background:url('../../common/images/background_cartoon_06.png') center no-repeat; background-size: auto 100%; } .bg_cartoon_05 .charSpriteImg.boy_1{ background-image: url('../../common/images/character/cartoon_05_boy_1.png'); background-size: 180px; } .bg_cartoon_05 .charSpriteImg.boy_1::after{content: ''; display: block; clear: both; background: url(../../common/images/background_cartoon_05_table4.png) no-repeat center; position: absolute; top:190px; left: 48px; width: 60px; height: 50px; background-size: 60px; z-index: 1;} .bg_cartoon_05 .charSpriteImg.boy_2{ background-image: url('../../common/images/character/cartoon_05_boy_2.png'); background-size: 223px; background-position: top right; width: 216px; } .bg_cartoon_05 .charSpriteImg.boy_2::after{content: ''; display: block; clear: both; background: url(../../common/images/background_cartoon_05_table3.png) no-repeat center; position: absolute; top:130px; right: 48px; width: 100px; height: 150px; background-size: 86px; z-index: 1;} .bg_cartoon_05 .charSpriteImg.boy_3{ background-image: url('../../common/images/character/cartoon_05_boy_3.png'); } .bg_cartoon_05 .charSpriteImg.boy_4{ background-image: url('../../common/images/character/cartoon_05_boy_4.png'); } .bg_cartoon_05 .charSpriteImg.girl_1{ background-image: url('../../common/images/character/cartoon_05_girl_1.png'); background-size: 199px; } .bg_cartoon_05 .charSpriteImg.girl_2{ background-image: url('../../common/images/character/cartoon_05_girl_2.png'); background-size: 199px; } .bg_cartoon_05 .charSpriteImg.girl_3{ background-image: url('../../common/images/character/cartoon_05_girl_3.png'); } .bg_cartoon_05 .charSpriteImg.girl_4{ background-image: url('../../common/images/character/cartoon_05_girl_4.png'); } .bg_cartoon_05 .charSpriteImg.boy_1.charHover{ background-image: url('../../common/images/character/cartoon_05_boy_1_on.png'); background-size: 185px; } .bg_cartoon_05 .charSpriteImg.boy_2.charHover{ background-image: url('../../common/images/character/cartoon_05_boy_2_on.png'); background-size: 223px; background-position: top right; width: 216px; } .bg_cartoon_05 .charSpriteImg.boy_3.charHover{ background-image: url('../../common/images/character/cartoon_05_boy_3_on.png'); } .bg_cartoon_05 .charSpriteImg.boy_4.charHover{ background-image: url('../../common/images/character/cartoon_05_boy_4_on.png'); } .bg_cartoon_05 .charSpriteImg.girl_1.charHover{ background-image: url('../../common/images/character/cartoon_05_girl_1_on.png'); background-size: 204px; } .bg_cartoon_05 .charSpriteImg.girl_2.charHover{ background-image: url('../../common/images/character/cartoon_05_girl_2_on.png'); background-size: 210px; } .bg_cartoon_05 .charSpriteImg.girl_3.charHover{ background-image: url('../../common/images/character/cartoon_05_girl_3_on.png'); } .bg_cartoon_05 .charSpriteImg.girl_4.charHover{ background-image: url('../../common/images/character/cartoon_05_girl_4_on.png'); } .bg_cartoon_05 .charSpriteImg.boy_1.charHover:hover, .bg_cartoon_05 .charSpriteImg.boy_1.charHover.active{ background-image: url('../../common/images/character/cartoon_05_boy_1_hover.png'); background-size: 185px; } .bg_cartoon_05 .charSpriteImg.boy_2.charHover:hover, .bg_cartoon_05 .charSpriteImg.boy_2.charHover.active{ background-image: url('../../common/images/character/cartoon_05_boy_2_hover.png'); background-size: 223px; background-position: top right; width: 216px; } .bg_cartoon_05 .charSpriteImg.boy_3.charHover:hover, .bg_cartoon_05 .charSpriteImg.boy_3.charHover.active{ background-image: url('../../common/images/character/cartoon_05_boy_3_hover.png'); } .bg_cartoon_05 .charSpriteImg.boy_4.charHover:hover, .bg_cartoon_05 .charSpriteImg.boy_4.charHover.active{ background-image: url('../../common/images/character/cartoon_05_boy_4_hover.png'); } .bg_cartoon_05 .charSpriteImg.girl_1.charHover:hover, .bg_cartoon_05 .charSpriteImg.girl_1.charHover.active{ background-image: url('../../common/images/character/cartoon_05_girl_1_hover.png'); background-size: 204px; } .bg_cartoon_05 .charSpriteImg.girl_2.charHover:hover, .bg_cartoon_05 .charSpriteImg.girl_2.charHover.active{ background-image: url('../../common/images/character/cartoon_05_girl_2_hover.png'); background-size: 210px; } .bg_cartoon_05 .charSpriteImg.girl_3.charHover:hover, .bg_cartoon_05 .charSpriteImg.girl_3.charHover.active{ background-image: url('../../common/images/character/cartoon_05_girl_3_hover.png'); } .bg_cartoon_05 .charSpriteImg.girl_4.charHover:hover, .bg_cartoon_05 .charSpriteImg.girl_4.charHover.active{ background-image: url('../../common/images/character/cartoon_05_girl_4_hover.png'); } .bg_cartoon_06 .charSpriteImg.boy_1{ background-image: url('../../common/images/character/cartoon_06_boy_1.png'); } .bg_cartoon_06 .charSpriteImg.boy_2{ background-image: url('../../common/images/character/cartoon_06_boy_2.png'); } .bg_cartoon_06 .charSpriteImg.boy_3{ background-image: url('../../common/images/character/cartoon_06_boy_3.png'); } .bg_cartoon_06 .charSpriteImg.boy_4{ background-image: url('../../common/images/character/cartoon_06_boy_4.png'); } .bg_cartoon_06 .charSpriteImg.girl_1{ background-image: url('../../common/images/character/cartoon_06_girl_1.png'); } .bg_cartoon_06 .charSpriteImg.girl_2{ background-image: url('../../common/images/character/cartoon_06_girl_2.png'); } .bg_cartoon_06 .charSpriteImg.girl_3{ background-image: url('../../common/images/character/cartoon_06_girl_3.png'); } .bg_cartoon_06 .charSpriteImg.girl_4{ background-image: url('../../common/images/character/cartoon_06_girl_4.png'); } .bg_cartoon_06 .charSpriteImg.boy_1.charHover{ background-image: url('../../common/images/character/cartoon_06_boy_1_on.png'); } .bg_cartoon_06 .charSpriteImg.boy_2.charHover{ background-image: url('../../common/images/character/cartoon_06_boy_2_on.png'); } .bg_cartoon_06 .charSpriteImg.boy_3.charHover{ background-image: url('../../common/images/character/cartoon_06_boy_3_on.png'); } .bg_cartoon_06 .charSpriteImg.boy_4.charHover{ background-image: url('../../common/images/character/cartoon_06_boy_4_on.png'); } .bg_cartoon_06 .charSpriteImg.girl_1.charHover{ background-image: url('../../common/images/character/cartoon_06_girl_1_on.png'); } .bg_cartoon_06 .charSpriteImg.girl_2.charHover{ background-image: url('../../common/images/character/cartoon_06_girl_2_on.png'); } .bg_cartoon_06 .charSpriteImg.girl_3.charHover{ background-image: url('../../common/images/character/cartoon_06_girl_3_on.png'); } .bg_cartoon_06 .charSpriteImg.girl_4.charHover{ background-image: url('../../common/images/character/cartoon_06_girl_4_on.png'); } .bg_cartoon_06 .charSpriteImg.boy_1.charHover:hover, .bg_cartoon_06 .charSpriteImg.boy_1.charHover.active{ background-image: url('../../common/images/character/cartoon_06_boy_1_hover.png'); } .bg_cartoon_06 .charSpriteImg.boy_2.charHover:hover, .bg_cartoon_06 .charSpriteImg.boy_2.charHover.active{ background-image: url('../../common/images/character/cartoon_06_boy_2_hover.png'); } .bg_cartoon_06 .charSpriteImg.boy_3.charHover:hover, .bg_cartoon_06 .charSpriteImg.boy_3.charHover.active{ background-image: url('../../common/images/character/cartoon_06_boy_3_hover.png'); } .bg_cartoon_06 .charSpriteImg.boy_4.charHover:hover, .bg_cartoon_06 .charSpriteImg.boy_4.charHover.active{ background-image: url('../../common/images/character/cartoon_06_boy_4_hover.png'); } .bg_cartoon_06 .charSpriteImg.girl_1.charHover:hover, .bg_cartoon_06 .charSpriteImg.girl_1.charHover.active{ background-image: url('../../common/images/character/cartoon_06_girl_1_hover.png'); } .bg_cartoon_06 .charSpriteImg.girl_2.charHover:hover, .bg_cartoon_06 .charSpriteImg.girl_2.charHover.active{ background-image: url('../../common/images/character/cartoon_06_girl_2_hover.png'); } .bg_cartoon_06 .charSpriteImg.girl_3.charHover:hover, .bg_cartoon_06 .charSpriteImg.girl_3.charHover.active{ background-image: url('../../common/images/character/cartoon_06_girl_3_hover.png'); } .bg_cartoon_06 .charSpriteImg.girl_4.charHover:hover, .bg_cartoon_06 .charSpriteImg.girl_4.charHover.active{ background-image: url('../../common/images/character/cartoon_06_girl_4_hover.png'); } .bg_cartoon_01 .characterSet, .bg_cartoon_02 .characterSet, .bg_cartoon_03 .characterSet, .bg_cartoon_04 .characterSet, .bg_cartoon_05 .characterSet, .bg_cartoon_06 .characterSet { position:absolute; } .bg_cartoon_01 .charSpriteImg.charHover, .bg_cartoon_02 .charSpriteImg.charHover, .bg_cartoon_03 .charSpriteImg.charHover, .bg_cartoon_04 .charSpriteImg.charHover, .bg_cartoon_05 .charSpriteImg.charHover, .bg_cartoon_06 .charSpriteImg.charHover { cursor:pointer; } .bg_cartoon_01 .characterText, .bg_cartoon_02 .characterText, .bg_cartoon_03 .characterText, .bg_cartoon_04 .characterText, .bg_cartoon_05 .characterText, .bg_cartoon_06 .characterText { position:absolute; } .bg_cartoon_01 .characterSet:nth-of-type(1) { top: 242px; left: 338px; -ms-transform: scale(1.14); -webkit-transform: scale(1.14); transform: scale(1.14); transform-origin: 50% 100%; -webkit-transform-origin: 50% 100%; -ms-transform-origin: 50% 100%; } .bg_cartoon_01 .characterSet:nth-of-type(1) ~ .characterSet { top: 242px; left: 560px; -ms-transform: scale(1.14); -webkit-transform: scale(1.14); transform: scale(1.14); transform-origin: 50% 100%; -webkit-transform-origin: 50% 100%; -ms-transform-origin: 50% 100%; } .bg_cartoon_02 .characterSet:nth-of-type(1) { top: 192px; left: 314px; } .bg_cartoon_02 .characterSet:nth-of-type(1) ~ .characterSet { top: 192px; left: 565px; } .bg_cartoon_02 .characterSet:nth-of-type(1) ~ .characterSet ~ .characterSet { top: 245px; left: 564px; } .bg_cartoon_02 .characterSet:nth-of-type(1) ~ .characterSet ~ .characterSet ~ .characterSet { top: 267px; left: 731px; } .bg_cartoon_03 .characterSet:nth-of-type(1) { top: 152px; left: 124px; } .bg_cartoon_03 .characterSet:nth-of-type(1) ~ .characterSet { top: 118px; left: 329px; } .bg_cartoon_03 .characterSet:nth-of-type(1) ~ .characterSet ~ .characterSet { top: 111px; left: 547px; } .bg_cartoon_03 .characterSet:nth-of-type(1) ~ .characterSet ~ .characterSet ~ .characterSet { top: 152px; left: 742px; } .bg_cartoon_04 .characterSet:nth-of-type(1) { top: 200px; left: 302px; } .bg_cartoon_04 .characterSet:nth-of-type(1) ~ .characterSet { top: 187px; left: 464px; } .bg_cartoon_04 .characterSet:nth-of-type(1) ~ .characterSet ~ .characterSet { top: 235px; left: 764px; } .bg_cartoon_05 .characterSet:nth-of-type(1) { top: 260px; left: 153px; } .bg_cartoon_05 .characterSet:nth-of-type(1) ~ .characterSet { top: 215px; left: 364px; } .bg_cartoon_05 .characterSet:nth-of-type(1) ~ .characterSet ~ .characterSet { top: 204px; left: 525px; } .bg_cartoon_05 .characterSet:nth-of-type(1) ~ .characterSet ~ .characterSet ~ .characterSet { top: 246px; left: 726px; } .bg_cartoon_06 .characterSet:nth-of-type(1) { top: 155px; left: 122px; } .bg_cartoon_06 .characterSet:nth-of-type(1) ~ .characterSet { top: 120px; left: 330px; } .bg_cartoon_06 .characterSet:nth-of-type(1) ~ .characterSet ~ .characterSet { top: 114px; left: 542px; } .bg_cartoon_06 .characterSet:nth-of-type(1) ~ .characterSet ~ .characterSet ~ .characterSet { top: 152px; left: 742px; } /* ********************************************************** */ .characterText .bubbleClose { position: absolute; top: 10px; right: 10px; width: 20px; height: 20px; background: url('../../common/images/balloonCloseBtn.png') center center no-repeat; background-size: 20px 20px; cursor: pointer; z-index: 2; } .characterText .bubbleClose:hover { background: url('../../common/images/balloonCloseBtn_over.png') center center no-repeat; background-size: 20px 20px; }