* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	word-break: keep-all;
	color: red;
	list-style: none;
}

body {
	width: 100%;
	height: 100%;
	overflow: hidden;
}

@font-face {
	font-family: "SM3KGothic";
	src: url(assets/fonts/SM3KGothic.otf);
}

@font-face {
	font-family: "SM3ssmj";
	src: url(assets/fonts/SM3ssmj.otf);
}

.title {
	font-family: "SM3ssmj";
	line-height: 1;
	position: absolute;
	width: 50%;
	height: 50%;
	top: 0;
	left: 0;
}

.verticalmiddle {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-size: 1.5vw;
	width: 100%;
	text-align: center;
}

#macedit,
#micedit,
#macdes,
#micdes {
	position: absolute;
	width: 50%;
	height: 50%;
	z-index: -1;
	font-family: TimesNewRoman, Serif;
	line-height: 1.2;
}

.ssmj {
	font-family: "SM3ssmj";
}

#macedit {
	top: 0;
	left: 0;
}

#micedit {
	top: 0;
	left: 50%;
}

#macdes {
	top: 50%;
	left: 0;
}

#micdes {
	top: 50%;
	left: 50%;	
}

#macedit:hover,
#micedit:hover,
#macdes:hover,
#micdes:hover  {
	background-color: red;
}

#macedit:hover > .verticalmiddle, 
#micedit:hover > .verticalmiddle,
#macdes:hover > .verticalmiddle,
#micdes:hover > .verticalmiddle {
	color: white;
}


/* ------------- 큰/작은 ------------- */

.macro,
.micro {
	position: absolute;
	width: 50%;
	height: 100%;
	font-family: "SM3KGothic";
	font-size: 12vw;
	writing-mode: vertical-rl;
	pointer-events: none;
}

.macro {
	left: 0;
	border-right: 2px solid red;
}

.micro {
	left: 50%;
}


/* ------------- 편집/디자인 ------------- */

.edit,
.design {
	position: absolute;
	width: 100%;
	height: 50%;
	font-family: "SM3ssmj";
	font-size: 12vw;
	pointer-events: none;
}

.edit {
	top: 0;
	border-bottom: 2px solid red;
}

.design {
	top: 50%;
}

.middle {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

/* ------------- 배경 글자 ------------- */

#macroedit,
#microedit,
#macrodesign,
#microdesign {
	padding: 20px;
}


.top {
	font-family: "SM3KGothic";
	position: absolute;
	font-size: 36vw;
	top: 0%;
	left: 50%;
	transform: translate(-50%, -50%);
	color: red;
	line-height: 1;
	writing-mode: vertical-rl;
}

.bottom {
	font-family: "SM3KGothic";
	position: absolute;
	font-size: 36vw;
	top: 100%;
	left: 50%;
	transform: translate(-50%, -50%);
	color: red;
	line-height: 1;
	writing-mode: vertical-rl;
}

.right {
	font-family: "SM3ssmj";
	position: absolute;
	font-size: 36vw;
	top: 50%;
	left: 100%;
	transform: translate(-50%, -50%);
	color: red;
	line-height: 1;
}

.left {
	font-family: "SM3ssmj";
	position: absolute;
	font-size: 36vw;
	top: 50%;
	left: 0%;
	transform: translate(-50%, -50%);
	color: red;
	line-height: 1;
}

dt,
dd {
	font-size: 1.5em;
}

dt {
	font-family: "SM3KGothic";
	line-height: 1.2;
}

dd {
	font-family: "SM3ssmj";
	line-height: 1.2;
	margin-bottom: 1em;
}

#microedit dl {
	position: absolute;
	left: 75%;
}

#macrodesign dl {
	position: absolute;
	bottom: 0;
}

#microdesign dl {
	position: absolute;
	right: 20px;
	bottom: 0;
}

a {
	text-underline-offset: 5px;
}

@media (max-width: 800px) {
	.macro,
	.micro,
	.edit,
	.design {
		font-size: 25vw;
	}

	.verticalmiddle {
		font-size: 4vw;
		text-align: center;
	}

	dl {
		width: 60%;
	}

	dt,
	dd {
		font-size: 1em;
	}

	.right,
	.left,
	.top,
	.bottom {
		font-size: 50vw;
	} 

	#microedit dl {
		width: 48%;
		left: 50%;
	}

	#microdesign dl {
		bottom: 0;
	}

}