.sn-container {
	max-width: 720px;
	margin: 0 auto;
}

.sn-container .logo {
	display: block;
	margin: 10px auto;
	width: 240px;
}

.sn-input-area {
	text-align: center;
	height: 20em;
	padding-top: 1px;
}

.sn-input-tip {
	margin-top: 3em;	
	font-size: 17px;
}

#snInput {
	font-size: 16px;
	width: 360px;
	height: 2em;
	outline: none;
	border: solid 1px transparent;
	border-radius: 0.3em;
	margin: 20px auto 10px;
	text-align: center;
	transition: 150ms border linear;
}

#snInput:focus {
	border: solid 1px #979797;
}

@keyframes shake { 
	 10%, 90% { transform: translate3d(-1px, 0, 0); }
	 20%, 80% { transform: translate3d(2px, 0, 0); }
	 30%, 50%, 70% { transform: translate3d(-4px, 0, 0); }
	 40%, 60% { transform: translate3d(4px, 0, 0); }	
}


#snInput.sn-error {
	border-color: #f01414;
    animation: shake 0.6s cubic-bezier(.36,.07,.19,.97) both;
}

#snConfirm, #snReinput {
	font-size: 16px;
	min-width: 200px;
	background: #f01414;
	color: white;
	outline: none;
	border: none;
	border-radius: 0.3em;
	cursor: pointer;
	padding: 8px 16px;
}

#snReinput {
	margin-top: 40px;
}

.sn-bottom p {
	line-height: 2;
	font-size: 15px;
}

.sn-bottom-desc {
	margin-top: 20px;
}

.sn-check-result {
	display: none;
	background: white;
	border-radius: 0.5em;
	padding: 20px;
	text-align: center;
	margin-bottom: 5em;
}

.sn-check-sn {
	font-weight: bold;
	margin-bottom: 1em;
}

.sn-check-name {
	font-weight: bold;
	color: #f01414;
}

.sn-error {
	color: #f01414;
	font-size: 24px;
}

#snErrorText {
	margin-bottom: 10px;
	color: #f01414;
	font-size: 24px;
	font-weight: bold;
}