.wrapper{background: url(images/bg.png);}
    main{position:relative;width:1024px;height:621px;margin:0 auto;overflow:hidden}

@font-face{font-family:'Ubuntu';src:url(./fonts/Ubuntu-Regular.ttf)}


.top_panel {
    width: 942px;
    height: 540px;
    background-color: #E0EAEE;
    border: 3px solid #725F20;
    border-radius: 9px;
    overflow: hidden;
    /* opacity: 0.8; */
    top: 18px;
    left: 38px;
}

            input{width: 215px;height: 38px;font-size: 25px;display: inline-block;text-align:center;margin-left: 527px;border-radius:5px;border-width: 2px;border-color: #000;border-style: dotted;background-color: rgba(230, 230, 230, 1);color:#000;outline:none}
                    .ok{background-color:#0c0}
                    .bad{background-color:#f66}
main * {
    position: absolute;
}

.prod {
    width: 200px;
    height: 150px;
    background-color: #000;
    overflow: visible;
}

.top_panel:before {
    content: '';
    width: 100%;
    height: 100%;
    background-color: #fff;
    border-radius: 5px;
    top: 8px;
    left: 9px;
    position: absolute;
}

.mark {
    width: 181px;
    height: 174px;
    background: url(images/mark.png) no-repeat;
}

div#i1 {
    width: 942px;    
    height: 60px;    background-color: #E0EAEE;    border: 3px solid #725F20;    border-radius: 9px;    
    font-size: 23px;
    overflow: hidden;    
    display: none;
    color: #673E28;
    padding: 10px;
    /* opacity: 0.8; */    
    top: 560px;    left: 38px;
}

l span {
    position: relative;
}

span.dot {
    margin-left: 750px;
}