body{
	width:100%;
	height:100%;
	background:#000;
	font-family:arial;
}
#a{
	width:474px;
	height:274px;
	background:#FFF;
	position:absolute;
	top:40%;
	left:50%;
	border:solid 1px #DDD;
	border-radius:14px;
	display:flex;
	padding:15px;
		transform: translate(-50%,-20%);
}
#f,#g{
	position:relative;
	width:220px;
	height:160px;
	display:inline-block;
}
#g{left:16px;}
#snackbar {
  visibility: hidden;
  min-width: 250px;
  background-color: #333;
  color: #fff;
  text-align: center;
  border-radius: 2px;
  padding: 16px;
  position: fixed;
  z-index: 999;
  left: 50%;
  transform:translateX(-50%);
  bottom: 70px;
}

#snackbar.show {
  visibility: visible;
  -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
  animation: fadein 0.5s, fadeout 0.5s 2.5s;
}

@-webkit-keyframes fadein {
  from {bottom: 0; opacity: 0;}
  to {bottom: 70px; opacity: 1;}
}
@keyframes fadein {
  from {bottom: 0; opacity: 0;}
  to {bottom: 70px; opacity: 1;}
}
@-webkit-keyframes fadeout {
  from {bottom:70px; opacity: 1;}
  to {bottom: 0; opacity: 0;}
}
@keyframes fadeout {
  from {bottom: 70px; opacity: 1;}
  to {bottom: 0; opacity: 0;}
}
/* snackbar */
input{
	padding-left:6px;
	display:block;
	width:100%;
	margin:6px;
	height:32px;
	border-radius:6px;
	border:solid 1px #EEE;
}
#LGN,#h{
	width:150px;
	font:normal 22px/35px ARIAL;
	height:34px;
	border:solid 1px #DDD;
	text-align:center;
	border-radius:6px;
	background:#FFF;
	box-shadow:1px 1px 1px #999;
	color:#999;
	cursor:pointer;
	position:relative;
	left:7px;
}
#LGN:hover,#h:hover{box-shadow: 0px 0px 1px #999;}

.LBL{
    display: inline-block;
    vertical-align: middle;
    margin: 0px 10px 16px 14px;
}
.CP{
	cursor:pointer;
}
.NO {
    border: solid 1px #F30;
}
.OK {
    border: solid 1px #0f3;
}
#rem{
	display: inline-block;
    width: 18px;
    vertical-align: text-bottom;
    height: 20px;	
}
#z {
    height: 37px;
    background: #222;
    display: block;
    width: inherit;
    position: fixed;
    z-index: 99999999;
    bottom: 0px;
    box-shadow: inset 1px 1px #333;
    margin: 0px 0px 0px 0px;
	left:0px;
}
#z>#W {
    position: absolute;
    top: 1px;
    left: 250px;
}
#A {
    background: transparent;
    border: none;
    outline: none;
    text-shadow: 1px 1px #000;
    font: bold italic 16px/18px arial;
    color: #fff;
    padding: 0px 14px;
    height: 25px;
    width: 200px;
}
#B {
    display: none;
    width: 250px;
    min-height: 40px;
    margin-left:0px;
    position: fixed;
    border-radius: 0px 4px 0px 0px;
    box-shadow: inset 1px 1px #777, 1px 1px 5px #000;
    bottom: 37px;
	padding-top:47px;
    cursor: pointer;
    z-index: 9999999!important;
    background: #555;
    overflow: hidden;
	left:0px;
}
#B .CNT,#B .CNE,#B .CNT2 {
    width: 237px;
    display: block;
    border-radius: 0px 4px 0px 0px;
    padding-left: 13px;
    color: #EFEFEF;
    font: bold 13px/47px tahoma;
    box-shadow: inset 1px -1px #444;
    border-bottom: solid 1px #666;
}
#C {
    display: block;
    right: 0px;
    width: 41px;
    height: 46px;
    padding-right: 13px;
    background: url(../images/s.png) no-repeat;
    background-size: 30px 30px;
    position: absolute;
    top: 0;
    background-position: 13px 10px;
    text-align: right;
    border-radius: 0px 4px 0px 0px;
    box-shadow: inset 1px 0px #777;
    border-left: solid 1px #444;
    font: normal 14px/28px arial;
    color: #EFEFEF;
}
#C:hover,
#B b:hover {
    background-color: #666;
}