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

.activityPage { position: absolute; top: 0; left: 0; width: 1280px; height: 720px; background-repeat: no-repeat; background-size: cover; background-image: url("../images/dragBg.png"); }
.cl_mainActTitle  { font-size: 27px;
    text-shadow: 1px 0px 0px #ffffff, 0px 1px 0px #ffffff, -1px 0px 0px #ffffff, 0px -1px 0px #ffffff, 1px 1px 0px #ffffff, -1px 1px 0px #ffffff, -1px -1px 0px #ffffff, 1px -1px 0px #ffffff,
    2px 0px 0px #ffffff, 0px 2px 0px #ffffff, -2px 0px 0px #ffffff, 0px -2px 0px #ffffff, 2px 2px 0px #ffffff, -2px 2px 0px #ffffff, -2px -2px 0px #ffffff, 2px -2px 0px #ffffff;
    /*3px 0px 0px #ffffff, 0px 3px 0px #ffffff, -3px 0px 0px #ffffff, 0px -3px 0px #ffffff, 3px 3px 0px #ffffff, -3px 3px 0px #ffffff, -3px -3px 0px #ffffff, 3px -3px 0px #ffffff;*/
    line-height: 38px;
}

/*
* *** drop영역
*/
.dropArea {  }
.dropArea .dropItem { position: absolute; width: 57px; height: 57px; background-image: url("../images/dropBox.png"); background-size: 57px 57px; }
.dropArea .dropItem1 { top: 210px; left: 87px; }
.dropArea .dropItem2 { top: 318px; left: 57px; }
.dropArea .dropItem3 { top: 388px; left: 61px; }
.dropArea .dropItem4 { top: 594px; left: 202px; }
.dropArea .dropItem5 { top: 129px; left: 567px; }
.dropArea .dropItem6 { top: 471px; left: 574px; }
.dropArea .dropItem7 { top: 601px; left: 655px; }
.dropArea .dropItem8 { top: 478px; left: 702px; }
.dropArea .dropItem9 { top: 595px; left: 782px; }
.dropArea .dropItem10 { top: 261px; left: 809px; }
.dropArea .dropItem11 { top: 181px; left: 925px; }
.dropArea .dropItem12 { top: 451px; left: 908px; }

.dropItem1.on { background-image: url("../images/dragItem_1.png"); }
.dropItem2.on { background-image: url("../images/dragItem_11.png"); }
.dropItem3.on { background-image: url("../images/dragItem_16.png"); }
.dropItem4.on { background-image: url("../images/dragItem_9.png"); }
.dropItem5.on { background-image: url("../images/dragItem_2.png"); }
.dropItem6.on { background-image: url("../images/dragItem_8.png"); }
.dropItem7.on { background-image: url("../images/dragItem_10.png"); }
.dropItem8.on { background-image: url("../images/dragItem_12.png"); }
.dropItem9.on { background-image: url("../images/dragItem_4.png"); }
.dropItem10.on { background-image: url("../images/dragItem_15.png"); }
.dropItem11.on { background-image: url("../images/dragItem_7.png"); }
.dropItem12.on { background-image: url("../images/dragItem_14.png"); }


/*
* *** drag영역
*/

.dragArea { position: absolute; top: 0; left: 1043px; width: 237px; height: 720px; background-color: #eef6f6;  z-index: 4}
.dragArea .dragItem { position: absolute; width: 59px; height: 59px; cursor: pointer; }
.dragArea .dragItem:hover:before { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); content: ''; width: 56px; height: 56px;
    background-image: url("../images/dropBox_hover.png"); background-size: 56px 56px; }
.dragArea .dragItem img { position: relative; width: 100%; }
.dragArea .dragItem1 { top: 66px; left: 42px; }
.dragArea .dragItem2 { top: 66px; left: 112px; }
.dragArea .dragItem3 { top: 132px; left: 42px; }
.dragArea .dragItem4 { top: 132px; left: 112px; }
.dragArea .dragItem5 { top: 198px; left: 42px; }
.dragArea .dragItem6 { top: 198px; left: 112px; }
.dragArea .dragItem7 { top: 264px; left: 42px; }
.dragArea .dragItem8 { top: 264px; left: 112px; }
.dragArea .dragItem9 { top: 330px; left: 42px; }
.dragArea .dragItem10 { top: 330px; left: 112px; }
.dragArea .dragItem11 { top: 396px; left: 42px; }
.dragArea .dragItem12 { top: 396px; left: 112px; }
.dragArea .dragItem13 { top: 462px; left: 42px; }
.dragArea .dragItem14 { top: 462px; left: 112px; }
.dragArea .dragItem15 { top: 528px; left: 42px; }
.dragArea .dragItem16 { top: 528px; left: 112px; }

.cl_btnReset.useIcon { display: none; }