/*.introPage .mainTitle { width: 738px; height: 77px; }
.introPage .mainTitle img { width: 100%; }*/
.cl_mainActTitle {
    text-shadow: 1px 0px 0px #fff, 0px 1px 0px #fff, -1px 0px 0px #fff, 0px -1px 0px #fff, 1px 1px 0px #fff, -1px 1px 0px #fff, -1px -1px 0px #fff, 1px -1px 0px #fff,
    2px 0px 0px #fff, 0px 2px 0px #fff, -2px 0px 0px #fff, 0px -2px 0px #fff, 2px 2px 0px #fff, -2px 2px 0px #fff, -2px -2px 0px #fff, 2px -2px 0px #fff
}
.activityPage { display: none;position: relative; width: 1280px; height: 720px; background-size: 1280px 720px; }
.activityPage.show { display: block;}
.activityPage.characterPage { background: url("../images/activityBg.png")no-repeat;}
.activityPage.selectPage.bg1 { background: url("../images/selectBg1.png")no-repeat;}
.activityPage.selectPage.bg2 { background: url("../images/selectBg2.png")no-repeat;}
.activityPage.selectPage.bg3 { background: url("../images/selectBg3.png")no-repeat;}
.activityPage.selectPage.bg4 { background: url("../images/selectBg1.png")no-repeat;}
.activityPage.selectPage.bg5 { background: url("../images/selectBg5.png")no-repeat;}
.activityPage.selectPage.bg6 { background: url("../images/selectBg6.png")no-repeat;}
.activityPage.selectPage.bg7 { background: url("../images/selectBg5.png")no-repeat;}
.activityPage.selectPage.bg8 { background: url("../images/selectBg8.png")no-repeat;}
.activityPage.selectPage.bg9 { background: url("../images/selectBg5.png")no-repeat;}
.activityPage.selectPage.bg10 { background: url("../images/selectBg10.png")no-repeat;}
.activityPage.selectPage.bg11 { background: url("../images/selectBg11.png")no-repeat;}
.activityPage.selectPage.bg12 { background: url("../images/selectBg10.png")no-repeat;}
.activityPage.selectPage.bg13 { background: url("../images/selectBg13.png")no-repeat;}
.activityPage.selectPage.bg14 { background: url("../images/selectBg10.png")no-repeat;}
.activityPage.selectPage.bg15 { background: url("../images/selectBg15.png")no-repeat;}
.activityPage.selectPage.bg16 { background: url("../images/selectBg10.png")no-repeat;}

.activityPage.selectPage.bg13.on { animation: bgChange 2s linear 1 forwards}
@keyframes bgChange {
    0% { background: url("../images/selectBg13.png")no-repeat; }
    100% { background: url("../images/selectBg13_on.png")no-repeat; }
}

.activityTit { position: absolute; top: 158px; left: 314px; width: 660px;}
.activityTit img { width: 100%;}

.zoomActivity .zoomArea {position: absolute; width: 1054px; height: 511px; top: 130px; left: 112px; overflow: hidden}
.zoomActivity .zoomArea .zoomWrap { position: absolute; transform-origin: top left;}
.zoomActivity .zoomArea .zoomWrap .zoomBg { width: 100%; cursor: pointer;}

.selectBox { display: flex; justify-content: center; align-items: center; gap: 10px; }
.selectBox.column { flex-direction: column;}
.selectText { display: flex; justify-content: center; align-items: center; border-radius: 10px; border: 1px solid #6EA863;background: #9AFB87; font-size: 26px; color: #000; font-family: "GodoM"; padding: 10px 30px; box-sizing: border-box; }
.selectText.word { cursor: pointer;}
.selectText.non { pointer-events: none;}
.selectText.on { background-color: #5387FF; border-color: #1A50CD; color: #fff;}

.cl_btnNext { display: none; right: 36px; bottom: 61px;}

.balloon,
.pinBtn,
.nextPageBtn { display: none;}
.pinBtn {  width: 55px; }

.nextPageBtn.pink { background-color: #5387FF ;border-color: #1A50CD ;pointer-events: auto ;animation: bac 0.7s linear infinite}

.balloon .text { position: absolute; font-size: 22px; color: #222; font-family: "BMJUA"; line-height: 28px; white-space: nowrap; text-align: center}

.balloon .selectBox { position: absolute;}
.characterPage .selectArea { display: flex; justify-content: center; gap: 50px; margin-top: 227px;}
.characterPage .selectArea .selectBtn { position: relative;}
.characterPage .selectArea .cha { width: 216px; cursor: pointer;}
.characterPage .selectArea .pin { display: none; position: absolute; left: 50%; transform: translateX(-50%); top: -45px; width: 50px}
.selectPage .balloon { position: absolute; }


.selectPage .cha,
.selectPage .changeCha,
.selectPage .defaultCha {position: absolute; width: 193px; }


.selectPage .selectIcon {position: absolute;  }
.selectPage .selectIcon img { width: 100%}
.selectPage .selectIcon1 { width: 102px;height: 263px; top: 218px;left: 432px; }
.selectPage .selectIcon2 { width: 82px; top: 273px; left: 863px;}
.selectPage .selectIcon3 { width: 156px;top: 191px;left: 405px; cursor: pointer;}
.selectPage .selectIcon4 { width: 132px;top: 248px;left: 838px;cursor: pointer;}
.selectPage .selectIcon5 { width: 176px;top: 329px;left: 281px; }
.selectPage .selectIcon6 { width: 109px; top: 329px; left: 681px;}
.selectPage .selectIcon7 { width: 77px; top: 220px; left: 987px;}


.selectPage[data-num='1'] .cha { top: 345px; left: 93px;   }
.selectPage[data-num='1'] .balloon { top: 249px; left: 189px; width: 1774px; height: 116px; }
.selectPage[data-num='1'] .balloon .text { top: 21px; left: 23px;}
.selectPage[data-num='1'] .pinBtn { position: absolute;top: 267px; left: 668px;}
.selectPage[data-num='1'] .icon {position: absolute; top: 332px; left: 613px; cursor: pointer;}

.selectPage[data-num='2'] .cha { top: 350px; left: 159px; }
.selectPage[data-num='2'] .defaultCha { top: 365px; right: 123px; left: auto; width: 186px;}
.selectPage[data-num='2'] .balloon.speech1 { top: 265px; left: 270px;}
.selectPage[data-num='2'] .balloon.speech2 { top: 247px; left: 841px; }
.selectPage[data-num='2'] .balloon.speech3 { top: 266px; left: 880px; }
.selectPage[data-num='2'] .balloon.speech1 .text { top: 22px; left: 20px;}
.selectPage[data-num='2'] .balloon.speech2 .text { top: 17px; left: 15px;}
.selectPage[data-num='2'] .balloon.speech3 .text { top: 21px; left: 31px;}
.selectPage[data-num='2'] .cl_btnNext { bottom:294px; right: 576px;}

.selectPage[data-num='3'] .changeCha { top: 463px; left: 124px; z-index: 10}
.selectPage[data-num='3'] .defaultCha { top: 463px; right: 64px; width: 186px; z-index: 10}
.selectPage[data-num='3'] .balloon.speech1 { top: 375px; left: 934px; z-index: 1;}
.selectPage[data-num='3'] .balloon.speech1 .text { top: 21px; left: 18px;}
.selectPage[data-num='3'] .roundBoxWrap {position: absolute; top: 573px; left: 435px; display: flex; padding: 23px 35px; box-sizing: border-box;border-radius: 10px;background:#F3FAFB; box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.25);}
.selectPage[data-num='3'] .hideWord {position: absolute; top: 0; left: 0; width: 52px; height: 26px; border: 5px solid #43FFD3; background-color:rgba(0,0,0,0.25); cursor: pointer; z-index: 10; opacity: 0;}
.selectPage[data-num='3'] .hideWord.on { opacity: 1; cursor: auto;}
.selectPage[data-num='3'] .hideWord.word1 { top: 131px;left: 375px;}
.selectPage[data-num='3'] .hideWord.word2 { top: 292px;left: 591px;}
.selectPage[data-num='3'] .hideWord.word3 { top: 185px;left: 25px;}
.selectPage[data-num='3'] .cl_btnNext { right: 49px; bottom: 64px; }
@keyframes bac {
    0%{ background-color: #D753FF ;}

    100% {background-color: #3169EB;}

}

.selectPage[data-num='3'] .hintBox { position: absolute; top: 62px; right: 113px; display: flex; align-items: center; gap: 8px; width: 229px; height: 50px; background-color: #fff; border-radius: 25px; box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.25);}
.selectPage[data-num='3'] .hintTit  { width: 80px; height: 44px; display: flex; justify-content: center; align-items: center; font-size: 28px; color: #fff; font-family: "BMJUA"; margin-left: 3px; ;background-color: #5387FF; border-radius: 25px; box-sizing: border-box; }
.selectPage[data-num='3'] .hintIcon { width: 35px; height: 35px; background: url("../images/hintIcon.png")no-repeat; background-size: 35px 35px; cursor: pointer;}
.selectPage[data-num='3'] .hintIcon.off { background: url("../images/hintIcon_off.png")no-repeat; background-size: 35px 35px; pointer-events: none;}

.selectPage[data-num='3'] .hintBg { position: absolute; top: 0; left: 0; width: 100%; display: none;}

.selectPage[data-num='4'] .changeCha { top: 345px; left: 834px;}
.selectPage[data-num='4'] .iconArea { position: absolute; top: 362px; left: 1037px; display: block; cursor: pointer;}
.selectPage[data-num='4'] .icon { position: absolute; width: 165px; height: 143px;}
.selectPage[data-num='4'] .icon img { width: 100%;}

.selectPage[data-num='5'] .cha { top: 345px; left: 93px;  }
.selectPage[data-num='5'] .balloon { top: 249px; left: 189px; }
.selectPage[data-num='5'] .balloon .text { top: 21px; left: 17px;}
.selectPage[data-num='5'] .pinBtn { position: absolute;top: 142px; left: 461px;  }

.selectPage[data-num='6'] .changeCha { top: 345px; left: 93px;  }
.selectPage[data-num='6'] .defaultCha { top: 438px; right: 93px;  }
.selectPage[data-num='6'] .balloon.speech1 { top: 249px; left: 189px; }
.selectPage[data-num='6'] .balloon.speech2 { top: 323px; left: 908px; }
.selectPage[data-num='6'] .balloon.speech3 { top: 323px; left: 963px; }
.selectPage[data-num='6'] .balloon.speech4 { top: 135px; left: 201px; }
.selectPage[data-num='6'] .balloon.speech1 .text { top: 21px; left: 26px;}
.selectPage[data-num='6'] .balloon.speech2 .text { top: 19px; left: 21px;}
.selectPage[data-num='6'] .balloon.speech3 .text { top: 19px; left: 20px;}
.selectPage[data-num='6'] .balloon.speech4 .selectBox { top: 27px; left: 28px;}

.selectPage[data-num='7'] .changeCha { top: 345px; left: 607px;  }
.selectPage[data-num='7'] .pinBtn { position: absolute;top: 166px; left: 880px; }

.selectPage[data-num='8'] .changeCha { top: 345px; left: 93px;  }
.selectPage[data-num='8'] .defaultCha { top: 438px; right: 93px;  }
.selectPage[data-num='8'] .balloon.speech1 { top: 249px; left: 189px; }
.selectPage[data-num='8'] .balloon.speech2 { top: 298px; left: 907px; }
.selectPage[data-num='8'] .balloon.speech3 { top: 324px; left: 956px; }
.selectPage[data-num='8'] .balloon.speech4 { top: 143px; left: 200px; }
.selectPage[data-num='8'] .balloon.speech1 .text { top: 22px; left: 21px;}
.selectPage[data-num='8'] .balloon.speech2 .text { top: 17px; left: 22px;}
.selectPage[data-num='8'] .balloon.speech3 .text { top: 21px; left: 17px;}
.selectPage[data-num='8'] .balloon.speech4 .selectBox { top: 27px; left: 28px;}

.selectPage[data-num='9'] .changeCha { top: 345px; left: 850px; z-index: 1 }
.selectPage[data-num='9'] .iconArea { position: absolute; top: 362px; left: 1037px; display: block; cursor: pointer;}
.selectPage[data-num='9'] .icon { position: absolute; width: 165px; height: 143px;}
.selectPage[data-num='9'] .icon img { width: 100%;}

.selectPage[data-num='10'] .cha { top: 345px; left: 93px;}
.selectPage[data-num='10'] .balloon.speech1 { top: 249px; left: 99px; }
.selectPage[data-num='10'] .balloon.speech1 .text { top: 22px; left: 21px;}
.selectPage[data-num='10'] .pinBtn { position: absolute; top: 225px; left: 342px;}
.selectPage[data-num='10'] .selectIcon8 { width: 228px;top: 303px;left: 255px; cursor: pointer;}

.selectPage[data-num='11'] .changeCha { top: 345px; left: 93px;  }
.selectPage[data-num='11'] .defaultCha { top: 438px; left: 993px;  }
.selectPage[data-num='11'] .balloon.speech1 { top: 249px; left: 175px; }
.selectPage[data-num='11'] .balloon.speech2 { top: 324px; left: 973px; }
.selectPage[data-num='11'] .balloon.speech3 { top: 228px; left: 93px;  }
.selectPage[data-num='11'] .balloon.speech1 .text { top: 21px; left: 19px;}
.selectPage[data-num='11'] .balloon.speech2 .text { top: 19px; left: 19px;}
.selectPage[data-num='11'] .balloon.speech3 .text { top: 17px; left: 18px;}
.selectPage[data-num='11'] .puzzleBg { position: absolute; top: 130px; left: 358px; width: 565px; transition: 0.8s linear; }
.selectPage[data-num='11'] .puzzleBg .default { display: block;}
.selectPage[data-num='11'] .puzzleBg .success { display: none;}
.selectPage[data-num='11'] .puzzleBg.end .default { display: none;}
.selectPage[data-num='11'] .puzzleBg.end .success { display: block;}
.selectPage[data-num='11'] .puzzleBg.on { transition: 0.5s linear; left: 61px;}
.selectPage[data-num='11'] .puzzleBg img { width: 100%}

.selectPage[data-num='11'] .dropArea,
.selectPage[data-num='11'] .dragArea { display: none;}
.selectPage[data-num='11'] .dropItem,
.selectPage[data-num='11'] .dragItem { position: absolute; z-index: 2}
.selectPage[data-num='11'] .dragItem img { width: 100%;}
.selectPage[data-num='11'] .dropItem { z-index: 2}
.selectPage[data-num='11'] .dropItem.on { z-index: 1}
.selectPage[data-num='11'] .dropItem.dropItem1 { top: 131px;left: 61px; width: 185px;height: 166px;  }
.selectPage[data-num='11'] .dropItem.dropItem2 { top: 131px;left: 249px;width: 190px;height: 166px; }
.selectPage[data-num='11'] .dropItem.dropItem3 { top: 131px;left: 443px;width: 180px;height: 166px; }
.selectPage[data-num='11'] .dropItem.dropItem4 { top: 301px;left: 62px;width: 182px;height: 170px;  }
.selectPage[data-num='11'] .dropItem.dropItem5 { top: 301px;left: 251px;width: 189px;height: 170px; }
.selectPage[data-num='11'] .dropItem.dropItem6 { top: 301px;left: 446px;width: 180px;height: 166px; }
.selectPage[data-num='11'] .dropItem.dropItem7 { top: 476px;left: 62px;width: 181px;height: 157px;  }
.selectPage[data-num='11'] .dropItem.dropItem8 { top: 480px;left: 248px;width: 189px;height: 157px; }
.selectPage[data-num='11'] .dropItem.dropItem9 { top: 477px;left: 444px;width: 178px;height: 157px; }

.selectPage[data-num='11'] .dropItem.dropItem1.on { top: 131px;left: 61px;  width: 189px; height: 218px;  background: url("../images/drag1_on.png")no-repeat; background-size: 189px 218px}
.selectPage[data-num='11'] .dropItem.dropItem2.on { top: 131px;left: 190px; width: 309px; height: 169px; background: url("../images/drag2_on.png")no-repeat; background-size: 309px 169px}
.selectPage[data-num='11'] .dropItem.dropItem3.on { top: 131px;left: 439px; width: 188px; height: 218px; background: url("../images/drag3_on.png")no-repeat; background-size: 188px 218px}
.selectPage[data-num='11'] .dropItem.dropItem4.on { top: 295px;left: 61px;  width: 249px; height: 181px;  background: url("../images/drag4_on.png")no-repeat; background-size: 249px 181px}
.selectPage[data-num='11'] .dropItem.dropItem5.on { top: 245px;left: 245px; width: 202px; height: 285px; background: url("../images/drag5_on.png")no-repeat; background-size: 202px 285px}
.selectPage[data-num='11'] .dropItem.dropItem6.on { top: 295px;left: 382px; width: 244px; height: 181px; background: url("../images/drag6_on.png")no-repeat; background-size: 244px 181px}
.selectPage[data-num='11'] .dropItem.dropItem7.on { top: 419px;left: 61px;  width: 189px; height: 218px;  background: url("../images/drag7_on.png")no-repeat; background-size: 189px 218px}
.selectPage[data-num='11'] .dropItem.dropItem8.on { top: 471px;left: 190px; width: 308px; height: 166px; background: url("../images/drag8_on.png")no-repeat; background-size: 308px 166px}
.selectPage[data-num='11'] .dropItem.dropItem9.on { top: 420px;left: 437px; width: 189px; height: 217px; background: url("../images/drag9_on.png")no-repeat; background-size: 189px 217px}

.selectPage[data-num='11'] .dragItem .off { display: block;}
.selectPage[data-num='11'] .dragItem .on { display: none;}
.selectPage[data-num='11'] .dragItem.on .off { display: none;}
.selectPage[data-num='11'] .dragItem.on .on { display: block;}

.selectPage[data-num='11'] .dragItem.dragItem1 { width: 118px;  top: 513px; left: 861px;}
.selectPage[data-num='11'] .dragItem.dragItem2 { width: 239px;  top: 348px; left: 828px;}
.selectPage[data-num='11'] .dragItem.dragItem3 { width: 117px;  top: 348px; left: 1100px;}
.selectPage[data-num='11'] .dragItem.dragItem4 { width: 178px;  top: 520px; left: 1038px;}
.selectPage[data-num='11'] .dragItem.dragItem5 { width: 131px;  top: 143px; left: 676px;}
.selectPage[data-num='11'] .dragItem.dragItem6 { width: 174px;  top: 171px; left: 1055px;}
.selectPage[data-num='11'] .dragItem.dragItem7 { width: 118px;  top: 348px; left: 676px;}
.selectPage[data-num='11'] .dragItem.dragItem8 { width: 237px;  top: 172px; left: 812px;}
.selectPage[data-num='11'] .dragItem.dragItem9 { width: 118px;  top: 513px; left: 676px;}

.selectPage[data-num='11'] .dragItem.dragItem1.on { width: 189px; }
.selectPage[data-num='11'] .dragItem.dragItem2.on { width: 309px; }
.selectPage[data-num='11'] .dragItem.dragItem3.on { width: 188px; }
.selectPage[data-num='11'] .dragItem.dragItem4.on { width: 249px; }
.selectPage[data-num='11'] .dragItem.dragItem5.on { width: 202px; }
.selectPage[data-num='11'] .dragItem.dragItem6.on { width: 244px; }
.selectPage[data-num='11'] .dragItem.dragItem7.on { width: 189px; }
.selectPage[data-num='11'] .dragItem.dragItem8.on { width: 308px; }
.selectPage[data-num='11'] .dragItem.dragItem9.on { width: 189px; }

.selectPage[data-num='12'] .changeCha { top: 345px; left: 470px;}
.selectPage[data-num='12'] .pinBtn { position: absolute; top: 225px; left: 712px;}
.selectPage[data-num='12'] .selectIcon8 {width: 161px;top: 303px;left: 655px; cursor: pointer;}

.selectPage[data-num='13'] .changeCha { top: 345px; left: 93px;  }
.selectPage[data-num='13'] .defaultCha { top: 438px; right: 93px;  }
.selectPage[data-num='13'] .balloon.speech1 { top: 249px; left: 189px;}
.selectPage[data-num='13'] .balloon.speech2 { top: 298px; left: 921px;}
.selectPage[data-num='13'] .balloon.speech3 { top: 324px; left: 941px;}
.selectPage[data-num='13'] .balloon.speech4 { top: 135px; left: 201px;}
.selectPage[data-num='13'] .balloon.speech1 .text { top: 22px; left: 24px;}
.selectPage[data-num='13'] .balloon.speech2 .text { top: 17px; left: 22px;}
.selectPage[data-num='13'] .balloon.speech3 .text { top: 21px; left: 19px;}
.selectPage[data-num='13'] .balloon.speech4 .selectBox { top: 27px; left: 28px;}

.selectPage[data-num='14'] .changeCha { top: 345px; left: 800px;}
.selectPage[data-num='14'] .pinBtn { position: absolute; top: 125px; left: 998px;}
.selectPage[data-num='14'] .selectIcon8 {width: 130px;top: 194px;left: 960.5px; cursor: pointer;}

.selectPage[data-num='15'] .changeCha { top: 345px; left: 93px;  }
.selectPage[data-num='15'] .defaultCha { top: 438px; right: 93px;  }
.selectPage[data-num='15'] .balloon.speech1 { top: 249px; left: 189px;}
.selectPage[data-num='15'] .balloon.speech2 { top: 298px; left: 951px;}
.selectPage[data-num='15'] .balloon.speech3 { top: 324px; left: 941px;}
.selectPage[data-num='15'] .balloon.speech4 { top: 135px; left: 191px;}
.selectPage[data-num='15'] .balloon.speech1 .text { top: 20px; left: 27px;}
.selectPage[data-num='15'] .balloon.speech2 .text { top: 20px; left: 16px;}
.selectPage[data-num='15'] .balloon.speech3 .text { top: 20px; left: 17px;}
.selectPage[data-num='15'] .balloon.speech4 .selectBox { top: 27px; left: 28px;}

.selectPage[data-num='16'] .changeCha { top: 320px; left: 885px; z-index: 1}
.selectPage[data-num='16'] .finishCha { display: none; position: absolute;top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 1; width: 850px;}
.selectPage[data-num='16'] .reBtn {position: absolute; top: 370px; right: 50px; width: 120px; height: 125px;  background: url("../images/reBtn.png")no-repeat; background-size: 120px 125px; cursor: pointer;}
.selectPage[data-num='16'] .reBtn:hover { background: url("../images/reBtn_hover.png")no-repeat; background-size: 120px 125px;}
.selectPage[data-num='16'] .selectIcon7 { width: 77px; top: 220px; left: 987px;;}