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

.cl_mainActTitle { color: #ffffff; }
.cl_btnNext { display: none; right: 50px; bottom: 64px; }


/*
* *** 선택 페이지
*/
.selectObj { position: absolute; top: 180px; width: 276px; height: 323px; background-repeat: no-repeat; background-position: center center; background-size: 276px 323px; z-index: 2; cursor: pointer; }
.selectObj1 { left: 84px; background-image: url("../images/ceramics_1_n.png"); }
.selectObj2 { left: 360px; background-image: url("../images/ceramics_2_n.png"); }
.selectObj3 { left: 636px; background-image: url("../images/ceramics_3_n.png"); }
.selectObj4 { left: 912px; background-image: url("../images/ceramics_4_n.png"); }

.selectObj1.on { background-image: url("../images/ceramics_1_s.png"); }
.selectObj2.on { background-image: url("../images/ceramics_2_s.png"); }
.selectObj3.on { background-image: url("../images/ceramics_3_s.png"); }
.selectObj4.on { background-image: url("../images/ceramics_4_s.png"); }

/*단상*/
.selectPage .platform { position: absolute; bottom: 0; width: 232px; height: 262px; background-image: url("../images/platform.png"); background-size: 232px 262px; }
.selectPage .platform1 { left: 109px; }
.selectPage .platform2 { left: 385px; }
.selectPage .platform3 { left: 661px; }
.selectPage .platform4 { left: 937px; }


/*
* *** 그리기 페이지
*/
.drawPage .drawObj { position: absolute; top: 116px; left: 202px; z-index: 2; }
.drawPage .drawObj svg { position: absolute; top: 57px; left: 12.5px; }
.drawPage .drawObj2 svg { top: 13px; left: 62.5px; }
.drawPage .drawObj3 svg { top: 13px; left: 86.5px; }
.drawPage .drawObj4 svg { top: 43px; left: 26.5px; }
/*.drawPage .drawObj canvas { position: absolute; }*/
.drawPage .platform { position: absolute; top: 603px; left: 222px; width: 462px; height: 137px; background-image: url("../images/platform_1.png"); background-size: 462px 137px; }

.drawPage .drawObj .myCanvas { position: absolute; top: 57px; left: 12.5px; }
.drawPage .drawObj2 .myCanvas { top: 13px; left: 62.5px; }
.drawPage .drawObj3 .myCanvas { top: 13px; left: 86.5px; }
.drawPage .drawObj4 .myCanvas { top: 43px; left: 26.5px; }


/*그리기도구*/
.drawEquipment { position: absolute; top: 268px; left: 762px; width: 340px; }
.drawEquipment .title { display: flex; align-items: center; justify-content: center; height: 39px; font-size: 22px; color: #fff; font-family: "GodoB"; background-color: #5387FF; border-radius: 20px 20px 0px 0px; }
.drawEquipment .content { position: relative; height: 157px; border-radius: 0px 0px 20px 20px; background-color: #FFF; }
.drawEquipment .content .dot { position: absolute; top: 19px; left: 25px; width: 43px; height: 43px; border-radius: 50%; border: 3px solid #000; background-color: #008BFF; box-sizing: border-box; }
.drawEquipment .content .canvasWrap { position: absolute; top: 24px; left: 80px; }
.drawEquipment .content .canvasWrap canvas { position:absolute; top: 0px; left: 0px; border-radius: 10px; box-shadow: 0 0 0 2px #000000; }
.drawEquipment .content .canvasWrap .activeBar { position: absolute; top: -5px; width: 16px; height: 41px; border-radius: 100px; box-shadow: 0 0 0 2px #000000; background-color: #FFF; }

.drawEquipment .sizeList { position: absolute; top: 82px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; justify-content: center; gap: 31px; width: 292px; height: 51px;
    border-radius: 10px; background-color: #F4F4F4; }
.drawEquipment .sizeList .size { background-color: #000000; border-radius: 50%; cursor: pointer; }
.drawEquipment .sizeList .size.on {  box-shadow: 0 0 0 4px #5387FF; }
.drawEquipment .sizeList .size1 { width: 5px; height: 5px; }
.drawEquipment .sizeList .size2 { width: 10px; height: 10px; }
.drawEquipment .sizeList .size3 { width: 15px; height: 15px; }
.drawEquipment .sizeList .size4 { width: 20px; height: 20px; }
.drawEquipment .sizeList .size5 { width: 25px; height: 25px; }
.drawEquipment .sizeList .size6 { width: 30px; height: 30px; }

.btnArea { position: absolute; top: 474px; left: 762px; 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 .platform { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 462px; font-size: 0; }
.completePage .platform img { width: 100%; }

.completePage .createName { display: flex; align-items: center; justify-content: center; position: absolute; bottom: 42px; left: 50%; transform: translateX(-50%); width: 263px; height: 52px;
    border-radius: 100px; border: 1px solid #505050; background-color: #FFF;}
.completePage .createName.complete { background-color: #FFCB00; }
.completePage .createName input { width: 100%; height: 100%; font-size: 18px; font-family: "GodoB"; text-align: center; background-color: transparent; }
.completePage .createName input::placeholder { color: #A9A9A9; }
.completePage .createName.complete input { pointer-events: none; }

.completePage .cl_btnComplete { display: none; font-size: 24px; right: 50px; bottom: 64px; }
.completePage .cl_btnReset { display: none; }

.completePage .objArea { position: absolute; bottom: 119px; left: 50%; transform: translateX(-50%); background-repeat: no-repeat; background-size: 500px 543px; }
.completePage .objArea[data-obj-id="1"]{ width: 500px; height: 543px; background-image: url("../images/ceramics _big_001.svg"); }
.completePage .objArea[data-obj-id="2"]{ width: 500px; height: 543px; background-image: url("../images/ceramics _big_002.svg"); }
.completePage .objArea[data-obj-id="3"]{ width: 500px; height: 543px; background-image: url("../images/ceramics _big_003.svg"); }
.completePage .objArea[data-obj-id="4"]{ width: 500px; height: 543px; background-image: url("../images/ceramics _big_004.svg"); }

.completePage .objArea img { position: absolute; left: 50%; transform: translateX(-50%); }
.completePage .objArea[data-obj-id="1"] img { top: 57px; }
.completePage .objArea[data-obj-id="2"] img { top: 13px; }
.completePage .objArea[data-obj-id="3"] img { top: 13px; }
.completePage .objArea[data-obj-id="4"] img { top: 43px; }