/*.introPage .mainTitle { top: 185px; width: 825px; height: 194px; }*/

.activityPage{opacity:0; background-image: url("../images/activityPage_1.png"); width: 100%; height: 100%; }


/*
* *** 샘플 페이지
*/
.sampleArea { display: flex; align-items: center; justify-content: center; }
.sampleArea .sample { position: absolute; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.sampleArea .sample1 { top: 247px; left: 213px; width: 282px; gap: 31px; }
.sampleArea .sample2 { top: 199px; left: 568px; width: 146px; gap: 22px; }
.sampleArea .sample3 { top: 207px; left: 806px; width: 240px; gap: 23px; }
.sampleArea .sample img { width: 100%; }

.sampleArea .textArea { width: 115px; height: 43px; display: flex; align-items: center; justify-content: center; font-size: 20px; color: #FFCA1B; font-family: "GodoB"; border-radius: 100px; background: #2B2B2B; }

.charaterArea .char { position: absolute; left: 63px; top: 547px; }
.charaterArea .balloon {
    position: absolute;
    width: 374px;
    height: 84px;
    top: 561px;
    left: 186px;
    font-size: 18px;
    color: #000;
    font-family: "GodoB";
    text-align: center;
    line-height: 26px;
    background-image: url("../images/balloon.png");
    background-size: 374px 84px;
    padding: 12px 15px 12px 35px;
    opacity:0;
    background-repeat: no-repeat;
    box-sizing: border-box;
}
.charaterArea .balloon.on {opacity:1; transition:opacity 0.4s linear;}


/*
* *** 드래그 드롭 페이지
*/
.dragPage .cl_btnNext { right: 38px; bottom: 71px; }

#decoArea {width:725px; height:550px; /*border:solid 1px #000000;*/}

.decoItem {position:absolute; transform-origin: center center;}
.decoItem .decoImg {display:block; width:100%; height:100%; transform-origin: center center;}

.decoItem .anchorWrap {display:none; position:absolute; top:0; left:0; width:100%; height:100%; border:solid 2px #000000; box-sizing: border-box; pointer-events: none;}
.decoItem .anchorWrap > img {position:absolute; pointer-events: auto;}
.decoItem .anchorWrap .btnRemove {top:0; left:0; transform:translate(-50%, -50%);}
.decoItem .anchorWrap .btnRotate {top:0; right:0; transform:translate(50%, -50%);}
.decoItem .anchorWrap .btnReverse {bottom:0; left:0; transform:translate(-50%, 50%);}
.decoItem .anchorWrap .btnExpand {bottom:0; right:0; transform:translate(50%, 50%);}

.decoItem.on .anchorWrap {display:block;}
.decoItem.reverse .imgWrap {transform:scaleX(-1);}


.dragArea .board img { position: absolute; top: 45px; right: 0; width: 520px; height: 639px; }
.dragArea .dragItem { position: absolute; }
.dragArea .dragItem1 { top: 91px; left: 809px; width: 128px; }
.dragArea .dragItem2 { top: 229px; left: 809px; width: 128px; }
.dragArea .dragItem3 { top: 108px; left: 946px; width: 155px; }
.dragArea .dragItem4 { top: 194px; left: 947px; width: 190px; }
.dragArea .dragItem5 { top: 282px; left: 951px; width: 194px; }
.dragArea .dragItem6 { top: 112px; left: 1112px; width: 66px; }
.dragArea .dragItem7 { top: 99px; left: 1189px; width: 50px; }
.dragArea .dragItem8 { top: 205px; left: 1157px; width: 29px; }
.dragArea .dragItem9 { top: 210px; left: 1204px; width: 29px; }
.dragArea .dragItem10 { top: 306px; left: 1157px; width: 74px; }
.dragArea .dragItem11 { top: 371px; left: 837px; width: 39px; }
.dragArea .dragItem12 { top: 370px; left: 908px; width: 39px; }
.dragArea .dragItem13 { top: 379px; left: 987px; width: 40px; }
.dragArea .dragItem14 { top: 379px; left: 1063px; width: 34px; }
.dragArea .dragItem15 { top: 378px; left: 1132px; width: 36px; }
.dragArea .dragItem16 { top: 413px; left: 1134px; width: 35px; }
.dragArea .dragItem17 { top: 373px; left: 1203px; width: 28px; }
.dragArea .dragItem18 { top: 414px; left: 1205px; width: 25px; }
.dragArea .dragItem19 { top: 460px; left: 821px; width: 92px; }
.dragArea .dragItem20 { top: 453px; left: 931px; width: 45px; }
.dragArea .dragItem21 { top: 450px; left: 994px; width: 20px; }
.dragArea .dragItem22 { top: 450px; left: 1027px; width: 20px; }
.dragArea .dragItem23 { top: 480px; left: 1059px; width: 90px; }
.dragArea .dragItem24 { top: 453px; left: 1161px; width: 69px; }
.dragArea .dragItem25 { top: 558px; left: 879px; width: 34px; }
.dragArea .dragItem26 { top: 541px; left: 947px; width: 38px; }
.dragArea .dragItem27 { top: 540px; left: 1003px; width: 37px; }
.dragArea .dragItem28 { top: 537px; left: 1066px; width: 14px; }
.dragArea .dragItem29 { top: 537px; left: 1110px; width: 14px; }
.dragArea .dragItem30 { top: 537px; left: 1154px; width: 14px; }
.dragArea .dragItem31 { top: 537px; left: 1198px; width: 14px; }
.dragArea .dragItem img { width: 100%; }


/*
* *** 그린 그림 이름 짓기
*/
.showPicture { display:flex; justify-content: center; position: absolute; bottom: 227px; left: 50%; transform: translateX(-50%); width: 778px; z-index: 2; pointer-events: none; }
.createShowBox { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 778px; height: 340px;
    background-image: url("../images/showBox.png"); background-size: 778px 340px; background-repeat: no-repeat; }
/*작품명 짓기*/
.createShowBox input { position: absolute; top: 163px; left: 50%; transform: translateX(-50%); width: 293px; height: 52px; font-size: 18px; color: #000000; font-family: "GodoB"; text-align:center; padding:0 20px; border-radius: 100px; border: 1px solid #505050; background: #FFF; box-sizing: border-box; }
.createShowBox input::placeholder { color: #A9A9A9; text-align:center;}
.bottomBtnArea { position: absolute; top: 225px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; justify-content: center; gap: 20px; }
.bottomBtnArea .btnAct { position: relative; bottom: 0; right: 0; }

.createShowBox .btnAct {display:inline-flex; justify-content: center; align-items: center; position: absolute; bottom: 74px; left: 719px; right:auto; height:51px; white-space: nowrap;}
.createShowBox .cl_btnNext {width:109px;}
.createShowBox .cl_btnReset {/*display:none;*/ width:162px;}

.showPicture #decoArea {position:relative; top:-40px; left:-30px; transform:scale(0.8); }

/*완성된 이름*/
.completeName { display: none; align-items: center; justify-content: center; position: absolute; left: 50%; transform: translateX(-50%); top: 170px; width: 280px; height: 52px; color: #FFCA1B; font-size: 18px; font-family: "GodoB"; border-radius: 100px; background: #2B2B2B; }