.introPage { position: absolute; top: 0; left: 0; }
/*.introPage .mainTitle { width: 329px; height: 85px; }*/


.activityPage { display: none; position: absolute; top: 0; left: 0; width: 1280px; height: 720px; background-size: 1280px 720px; background-image: url("../images/activityBg.png"); }
.activityPage.zoomPage { display: block; }

/*
* *** 선택 페이지
*/
.selectPage .cl_btnNext { display: none; }
.selectObj { position: absolute; background-repeat: no-repeat; background-position: center center; cursor: pointer; }
.selectObj1 { top: 133px; left: 158px; width: 291px; height: 263px; background-image: url("../images/doughnut_1.png"); background-size: 251px 223px; }
.selectObj2 { top: 131px; left: 501px; width: 278px; height: 266px; background-image: url("../images/doughnut_2.png"); background-size: 238px 226px; }
.selectObj3 { top: 136px; left: 830px; width: 270px; height: 257px; background-image: url("../images/doughnut_3.png"); background-size: 230px 216px; }
.selectObj4 { top: 382px; left: 165px; width: 276px; height: 261px; background-image: url("../images/doughnut_4.png"); background-size: 236px 221px; }
.selectObj5 { top: 375px; left: 511px; width: 258px; height: 276px; background-image: url("../images/doughnut_5.png"); background-size: 218px 235px; }
.selectObj6 { top: 378px; left: 815px; width: 280px; height: 268px; background-image: url("../images/doughnut_6.png"); background-size: 240px 227px; }
/*활성화*/
.selectObj1.on { background-image: url("../images/doughnut_1_on.png"); background-size: 291px 263px; }
.selectObj2.on { background-image: url("../images/doughnut_2_on.png"); background-size: 278px 266px; }
.selectObj3.on { background-image: url("../images/doughnut_3_on.png"); background-size: 270px 257px; }
.selectObj4.on { background-image: url("../images/doughnut_4_on.png"); background-size: 276px 261px; }
.selectObj5.on { background-image: url("../images/doughnut_5_on.png"); background-size: 258px 276px; }
.selectObj6.on { background-image: url("../images/doughnut_6_on.png"); background-size: 280px 268px; }


/*
* *** 그리기 페이지
*/
.drawObj { position: absolute; }
.drawObj1 { top: 118px; left: 115px; }
.drawObj2 { top: 114px; left: 129px; }
.drawObj3 { top: 125px; left: 140px; }
.drawObj4 { top: 120px; left: 132px; }
.drawObj5 { top: 123px; left: 154px; }
.drawObj6 { top: 111px; left: 127px; }
.myCanvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 21; cursor: pointer; }

/***탭 영역***/
.tabBtn { position: absolute; top: 146px; width: 192px; height: 43px; display: flex; align-items: center; justify-content: center; font-size: 20px; color: #fff; font-family: "GodoB";
    border-radius: 20px 20px 0px 0px; background-color: #ADADAD; cursor: pointer; }
.tabBtn1 { right: 309px; }
.tabBtn2 { right: 114px; }

.tabBtn.on { height: 48px; top: 141px; background-color: #5387FF; }
.styleTab {position: absolute; top: 189px; right: 114px; display: none; width: 387px; height: 239px; border-radius: 0px 0px 20px 20px; padding: 18px 0 29px 0; box-sizing: border-box; background-color: #FFF; box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); }
.styleTab1 { display: block; }
.styleTab2 { height: 375px; }

/*크기*/
.sizeArea { position: absolute; top: 237px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; justify-content: center; flex-direction: column; }
.sizeTitle { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 80px; height: 35px; font-size: 20px; color: #fff; font-family: "GodoB";
    border-radius: 25px; background-color: #5387FF; }
.sizeTitle:before { content: ''; position: absolute; top: 50%; left: -137px; transform: translateY(-50%); width: 125px; height: 1px; background-color: #CECECE; }

.sizeTitle:after { content: ''; position: absolute; top: 50%; right: -137px; transform: translateY(-50%); width: 125px; height: 1px; background-color: #CECECE; }
.sizeList { display: flex; align-items: center; justify-content: center; gap: 22px; margin-top: 14px; }
.sizeList .size { background-color: #000; border-radius: 50%; cursor: pointer; }
.sizeList .size.xSmall { width: 10px; height: 10px; }
.sizeList .size.small { width: 20px; height: 20px; }
.sizeList .size.medium { width: 30px; height: 30px; }
.sizeList .size.large { width: 40px; height: 40px; }
.sizeList .size.xLarge { width: 50px; height: 50px; }

.sizeList .size.on { outline: 4px solid #5387FF; }
/*버튼*/
.btnArea { position: absolute; bottom: -59px; 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"); }

.btnArea .nextBtn.on:hover { background-image: url("../images/nextBtn_hover.png"); }
/*칼라픽커*/
.jsColorWrap { position: absolute; top: 189px; left: 779px; width: 387px; height: 239px; }
.jscolor { position: absolute; top: 12px; left: 67px; display: inline-block; width: 10px; height: 10px; border-radius: 5px; cursor: pointer; background-color: initial; font-size: 0; }
.jscolor:hover { border-color: #5387FF; }
.jscolor-wrap { position: absolute; top: 0 !important; left: 50% !important; transform: translateX(-50%) !important; }
.jscolor-shadow { display: none !important; }

.jscolor-border { width: 100% !important; height: 100% !important; border: none !important; border-radius: 0 !important; }

.jscolor-palette-sw:nth-child(n+11){ top: 30px !important; }
/*
* *** 완성 페이지
*/
.completePage svg { position: absolute; top: 121px; left: 50%; transform: translateX(-50%); }
.completePage .cl_btnReset.useIcon { bottom: 53px; }
.canvasImage { position: absolute; top: 121px; left: 50%; transform: translateX(-50%); }


.cl_btnComplete { display: none; }