@import url('https://webfontworld.github.io/leferi/LeferiBase.css');
		body{
			margin: 0;
			overflow: hidden;
			background-color: black;
		}
		h1, p, h3{
			margin: 0
		}
		.hidden{
			display: none;
		}

		/*alert*/
		.alert{
			width:100vw;
			height: 100vh;
			background: black;
		}
		.alert h1{
			padding-top: 30vh;
			text-align: center;
			font-family: 'LeferiBase' !important;
			font-size: 8vh;
			font-weight: 600;
			color: white;
			}
		.alert p{
			padding-top: 3vh;
			text-align: center;
			line-height: 1.5;
			font-family: 'LeferiBase' !important;
			color: white;
		}
		.alert h3{
			padding-top: 3vh;
			text-align: center;
			line-height: 1.7;
			font-family: 'LeferiBase' !important;
			font-weight: 500;
			color: white;
		}
		.alert button{
			display: block;
			margin: 4vh auto;
			border: 1px solid white;
			outline: none;
			background: black;
			color: white;
			font-family: 'LeferiBase' !important;
			font-size: 20px;
			transition: background 0.3s, color 0.3s;
			padding: 0.5vh 2vh;
			position: relative;
			z-index: 3;
		}
		.alert button:hover{
			background: white;
			color: black;
		}
		.caution{
			position: absolute;
			width:50vh;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			z-index: 2;
		}

		/* Nav */
		#container {
		  padding: 0;
		  margin: 0;
		  background-color: black;
		}
		#main {
		  padding: 4% 1.5em;
		  max-width: 55em;
		  margin: 0 auto;
		}
		#header {
		  padding: 1.5em;
		  margin: 0 0 1em 0;
		  background-color: black;
		}
		#footer {
		  padding: 1.5em;
		  margin: 2em 0 0 0;
		  background-color: black;

		}
		.primary-nav {
			position: fixed;
			z-index: 999;
			background-color: black;
		}
		.menu {
			position: relative;
		}
		.menu ul {
		  margin: 0;
		  padding: 0;
		  list-style: none;
			
		}
		.open-panel {
		  border: none;
		  background-color:#fff;
		  padding: 0;
		}
		.hamburger {
			background: black;
			position: relative;
			display: block;
			text-align: center;
			padding: 13px 0;
			width: 50px;
		 	height: 73px;
			left: 0;
			top: 0;
			z-index: 1000;
		  cursor: pointer;
		}
		.hamburger:before {
			content:"\2630";
			display: block;
		 	color: white;
		 	line-height: 32px;
			font-size: 16px;
		}
		.openNav .hamburger:before {
			content:"\2715"; /* close icon */
			display: block;
		 	color: white;
		 	line-height: 32px;
			font-size: 16px;
		}
		.hamburger:hover:before {
		  color: #777;
		}
		.primary-nav .menu li {
			position: relative;
		}
		.menu .icon {
			position: absolute;
			top: 12px;
			right: 10px;
			pointer-events: none;
			width: 24px;
			height: 24px;
		}
		.menu,
		.menu a,
		.menu a:visited {
			color: #aaa;
		 	text-decoration: none!important;
			position: relative;
			font-family: LeferiBase;
		}
		.present{
			font-weight: 900;
		}
		.menu a {
		  display: block;
		  white-space: nowrap;
		  padding: 1em;
		  font-size: 14px;
		}
		.menu a:hover {
			color: #fff;
		}
		.menu {
			margin-bottom: 3em;
		}
		.menu-dropdown li .icon {
			color: #777;
		}
		.menu-dropdown li:hover .icon {
			color: #fff;
		}
		.menu label {
		  margin-bottom: 0;
		  display: block;
		}
		.menu label:hover {
		  cursor: pointer;
		}
		.menu input[type="checkbox"] {
		  display: none;
		}
		input#menu[type="checkbox"] {
		  display: none;
		}
		.sub-menu-dropdown {
			display: none;
		}
		.new-wrapper {
			position: absolute;
			left: 50px;
			width: calc(100% - 50px);
			transition: transform .45s cubic-bezier(0.77, 0, 0.175, 1);
		}
		#menu:checked + ul.menu-dropdown {
			left: 0;
		    -webkit-animation: all .45s cubic-bezier(0.77, 0, 0.175, 1);
		            animation: all .45s cubic-bezier(0.77, 0, 0.175, 1);
		}
		.sub-menu-checkbox:checked + ul.sub-menu-dropdown {
		    display: block!important;
		    -webkit-animation: grow .45s cubic-bezier(0.77, 0, 0.175, 1);
		            animation: grow .45s cubic-bezier(0.77, 0, 0.175, 1);
		}
		.openNav .new-wrapper {
		  position: absolute;
		  transform: translate3d(200px, 0, 0);
		  width: calc(100% - 250px);
		  transition: transform .45s cubic-bezier(0.77, 0, 0.175, 1);
		}
		.downarrow {
		  background: transparent;
			position: absolute;
			right: 50px;
			top: 12px;
		  color: #777;
		  width: 24px;
		  height: 24px;
		  text-align: center;
		  display: block;
		}
		.downarrow:hover {
		  color: #fff;
		}
		.menu {
			position: absolute;
			display: block;
			left: -200px;
		 	top: 0;
			width: 250px;
		  	transition: all 0.45s cubic-bezier(0.77, 0, 0.175, 1);
		  	background-color: #000;
			z-index: 999;
		}
		.menu-dropdown {
		  top: 0;
		  overflow-y: auto;
		}
		.overflow-container {
		  position: relative;
		  height: calc(100vh - 73px)!important;
		  border-top: 73px solid black;
		  overflow-y: auto;
		  z-index: -1;
		  display:block;
		  background-color: black;
		}
		.menu a.logotype {
		  position: absolute!important;
		  top: 11px;
		  left: 55px;
		  display: block;
		  font-family:'LeferiBase' !important;
		  text-transform: uppercase;
		  font-weight: 700;
		  color: white;
		  font-size: 21px;
		  padding: 10px;
		  background-color: black;
		}
		.menu a.logotype span {
		  font-weight: 400;
		}
		.menu a.logotype:hover {
		  color: #777;
		}
		.sub-menu-dropdown {
			background-color: #333;
		}
		.menu:hover {
			position: absolute;
			left: 0;
			top: 0;
		}
		.openNav .menu:hover {
			position: absolute;
			left: -200px;
			top 73px;
		}
		.openNav .menu {
		  top 73px;
				transform: translate3d(200px, 0, 0);
		    transition: transform .45s cubic-bezier(0.77, 0, 0.175, 1);
		}
		.menu p{
			color: #aaa;
			position: absolute !important;
			top: 90vh;
			left: 1em;
			font-family:'LeferiBase' !important;
			font-size: 12px;
			line-height: 1.7;
		}

		/* 환각 */
		.canvas1 {
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200vw;
            height: 200vh;
            background-color: black;
            animation: rotate1 10s linear infinite;
            mix-blend-mode: lighten;
            display: block;
        }
        .canvas2 {
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200vw;
            height: 200vh;
            background-color: black;
            animation: rotate2 7s reverse infinite;
            mix-blend-mode: screen;
            display: block;
        }
        .canvas3 {
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200vw;
            height: 200vh;
            background-color: black;
            animation: rotate3 5s linear infinite;
            mix-blend-mode: lighten;
            display: block;
        }
        @keyframes rotate1 {
            0% {
                transform: rotate(0deg) scale(1.25);
                filter: hue-rotate(-180deg);
                backdrop-filter: hue-rotate(0deg);
            }
            50% {
                transform: rotate(180deg) scale(1);
            }
            100% {
                transform: rotate(360deg) scale(1.25);
                filter: hue-rotate(180deg);
                backdrop-filter: hue-rotate(360deg);
            }
        }
        @keyframes rotate2 {
            0% {
                transform: rotate(0deg) scale(2);
                filter: hue-rotate(-180deg);
                backdrop-filter: hue-rotate(0deg);
            }
            50% {
                transform: rotate(180deg) scale(1);
            }
            100% {
                transform: rotate(360deg) scale(2);
                filter: hue-rotate(180deg);
                backdrop-filter: hue-rotate(360deg);
            }
        }
        @keyframes rotate3 {
            0% {
                transform: rotate(0deg) scale(0.75);
                filter: hue-rotate(-180deg);
                backdrop-filter: hue-rotate(0deg);
            }
            50% {
                transform: rotate(180deg) scale(1.5);
            }
            100% {
                transform: rotate(360deg) scale(0.75);
                filter: hue-rotate(180deg);
                backdrop-filter: hue-rotate(360deg);
            }
        }
        #scaleSlider {
            position: absolute;
            width: 50vw;
            top: 95vh;
            left: 51%;
            transform: translate(-50%, -50%);
            z-index: 1;
           	opacity: 0.7;
        }
        input[type=range] {
          -webkit-appearance: none;
          margin: 10px 0;
          width: 100%;
        }
        input[type=range]:focus {
          outline: none;
        }
        input[type=range]::-webkit-slider-runnable-track {
          width: 100%;
          height: 30px;
          cursor: pointer;
          animate: 0.2s;
          box-shadow: 0px 0px 0px #000000;
          background: #000000;
          border-radius: 0px;
          border: 0px solid #000000;
        }
        input[type=range]::-webkit-slider-thumb {
          box-shadow: 0px 0px 0px #000000;
          border: 0px solid #E3E3E3;
          height: 30px;
          width: 14px;
          border-radius: 0px;
          background: #FFFFFF;
          cursor: pointer;
          -webkit-appearance: none;
          margin-top: 0px;
        }
        input[type=range]:focus::-webkit-slider-runnable-track {
          background: #000000;
        }
        input[type=range]::-moz-range-track {
          width: 100%;
          height: 30px;
          cursor: pointer;
          animate: 0.2s;
          box-shadow: 0px 0px 0px #000000;
          background: #000000;
          border-radius: 0px;
          border: 0px solid #000000;
        }
        input[type=range]::-moz-range-thumb {
          box-shadow: 0px 0px 0px #000000;
          border: 0px solid #E3E3E3;
          height: 30px;
          width: 14px;
          border-radius: 0px;
          background: #FFFFFF;
          cursor: pointer;
        }
        input[type=range]::-ms-track {
          width: 100%;
          height: 30px;
          cursor: pointer;
          animate: 0.2s;
          background: transparent;
          border-color: transparent;
          color: transparent;
        }
        input[type=range]::-ms-fill-lower {
          background: #000000;
          border: 0px solid #000000;
          border-radius: 0px;
          box-shadow: 0px 0px 0px #000000;
        }
        input[type=range]::-ms-fill-upper {
          background: #000000;
          border: 0px solid #000000;
          border-radius: 0px;
          box-shadow: 0px 0px 0px #000000;
        }
        input[type=range]::-ms-thumb {
          margin-top: 1px;
          box-shadow: 0px 0px 0px #000000;
          border: 0px solid #E3E3E3;
          height: 30px;
          width: 14px;
          border-radius: 0px;
          background: #FFFFFF;
          cursor: pointer;
        }
        input[type=range]:focus::-ms-fill-lower {
          background: #000000;
        }
        input[type=range]:focus::-ms-fill-upper {
          background: #000000;
        }

        /*불안*/
        .eyes {
        	padding-top: 45vh;
			width: 100%;
			height: 5em;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: row;
			column-gap: 2vw;
		}
		.eye {
		  width: 7em;
		  height: 5em;
		  border-radius: 100%;
		  background-color: #fff;
		  display: flex;
		  justify-content: center;
		  align-items: center;
		  transition: background-color- 0.2s ease;
		}
		.pupil {
		  width: 3em;
		  height: 3em;
		  border-radius: 50%;
		  background-color: #000;
		}
		.border-circle {
		  position: absolute;
		  transform: translate(-50%, -50%);
		  width: 120vh;
		  height: 120vh;
		  border-radius: 100%;
		  border: 3px solid white;
		  animation: ripple 3.0s infinite;
		  box-sizing: border-box;
		  transition: border-color 0.2s ease;
		}
		@keyframes ripple {
		  0% {
		    opacity: 1;
		    transform: scale(0);
		  }
		  75%{
		  	opacity: 0.6;
		  }
		  100% {
		    opacity: 0;
		    transform: scale(1);
		  }
		}
		.anxiety-cursor {
      		cursor: url('medicine.png'), auto;
   		}

   		/*벌레*/
   		#bugs{
   			width: 100vw;
   			height: 100vh;
   			z-index: 1;
   		}
   		#scaleSlider2 {
            position: absolute;
            width: 50vw;
            top: 95vh;
            left: 51%;
            transform: translate(-50%, -50%);
            z-index: 99;
           	opacity: 0.7;
        }

        /*무너짐*/