* {
	 box-sizing: border-box;
}
 .mobile {
	 width: 320px;
	 height: 480px;
	 background-color: #fff;
	 border-radius: 21px;
	 box-shadow: 0px 4px 50px #bbb;
	 position: relative;
	 overflow: hidden;
}
 .header {
	 height: 40px;
	 width: 100%;
	 display: flex;
	 position: fixed;
	 align-items: center;
	 padding: 0px 16px;
	 background: linear-gradient(120deg, #485296, #8F3481);
	 z-index: 9;
}
 .header__logo {
	 font-size: 15px;
	 color: #fff;
	 letter-spacing: 0.05em;
}
 .contents {
	 display: block;
	 padding: 16px;
	 height: 430px;
}
 .list {
	 padding: 0;
	 margin: 0;
	 display: flex;
	 flex-direction: column;
	 justify-content: space-around;
	 width: 100%;
	 height: 100%;
}
 .menu {
	 display: flex;
	 position: fixed;
	 align-items: center;
	 justify-content: center;
	 bottom: 16px;
	 right: 16px;
	 background: linear-gradient(120deg, #485296, #8F3481);
	 height: 50px;
	 width: 50px;
	 border-radius: 50%;
	 z-index: 20;
	 box-shadow: 0px 3px 8px #333;
	 cursor: pointer;
	 
}
 .menu__line {
	display: flex;
	left: 25%;
	bottom: 50%;
	position: absolute;
	 width: 25px;
	 height: 4px;
	 background-color: #fff;
	 border-radius: 10px;
	 transition-duration: 0.4s;
}
 .menu__line:nth-child(1) {
	 top: 25%;
}
 .menu__line:nth-child(2) {
	 top: 45%;
}
 .menu__line:nth-child(3) {
	 bottom: 25%;
}
 .menu.active {
	 background: transparent;
	 box-shadow: none;
}
 .menu.active .menu__line:nth-child(1) {
	 transform: translate(-12px, 9px) rotate(-45deg);
}
 .menu.active .menu__line:nth-child(2) {
	 transition-duration: 0s;
	 opacity: 0;
}
 .menu.active .menu__line:nth-child(3) {
	 transform: translate(-12px, -9px) rotate(45deg);
}
 .nav {
	display: flex;
	position: fixed;
	overflow-y: scroll;
	bottom: 16px;
	-ms-overflow-style: none;
	scrollbar-width: none;  
	right: 16px;
	background: linear-gradient(120deg, #485296, #8F3481);
	height: 50px;
	width: 50px;
	border-radius: 50%;
	z-index: 10;
	transition-duration: 0.4s;
}
 .nav.open {
	/* background: linear-gradient(120deg, #844896, #8F3481); */
	background: linear-gradient(120deg, #485296, #8F3481);
	 width: 240px;
	 height: 100%;
	 position: fixed;
	 right: 0px;
	 bottom: 0px;
	 border-radius: 0;
	 display: block;
	 justify-content: center;
	 align-items: center;
}
 .nav__list {
	 display: none;
}
 .nav__list.show {
	 display: flex;
	 flex-direction: column;
	 list-style: none;
	 margin: 0;
	 padding: 0;
}
 .nav__item {
	 display: flex;
	 align-items: center;
	 justify-content: center;
	 background-color: transparent;
	 width: 100%;
	 opacity: 0;
	 animation-name: fadein;
	 animation-duration: 1s;
	 animation-fill-mode: forwards;
}
 .nav__item:nth-child(1) {
	 animation-delay: 0.1s;
}
 .nav__item:nth-child(2) {
	 animation-delay: 0.15s;
}
 .nav__item:nth-child(3) {
	 animation-delay: 0.2s;
}
 .nav__item:nth-child(4) {
	 animation-delay: 0.25s;
}
 .nav__item:nth-child(5) {
	 animation-delay: 0.3s;
}
 .nav__item:nth-child(6) {
	 animation-delay: 0.35s;
}
 .nav__item:nth-child(7) {
	 animation-delay: 0.4s;
}
 .nav__item:nth-child(8) {
	 animation-delay: 0.45s;
}
 .nav__item:nth-child(9) {
	 animation-delay: 0.5s;
}
 .nav__item:nth-child(10) {
	 animation-delay: 0.55s;
}
 .nav__item:nth-child(11) {
	 animation-delay: 0.6s;
}
 .nav__item:nth-child(12) {
	 animation-delay: 0.65s;
}
 .nav__item:nth-child(13) {
	 animation-delay: 0.7s;
}
 .nav__item:nth-child(14) {
	 animation-delay: 0.75s;
}
 .nav__item:nth-child(15) {
	 animation-delay: 0.8s;
}
 .nav__item:nth-child(16) {
	 animation-delay: 0.85s;
}
 .nav__item:nth-child(17) {
	 animation-delay: 0.9s;
}
 .nav__item:nth-child(18) {
	 animation-delay: 0.95s;
}
 .nav__item:nth-child(19) {
	 animation-delay: 1s;
}
 .nav__item:not(:last-child) {
	 margin-bottom: 32px;
}
 .nav__link {
	 font-size: 16px;
	 letter-spacing: 0.1em;
	 text-decoration: none;
	 color: #fff;
}
.nav::-webkit-scrollbar {
	display: none;
  }
  
  /* Hide scrollbar for IE, Edge and Firefox */
 @keyframes fadein {
	 0% {
		 opacity: 0;
		 transform: translateY(24px);
	}
	 100% {
		 opacity: 1;
	}
}