@media screen and (min-width: 600px) {
	main p{
		text-align: center;
	}

	@keyframes right{
		0%{opacity: 0; transform: translate(-10vw, 0);}
		100%{opacity: 1; transform: translate(0, 0);}
	}
	@keyframes up{
		0%{opacity: 0; transform: translate(0, 5vw);}
		100%{opacity: 1; transform: translate(0, 0);}
	}
	@keyframes scale{
		0%{transform: scale(1, 0);}
		100%{transform: scale(1, 1);}
	}

	#date-current{
		display: flex;
		align-items: flex-end;
		justify-content: space-between;
		width: 84vw;
		padding: 0 7vw; 
	}

	#current-price{
		text-align: right;
		width: 50vw;
		position: relative;
		font-size: 1.5vw;
		font-weight: bold;
		color: #aaaaaa;
		z-index: 1;
		animation: up 1s backwards;
		animation-delay: .6s;
	}
	#current-price > span{
		font-size: 3vw;
		color: #B9314F;
	}
	
	#pricepage{
		padding-top: 1vw;
		position: relative;
	}
	#pricepage > h1{
		width: 84vw;
		padding: 1vw 7vw;
		font-size: 5vw;
		color: #333333;
		padding-top: 4vw;
		position: relative;
		animation: right 1s backwards;
		animation-delay: 0s;
	}
	#pricepage > h1::before{
		content: "";
		display: block;
		width: 8vw;
		height: 3.8vw;
		background-color: #333;
		transform: skew(-15deg);
		position: absolute;
		top: 5.2vw;
		left: -3vw;
	}
	#pricepage > h2{
		width: 84vw;
		padding: 0vw 7vw; 
		font-size: 2vw;
		color: #333333;
	}
	#pricepage > h2 > a{
		color: #888;
	}
	#pricepage > h2 > a:hover{
		text-decoration: underline;
	}
	#price-table-frame{
		width: 100vw;
		position: relative;
	}

	#back-word{
		position: absolute;
		left: 0;
		top: 0;
		width: 100vw;
		height: 25vw;
		text-align: center;
		line-height: 25vw;
		font-size: 15vw;
		color: #eee;
		font-weight: bold;
		pointer-events: none;
		animation: up 1s backwards;
	}

	#price-table{
		width: 100vw;
		height: 25vw;
		position: relative;
	}
	#price-table > div{
		width: 84vw;
		display: flex;
		align-items: flex-end;
		margin-left: 7vw;
		margin-top: 0vw;
		height: 25vw;
		justify-content: center;
		position: absolute;
		left: 0;
		top: 0;
	}
	#price-table > div::before{
		content: "";
		display: block;
		width: 95vw;
		height: .5vw;
		background-color: #333;
		transform: skew(-15deg);
		position: absolute;
		top: 25vw;
		left: -9vw;
		animation: right 1s backwards;
	}
	.price{
		position: relative;
		cursor: pointer;
		transition: all 0.3s;
		transform-origin: bottom;
		animation: scale 1s backwards;
	}
	.price::after{
		content: "";
		position: absolute;
		background-color: #B9314F;
		width: 100%;
		height: 0.5vw;
		top: -1vw;
		border-radius: 1vw;
		opacity: 0;
	}
	.price:hover::after{
		opacity: 1;
	}
	.current-price{
		position: absolute;
		top: -3vw;
		font-weight: bold;
		font-size: 1vw;
		color: #333333;
		width: 4vw;
		text-align: center;
		transform: scale(0, 0);
		box-shadow: 0 0 .5vw .5vw #fff;
		background-color: #fff;
		z-index: 1;
		border-radius: 1vw;
	}
	.current-date{
		position: absolute;
		bottom: -2vw;
		font-weight: bold;
		font-size: 1vw;
		color: #333333;
		display: block;
		transform: scale(0, 0);
		z-index: 1;
		box-shadow: 0 .5vw .5vw .5vw #fff;
		background-color: #fff;
	}
	.current-month{
		position: absolute;
		bottom: -2vw;
		font-weight: bold;
		font-size: 1vw;
		line-height: 1vw;
		color: #aaa;
		display: block;
	}
	#date-button{
		position: relative;
		width: 50vw;
		display: flex;
	}
	#date-button > div{
		width: 10vw;
		height: 2.5vw;
		text-align: center;
		margin: 0 1vw 0 0;
		color: #fff;
		font-weight: bold;
		font-size: 1.3vw;
		border-radius: 2vw;
		cursor: pointer;
		line-height: 2.5vw;
		z-index: 1;
		animation: up 1s backwards;
	}
	#date-button > div:nth-child(1){
		animation-delay: 0.1s;
	}
	#date-button > div:nth-child(2){
		animation-delay: 0.2s;
	}
	#date-button > div:nth-child(3){
		animation-delay: 0.3s;
	}
	#date-button > div:nth-child(4){
		animation-delay: 0.4s;
	}
	#date-button > div:nth-child(5){
		animation-delay: 0.5s;
	}
	.time:nth-of-type(1){
		background-color: #B9314F;
	}
	.time{
		background-color:  #aaa;
	}
	#date-unit{
		position: relative;
		width: 84vw;
		padding: 3vw 8vw;
		font-weight: bold;
		color: #333;
		font-size: 1.5vw;
		text-align: center;
		animation: up 1s backwards;
	}
	#price-table > div > .price{
		background-color: #B9314F;
	}
	.G-price:nth-of-type(1){
		opacity: 1;
		transition: all 0.3s;
		pointer-events: inherit;
	}
	.G-price:nth-of-type(1) > .price{
		width: 0.365vw;
		margin: 0 0.05vw;	
		border-radius: 0.1vw 0.1vw 0vw 0vw;
	}
	.G-price:nth-of-type(1) > .current-price, .G-price:nth-of-type(1) > .current-date{
		width: 0.365vw;
		margin: 0 0.05vw;	
		border-radius: 0.1vw 0.1vw 0vw 0vw;
	}
	.G-price:nth-of-type(1) .current-price{
		left: -2vw;
	}
	.G-price:nth-of-type(1) .current-date{
		left: -1.9vw;
	}
	.G-price:nth-of-type(1) .current-month{
		left: -1.5vw;
	}
	.G-price:nth-of-type(2){
		opacity: 0;
		transition: all 0.3s;
		pointer-events: none;
	}
	.G-price:nth-of-type(2) > .price{
		width: 0.73vw;
		margin: 0 0.1vw;	
		border-radius: 0.2vw 0.2vw 0vw 0vw;
	}
	.G-price:nth-of-type(2) .current-price, .G-price:nth-of-type(2) .current-date{
		left: -1.8vw;
	}
	.G-price:nth-of-type(3){
		opacity: 0;
		transition: all 0.3s;
		pointer-events: none;
	}
	.G-price:nth-of-type(3) > .price{
		width: 4.38vw;
		margin: 0 0.4vw;	
		border-radius: 0.6vw 0.6vw 0vw 0vw;
	}
	.G-price:nth-of-type(3) .current-price, .G-price:nth-of-type(3) .current-date{
		left: -1.1vw;
	}
	.G-price:nth-of-type(4){
		opacity: 0;
		transition: all 0.3s;
		pointer-events: none;
	}
	.G-price:nth-of-type(4) > .price{
		width: 4.38vw;
		margin: 0 1vw;	
		border-radius: 0.6vw 0.6vw 0vw 0vw;
	}
	.G-price:nth-of-type(4) .current-price, .G-price:nth-of-type(4) .current-date{
		left: 0.1vw;
		transform: scale(1, 1);
	}
	.G-price:nth-of-type(5){
		opacity: 0;
		transition: all 0.3s;
		pointer-events: none;
	}
	.G-price:nth-of-type(5) > .price{
		width: 0.365vw;
		border-radius: 0.1vw 0.1vw 0vw 0vw;
	}
	.G-price:nth-of-type(5) > .current-price, .G-price:nth-of-type(5) > .current-date{
		width: 0.365vw;
		margin: 0 0.05vw;	
		border-radius: 0.1vw 0.1vw 0vw 0vw;
	}
	.G-price:nth-of-type(5) .current-price{
		left: -2vw;
	}
	.G-price:nth-of-type(5) .current-date{
		left: -1.9vw;
	}
	.G-price:nth-of-type(5) .current-month{
		left: -1.5vw;
	}
	.price:hover .current-price{
		transform: scale(1, 1);
	}
	.price:hover .current-date{
		transform: scale(1, 1);
	}
	#price-content{
		display: flex;
		flex-direction: column;
		justify-content: center;
		width: 30vw;
		text-align: center;
		margin-right: 5vw;
		align-items: flex-end;
		padding-bottom: 5vw;
	}
	#price-content > h2{
		font-size: 3vw;
		position: relative;
		color: #333333;
		line-height: 3vw;
		margin: 0 0 5vw 0;
		width: 21.6vw;
	}
	#price-table-2{
		position: relative;
		height: auto;
		padding: 8vw 0;
		background-image: url(/AEETHER/image/newsletter-4.jpg);
		background-size: cover;
		background-attachment: fixed;
	}
	#price-table-2 table{
		width: 80vw;
		position: relative;
		left: 10vw;
	  	border-collapse: collapse;
	  	border-style: solid;
	  	border-color: #fff;
	  	background-color: rgba(25, 25, 25, 0.5);
	  	border-left: none;
	  	border-right: none;
	}
	#price-table-2 td{
		padding: .5vw;
		text-align: center;
		color: #fff;
		height: 2vw;
		font-size: 1.2vw;
	  	border-left: none;
	  	border-right: none;
	}
	#price-table-2 caption{
		color: #fff;
		font-size: 3vw;
		font-weight: bold;
		padding: 0 0 5vw 0;
	}
	
	
	
	
	#price-table-1-2{
		display: flex;
		height: 45vw;
		padding-bottom: 3vw;
		animation: up 1s backwards;
		animation-delay: .2s;
	}
	#price-table-1-2 > div{
		width: 48vw;
		margin: 1vw;
		position: relative;
	}
	
	
	
	
	
	#p-c{
		width: 48vw;
		font-weight: bold;
		color: #333;
		font-size: 1.5vw;
		text-align: center;
		position: relative;
		margin: 3vw 0;
	}
	#con-1{
		opacity: 1;
		transition: all 0.3s;
		pointer-events: inherit;
		width: 33vw;
		display: flex;
		align-items: flex-start;
		flex-direction: column;
		margin-left: 13vw;
		margin-top: 0vw;
		height: 36vw;
		border-left: solid 0.3vw #333333;
		position: relative;
		top: 0vw;
		justify-content: center;
	}
	#con-1 > .price{
		height: 4vw;
		margin: 1vw 0;
		background: #B9314F;
		position: relative;
		border-radius: 0 4vw 4vw 0;
	}
	#con-1 > .price::after{
		display: block;
		z-index: 1;
		content: attr(data-time);
		height: 4vw;
		line-height: 4vw;
		font-size: 1.5vw;
		font-weight: bold;
		color: #fff;
		position: absolute;
		top: 0;
		left: 1vw;
		opacity: 1;
		background-color: transparent;
		text-shadow: .25vw .25vw .5vw #333;
	}
	#con-1 .current-price{
		left: calc(100% + 1vw);
		top: 1vw;
		font-size: 1.5vw;
		transform: scale(1, 1);
		background-color: transparent;
		box-shadow: none;
	}
	#con-1 .current-date{
		left: -7vw;
		font-size: 1.5vw;
		transform: scale(1, 1);
		background-color: transparent;
		box-shadow: none;
		top: 1vw;
	}
	
	
	
	
	
	#p-d{
		width: 40vw;
		font-weight: bold;
		color: #333;
		font-size: 1.5vw;
		text-align: center;
		position: relative;
		margin: 3vw 0;
	}
	#con-2{
		opacity: 1;
		transition: all 0.3s;
		pointer-events: inherit;
		width: 30vw;
		display: flex;
		align-items: flex-start;
		flex-direction: column;
		margin-right: 16vw;
		height: 36vw;
		position: relative;
		top: 0vw;
		justify-content: center;
	}
	.circle-0:nth-of-type(1){
		opacity: 1;
		pointer-events: inherit;
	}
	.circle-0{
		opacity: 0;
		position: absolute;
		top: 0;
		left: 0;
		pointer-events: none;
		transition: opacity .5s;
	}
	.circle{
		width: 20vw;
		height: 20vw;
		background-color: #fff;
		border-radius: 20vw;
		overflow: hidden;
		position: absolute;
		top: 0vw;
		left: 10vw;
	}
	.circle::after{
		content: "";
		width: 10vw;
		height: 10vw;
		background-color: #fff;
		border-radius: 10vw;
		position: absolute;
		top: 5vw;
		left: 5vw;
		z-index: 2;
	}
	.circle > div{
		width: 200vw;
		height: 200vw;
		position: absolute;
		top: -190vw;
		left: 10vw;
		transform-origin: left bottom;
		cursor: pointer;
		transition: all 0.3s;
	}
	.circle > div:hover{	
		background-color: #666;
	}
	.rec-1{
		background-color: #EAAEBB;
		z-index: 1;
	}
	.rec-2{
		background-color: #E18EA0;
		z-index: 1;
	}
	.rec-3{
		background-color: #D86E85;
		z-index: 1;
	}
	.rec-4{
		background-color: #D04E6A;
		z-index: 1;
	}
	.rec-5{
		background-color: #B9314F;
		z-index: 1;
	}
	.rec-6{
		background-color: #A12B44;
		z-index: 1;
	}
	.rec-7{
		background-color: #812237;
		z-index: 1;
	}
	.rec-8{
		background-color: #611A29;
		z-index: 1;
	}
	.rec-9{
		background-color: #40111B;
		z-index: 1;
	}
	
	.value{
		width: 30vw;
		position: absolute;
		height: 15vw;
		top: 23vw;
		display: flex;
		flex-direction: column;
		flex-wrap: wrap;
		left: 2vw;
	}
	.value > div{
		font-size: 1.3vw;
		font-weight: bold;
		width: 13vw;
		margin-right: 1vw;
		margin-bottom: 2vw;
		text-align: left;
		height: 3vw;
		line-height: 3vw;
		border-radius: 3vw;
		position: relative;
	}
	.value > div > div{
		display: block;
		height: 0.5vw;
		margin-right: 1vw;
		transition: all .3s;
		transform: skew(-15deg);
	}
	.value > div > span{
		color:  #B9314F;
		font-size: 2vw;
	}
	.v-1 > div{
		background-color: #EAAEBB;
		width: 1.8vw;
	}
	.v-2 > div{
		background-color: #E18EA0;
		width: 1.8vw;
	}
	.v-3 > div{
		background-color: #D86E85;
		width: 1.8vw;
	}
	.v-4 > div{
		background-color: #D04E6A;
		width: 1.8vw;
	}
	.v-5 > div{
		background-color: #B9314F;
		width: 1.8vw;
	}
	.v-6 > div{
		background-color: #A12B44;
		width: 1.8vw;
	}
	.v-7 > div{
		background-color: #812237;
		width: 1.8vw;
	}
	.v-8 > div{
		background-color: #611A29;
		width: 1.8vw;
	}
	.v-9 > div{
		background-color: #40111B;
		width: 1.8vw;
	}
}





















@media screen and (max-width: 600px) {
	main p{
		text-align: center;
	}

	@keyframes right{
		0%{opacity: 0; transform: translate(-30vw, 0);}
		100%{opacity: 1; transform: translate(0, 0);}
	}
	@keyframes up{
		0%{opacity: 0; transform: translate(0, 15vw);}
		100%{opacity: 1; transform: translate(0, 0);}
	}
	@keyframes scale{
		0%{transform: scale(1, 0);}
		100%{transform: scale(1, 1);}
	}

	#current-price{
		text-align: right;
		width: 80vw;
		position: relative;
		left: 10vw;
		font-size: 4.5vw;
		font-weight: bold;
		color: #aaaaaa;
		z-index: 1;
		margin: 5vw 0;
		animation: up 1s backwards;
		animation-delay: 0.2s;
	}
	#current-price > span{
		font-size: 9vw;
		color: #B9314F;
	}
	
	#pricepage{
		padding-top: 1vw;
		position: relative;
		width: 100vw;
		overflow: hidden;
	}
	#pricepage h1{
		width: 74vw;
		padding: 25vw 16vw 10vw 16vw; 
		font-size: 12vw;
		line-height: 12vw;
		color: #333333;
		position: relative;
		animation: right 1s backwards;
		animation-delay: 0s;
	}	
	#pricepage h1::before{
		content: "";
		display: block;
		width: 15vw;
		height: 16vw;
		background-color: #333;
		transform: skew(-15deg);
		position: absolute;
		top: 30vw;
		left: -5vw;
	}

	#price-table-frame{
		width: 100vw;
		position: relative;
	}
	#back-word{
		position: absolute;
		left: 0;
		top: 0;
		width: 100vw;
		height: 38vw;
		text-align: center;
		line-height: 38vw;
		font-size: 20vw;
		color: #eee;
		font-weight: bold;
		pointer-events: none;
		animation: up 1s backwards;
		animation-delay: 0.3s;
	}
	#price-table{
		width: 100vw;
		height: 38vw;
		position: relative;
	}
	#price-table > div{
		width: 84vw;
		display: flex;
		align-items: flex-end;
		margin-left: 7vw;
		margin-top: 0vw;
		height: 38vw;
		position: absolute;
		top: 0;
		justify-content: center;
	}
	#price-table > div::before{
		content: "";
		display: block;
		width: 95vw;
		height: .5vw;
		background-color: #333;
		transform: skew(-15deg);
		position: absolute;
		top: 38vw;
		left: -9vw;
		animation: right 1s backwards;
		animation-delay: 0.3s;
	}
	.price{
		position: relative;
		cursor: pointer;
		transition: all 0.3s;
		animation: scale 1s backwards;
		animation-delay: 0.3s;
		transform-origin: bottom;
	}
	.price::after{
		content: "";
		position: absolute;
		background-color: #B9314F;
		width: 100%;
		height: 1vw;
		top: -2vw;
		border-radius: 1vw;
		opacity: 0;
	}
	.price:hover::after{
		opacity: 1;
	}
	.current-price{
		position: absolute;
		top: -7vw;
		font-weight: bold;
		font-size: 3vw;
		color: #333333;
		width: 15vw;
		text-align: center;
		transform: scale(0, 0);
		box-shadow: 0 0 .5vw .5vw #fff;
		background-color: #fff;
		z-index: 1;
		border-radius: 3vw;
		transition: transform .2s;
	}
	.current-date{
		position: absolute;
		bottom: -6vw;
		font-weight: bold;
		font-size: 3vw;
		color: #333333;
		display: block;
		transform: scale(0, 0);
		z-index: 1;
		width: 15vw;
		box-shadow: 0 .5vw .5vw .5vw #fff;
		background-color: #fff;
		text-align: center;
		transition: transform .2s;
	}
	.current-month{
		position: absolute;
		bottom: -6vw;
		font-weight: bold;
		font-size: 3vw;
		color: #aaa;
		display: block;
		width: 15vw;
		text-align: center;
	}
	#date-button{
		position: relative;
		width: 80vw;
		left: 10vw;
		display: flex;
		justify-content: flex-end;
		animation: up 1s backwards;
		animation-delay: 0.1s;
	}
	#date-button > div{
		width: 30vw;
		height: 7.5vw;
		text-align: center;
		margin: 0 0 0 3vw;
		color: #fff;
		font-weight: bold;
		font-size: 3.9vw;
		border-radius: 6vw;
		cursor: pointer;
		line-height: 7.5vw;
		z-index: 1;
	}
	#date-button > a{
		display: block;
		width: 45vw;
		height: 7.5vw;
		text-align: center;
		margin: 0 0 0 3vw;
		color: #fff;
		font-weight: bold;
		font-size: 3.9vw;
		border-radius: 6vw;
		cursor: pointer;
		line-height: 7.5vw;
		z-index: 1;
		background-color: #333;
	}
	.time:nth-of-type(1), .time:nth-of-type(2), .time:nth-of-type(5){
		display: none;
	}
	.time:nth-of-type(3){
		background-color: #B9314F;
	}
	.time{
		background-color:  #aaa;
	}
	#date-unit{
		position: relative;
		width: 80vw;
		left: 10vw;
		font-weight: bold;
		color: #333;
		font-size: 4.5vw;
		margin: 10vw 0 0 0;
		text-align: center;
	}
	#price-table > div > .price{	
		background-color: #B9314F;
	}
	.G-price:nth-of-type(1){
		pointer-events: none;
		opacity: 0;
	}
	.G-price:nth-of-type(2){
		pointer-events: none;
		opacity: 0;
	}
	.G-price:nth-of-type(3){
		opacity: 1;
		transition: all 0.3s;
		pointer-events: inherit;
	}
	.G-price:nth-of-type(3) > .price{
		width: 4.38vw;
		margin: 0 0.4vw;	
		border-radius: 0.6vw 0.6vw 0vw 0vw;
	}
	.G-price:nth-of-type(3) .current-price, .G-price:nth-of-type(3) .current-date{
		left: -6vw;
	}
	.G-price:nth-of-type(4){
		opacity: 0;
		transition: all 0.3s;
		pointer-events: none;
	}
	.G-price:nth-of-type(4) > .price{
		width: 7vw;
		margin: 0 2vw;	
		border-radius: 1vw 1vw 0vw 0vw;
	}
	.G-price:nth-of-type(4) .current-price, .G-price:nth-of-type(4) .current-date{
		left: -4.5vw;
		transform: scale(0, 0);
	}
	.G-price:nth-of-type(5){
		pointer-events: none;
		opacity: 0;
	}
	.price:hover .current-price{
		transform: scale(1, 1);
	}
	.price:hover .current-date{
		transform: scale(1, 1);
	}
	#price-content{
		display: flex;
		flex-direction: column;
		justify-content: center;
		width: 30vw;
		text-align: center;
		margin-right: 5vw;
		align-items: flex-end;
		padding-bottom: 5vw;
	}
	#price-content > h2{
		font-size: 3vw;
		position: relative;
		color: #333333;
		line-height: 3vw;
		margin: 0 0 5vw 0;
		width: 21.6vw;
	}



	#price-table-2{
		position: relative;
		height: auto;
		padding: 20vw 0;
		background-image: url(/AEETHER/image/newsletter-4.jpg);
		background-size: cover;
		background-position: center;
		background-attachment: fixed;
	}
	#price-table-2 table{
		width: 80vw;
		position: relative;
		left: 10vw;
	  	border-collapse: collapse;
	  	border-style: solid;
	  	border-color: #fff;
	  	border-left: none;
	  	border-right: none;
	  	background-color: rgba(25, 25, 25, 0.5);
	}
	#price-table-2 td{
		padding: 1.5vw;
		text-align: center;
		color: #fff;
		height: 2vw;
		font-size: 4.5vw;
	  	border-left: none;
	  	border-right: none;
	}
	#price-table-2 caption{
		color: #fff;
		font-size: 9vw;
		font-weight: bold;
		padding: 0 0 15vw 0;
	}
	
	
	
	
	#price-table-1-2{
		display: flex;
		flex-direction: column;
		animation: up 1s backwards;
		animation-delay: 0.2s;
	}
	#price-table-1-2 > div:nth-of-type(1){
		width: 100vw;
		margin: 1vw;
		position: relative;
		height: 150vw;
	}
	#price-table-1-2 > div:nth-of-type(2){
		width: 100vw;
		margin: 1vw;
		position: relative;
		height: var(--height);
	}





	#p-c{
		width: 100vw;
		font-weight: bold;
		color: #333;
		font-size: 4.5vw;
		text-align: center;
		position: relative;
		top: 10vw;
	}
	#con-1{
		opacity: 1;
		transition: all 0.3s;
		pointer-events: inherit;
		width: 90vw;
		display: flex;
		align-items: flex-start;
		flex-direction: column;
		margin-left: 5vw;
		margin-top: 0vw;
		height: 36vw;
		border-left: solid 0.3vw #333333;
		position: absolute;
		top: 0vw;
		justify-content: center;
		transform: translate(18vw, 50vw) scale(2.5);
		transform-origin: left;
	}
	#con-1 > .price{
		height: 4vw;
		margin: 1.5vw 0;	
		border-radius: 0 4vw 4vw 0vw;
		background: #B9314F;
		position: relative;
		display: block;
	}
	#con-1 > .price::after{
		display: inline-block;
		z-index: 1;
		content: attr(data-time);
		width: 150%;
		height: 4vw;
		line-height: 4vw;
		font-size: 3.5vw!important;
		white-space: nowrap;
		transform: scale(.5, .5);
		transform-origin: left center;
		font-weight: bold;
		color: #fff;
		position: absolute;
		top: -.5vw;
		left: 1vw;
		opacity: 1;
		background-color: transparent;
		overflow: hidden;
	}
	#con-1 .current-price{
		position: absolute;
		right: -7vw;
		height: 4vw;
		line-height: 4vw;
		top: -0.5vw;
		font-size: 3.5vw!important;
		transform: scale(.5, .5);
		transform-origin: right center;
		background-color: transparent;
		box-shadow: none;
	}
	#con-1 .current-date{
		position: absolute;
		left: -8.5vw;
		font-size: 3.5vw!important;
		transform: scale(.5, .5);
		transform-origin: left center;
		background-color: transparent;
		box-shadow: none;
		height: 4vw;
		line-height: 4vw;
		top: -0.5vw;
	}




	#p-d{
		width: 100vw;
		font-weight: bold;
		color: #333;
		font-size: 4.5vw;
		text-align: center;
		position: relative;
		top: -15vw;
	}
	#circle-3{
		opacity: 1;
		pointer-events: inherit;
	}
	#circle-4{
		opacity: 0;
		pointer-events: none;
	}

	.circle-0:nth-of-type(1){
		opacity: 1;
		pointer-events: inherit;
	}
	.circle-0{
		opacity: 0;
		position: absolute;
		top: 0;
		left: 0;
		pointer-events: none;
		transition: opacity .5s;
	}
	.circle{
		width: 80vw;
		height: 80vw;
		background-color: #fff;
		border-radius: 80vw;
		overflow: hidden;
		position: absolute;
		top: 0vw;
		left: 10vw;
	}
	.circle::after{
		content: "";
		width: 40vw;
		height: 40vw;
		background-color: #fff;
		border-radius: 40vw;
		position: absolute;
		top: 20vw;
		left: 20vw;
		z-index: 2;
	}
	.circle > div{
		width: 200vw;
		height: 200vw;
		position: absolute;
		top: -160vw;
		left: 40vw;
		transform-origin: left bottom;
		cursor: pointer;
		transition: all 0.3s;
	}
	.circle > div:hover{	
		background-color: #666;
	}
	.rec-1{
		background-color: var(--color1);
		z-index: 1;
	}
	.rec-2{
		background-color: var(--color2);
		z-index: 1;
	}
	.rec-3{
		background-color: var(--color3);
		z-index: 1;
	}
	.rec-4{
		background-color: var(--color4);
		z-index: 1;
	}
	.rec-5{
		background-color: var(--color5);
		z-index: 1;
	}
	.rec-6{
		background-color: var(--color6);
		z-index: 1;
	}
	.rec-7{
		background-color: var(--color7);
		z-index: 1;
	}
	.rec-8{
		background-color: var(--color8);
		z-index: 1;
	}
	.rec-9{
		background-color: var(--color9);
		z-index: 1;
	}

	.value{
		width: 90vw;
		position: absolute;
		height: var(--height0);
		top: 90vw;
		display: flex;
		flex-direction: column;
		flex-wrap: wrap;
		left: 10vw;
	}
	.value > div{
		font-size: 3.9vw;
		font-weight: bold;
		width: 36vw;
		margin-right: 6vw;
		margin-bottom: 6vw;
		text-align: left;
		height: 9vw;
		line-height: 9vw;
		border-radius: 9vw;
		position: relative;
	}
	.value > div > div{
		display: block;
		height: 1.5vw;
		margin-right: 3vw;
		transition: all .3s;
		transform: skew(-15deg);
	}
	.value > div > span{
		color:  var(--color0);
		font-size: 6vw;
	}
	.v-1 > div{
		background-color: var(--color1);
		width: 1.8vw;
	}
	.v-2 > div{
		background-color: var(--color2);
		width: 1.8vw;
	}
	.v-3 > div{
		background-color: var(--color3);
		width: 1.8vw;
	}
	.v-4 > div{
		background-color: var(--color4);
		width: 1.8vw;
	}
	.v-5 > div{
		background-color: var(--color5);
		width: 1.8vw;
	}
	.v-6 > div{
		background-color: var(--color6);
		width: 1.8vw;
	}
	.v-7 > div{
		background-color: var(--color7);
		width: 1.8vw;
	}
	.v-8 > div{
		background-color: var(--color8);
		width: 1.8vw;
	}
	.v-9 > div{
		background-color: var(--color9);
		width: 1.8vw;
	}
	
	
	
	:root{
	    --color0: #B9314F;
	    --color1: #EAAEBB;
	    --color2: #E18EA0;
	    --color3: #D86E85;
	    --color4: #D04E6A;
	    --color5: #B9314F;
	    --color6: #A12B44;
	    --color7: #812237;
	    --color8: #611A29;
	    --color9: #40111B;
	    --left: 8vw;
	    --height: 180vw;
	    --height0: 80vw;
	}

}