::selection{
	background-color: #E69D13;
	color: white;
}
.el-container{
	display: none;
}
@font-face {
	font-family: 'Maves';
	src: url('/OXYGNIS/Maves-Regular.woff2') format('woff2');
}
@keyframes cart {
	0% {transform: translate(0, 0);}
	10% {transform: translate(0, -15%);}
	30% {transform: translate(0, 0);}
	40% {transform: translate(0, -15%);}
	60% {transform: translate(0, 0);}
	100% {transform: translate(0, 0);}
}
@keyframes opacity{
	0% {opacity: 0;}
	100% {opacity: 1;}
}
@keyframes small{
	0% {opacity: 0; transform: scale(2);}
	100% {opacity: 1; transform: scale(1);}
}
@keyframes text-shadow{
	0% {text-shadow: 0 0 0 #f1f1f1,
					0 0 0 #f6f6f6,
					0 0 0 #fbfbfb,
					0 0 0 #f1f1f1,
					0 0 0 #f6f6f6,
					0 0 0 #fbfbfb;}
	100% {text-shadow: 0 20vh 0 #f1f1f1,
					0 40vh 0 #f6f6f6,
					0 60vh 0 #fbfbfb,
					0 -20vh 0 #f1f1f1,
					0 -40vh 0 #f6f6f6,
					0 -60vh 0 #fbfbfb;}
}
@keyframes text-shadow-3{
	0% {text-shadow: 0 0 0 #f1f1f1,
					0 0 0 #f6f6f6,
					0 0 0 #fbfbfb,
					0 0 0 #f1f1f1,
					0 0 0 #f6f6f6,
					0 0 0 #fbfbfb;}
	100% {text-shadow: 0 20vw 0 #f1f1f1,
					0 40vw 0 #f6f6f6,
					0 60vw 0 #fbfbfb,
					0 -20vw 0 #f1f1f1,
					0 -40vw 0 #f6f6f6,
					0 -60vw 0 #fbfbfb;}
}
@keyframes text-shadow-2{
	0% {text-shadow: 0 0 0 #f1f1f1,
					0 0 0 #f3f3f3,
					0 0 0 #f5f5f5,
					0 0 0 #f7f7f7,
					0 0 0 #f9f9f9,
					0 0 0 #fbfbfb;}
	100% {text-shadow: 0 20vw 0 #f1f1f1,
					0 40vw 0 #f3f3f3,
					0 60vw 0 #f5f5f5,
					0 80vw 0 #f7f7f7,
					0 100vw 0 #f9f9f9,
					0 120vw 0 #fbfbfb;}
}
.maves{
	font-family: Maves;
}
@media screen and (min-width: 600px) {	
	@keyframes up{
		0% {opacity: 0; transform: translate(0, 5vw);}
		100% {opacity: 1; transform: translate(0, 0);}
	}
	@keyframes down{
		0% {opacity: 0; transform: translate(0, -5vw);}
		100% {opacity: 1; transform: translate(0, 0);}
	}
	@keyframes left{
		0% {opacity: 0; transform: translate(5vw, 0);}
		100% {opacity: 1; transform: translate(0, 0);}
	}
	@keyframes right{
		0% {opacity: 0; transform: translate(-5vw, 0);}
		100% {opacity: 1; transform: translate(0, 0);}
	}
	body{
		background-color: #fff;
	}
	html,body{
		padding: 0;
		margin: 0;
		font-family: sans-serif;
	}
	input, textarea{
    	outline: none;
    	font-family: sans-serif;
		padding: 0;
		margin: 0;
	}
	ul{
		list-style-type: none;
		padding: 0;
		margin: 0;
	}
	h1, h2, h3, p{
		margin: 0;
		padding: 0;
	}
	a{
		text-decoration: none;
		color: #333;
	}
	header{
		width: 100vw;
		height: 5vw;
		display: flex;
		justify-content: space-between;
		position: fixed;
		left: 0;
		top: 0;
		z-index: 200;
		transition: all .2s;
		backdrop-filter: blur(1vw);
	}
	main{
		width: 100vw;
		transition: all .3s;
		position: relative;
		z-index: 1;
		background-color: #fff;
	}
	::-webkit-scrollbar{
		background: transparent;
		width: 0;
	}
	body::-webkit-scrollbar{
		background: transparent;
		width: .8vw;
	}
	body::-webkit-scrollbar-corner{
		background: transparent;
	}
	body::-webkit-scrollbar-track{
		background: #eee8e3;
	}
	body::-webkit-scrollbar-thumb{
		background: #de991f;
	}
	body::-webkit-scrollbar-thumb:hover{
		background: linear-gradient(-150deg, #E69D13 0%, #FB8B24 100%);
	}
	#small-nav{
		display: none;
	}
	.main-chart{
		transform: translate(-35.8vw, 0);
	}
	#header-logo{
		width: 16vw;
		height: 5vw;
		display: flex;
		align-items: center;
		margin: 0 1.5vw;
	}
	#header-logo > img{
		width: 14vw;
		height: 3.5vw;
	}


	.learn-more-button, .account-button{
		height: 3vw;
		display: flex;
		align-items: center;
		cursor: pointer;
		user-select: none;
	}
	.learn-more-button:hover > div::before, .account-button:hover > div::before{
		transform: translate(.31vw, 0);
	}
	.learn-more-button:hover > img, .account-button:hover > img{
		transform: translate(.31vw, 0);
	}
	.learn-more-button:active > div::before, .account-button:active > div::before{
		transform: translate(0, 0);
	}
	.learn-more-button:active > img, .account-button:active > img{
		transform: translate(0, 0);
	}
	.learn-more-button > img, .account-button > img{
		width: 1.8vw;
		height: 1.8vw;
		z-index: 1;
		display: block;
		margin: .5vw .3vw .5vw .7vw;
		transition: all .2s;
	}
	.learn-more-button > div, .account-button > div{
		width: 10vw;
		height: 3vw;
		font-size: 1.2vw;
		border-radius: 0 2.5vw 2.5vw 0;
		text-align: center;
		line-height: 3.1vw;
		padding-right: .5vw;
		position: relative;
		margin-left: .4vw;
	}
	.learn-more-button > div::before, .account-button > div::before{
		content: "";
		width: 3vw;
		height: 3vw;
		border-radius: 2.5vw 0 0 2.5vw;
		position: absolute;
		left: -3.3vw;
		top: 0;
		transition: all .2s;
	}
	.learn-more-button > div{
		color: #fff;
		background: #333;		
	}
	.learn-more-button > div::before{
		background: #333;		
	}
	.account-button > div{
		color: #333;
		background: linear-gradient(90deg, #F2E7E9 0%, #F2EEE7 100%);
	}
	.account-button > div::before{
		background: linear-gradient(90deg, #E7ECF2 0%, #F2E7E9 100%);		
	}



	.add-to-cart-button{
		height: 3vw;
		display: flex;
		align-items: center;
		cursor: pointer;
		user-select: none;
	}
	.add-to-cart-button:hover > div::before{
		transform: translate(.31vw, 0);
	}
	.add-to-cart-button:hover > img{
		transform: translate(.31vw, 0);
	}
	.add-to-cart-button:active > div::before{
		transform: translate(0, 0);
	}
	.add-to-cart-button:active > img{
		transform: translate(0, 0);
	}
	.add-to-cart-button > img{
		width: 2vw;
		height: 2vw;
		z-index: 1;
		display: block;
		margin: .5vw .3vw .5vw .7vw;
		transition: all .2s;
	}
	.add-to-cart-button > div{
		width: 11vw;
		height: 3vw;
		font-size: 1.2vw;
		color: #fff;
		border-radius: 0 2.5vw 2.5vw 0;
		text-align: center;
		line-height: 3.1vw;
		padding-right: .5vw;
		position: relative;
		background: linear-gradient(150deg, #E69D13 0%, #FB8B24 100%);
		margin-left: .3vw;
	}
	.add-to-cart-button > div::before{
		content: "";
		width: 3vw;
		height: 3vw;
		background: linear-gradient(-150deg, #E69D13 0%, #FB8B24 100%);
		border-radius: 2.5vw 0 0 2.5vw;
		position: absolute;
		left: -3.3vw;
		top: 0;
		transition: all .2s;
	}


	.normal-btn{
		background-color: #fff;
	}
	.normal-btn::before{
		content: "";
		width: 3vw;
		height: 3vw;
		position: absolute;
		left: .25vw;
		top: .25vw;
		background-color: #000;
		border-radius: 3vw;
		transition: all .2s;
	}
	.add-to-chart-btn > p, .add-to-chart-btn-2 > p, .normal-btn > p{
		font-size: 1.3vw;
		line-height: 3.5vw;
		font-weight: bold;
		position: absolute;
		left: 4vw;
		top: 0;
		transition: all .2s;
	}
	.add-to-chart-btn-2 > p{
		color: #fff;
	}
	.add-to-chart-btn > p, .normal-btn > p{
		color: #000;
	}
	.normal-btn:hover::before{
		transform: scale(0);	
	}
	.add-to-chart-btn:hover img, .add-to-chart-btn-2:hover img{
		transform: scale(0);	
	}
	.normal-btn:hover p{
		transform: translate(-1vw, 0);
	}
	.add-to-chart-btn:hover p, .add-to-chart-btn-2:hover p{
		transform: translate(-.8vw, 0);
	}
	nav{
		width: 80vw;
		height: 5vw;
		display: flex;
		justify-content: space-between;
	}
	#nav-choose{
		display: flex;
		height: 5vw;
	}
	#nav-choose > a{
		padding: 0 1.5vw;
		height: 3vw;
		font-weight: bold;
		font-size: 1.2vw;
		line-height: 3vw;
		color: #333;
		background-color: transparent;
		margin: 1vw 0;
		border-radius: 1.5vw;
		transition: background-color .2s;
		position: relative;
	}
	#nav-choose > a:hover{
		background-color: #eee;
	}
	#nav-button{
		display: flex;
		height: 5vw;
		align-items: center;
		margin: 0 1.5vw;
		position: fixed;
		right: 0;
		top: 0;
		z-index: 210;
	}
	#nav-account{
		position: relative;
	}
	#nav-account:hover > div > a{
		transform: translate(0, 0);
		opacity: 1;
		pointer-events: inherit;
	}
	#nav-account:hover > div{
		pointer-events: inherit;
	}
	#nav-account > a{
		width: 3vw;
		height: 3vw;
		margin: 1vw .5vw;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	#nav-account > a > img{
		width: 2.5vw;
		height: 2.5vw;
	}
	#nav-account > div{
		width: 10vw;
		position: absolute;
		top: 4.7vw;
		left: -3vw;
		pointer-events: none;
	}
	#nav-account > div > a{
		display: block;
		width: 10vw;
		height: 2.5vw;
		text-align: center;
		font-size: 1vw;
		line-height: 2.5vw;
		margin: .3vw 0;
		position: relative;
		background-color: #fafafa;
		transform: translate(0, -1vw);
		opacity: 0;
		pointer-events: none;
		transition: all .2s;
		font-weight: bold;
		box-shadow: 0 0 .5vw #999;
	}
	#nav-account > div > a:hover{
		background-color: #ddd;
	}
	#nav-account > div > a:first-child{
		border-radius: 1.25vw 1.25vw 0 0;
	}
	#nav-account > div > a:nth-child(2){
		transition-delay: .05s;
	}
	#nav-account > div > a:nth-child(3){
		transition-delay: .1s;
	}
	#nav-account > div > a:last-child{
		border-radius: 0 0 1.25vw 1.25vw;
		transition-delay: .15s;
	}



	#nav-chart{
		width: 2.5vw;
		height: 2.5vw;
		margin: 0 1vw;
		cursor: pointer;
		filter: grayscale(100%);
		position: relative;
	}
	#nav-chart > img{
		width: 2.5vw;
		height: 2.5vw;
	}
	#nav-chart > div{
		font-size: .8vw;
		line-height: 1.2vw;
		width: 2.5vw;
		position: absolute;
		left: 0;
		top: 1.2vw;
		text-align: center;
		color: #fff;
		font-weight: bold;
	}


	footer{
		width: 100vw;
		height: 45vw;
		background-color: #eee8e3;
		padding-top: 15vw;
		position: relative;
		transition: all .3s;
		z-index: 1;
	}
	footer::before{
		content: "";
		width: 50vw;
		height: 15vw;
		background-color: #fff;
		position: absolute;
		left: 0vw;
		top: 0;
		border-radius: 0 0 15vw 0/0 0 12vw 0;
	}
	footer::after{
		content: "";
		width: 50vw;
		height: 15vw;
		background-color: #fff;
		position: absolute;
		left: 50vw;
		top: 0;
		border-radius: 0 0 0 15vw/0 0 0 12vw;
	}
	#main-footer{
		display: flex;
		align-items: center;
		width: 100vw;
		height: 35vw;
		margin: 5vw 0 0 0;
	}

	#footer-info{
		width: 45vw;
		margin-left: 5vw;
		position: relative;
		color: #333;
		display: flex;
		flex-wrap: wrap;
	}
	#footer-slogan{
		width: 45vw;
		font-size: 5.5vw;
		line-height: 6.5vw;
		position: relative;
		color: #333;
	}
	#footer-contact{
		width: 45vw;
		margin: 1vw .5vw 0 .5vw;
		font-size: 1vw;
		line-height: 1.5vw;
		position: relative;
		color: #666;
	}
	#footer-contact > p{
		display: inline-block;
		margin: .5vw 1vw 0 0;
		position: relative;
	}

	#footer-link{
		display: flex;
		flex-direction: column;
		justify-content: center;
		width: 25vw;
		margin-left: 18vw;
		position: relative;
	}
	#footer-link::before{
		content: "";
		background-color: #666;
		width: .2vw;
		height: 100%;
		position: absolute;
		left: -1vw;
		top: 0;
	}
	#footer-link > a{
		color: #666;
		font-size: 1.3vw;
		font-weight: normal;
		padding: .6vw 0;
	}

	#footer-social{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	#footer-social > a:first-child{
		display: none;
	}
	#footer-social > a{
		width: 4.5vw;
		height: 4.5vw;
		position: relative;
	}
	#footer-social > a > img{
		position: absolute;
		width: 2.5vw;
		height: 2.5vw;
		left: 1vw;
		top: 1vw;
	}
	#footer-copyright{
		width: 100vw;
		height: 2vw;
		font-size: 1vw;
		line-height: 1.5vw;
		position: absolute;
		left: 0;
		bottom: 1vw;
		text-align: center;
		color: #666;
	}

	#footer-bg-logo{
		width: 30vw;
		height: 30vw;
		position: absolute;
		left: 35vw;
		top: 18.5vw;
		opacity: .2;
	}


	#cart{
		width: 35vw;
		height: calc(100vh - 5vw);
		position: fixed;
		right: 0;
		top: 0;
		background-color: #fafafa;
		overflow-y: scroll;
		padding: 0;
		padding-top: 5vw;
		box-shadow: inset 0 -1vw 2vw #999;
	}
	#cart-empty{
		width: 35vw;
		height: calc(100vh - 5vw);
		display: flex;
		justify-content: center;
		align-items: center;
		position: absolute;
		left: 0;
		top: 0;
		pointer-events: none;
		transition: all .2s;
	}
	#cart-empty > div{
		font-size: 8vw;
		text-align: center;
		transform: rotate(90deg);
		color: #999;
	}
	#cart::after{
		content: "";
		width: 20vw;
		height: 6vw;
		display: block;
	}
	.cart-item{
		width: 30vw;
		height: 10vw;
		margin: 1.5vw 2.5vw;
		position: relative;
		display: flex;
		flex-direction: column;
		flex-wrap: wrap;
	}
	.cart-item > img{
		width: 10vw;
		height: 10vw;
		border-radius: 2vw 0 0 2vw;
		display: block;
		margin-right: .3vw;
	}
	.cart-num{
		width: 19.7vw;
		margin: .3vw 0 0 0;
		display: flex;
	}
	.cart-plus, .cart-minus{
		width: 3vw;
		height: 3vw;
		background-color: #666;
		cursor: pointer;
	}
	.cart-plus{

	}
	.cart-plus > img, .cart-minus > img{
		width: 1vw;
		height: 1vw;
		padding: 1vw;
		display: block;
	}
	.cart-num-1{
		width: 13.4vw;
		height: 3vw;
		font-size: 1.2vw;
		line-height: 3vw;
		text-align: center;
		background-color: #666;
		color: #fff;
		margin: 0 .3vw;
	}
	.cart-text{
		width: 15.7vw;
		padding: 0 2vw;
		height: 6.7vw;
		background-color: #eee;
		border-radius: 0 2vw 0 0;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: flex-start;
	}
	.cart-name{
		width: 15.7vw;
		text-align: left;
		font-size: 1.5vw;
		font-weight: bold;
	}
	.cart-price{
		width: 15.7vw;
		text-align: left;
		font-size: 2vw;
		font-weight: bold;
		color: #de991f;
	}

	.cart-color{
		width: 1.6vw;
		height: 1.6vw;
		border-radius: 1.6vw;
		position: absolute;
		left: 1vw;
		top: 1vw;
		border: solid .2vw #fff;
	}
	.cart-close{
		width: 2.5vw;
		height: 2.5vw;
		border-radius: 2vw;
		position: absolute;
		top: -.75vw;
		right: -.75vw;
		background-color: #db381c;
		cursor: pointer;
	}
	.cart-close > img{
		width: 1.5vw;
		height: 1.5vw;
		padding: .5vw;
		transform: rotate(-45deg);
	}

	#cart-total{
		width: 35vw;
		height: 6vw;
		background-color: #fff;
		box-shadow: 0 -.2vw 1vw #999;
		position: fixed;
		right: 0;
		bottom: 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.in-total{
		padding-left: 1.5vw;
	}
	.in-total > span{
		display: block;
		padding: 0;
		margin: 0;
	}
	.in-total > span:nth-child(1){
		font-size: 1vw;
	}
	.in-total > span:nth-child(2){
		font-size: 1.8vw;
		font-weight: bold;
		color: #de991f;
	}


	.pay-button{
		height: 3vw;
		display: flex;
		align-items: center;
		cursor: pointer;
		user-select: none;
		margin: 1.25vw;
		pointer-events: none;
	}
	.pay-button:hover > div::before{
		transform: translate(.31vw, 0);
	}
	.pay-button:hover > img{
		transform: translate(.31vw, 0);
	}
	.pay-button:active > div::before{
		transform: translate(0, 0);
	}
	.pay-button:active > img{
		transform: translate(0, 0);
	}
	.pay-button > img{
		width: 1.8vw;
		height: 1.8vw;
		z-index: 1;
		display: block;
		margin: .5vw .3vw .5vw .7vw;
		transition: all .2s;
	}
	.pay-button > div{
		width: 9vw;
		height: 3vw;
		font-size: 1.2vw;
		color: #fff;
		border-radius: 0 2.5vw 2.5vw 0;
		text-align: center;
		line-height: 3.1vw;
		padding-right: .5vw;
		position: relative;
		background: #999;
		margin-left: .3vw;
	}
	.pay-button > div::before{
		content: "";
		width: 3vw;
		height: 3vw;
		background: linear-gradient(-150deg, #E69D13 0%, #FB8B24 100%);
		border-radius: 2.5vw 0 0 2.5vw;
		position: absolute;
		left: -3.3vw;
		top: 0;
		transition: all .2s;
	}

	#cart-left-arrow{
		width: 5vw;
		height: 5vw;
		background-color: #fff;
		border-radius: 10vw;
		border: solid .5vw #de991f;
		box-shadow: 0 0 1vw #666;
		position: fixed;
		right: 32vw;
		top: calc(50vh - 3vw);
		z-index: 100;
		cursor: pointer;
		transition: all .3s;
	}
	#cart-left-arrow > img{
		width: 3vw;
		height: 3vw;
		margin: 1vw;
		transform: translate(.2vw, 0);
	}
	.cart-left-arrow-1{
		opacity: 0;
		pointer-events: none;
		transform: translate(35.8vw, 0);
	}
	.cart-left-arrow-2{
		opacity: 1;
		pointer-events: inherit;
		transform: translate(0, 0);
	}
	#checkout-loading{
		width: 100vw;
		height: 100vh;
		display: flex;
		justify-content: center;
		align-items: center;
		position: fixed;
		left: 0;
		top: 0;
		background-color: rgba(255, 255, 255, .9);
		z-index: 100;
		transition: all .2s;
		opacity: 0;
		pointer-events: none;
	}
	@keyframes rotate {
		0%{transform: rotate(0);}
		100%{transform: rotate(360deg);}
	}
	#checkout-loading > div{
		width: 12.5vw;
		height: 11vw;
		border-radius: 15vw;
		border-top: solid 1.5vw #de991f;
		animation: rotate 1.5s infinite linear;
	}

	#float-contact{
		z-index: 100;
		position: fixed;
		right: 2vw;
		bottom: 2vw;
	}
	#float-button{
		width: 4vw;
		height: 4vw;
		background: linear-gradient(-150deg, #E69D13 0%, #FB8B24 100%);
		border-radius: 5vw;
		cursor: pointer;
		transition: all .2s;
		box-shadow: 0 0 1vw #999;
		position: relative;
		z-index: 1;
	}
	#float-button:hover{
		transform: scale(1.05);
	}
	#float-button > img{
		width: 2vw;
		height: 2vw;
		padding: 1.1vw 1vw .9vw 1vw;
	}
	#float-form{
		position: absolute;
		right: 0;
		bottom: 5vw;
		background-color: #eee;
		box-shadow: 0 0 1vw #999;
		border-radius: 2.5vw;
		padding: 2vw;
		transform-origin: 90% bottom;
		transition: all .2s
	}
	.float-form-1{
		opacity: 0;
		transform: scale(0) translate(0, 15vw);
		pointer-events: none;
	}
	.float-form-2{
		opacity: 1;
		transform: scale(1) translate(0, 0);
		pointer-events: inherit;
	}

	#float-close{
		width: 2.5vw;
		height: 2.5vw;
		border-radius: 2.5vw;
		background-color: #666;
		cursor: pointer;
		position: absolute;
		right: 1vw;
		top: 1vw;
	}
	#float-close > img{
		width: 1.5vw;
		height: 1.5vw;
		padding: .5vw;
		transform: rotate(-45deg);
	}
	#float-form > p{
		padding: 0 .5vw;
		font-size: 1vw;
		line-height: 1.5vw;
		font-weight: bold;
		color: #E69D13;
	}
	.input-float{
		display: flex;
		margin: 1.5vw 0;
	}
	.input-float > label{
		width: 8vw;
		font-size: 1vw;
		font-weight: bold;
		text-align: center;
		background-color: #666;
		border-radius: 1.25vw 0 0 1.25vw;
		color: #fff;
		margin-right: .3vw;
	}
	.label-float-1{
		height: 2.5vw;	
		line-height: 2.5vw;	
	}
	.label-float-2{
		height: calc(15vh + 1vw);
		line-height: calc(15vh + 1vw);
	}
	.input-float > input{
		width: 18vw;
		height: 2vw;
		line-height: 2vw;
		font-size: 1vw;
		padding: .25vw .5vw;
		border: none;
		background-color: #fff;
		border-radius: 0 2.5vw 2.5vw 0;
	}
	.input-float > textarea{
		width: 18vw;
		height: 15vh;
		line-height: 1.5vw;
		font-size: 1vw;
		padding: .5vw;
		border: none;
		background-color: #fff;
		border-radius: 0 1.25vw 1.25vw 0;
	}


	
	.submit-float{
		height: 3vw;
		display: flex;
		align-items: center;
		cursor: pointer;
		user-select: none;
		position: relative;
	}
	.submit-float:hover::before{
		transform: translate(.31vw, 0);
	}
	.submit-float:hover > img{
		transform: translate(.31vw, 0);
	}
	.submit-float:active::before{
		transform: translate(0, 0);
	}
	.submit-float:active > img{
		transform: translate(0, 0);
	}
	.submit-float > img{
		width: 1.8vw;
		height: 1.8vw;
		z-index: 1;
		display: block;
		margin: .5vw .4vw .5vw .9vw;
		transition: all .2s;
	}
	.submit-float > input{
		width: 8vw;
		height: 3vw;
		font-size: 1.2vw;
		color: #fff;
		border-radius: 0 2.5vw 2.5vw 0;
		text-align: center;
		line-height: 3.1vw;
		padding-right: .5vw;
		position: relative;
		background: linear-gradient(150deg, #E69D13 0%, #FB8B24 100%);
		margin-left: .2vw;
		border: none;
		cursor: pointer;
	}
	.submit-float::before{
		content: "";
		width: 3vw;
		height: 3vw;
		background: linear-gradient(-150deg, #E69D13 0%, #FB8B24 100%);
		border-radius: 2.5vw 0 0 2.5vw;
		position: absolute;
		left: 0vw;
		top: 0;
		transition: all .2s;
	}

	#error-message-float{
		font-size: 1vw;
		margin-left: 1vw;
		color: #e83719;
	}
}




















@media screen and (max-width: 600px) {
	input{		
		-webkit-appearance: none;
		padding: 0;
		margin: 0;
		border-radius: 0;
	}
	@keyframes up{
		0% {opacity: 0; transform: translate(0, 15vw);}
		100% {opacity: 1; transform: translate(0, 0);}
	}
	@keyframes down{
		0% {opacity: 0; transform: translate(0, -15vw);}
		100% {opacity: 1; transform: translate(0, 0);}
	}
	@keyframes left{
		0% {opacity: 0; transform: translate(15vw, 0);}
		100% {opacity: 1; transform: translate(0, 0);}
	}
	@keyframes right{
		0% {opacity: 0; transform: translate(-15vw, 0);}
		100% {opacity: 1; transform: translate(0, 0);}
	}
	body{
		width: 100vw;
		background-color: #fff;
	}
	html,body{
		padding: 0;
		margin: 0;
		font-family: sans-serif;
	}
	input, textarea{
    	outline: none;
    	font-family: sans-serif;
	}
	ul{
		list-style-type: none;
		padding: 0;
		margin: 0;
	}
	h1, h2, h3, p{
		margin: 0;
		padding: 0;
	}
	a{
		text-decoration: none;
		color: #333;
	}
	header{
		width: 100vw;
		height: 15vw;
		display: flex;
		justify-content: space-between;
		position: fixed;
		left: 0;
		top: 0;
		z-index: 200;
		transition: all .2s;
	}
	main{
		transition: all .3s;
		position: relative;
		z-index: 1;
		background-color: #fff;
		width: 100vw;
	}
	.main-chart{
		transform: translate(-80vw, 0);
	}
	#header-logo{
		width: 48vw;
		height: 15vw;
		display: flex;
		align-items: center;
		margin: 0 3vw;
		z-index: 1;
	}
	#header-logo > img{
		width: 42vw;
		height: 10.5vw;
	}


	.learn-more-button, .account-button{
		height: 12vw;
		display: flex;
		align-items: center;
		cursor: pointer;
		user-select: none;
	}
	.learn-more-button > img, .account-button > img{
		width: 7.2vw;
		height: 7.2vw;
		z-index: 1;
		display: block;
		margin: 2vw 1.2vw 2vw 2.8vw;
		transition: all .2s;
	}
	.learn-more-button > div, .account-button > div{
		width: 40vw;
		height: 12vw;
		font-size: 4.8vw;
		border-radius: 0 10vw 10vw 0;
		text-align: center;
		line-height: 12.4vw;
		padding-right: 2vw;
		position: relative;
		margin-left: 1.2vw;
	}
	.learn-more-button > div::before, .account-button > div::before{
		content: "";
		width: 12vw;
		height: 12vw;
		border-radius: 10vw 0 0 10vw;
		position: absolute;
		left: -13.2vw;
		top: 0;
		transition: all .2s;
	}
	.learn-more-button > div{
		color: #fff;
		background: #333;		
	}
	.learn-more-button > div::before{
		background: #333;		
	}
	.account-button > div{
		color: #333;
		background: linear-gradient(90deg, #F2E7E9 0%, #F2EEE7 100%);
	}
	.account-button > div::before{
		background: linear-gradient(90deg, #E7ECF2 0%, #F2E7E9 100%);		
	}



	.add-to-cart-button{
		height: 12vw;
		display: flex;
		align-items: center;
		cursor: pointer;
		user-select: none;
	}
	.add-to-cart-button:hover > div::before{
		transform: translate(.31vw, 0);
	}
	.add-to-cart-button:hover > img{
		transform: translate(.31vw, 0);
	}
	.add-to-cart-button:active > div::before{
		transform: translate(0, 0);
	}
	.add-to-cart-button:active > img{
		transform: translate(0, 0);
	}
	.add-to-cart-button > img{
		width: 8vw;
		height: 8vw;
		z-index: 1;
		display: block;
		margin: 2vw 1.2vw 2vw 2.8vw;
		transition: all .2s;
	}
	.add-to-cart-button > div{
		width: 65vw;
		height: 12vw;
		font-size: 4.8vw;
		color: #fff;
		border-radius: 0 10vw 10vw 0;
		text-align: center;
		line-height: 12.4vw;
		padding-right: 2vw;
		position: relative;
		background: linear-gradient(150deg, #E69D13 0%, #FB8B24 100%);
		margin-left: 1.2vw;
	}
	.add-to-cart-button > div::before{
		content: "";
		width: 12vw;
		height: 12vw;
		background: linear-gradient(-150deg, #E69D13 0%, #FB8B24 100%);
		border-radius: 10vw 0 0 10vw;
		position: absolute;
		left: -13.2vw;
		top: 0;
		transition: all .2s;
	}


	.normal-btn{
		background-color: #fff;
	}
	.normal-btn::before{
		content: "";
		width: 3vw;
		height: 3vw;
		position: absolute;
		left: .25vw;
		top: .25vw;
		background-color: #000;
		border-radius: 3vw;
		transition: all .2s;
	}
	.add-to-chart-btn > p, .add-to-chart-btn-2 > p, .normal-btn > p{
		font-size: 1.3vw;
		line-height: 3.5vw;
		font-weight: bold;
		position: absolute;
		left: 4vw;
		top: 0;
		transition: all .2s;
	}
	.add-to-chart-btn-2 > p{
		color: #fff;
	}
	.add-to-chart-btn > p, .normal-btn > p{
		color: #000;
	}
	.normal-btn:hover::before{
		transform: scale(0);	
	}
	.add-to-chart-btn:hover img, .add-to-chart-btn-2:hover img{
		transform: scale(0);	
	}
	.normal-btn:hover p{
		transform: translate(-1vw, 0);
	}
	.add-to-chart-btn:hover p, .add-to-chart-btn-2:hover p{
		transform: translate(-.8vw, 0);
	}
	nav{
		width: 43vw;
		height: 15vw;
		display: flex;
		align-items: center;
		flex-direction: row-reverse;
		margin-right: 3vw;
	}
	#small-nav{
		width: 13vw;
		height: 15vw;
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;
		z-index: 1;
	}
	#small-nav > div{
		width: 7.5vw;
		height: 1.2vw;
		background-color: #666;
		position: relative;
	}
	#small-nav > div::before{
		content: "";
		width: 7.5vw;
		height: 1.2vw;
		background-color: #666;
		position: absolute;
		left: 0;
		top: -2.2vw;
		border-radius: 1.5vw 1.5vw 0 0;
	}
	#small-nav > div::after{
		content: "";
		width: 7.5vw;
		height: 1.2vw;
		background-color: #666;
		position: absolute;
		left: 0;
		top: 2.2vw;
		border-radius: 0 0 1.5vw 1.5vw;
	}
	#nav-choose{
		display: flex;
		width: 100vw;
		height: 100vh;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		position: absolute;
		left: 0;
		top: 0;
		background: rgba(255, 255, 255, .95);
		transition: all .2s;
	}
	.nav-choose-1{
		opacity: 0;
		pointer-events: none;	
	}
	.nav-choose-2{
		opacity: 1;
		pointer-events: inherit;		
	}
	#nav-choose > a{
		height: 5vw;
		font-weight: bold;
		font-size: 5vw;
		line-height: 5vw;
		color: #333;
		background-color: transparent;
		margin: 6vw 0;
		position: relative;
	}
	#nav-button{
		display: flex;
		height: 15vw;
		align-items: flex-end;
		margin: 0;
		position: fixed;
		right: 0;
		top: 0;
		z-index: 210;
	}
	#nav-account{
		position: relative;
		width: 13vw;
		height: 15vw;
	}
	#nav-account > a{
		width: 9vw;
		height: 9vw;
		margin: 3vw 2vw;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	#nav-account > a > img{
		width: 7.5vw;
		height: 7.5vw;
	}
	#nav-account > div{
		display: none;
	}



	#nav-chart{
		width: 13vw;
		height: 15vw;
		margin: 0;
		cursor: pointer;
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 1;
		filter: grayscale(100%);
		position: relative;
	}
	#nav-chart > img{
		width: 7.5vw;
		height: 7.5vw;
	}
	#nav-chart > div{
		font-size: 2.4vw;
		line-height: 4.5vw;
		width: 13vw;
		position: absolute;
		left: 0;
		top: 6.8vw;
		text-align: center;
		color: #fff;
		font-weight: bold;
	}


	footer{
		width: 100vw;
		background-color: #eee8e3;
		padding-top: 30vw;
		position: relative;
		transition: all .3s;
		z-index: 1;
	}
	footer::before{
		content: "";
		width: 50vw;
		height: 30vw;
		background-color: #fff;
		position: absolute;
		left: 0vw;
		top: 0;
		border-radius: 0 0 30vw 0/0 0 24vw 0;
	}
	footer::after{
		content: "";
		width: 50vw;
		height: 30vw;
		background-color: #fff;
		position: absolute;
		left: 50vw;
		top: 0;
		border-radius: 0 0 0 30vw/0 0 0 24vw;
	}
	#main-footer{
		width: 100vw;
		margin: 15vw 0 0 0;
	}

	#footer-info{
		width: 90vw;
		margin: 2vw 0;
		margin-left: 5vw;
		position: relative;
		color: #333;
		display: flex;
		flex-wrap: wrap;
	}
	#footer-slogan{
		width: 90vw;
		font-size: 11.5vw;
		line-height: 14.5vw;
		position: relative;
		color: #333;
	}
	#footer-contact{
		width: 90vw;
		margin: 3vw .5vw 0 .5vw;
		font-size: 4vw;
		line-height: 6vw;
		position: relative;
		color: #666;
	}
	#footer-contact > p{
		display: inline-block;
		margin: .5vw 1vw 0 0;
		position: relative;
	}

	#footer-link{
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
		width: 90vw;
		margin-left: 5vw;
		position: relative;
		padding-top: 10vw;
	}
	#footer-link::before{
		content: "";
		background-color: #666;
		width: 90vw;
		height: .6vw;
		position: absolute;
		left: 0;
		top: 4vw;
	}
	#footer-link > a{
		color: #666;
		font-size: 4.3vw;
		font-weight: normal;
		padding: 0 5vw 2.5vw 0;
	}

	#footer-social{
		width: 90vw;
		margin: 5vw;
		display: flex;
		align-items: center;
	}
	#footer-social > a{
		width: 15vw;
		height: 15vw;
		position: relative;
	}
	#footer-social > a:first-child{
		display: none;
	}
	#footer-social > a > img{
		position: absolute;
		width: 7.5vw;
		height: 7.5vw;
		left: 0;
		top: 3vw;
	}
	#footer-copyright{
		width: 70vw;
		padding: 5vw;
		font-size: 3.6vw;
		line-height: 5vw;
		text-align: left;
		color: #666;
	}

	#footer-bg-logo{
		width: 90vw;
		height: 90vw;
		position: absolute;
		left: 5vw;
		top: 50vw;
		opacity: .3;
	}


	#cart{
		width: 80vw;
		height: calc(100% - 15vw);
		padding-top: 15vw;
		position: fixed;
		right: 0;
		top: 0;
		background-color: #fafafa;
	}
	#cart-frame{
		width: 80vw;
		height: calc(100% - 32.5vw);
		overflow-y: scroll;
		box-shadow: inset 0 0 3vw #999;
		-webkit-overflow-scrolling: touch;
		border-radius: 8vw 0 8vw 8vw;
	}
	#cart-frame::-webkit-scrollbar{
		display: none;
	}
	#cart-empty{
		width: 80vw;
		height: calc(100vh - 32.5vw);
		display: flex;
		justify-content: center;
		align-items: center;
		position: absolute;
		left: 0;
		top: 0;
		pointer-events: none;
		transition: all .2s;
	}
	#cart-empty > div{
		font-size: 24vw;
		text-align: center;
		transform: rotate(90deg);
		color: #999;
	}
	.cart-item{
		width: 70vw;
		margin: 5vw;
		position: relative;
		display: flex;
		flex-wrap: wrap;
		flex-shrink: 0;
	}
	.cart-item > img{
		width: 45vw;
		height: 45vw;
		border-radius: 6vw 0 0 0;
		display: block;
		order: 0;
		margin: 0 1vw 1vw 0;
	}
	.cart-num{
		width: 24vw;
		order: 1;
	}
	.cart-plus, .cart-minus{
		width: 24vw;
		height: 15.5vw;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #666;
		cursor: pointer;
	}
	.cart-plus{

	}
	.cart-plus > img, .cart-minus > img{
		width: 3.8vw;
		height: 3.8vw;
		display: block;
	}
	.cart-num-1{
		width: 24vw;
		height: 12vw;
		font-size: 3.8vw;
		line-height: 12vw;
		text-align: center;
		background-color: #666;
		color: #fff;
		margin: 1vw 0;
	}
	.cart-text{
		width: 60vw;
		padding: 5vw;
		background-color: #eee;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: flex-start;
		order: 2;
		border-radius: 0 0 6vw 6vw;
	}
	.cart-name{
		width: 60vw;
		text-align: center;
		font-size: 4.5vw;
		line-height: 6vw;
		font-weight: bold;
	}
	.cart-price{
		width: 60vw;
		text-align: center;
		font-size: 6vw;
		line-height: 8vw;
		font-weight: bold;
		color: #de991f;
	}

	.cart-color{
		width: 4.8vw;
		height: 4.8vw;
		border-radius: 4.8vw;
		position: absolute;
		left: 3vw;
		top: 3vw;
		border: solid .6vw #fff;
	}
	.cart-close{
		width: 7.5vw;
		height: 7.5vw;
		border-radius: 6vw;
		position: absolute;
		top: -2.25vw;
		right: -2.25vw;
		background-color: #db381c;
		cursor: pointer;
	}
	.cart-close > img{
		width: 4.5vw;
		height: 4.5vw;
		padding: 1.5vw;
		transform: rotate(-45deg);
	}

	#cart-total{
		width: 80vw;
		height: 32.5vw;
		background-color: #fafafa;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		z-index: 1;
	}

	.in-total{
		display: flex;
		align-items: center;
		margin: 1.5vw 5vw;
	}
	.in-total > span{
		display: block;
		padding: 0;
		margin: 0;
	}
	.in-total > span:nth-child(1){
		font-size: 4vw;
		margin-right: 2vw;
	}
	.in-total > span:nth-child(2){
		font-size: 7vw;
		font-weight: bold;
		color: #de991f;
	}


	.pay-button{
		height: 12vw;
		display: flex;
		align-items: center;
		cursor: pointer;
		user-select: none;
		margin: 1.5vw 3.75vw;
		pointer-events: none;
	}
	.pay-button > img{
		width: 7.2vw;
		height: 7.2vw;
		z-index: 1;
		display: block;
		margin: 2vw 1.2vw 2vw 2.8vw;
		transition: all .2s;
	}
	.pay-button > div{
		width: 59vw;
		height: 12vw;
		font-size: 4.8vw;
		color: #fff;
		border-radius: 0 6vw 6vw 0;
		text-align: center;
		line-height: 12.4vw;
		padding-right: 2vw;
		position: relative;
		background: #999;
		margin-left: 1.2vw;
	}
	.pay-button > div::before{
		content: "";
		width: 12vw;
		height: 12vw;
		background: linear-gradient(-150deg, #E69D13 0%, #FB8B24 100%);
		border-radius: 6vw 0 0 6vw;
		position: absolute;
		left: -13.2vw;
		top: 0;
		transition: all .2s;
	}

	#cart-left-arrow{
		width: 15vw;
		height: 15vw;
		background-color: #fff;
		border-radius: 15vw;
		border: solid 1.5vw #de991f;
		box-shadow: 0 0 3vw #666;
		position: fixed;
		left: 5vw;
		bottom: calc(50vh - 7.5vw);
		z-index: 100;
		cursor: pointer;
		transition: all .3s;
	}
	#cart-left-arrow > img{
		width: 9vw;
		height: 9vw;
		margin: 3vw;
		transform: translate(.8vw, 0) rotate(0deg);
	}
	.cart-left-arrow-1{
		opacity: 0;
		pointer-events: none;
		transform: translate(80vw, 0);
	}
	.cart-left-arrow-2{
		opacity: 1;
		pointer-events: inherit;
		transform: translate(0, 0);
	}
	#checkout-loading{
		width: 100vw;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		position: fixed;
		left: 0;
		top: 0;
		background-color: rgba(255, 255, 255, .9);
		z-index: 100;
		transition: all .2s;
		opacity: 0;
		pointer-events: none;
	}
	@keyframes rotate {
		0%{transform: rotate(0);}
		100%{transform: rotate(360deg);}
	}
	#checkout-loading > div{
		width: 25vw;
		height: 22vw;
		border-radius: 30vw;
		border-top: solid 3vw #de991f;
		animation: rotate 1.5s infinite linear;
	}

	#float-contact{
		z-index: 100;
		position: fixed;
		right: 0;
		bottom: 0;
	}
	#float-button{
		width: 12vw;
		height: 12vw;
		background: linear-gradient(-150deg, #E69D13 0%, #FB8B24 100%);
		border-radius: 15vw;
		cursor: pointer;
		transition: all .2s;
		box-shadow: 0 0 3vw #999;
		position: relative;
		position: absolute;
		right: 5vw;
		bottom: 5vw;
	}
	#float-button > img{
		width: 6vw;
		height: 6vw;
		padding: 3.3vw 3vw 2.7vw 3vw;
	}
	#float-form{
		position: absolute;
		right: 0;
		bottom: 0;
		background-color: #eee;
		box-shadow: 0 0 3vw #999;
		border-radius: 7.5vw 7.5vw 0 0;
		padding: 5vw;
		transform-origin: right bottom;
		transition: all .2s
	}
	.float-form-1{
		opacity: 0;
		transform: scale(0) translate(0, 0);
		pointer-events: none;
	}
	.float-form-2{
		opacity: 1;
		transform: scale(1) translate(0, 0);
		pointer-events: inherit;
	}

	#float-close{
		width: 7.5vw;
		height: 7.5vw;
		border-radius: 7.5vw;
		background-color: #666;
		cursor: pointer;
		position: absolute;
		right: 3vw;
		top: 3vw;
	}
	#float-close > img{
		width: 4.5vw;
		height: 4.5vw;
		padding: 1.5vw;
		transform: rotate(-45deg);
	}
	#float-form > p{
		padding: 0 5vw 0 1.5vw;
		font-size: 4vw;
		line-height: 6vw;
		font-weight: bold;
		color: #E69D13;
	}
	.input-float{
		display: flex;
		margin: 4.5vw 0;
	}
	.input-float > label{
		width: 32vw;
		font-size: 3.8vw;
		font-weight: bold;
		text-align: center;
		background-color: #666;
		border-radius: 5vw 0 0 5vw;
		color: #fff;
		margin-right: 1.2vw;
	}
	.label-float-1{
		height: 10vw;	
		line-height: 10vw;	
	}
	.label-float-2{
		height: 52vw;
		line-height: 52vw;
	}
	.input-float > input{
		width: 52.8vw;
		height: 8vw;
		line-height: 8vw;
		font-size: 4vw;
		padding: 1vw 2vw;
		border: none;
		background-color: #fff;
		border-radius: 0 10vw 10vw 0;
	}
	.input-float > textarea{
		width: 52.8vw;
		height: 48vw;
		line-height: 6vw;
		font-size: 4vw;
		padding: 2vw;
		border: none;
		background-color: #fff;
		border-radius: 0 5vw 5vw 0;
	}


	.submit-float{
		width: 46vw;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		cursor: pointer;
		user-select: none;
		position: relative;
		margin: 0 22vw;
	}
	.submit-float:active::before{
		transform: translate(0, 0);
	}
	.submit-float:active > img{
		transform: translate(0, 0);
	}
	.submit-float > img{
		width: 7.2vw;
		height: 7.2vw;
		z-index: 1;
		display: block;
		margin: 2vw 1.6vw 2vw 3.6vw;
		transition: all .2s;
	}
	.submit-float > input{
		width: 30vw;
		height: 12vw;
		font-size: 4.8vw;
		color: #fff;
		border-radius: 0 10vw 10vw 0;
		text-align: center;
		line-height: 12.4vw;
		padding-right: 2vw;
		position: relative;
		background: linear-gradient(150deg, #E69D13 0%, #FB8B24 100%);
		margin-left: .8vw;
		border: none;
		cursor: pointer;
	}
	.submit-float::before{
		content: "";
		width: 12vw;
		height: 12vw;
		background: linear-gradient(-150deg, #E69D13 0%, #FB8B24 100%);
		border-radius: 10vw 0 0 10vw;
		position: absolute;
		left: 0vw;
		top: 0;
		transition: all .2s;
	}

	#error-message-float{
		width: 80vw;
		font-size: 4vw;
		line-height: 6vw;
		margin-top: 3vw;
		color: #e83719;
		text-align: center;
	}
}