/*.introPage .mainTitle { width: 315px; height: 77px; }
.introPage .mainTitle img { width: 100%; }*/
.activityPage { width: 100%; height: 100%; background: url("../images/activityBg.png"); opacity:0; background-size: contain}

.cl_mainActTitle{margin-bottom: 11px;}

/*접시 이미지*/
.dragPage .dish img { position: absolute; top: 127px; left: 6px; width: 729px; }

/*드래그 물체 올려놓은 쟁반 이미지*/
.dragPage .dragArea .board img { position: absolute; top: 109px; left: 711px; width: 543px; height: 515px; }

.sliceImg {position:absolute; pointer-events: none; opacity:0;}


#decoArea {width:680px; height:500px; /*border:solid 1px #000000;*/}

#decoArea .bread {position:absolute; top:170px; left:210px;}

.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 .dragItem { position: absolute; }
.dragArea .dragItem img { width: 100%; }
.dragArea .dragItem.sprout{width: 139px;height: 143px;}
.dragArea .sprout_01{top: 128px;left: 738px;}
.dragArea .sprout_02{top: 148px;left: 829px;}
.dragArea .sprout_03{top: 128px;left: 899px;}

.dragArea .banana{top: 123px;left: 1022px;width: 192px;height: 109px;}
.dragArea .dragItem.bananakick{width: 83px;height: 70px;}
.dragArea .bananakick.bananakick_01{top: 261px;left: 742px;}
.dragArea .bananakick.bananakick_02{top: 288px;left: 805px;}
.dragArea .bananakick.bananakick_03{top: 321px;left: 743px;}
.dragArea .bananakick.bananakick_04{top: 345px;left: 800px;}

.dragArea .dragItem.jellybean{width: 43px;height: 33px;}
.dragArea .jellybean.jellybean_01{top: 349px;left: 913px;}
.dragArea .jellybean.jellybean_02{top: 329px;left: 893px;}
.dragArea .jellybean.jellybean_03{top: 370px;left: 895px;}
.dragArea .jellybean.jellybean_04{top: 349px;left: 871px;}

.dragArea .dragItem.broccoli{width: 113px;height: 70px;}
.dragArea .broccoli.broccoli_01{top: 266px;left: 896px;}
.dragArea .broccoli.broccoli_02{top: 266px;left: 994px;}
.dragArea .broccoli.broccoli_03{top: 317px;left: 947px;}

.dragArea .pimang{top: 227px;left: 1101px;width: 107px;height: 134px;}

.dragArea .dragItem.candy{width: 53px;height: 53px;} /*left값 4px씩 빼줘야함 위치*/
.dragArea .candy.candy_01{top: 437px;left: 762px;}
.dragArea .candy.candy_02{top: 447px;left: 814px;}
.dragArea .candy.candy_03{top: 488px;left: 784px;}

.dragArea .dragItem.cashewnut{ width: 67px;height: 61px;} /*left값 9px, top값 10px 빼줘야함 위치*/
.dragArea .cashewnut.cashewnut_01{top: 401px;left: 870px;}
.dragArea .cashewnut.cashewnut_02{top: 442px;left: 867px;}

.dragArea .dragItem.jelly{width: 128px;height: 58px;}
.dragArea .jelly.jelly_01{top: 398px;left: 934px;}
.dragArea .jelly.jelly_02{top: 448px;left: 933px;}

.dragArea .sweetpotato{top: 364px;left: 1051px;width: 159px;height: 82px;}
.dragArea .dragItem.blueberry{width: 43px;height: 42px;}
.dragArea .blueberry.blueberry_01{top: 506px;left: 853px;}
.dragArea .blueberry.blueberry_02{top: 511px;left: 898px;}

.dragArea .carrot{top: 479px;left: 977px;width: 226px;height: 78px;}


.dragArea .multi {opacity:0;}
.dragArea .multi > img {width:auto; height:auto;}
.dragArea .cloneForDrag {position:absolute; pointer-events: none;}

.dragArea .mainBody {position:absolute; pointer-events: none; }
.dragArea .mainBody > img {width:100%;}


/*다음버튼*/
.cl_btnNext { position: absolute; bottom: 59px; right: 48px; }

/*
* *** 완료화면
*/
.completePage .dish img { position: absolute; top: 170px; left: 50%; transform: translateX(-50%); width: 750px; height: 458px; }
.cl_btnReset.useIcon { bottom: 61px; right: 30px; }

.showPicture {display:flex; justify-content: center; align-items: center;}
.showPicture #decoArea {position:relative; top:-80px; left:-30px;}