﻿.clayfy-box:not(.clayfy-not-move) {
    cursor: move;
    touch-action: none;
}
/*.clayfy-box {
    cursor: move;
    touch-action: none;
}*/

.clayfy-ghost {
    z-index: 1000;
}

.clayfy-ghost-opacity {
    opacity: .5;
}

.clayfy-handler.clayfy-top {
    cursor: n-resize;
}

.clayfy-handler.clayfy-top.left {
    cursor: nw-resize;
}

.clayfy-handler.clayfy-top.right {
    cursor: ne-resize;
}

.clayfy-handler.clayfy-bottom {
    cursor: n-resize;
}

.clayfy-handler.clayfy-bottom.left {
    cursor: sw-resize;
}

.clayfy-handler.clayfy-bottom.right {
    cursor: se-resize;
}

.clayfy-handler.clayfy-left {
    cursor: w-resize;
}

.clayfy-handler.clayfy-right {
    cursor: w-resize;
}

.clayfy-sort-droparea {
    border: 2px solid #ccc;
}

.clayfy-touch-device clayfyhandler-bottom-right {
    display: none;
    width: 18px;
    height: 18px;
    bottom: -5px;
    right: -5px;
}


/* custom */

.container {
    height: 100px;
    max-width: 680px;
    border: 2px solid #b8acd5;
    position: relative;
}

.rect1 {
    height: 88px;
    width: 162px;
    border: 1px solid #31C669;
    top: 5px;
    left: 5px;
}

.rect2 {
    height: 88px;
    width: 112px;
    border: 1px solid #31C669;
    top: 5px;
    right: 5px;
}

.logo-rect {
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    position: absolute !important;
    cursor: move;
}

.rect3 {
    height: 20px;
    width: 380px;
    top: 5px;
    left: 174px;
    border: 1px solid #5C95CC;
    font-style: italic;
}

.rect4 {
    height: 40px;
    width: 380px;
    top: 32px;
    left: 174px;
    border: 1px solid #FF469C;
    font-weight: bold;
}

.text-rect {
    background: none;
    position: absolute !important;
    font-family: 맑은 고딕, Malgun Gothic, AppleSDGothicNeo-Regular;
    letter-spacing: 0px;
    cursor:move;
}

.hide-rect{
    border-color:transparent;
    pointer-events:none;
}

.custom-handlers.clayfy-top:after,
.custom-handlers.clayfy-bottom:after,
.custom-handlers.clayfy-left:after,
.custom-handlers.clayfy-right:after {
    content: '';
    position: absolute;
    height: 1px;
    top: 0;
    left: 0;
    width: 100%;
    background: #BD59FF;
}

.custom-handlers.clayfy-bottom:after {
    top: auto;
    bottom: 0;
}

.custom-handlers.clayfy-left:after {
    width: 1px;
    height: 100%;
}

.custom-handlers.clayfy-right:after {
    width: 1px;
    height: 100%;
    right: 0;
    left: auto;
}

.custom-handlers.right:after,
.custom-handlers.left:after {
    height: 100%;
}

label {
    display: inline-block;
    width: 5em;
}