body {
	width: 100vw;
	height: 100vh;
	margin: 0;
}

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

.c-move {
	cursor: move;
}

.c-resize {
	cursor: nwse-resize;
}

.c-slide {
	cursor: ns-resize;
}

.index-container, .sub-container {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
}

.index-box {
	position: absolute;
	top: 0;
	left: 0;
	cursor: pointer;
	overflow: hidden;
}

.index-box-con {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	pointer-events: none;
	-webkit-transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.surface-box {
	position: absolute;
	top: 0;
	left: 0;
	box-shadow: 3px 3px 6px rgb(0 0 0 / 20%);
	background: #fff;
}

.surface-circle {
	position: absolute;
	top: 0;
	left: 0;
	box-shadow: 3px 3px 6px rgb(0 0 0 / 20%);
	border-radius: 50%;
	background: #fcb447;
}

.action-circle {
	position: absolute;
	top: 0;
	left: 0;
	border-radius: 50%;
	background: #fcb447;
}

.action-box {
	position: absolute;
	top: 0;
	left: 0;
	background: #fff;
}

.motion-box {
	position: absolute;
	top: 0;
	left: 0;
	background: #fff;
	z-index: 5;
}

.motion-canvas {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 3;
}

.index-line {
	position: absolute;
	background: #333;
	z-index: 10;
	pointer-events: none;
	-webkit-transition: -webkit-transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

#index-line-0 {
	width: 100%;
	height: 40px;
	top: 0;
	left: 0;
	transform: translate(0, -40px);
}

#index-line-1 {
	width: 40px;
	height: 100%;
	top: 0;
	right: 0;
	transform: translate(40px, 0);
}

#index-line-2 {
	width: 100%;
	height: 40px;
	bottom: 0;
	left: 0;
	transform: translate(0, 40px);
}

#index-line-3 {
	width: 40px;
	height: 100%;
	bottom: 0;
	left: 0;
	transform: translate(-40px, 0);
}

.index-box:hover > #index-line-0 {
	transform: translate(0, -20px);
}

.index-box:hover > #index-line-1 {
	transform: translate(20px, 0);
}

.index-box:hover > #index-line-2 {
	transform: translate(0, 20px);
}

.index-box:hover > #index-line-3 {
	transform: translate(-20px, 0);
}

#index-canvas {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 20;
	-webkit-transition: -webkit-transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
	transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1)
}

#close {
	position: absolute;
	bottom: 30px;
	right: 30px;
	width: 56px;
	height: 56px;
	z-index: 100;
	cursor: pointer;
}

#close > span {
	display: block;
	position: absolute;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	overflow: hidden;
	z-index: 100;
}

#close > i {
	display: block;
	position: absolute;
	width: 56px;
	height: 56px;
	z-index: 100;
	background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHAAAABwCAQAAABs6TzAAAAA4ElEQVR42u3ZMY6DMBRF0WRr2SRdlpn2pUkRMQy4GWn+0zk1ha+EsPm+3QAAAAAAAAAA4K/kni2P5acf2XKflfdM8lpLzCOvJM8xiZ+8rCV+8jIm8StvIfErb0biLu8icZc3ITFbfvol8SAvSbb/HXi86IPE9SdHJo7NW1v86LzrgPF55xEVeaeJHXkniS15y4lz85YSZ+ddJs7PO03syKsPLH9Fyz8y5dtE+UZfflQrP2yX/y6V//CWjyzqh079Y8P2wW/96H6X2Hj58pXYen32SWy+AAUAAAAAAAAAYJo3e1Phvaj1w9oAAAAASUVORK5CYII=");
	background-repeat: no-repeat;
	background-size: 56px 56px;
	overflow: hidden;
}