.tech-new-img, .tech-old-img {
    width: 100%;
    height: 524px
}

.tech-new-img, .tech-new-img img, .tech-old-img, .tech-old-img img {
    position: absolute;
    left: 0;
    top: 0;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.tech-new-img {
    overflow: hidden
}

.tech-drag-container {
    width: 32px
}

.tech-drag, .tech-drag-container {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%
}

.tech-drag {
    width: 100%;
    cursor: pointer
}

.tech-drag-line {
    position: absolute;
    left: 15px;
    top: 0;
    width: 2px;
    height: 100%;
    background: #0073eb
}

.tech-drag-icon {
    position: absolute;
    width: 32px;
    height: 32px;
    bottom: 140px;
    left: 0
}

.tech-drag-tip {
    position: absolute;
    left: 38px;
    bottom: 140px;
    padding: 8px 14px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    font-size: 18px;
    white-space: nowrap;
    color: #fff;
    background: rgba(0, 0, 0, .6)
}

.tech-drag-tip-arrow {
    position: absolute;
    left: -7px;
    top: 50%;
    border-color: transparent rgba(0, 0, 0, .6) transparent transparent;
    border-style: solid;
    border-width: 7px 7px 7px 0;
    margin-top: -7px
}

.tech-img-tip {
    width: 85px;
    position: absolute;
    left: 0;
    top: 0;
    line-height: 33px;
    color: #fff;
    font-size: 18px;
    text-align: center;
    background: rgba(0, 0, 0, .6)
}

.tech-img-tip-before {
    left: 17px
}

.tech-move {
    cursor: move
}

@-webkit-keyframes scan {
    0% {
        height: 0
    }
    to {
        opacity: 0;
        height: 524px
    }
}

@-moz-keyframes scan {
    0% {
        height: 0
    }
    to {
        opacity: 0;
        height: 524px
    }
}

@keyframes scan {
    0% {
        height: 0
    }
    to {
        opacity: 0;
        height: 524px
    }
}

.tech-recognition {
    background: #f4f5f7
}

.tech-recognition-content {
    position: relative;
    width: 100%;
    height: 654px
}

.tech-img-content {
    width: 840px;
    height: 100%;
    float: left
}

.tech-recognition-scan {
    position: absolute;
    z-index: 7;
    top: 0;
    left: 0;
    width: 840px;
    border-bottom: 3px solid #3e88f1;
    -webkit-animation: scan 1.2s infinite;
    -moz-animation: scan 1.2s infinite;
    animation: scan 1.2s infinite;
    background: -webkit-gradient(linear, left top, left bottom, from(transparent), to(#3e88f1));
    background: -webkit-linear-gradient(top, transparent, #3e88f1);
    background: -moz-linear-gradient(top, transparent, #3e88f1);
    background: linear-gradient(180deg, transparent, #3e88f1)
}

.tech-canvas-container {
    position: relative;
    width: 840px;
    height: 524px;
    background: #343434
}

.tech-canvas-personnum {
    position: absolute;
    left: 10px;
    top: 10px;
    padding: 6px 10px;
    background: rgba(0, 0, 0, .3);
    color: #fff;
    font-size: 14px;
    z-index: 1
}