@charset "utf-8";
/* CSS Document */
/*拖拽*/
.gridly, .gridly > :not(.dragging) {
  -webkit-transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out; }
.gridly .dragging {z-index: 800; }
.gridly{position: relative;}
.brick.small{width: 60px;height: 60px;}
.brick{ text-align: center; position: relative; cursor: pointer; color: #fff; border-radius:4px;}
.brick .delete{ position: absolute; top: 0; left: 0; width: 15px; height: 15px; color: #fff; background: rgba(255,255,255,.2); }
.brick .delete:hover{ background:#f80; text-decoration: none;}
.brick:before{ content:''; display:inline-block; height:100%; vertical-align:middle;}
.brick .vv{ display:inline-block; vertical-align:middle; padding:0 5px;}/*子元素垂直居中*/
.brick .vb{ display:inline-block; vertical-align:bottom;}/*子元素垂直居底*/
.gridly .brick:nth-child(9n + 1) {
      background: #1abc9c; }
.gridly .brick:nth-child(9n + 2) {
      background: #27ae60; }
.gridly .brick:nth-child(9n + 3) {
      background: #3498db; }
.gridly .brick:nth-child(9n + 4) {
      background: #8e44ad; }
.gridly .brick:nth-child(9n + 5) {
      background: #34495e; }
.gridly .brick:nth-child(9n + 6) {
      background: #f39c12; }
.gridly .brick:nth-child(9n + 7) {
      background: #e67e22; }
.gridly .brick:nth-child(9n + 8) {
      background: #c0392b; }
.gridly .brick:nth-child(9n + 9) {
      background: #7f8c8d; }
.lbg{ 
	-webkit-animation: action 1s ease;
	-moz-animation: action 1s ease;
	-o-animation: action 1s ease;
	animation: action 1s ease;
}
@-webkit-keyframes action{
	20%{ background: #ff0000; }
	40%{ background: #ff8800; }
	60%{ background: #ff0000; }
	80%{ background: #ff8800; }
	100%{ background: #ff0000; }
}
@-moz-keyframes action{
	20%{ background: #ff0000; }
	40%{ background: #ff8800; }
	60%{ background: #ff0000; }
	80%{ background: #ff8800; }
	100%{ background: #ff0000; }
}
@-o-keyframes action{
	20%{ background: #ff0000; }
	40%{ background: #ff8800; }
	60%{ background: #ff0000; }
	80%{ background: #ff8800; }
	100%{ background: #ff0000; }
}
@keyframes action{
	20%{ background: #ff0000; }
	40%{ background: #ff8800; }
	60%{ background: #ff0000; }
	80%{ background: #ff8800; }
	100%{ background: #ff0000; }	
}
/*抛物线*/
#pbox{ position: absolute; top: 50%; left
	: 50%; width: 1px; height: 1px; visibility: hidden;}
.element { position: absolute; border-radius: 20px;  width: 30px; height: 30px; background-color: #34538b; left: 500px; top: 200px; font-size: 12px; pointer-events: none; visibility:hidden; }
/*导航*/
.hd-menu{ margin-bottom: 20px; }
.body-menu{}
#drag-body{ position: relative; padding-top:40px; }
.drag-list{ display: none; background: #eee; padding-top:15px; padding-left: 15px; border:solid 1px #ddd; height: 400px; overflow-y:auto; }
.drag-list-title{ padding-bottom: 10px; border-bottom:solid 1px #ddd; margin-bottom:20px; margin-right: 15px; }
.drag-list.show{ display: block; }
#drag-tool{ margin-top:40px; height: 400px; overflow-y: auto; }
.darg-model-box .brick{ float: left; margin-right: 20px; margin-bottom:20px; background: #ccc; color: #333}
.darg-model-box .brick .delete{ display: none; }
.darg-btn{ padding:20px 0; }