body {
	display: block;
	padding: 16px;
}

.head {
	display: flex;
	height: 64px;
	align-items: center;
}

.back {
	display: inline-flex;
	width: 64px;
	height: 64px;
	border-radius: 32px;
	transition: all 0.2s ease;
}

.back:hover {
	border-radius: 32px;
	background-color: #FFFFFF1F;
	transition: all 0.2s ease;
}

.back > a {
	padding: 16px;
}

.name {
	display: inline-block;
	margin-left: 16px;
	font-size: x-large;
	font-weight: bold;
}

.main {
	height: 369px;
	margin: 32px;
	display: flex;
	align-items: stretch;
}

.chineseCharacter {
	float: left;
	width: 50%;
	height: 256px;
	margin: 16px 2px 16px 16px;
}

input {
	background-color: #00000000;
	border: solid;
	border-color: #929396;
	border-width: 1px;
	color: #FFFFFF;
	width: 100%;
	height: 100%;
	font-size: 48px;
	outline: none;
	text-align: center;
	align-items: center;
	caret-color: #9ECAFF;
	border-radius: 16px 6px 6px 16px;
	transition: all 0.1s ease;
}

input:hover {
	border-color: #C8C9CC;
}

input:focus {
	border-color: #9ECAFF;
	border-width: 2px;
}

.hangeul {
	border: 2px solid #FFFFFF1F;
	border-radius: 6px 16px 16px 6px;
	float: right;
	width: 50%;
	height: 256px;
	margin: 16px 16px 16px 2px;
	font-size: 48px;
	display: flex;
	justify-content: space-around;
	align-items: center;
}

.descriptiontext {
	margin: 0px 32px 16px 32px;
	display: flex;
	justify-content: space-between;
}

.descriptiontext > div:last-child {
	text-align: right;
}

.descriptiontext > div:last-child > a {
	color: #9ECAFF;
	transition: all 0.2s ease;
}

.descriptiontext > div:last-child > a:hover {
	color: #D1E4FF;
	transition: all 0.2s ease;
}

.descriptiontext > div:last-child > a:active {
	color: #1E95F2;
	transition: all 0.2s ease;
}