*,
*::before,
*::after {
	margin: 0;
	padding: 0;
	border: 0;
	box-sizing: border-box;
	font: inherit;
	font-size: 100%;
	font-weight: normal;
	font-style: normal;
	vertical-align: baseline;
	list-style: none;
	transition: background-color 0.5s ease;
	-ms-overflow-style: none;
    scrollbar-width: none;
}

*::-webkit-scrollbar {
    display: none;
}

:root, :before, :after {
	--bgcolor:white;
}

::-moz-selection { /* Code for Firefox */
  color: white;
  background: var(--bgcolor);
}

::selection {
  color: white;
  background: var(--bgcolor);
}

body {
	font-family: sans-serif;
	font-size: 12px;
	line-height: 1.6;
	word-break: keep-all;
	width: 100%;
	height: 100%;
	background-color: black;
	overflow: hidden;
}

a {
	text-decoration: none;
}


.openingWrapper {
	z-index: 1;
	position: fixed;
	top: 0;
	left: 1rem;
	width: calc(100vw - 2rem);
	height: 100dvh;
	background-color: var(--bgcolor);
	opacity: 0;
	pointer-events: none;
	animation: fadeout 4.5s forwards;
}

@keyframes fadeout {
	0% {opacity: 1}
	40% {opacity: 1}
	70% {opacity: 1}
	90% {opacity: 0}
}

.opening {
	z-index: 4;
	position: fixed;
	width: fit-content;
	height: fit-content;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	pointer-events: none;
}

.opening span {
	display: inline-block;
	font-family: 'source-han-sans-korean', sans-serif;
	font-size: 1.25rem;
	font-weight: 700;
	color: white;
	text-shadow: 0 0 5px black;
}

.tilt1 {
	animation: opentilt1 4.5s forwards;
	opacity: 0;
	pointer-events: none;
}

.tilt2 {
	animation: opentilt2 4.5s forwards;
	opacity: 0;
	pointer-events: none;
}

@keyframes opentilt1 {
	10% { opacity:0; transform: rotate(-45deg); transform-origin: center;}
	40% { opacity:1;}
	50% { transform: rotate(0deg); transform-origin: center;}
	70% { opacity:1; transform: rotate(0deg); transform-origin: center;}
	90% { opacity:0; transform: rotate(45deg); transform-origin: center;}
}

@keyframes opentilt2 {
	10% { opacity:0; transform: rotate(45deg); transform-origin: center;}
	40% { opacity:1;}
	50% { transform: rotate(0deg); transform-origin: center;}
	70% { opacity:1; transform: rotate(0deg); transform-origin: center;}
	90% { opacity:0; transform: rotate(-45deg); transform-origin: center;}
}

._circletypeWrapper, .aboutWrapper, .colorbuttonWrapper, .listbuttonWrapper {
	z-index: 5;
	position: fixed;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 3.5rem;
	height: 1.5rem;
	border-radius: 0 1rem 1rem 0;
	animation: reveal 5.5s forwards;
}

._circletypeWrapper {
	top: 1.7rem;
	right: 0.8rem;
	transform: rotate(45deg);
	transform-origin: bottom right;
}

.aboutWrapper {
	top: 1.5rem;
	right: calc(((100vw - 2rem) / 3) + 1rem);
	transform: rotate(45deg);
	transform-origin: bottom right;
}

.colorbuttonWrapper {
	bottom: 1.5rem;
	right: 1rem;
	transform: rotate(-45deg);
	transform-origin: top right;
}

.listbuttonWrapper {
	bottom: 1.5rem;
	right: calc(((100vw - 2rem) / 3) + 1rem);
	transform: rotate(-45deg);
	transform-origin: top right;
}

._circletype, .about, .colorbutton, .listbutton {
	font-family: 'source-han-sans-korean', sans-serif;
	font-weight: 700;
	text-align: right;
	vertical-align: bottom;
	background-color: transparent;
	color: white;
	padding-left: 1rem;
	cursor: pointer;
}

.aboutParagraph {
	position: fixed;
	display: block;
	z-index: 3;
	top: 1rem;
	left: 1rem;
	padding: 1rem;
	width: calc(100vw - 2rem);
	height: calc(100dvh - 2rem);
	background-color: var(--bgcolor);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.5s ease;
}


.aboutParagraph.reveal {
	opacity: 1;
  visibility: visible;
}

.aboutParagraph p {
	display: block;
	position: absolute;
	width: fit-content;
	height: fit-content;
	padding: 1rem;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-size: 1rem;
	font-family: 'source-han-sans-korean', sans-serif;
	font-weight: 700;
	max-width: 40rem;
	color: white;
	text-shadow: 0 0 5px black;
}


@media only screen and (max-width: 600px) {
	.aboutParagraph p {
		max-width: 25rem;
	}
}

._circletype {
	padding-left: 0.5rem;
}

._circletype:hover, .about:hover, .colorbutton:hover, .listbutton:hover, ._circletype:active, .about:active, .colorbutton:active, .listbutton:active {
	color: var(--bgcolor);
	transition: color 0.5s ease;
}

button {
	background-color: unset;
	cursor: pointer;

}

@keyframes reveal {
	0% {opacity: 0}
	70% {opacity: 0}
	100% {opacity: 1}
}


/*-----background frame-----*/

.hundred_top_wrapper {
	pointer-events: none;
	z-index: 3;
	position: fixed;
	top: 1rem;
	right: 1rem;
	width: calc(((100vw - 2rem) / 3) * 2);
	height: calc(((100.3vw - 2rem) / 3) / 2);
	animation: tophundred 4.5s forwards;
}

.topbg {
	pointer-events: none;
	z-index: 4;
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 1rem;
	background-color: black;
	animation: topbghundred 4.5s forwards;
}

@keyframes tophundred {
	0% {top: calc(49.9% - ((100vw - 2rem) / 3) / 2); transform-origin: center bottom;}
	70% {top: calc(49.9% - ((100vw - 2rem) / 3) / 2); transform-origin: center bottom;}
	90% {top: 1rem; transform-origin: center bottom;}
}

@keyframes topbghundred {
	0% {height: calc(50% - ((100vw - 2rem) / 3) / 2);}
	70% {height: calc(50% - ((100vw - 2rem) / 3) / 2);}
	90% {height: 1rem}
}

.hundred_bottom_wrapper {
	pointer-events: none;
	z-index: 3;
	position: fixed;
	bottom: 1rem;
	right: 1rem;
	width: calc(((100vw - 2rem) / 3) * 2);
	height: calc(((100vw - 2rem) / 3) / 2);
	animation: bottomhundred 4.5s forwards;
}

.hundred_top {
    pointer-events: none;
    position: relative;
    top: 0;
    right: 0;
    width: 100%;
    height: 100.6%;
    background-color: black;
	-webkit-mask:
	 radial-gradient(50% 99.4% at bottom, #0000 99.4%, #000)
	 0/50% 100.6%;
}

.hundred_bottom {
    pointer-events: none;
    position: relative;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100.6%;
    background-color: black;
	-webkit-mask:
	 radial-gradient(50% 99.4% at top, #0000 99.4%, #000)
	 0/50% 100.6%;
}

.bottombg {
	pointer-events: none;
	z-index: 4;
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100vw;
	height: 1rem;
	background-color: black;
	animation: bottombghundred 4.5s forwards;
}

@keyframes bottomhundred {
	0% {bottom: calc(50% - ((100vw - 2rem) / 3) / 2); transform-origin: center bottom;}
	70% {bottom: calc(50% - ((100vw - 2rem) / 3) / 2); transform-origin: center bottom;}
	90% {bottom: 1rem; transform-origin: center bottom;}
}

@keyframes bottombghundred {
	0% {height: calc(50% - ((100vw - 2rem) / 3) / 2);}
	70% {height: calc(50% - ((100vw - 2rem) / 3) / 2);}
	90% {height: 1rem}
}

/*-----main body-----*/

.accordion {
	position: fixed;
	top: 0;
	left: 0;
	margin: 1rem;
	width: calc(100vw - 2rem);
	height: calc(100dvh - 1.65rem);
	background-color: var(--bgcolor);
	overflow-y: auto !important;
	-webkit-overflow-scrolling: touch;
	vertical-align: bottom;
}

.accordion ul {
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	height: auto;
	background-color: var(--bgcolor);
	list-style: none;
	margin: 0;
	padding: 0;
}

.accordion li {
	width: calc(100% / 3);
	height: fit-content;
	list-style: none;
}

.accordion img {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	mix-blend-mode: screen;
	filter: grayscale(100%) contrast(100%);
	-webkit-filter: grayscale(100%) contrast(100%);
	opacity: 1;
}

.accordion img:hover {
	mix-blend-mode: normal;
	filter: unset;
}
.accordion a:active img {
	mix-blend-mode: normal;
	filter: unset;
}

@media only screen and (min-width: 600px) {
	._circletype, .about {
		font-size: 1.25rem;
		padding-top: 2.5rem;
	}
	.colorbutton, .listbutton {
		font-size: 1.25rem;
		padding-bottom: 2.5rem;
	}
}


@media only screen and (min-width: 1100px) {
	._circletypeWrapper, .aboutWrapper, .colorbuttonWrapper, .listbuttonWrapper {
		width: 7rem;
		height: 3rem;
		border-radius: 0 2rem 2rem 0;
	}

	._circletype, .about {
		font-size: 1.5rem;
		padding-top: 5rem;
	}

	.colorbutton, .listbutton {
		font-size: 1.5rem;
		padding-bottom: 5rem;
	}
}


/*------work style------*/

.work_info {
	font-family: 'source-han-sans-korean', sans-serif;
	background-color: white;
	font-size: 1rem;
	margin: 1rem;
	border-radius: 0 1rem 1rem 0;
}

.title {
	vertical-align:top;
	padding: 1rem;
}

.title h1 {
	font-size: 1.25rem;
	font-weight: 700;
}

@media only screen and (min-width: 900px) {
	.title {
		display: inline-block;
		width: calc((100vw / 3) - 2rem);
	}

	.statement{
		display: inline-block;
		width: calc((100vw / 3) * 2 - 2rem);
	}
}

.statement {
	padding: 1rem;
}

.work_img {
	display: flex;
	flex-flow: wrap;
	margin-left: 1rem;
	margin-right: 1rem;
	height: fit-content;
}

.work_img a {
	display: block;
	width: 100%;
	margin-bottom: 1rem;
	padding: 1rem;
	font-size: 1rem;
	text-decoration: none;
	text-align: center;
	color: black;
	background-color: white;
	border-radius: 0 1rem 1rem 0;
}

.work_img a:hover, .work_img a:active {
	color: var(--bgcolor);
	background-color: black;
}

.work_img img {
	width: 100%;
	margin-bottom: 1rem;
	border-radius: 0 1rem 1rem 0;
}

.embed-container {
	position: relative;
	top: 0;
	left: 0; 
	padding: 0;
	width: 100%; 
	height: 100%; 
	border: 0;
	margin: 0;
	margin-bottom: 1rem;
	padding-bottom: 56.25%;
	height: 0;
}

.embed-container iframe {
	position: absolute;
	top: 0;
	left: 0;
	padding: 0;
	width: 100%; 
	height: 100%; 
	border: 0;
}

.lottie {
	width: 100%;
	height: calc((100vw - 2rem) / 1.5);
	border-radius: 0 1rem 1rem 0;
	margin-bottom: 1rem;
}

.embed-container2 {
	position: relative;
	top: 0;
	left: 0; 
	padding: 0;
	width: 100%; 
	height: 100%; 
	border: 0;
	margin: 0;
	margin-bottom: 1rem;
	padding-bottom: 112%;
	height: 0;
}

.embed-container2 iframe {
	position: absolute;
	top: 0;
	left: 0;
	padding: 0;
	width: 100%; 
	height: 100%; 
	border: 0;
}

.embed-container3 {
	position: relative;
	top: 0;
	left: 0; 
	padding: 0;
	width: 100%; 
	height: 100%; 
	border: 0;
	margin: 0;
	margin-bottom: 1rem;
	padding-bottom: 78%;
	height: 0;
}

.embed-container3 iframe {
	position: absolute;
	top: 0;
	left: 0;
	padding: 0;
	width: 100%; 
	height: 100%; 
	border: 0;
}

.back {
	z-index: 4;
	position: fixed;
	display: flex;
	flex-flow: row;
	width: 3rem;
	height: 2rem;
	top: 0.5rem;
	right: 1rem;
}

.back_icon {
	display: flex;
	width: 1rem;
	height: 100%;
	background-color: var(--bgcolor);
}
.icon2, .icon3 {
	border-radius: 0.5rem;
}

.back:hover .back_icon {
	background-color: black;
}

.back:active .back_icon {
	background-color: black;
}

.work_img .half {
	width: calc(50% - 0.5rem);
}

.work_img .halfLeft {
	margin-right: 1rem;
}

.work_img .half2 {
	width: calc((100% / 3) - 0.5rem);
}

.work_img .half2-2 {
	width: calc((100% / 3) * 2 - 0.5rem);
}

.work_img .trisect1 {
	width: calc((100% / 3) - (2rem / 3));
	margin-right: 1rem;
}

.work_img .trisect2 {
	width: calc((100% / 3) - (2rem / 3));
	margin-right: 1rem;
}

.work_img .trisect3 {
	width: calc((100% / 3) - (2rem / 3));
}


.work_img .quintuple1 {
	width: calc((100% / 5) - (4rem / 5));
	margin-right: 1rem;
}

.work_img .quintuple2 {
	width: calc((100% / 5) - (4rem / 5));
	margin-right: 1rem;
}

.work_img .quintuple3 {
	width: calc((100% / 5) - (4rem / 5));
	margin-right: 1rem;
}

.work_img .quintuple4 {
	width: calc((100% / 5) - (4rem / 5));
	margin-right: 1rem;
}

.work_img .quintuple5 {
	width: calc((100% / 5) - (4rem / 5));
}