html{
height:100%;
}

body{
position:relative;
background:#ffffff;
padding:20px;
text-align:center;
font-family:helvetica, arial, san-serif;
font-size:16px;
line-height:20px;
color:#666666;
}

@font-face{
font-family:serialNo;
src:url(serialNo.ttf);
}

#wrap{
width:600px;
height:600px;
border:1px solid #dddddd;
margin:auto;
position:relative;
overflow:auto;
}

#finalArt{
width:100%;
height:100%;
}

#finalArt img{
position:absolute;
top:312px;
right:144px;
width:200px;
height:100px;
}

.serial{
font-size:12px;
text-align:right;
letter-spacing:0.04em;
position:absolute;
bottom:42px;
right:46px;
font-family:serialNo;
-webkit-transform:rotate(7.3deg);
-ms-transform:rotate(7.3deg);
transform:rotate(7.3deg);
-webkit-transform-origin:bottom right;
-ms-transform-origin:bottom right;
transform-origin:bottom right;
opacity:0.6;
}

.group{
margin-bottom:20px;
}

input{
color:#666666;
font-family:serialNo;
box-sizing:border-box;
font-size:16px;
line-height:24px;
padding:0 6px;
border:1px solid #666666;
-webkit-appearance:none;
border-radius:0;
}

button{
padding:6px 9px;
color:#ffffff;
font-size:16px;
font-weight:600;
background:#888888;
border:0;
-webkit-appearance:none;
-webkit-border-radius:0;
border-radius:0;
margin:10px 3px 0 3px;
cursor:pointer;
}

canvas{
position:absolute;
top:21px;
left:0;
right:0;
margin:auto;
background:#ffffff;
}

#modal{
color:#ffffff;
padding-top:5px;
position:fixed;
top:0;
left:0;
background:rgba(0,0,0,0.6);
width:100%;
height:100%;
display:none;
}

#modal a{
color:#ffffff;
}