/*.introPage .mainTitle { width: 668px; height: 87px; }
.introPage .mainTitle img { width: 100%; }*/
.activityPage {position: relative; width: 1280px; height: 720px; background-size: 1280px 720px; background: url("../images/activityBg.png")}

.cl_btnComplete { bottom: 54px; right: 50px; display: none;}

/*
* *** drawPage
*/
.canvasBg { position: absolute; top: 125px; left: 52px; width: 916px; height: 552px; background-image: url("../images/sketchbook.png"); background-repeat: no-repeat; background-size: 916px 552px; padding: 18px; box-sizing: border-box; }
.canvasBg:before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 803px; height: 44px;
    background-image: url("../images/spring.png"); background-size: 803px 44px; background-repeat: no-repeat; z-index: 3; }

#drawBoard { border-radius: 20px; }

.toolBar { position: absolute; top: 143px; left: 962px; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 30px; width: 268px; height: 449px;
    border-radius: 20px; border: 1px solid #CCBEA6; background-color: #FBF6F2; padding: 35px 15px; box-sizing: border-box; }
/*펜 도구*/
.toolBar .penType { display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 11px; cursor: pointer; }
.toolBar .penType .imgArea { display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 10px; box-shadow: 0 0 0 1px #CCBEA6; background-color: #FFF; }
.toolBar .penType.on .imgArea { box-shadow: 0 0 0 2px #5387FF; }
.toolBar .penType .imgArea img { width: 39px; }
.toolBar .penType .textArea { font-size: 10px; font-family: "GodoB"; }
.toolBar .penType .penSvg { display: none; }

.toolBar .toolArea { display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 15px; }
.toolBar .toolTitle { display: inline-flex; align-items: center; justify-content: center; font-family: "GodoB"; font-size: 14px;
    border-radius: 50px; background-color: #90B9FF; padding: 5px 20px; box-sizing: border-box; }
.toolBar .flexArea { display: flex; align-items: center; justify-content: center; gap: 9px; }
/*칼라픽커*/
.toolBar .jscolor { display: inline-block; width: 46px; height: 46px; font-size: 0; cursor: pointer; border-radius: 10px; border: 1px solid #CCBEA6; background-color: initial; }
.toolBar .colorPicker { display: flex; align-items: center; justify-content: center; gap: 42px; }
.toolBar .pickerArea { display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 16px; }
/*사이즈 선택*/
.toolBar .sizePick .sizeController { display: flex; align-items: center; justify-content: center; gap: 15px; }
.toolBar .sizePick .sizeController .size { background-color: #000; border-radius: 50%; cursor: pointer; }
.toolBar .sizePick .sizeController .size.on { box-shadow: 0 0 0 4px #5387FF; }
.toolBar .sizePick .sizeController .size.xSmall { width: 15px; height: 15px; }
.toolBar .sizePick .sizeController .size.small { width: 25px; height: 25px; }
.toolBar .sizePick .sizeController .size.medium { width: 35px; height: 35px; }
.toolBar .sizePick .sizeController .size.large { width: 45px; height: 45px; }
.toolBar .sizePick .sizeController .size.xLarge { width: 55px; height: 55px; }
/*undo redo 버튼*/
.btnArea { position: absolute; top: 600px; left: 974px; display: flex; align-items: center; justify-content: flex-start; gap: 9px; }
.btnArea .btn { width: 44px; height: 44px; background-size: 44px 44px; background-repeat: no-repeat; cursor: pointer; pointer-events: none; }
.btnArea .btn.on { pointer-events: auto; }
.btnArea .prevBtn { background-image: url("../images/prevBtn.png"); }
.btnArea .nextBtn { background-image: url("../images/nextBtn.png"); }
.btnArea .prevBtn.on { background-image: url("../images/prevBtn_on.png"); }
.btnArea .nextBtn.on { background-image: url("../images/nextBtn_on.png"); }
.btnArea .prevBtn.on:hover { background-image: url("../images/prevBtn_hover.png"); }

/*
* *** completePage
*/
.cl_btnReset.useIcon { bottom: 54px; right: 30px; }
.completePage .canvasBg { left: 172px; }
.completePage .completeCanvas { border-radius: 20px; }