body { padding: 0; margin: 0; }


.contentWrap { position: relative; width: 100%; max-width: 920px; height: 400px; }

.page { position: relative; display: flex; align-items: center; justify-content: center; gap: 123px;  }

.resetButton img { width: 104px; }

/**************드래그 하는 영역****************/
.dragArea { display: flex; align-items: center; flex-direction: column; justify-content: center;}
/*드래그할 물체 선택박스*/
.dragArea .selectBox { display: flex; align-items: center; justify-content: center; gap: 24px; width: 317px; height: 104px; border-radius: 8px; border: 4px solid #fcdca3; }
.dragArea .selectBox .object img { width: 69px; }

.dragArea .selectBox .object { position: relative; }
.dragArea .selectBox .object1.on:before { position: absolute; content: ''; background: url("../images/obj1_1_on.png")no-repeat; width: 68px; height: 68px; background-size: 68px 68px; }
.dragArea .selectBox .object2.on:before { position: absolute; content: ''; background: url("../images/obj2_1_on.png")no-repeat; width: 71px; height: 71px; background-size: 71px 71px; }
.dragArea .selectBox .object3.on:before { position: absolute; content: ''; background: url("../images/obj3_1_on.png")no-repeat; width: 71px; height: 70px; background-size: 71px 70px; }

.dragArea .arrow img { width: 33px; }

/*드래그아이템들 모아놓은 박스*/
.dragArea .dragBox { position: relative; width: 366px; height: 104px; border-radius: 8px; border: 4px solid #fcdca3; margin-bottom: 10px; }

.dragArea .dragBox .dragWrap { display: none; }
.dragArea .dragBox .dragWrap .dragItem { position: relative; }
.dragArea .dragBox .dragWrap .dragItem {  position: absolute; left: 28px; top: 50%; margin-top: -34px; }
.dragArea .dragBox .dragWrap .dragItem2 { left: 107px; }
.dragArea .dragBox .dragWrap .dragItem3 { left: 186px; }
.dragArea .dragBox .dragWrap .dragItem4 { left: 265px; }
.dragArea .dragBox .dragWrap3 .dragItem1 { left: 107px; }
.dragArea .dragBox .dragWrap3 .dragItem2 { left: 186px; }

.dragArea .dragBox .dragWrap .dragItem img { width: 69px;}


    /**************드롭되는 영역****************/

.dropArea { display: flex; align-items: flex-start; flex-direction: column; gap: 15px; }
.dropArea .topArea { display: flex; align-items: flex-end; gap: 10px;}

/*드롭물체*/
.dropArea .dropWrap { background: url("../images/dropArea.png")no-repeat; width: 280px; height: 280px; background-size: 280px 280px; display: flex; flex-wrap: wrap; }
.dropArea .dropWrap .dropItem { position: relative; width: calc(100% /4); width: 70px; height: 70px; }
.dropArea .dropWrap .dropItem img { width: 69px; }
.dropArea .dropWrap .dropItem.on { -webkit-user-drag: none;-khtml-user-drag: none;-moz-user-drag: none;-o-user-drag: none;user-drag: none; }


/*드롭영역 제목 설명 넣기*/
.dropArea .inputWrap .artWork { display: flex; align-items: center; border: 2px solid #52879e; border-radius: 8px; padding: 0 7px; box-sizing: border-box; }
.dropArea .inputWrap .artWork .title img { display: flex; align-items: center; width: 47px; }

.dropArea .inputWrap .artWork.artTitle { width: 400px; height: 32px; margin-bottom: 5px; }
.dropArea .inputWrap .artWork.artInfo { width: 400px; height: 66px; }

.dropArea .inputWrap .artWork input { border: none; flex: 1;    font-family: 'cookieRun-R'; padding: 0 7px; box-sizing: border-box; }
.dropArea .inputWrap .artWork input:focus { outline: none; }
.dropArea .inputWrap .artWork textarea { border: none; resize: none; flex: 1; height: 75%;  font-family: 'cookieRun-R'; padding: 0 7px; box-sizing: border-box;}
.dropArea .inputWrap .artWork textarea:focus { outline: none; }


/*화살표*/
.rightArrow { position: absolute; left: 400px; top: 180px;}
.rightArrow img { width: 85px; height: 53px; }