@charset "utf-8";

body {
	display: flex;
	max-width: 1920px;
	background-color: rgba(0, 0, 0, .99) !important;
}

/*============================================================================*/

.ep-main { display: flex; justify-content: center; align-items: center; width: 100vw; height: 100vh; transform: translate(0, -5%); }



/*----------------------------------------------------------------------------*/

.main-nums {
	color: rgba(255, 255, 255, .99); font-size: 300px;
	text-shadow: -1px -1px rgba(0, 0, 0, .35), -1px 1px rgba(0, 0, 0, .35), 1px -1px rgba(0, 0, 0, .35), 1px 1px rgba(0, 0, 0, .35), 1px 1px rgba(0, 0, 0, .35);
}

.main-nums.lf { margin: 0 30px 0 0; -webkit-animation: rotateInUpRight 1500ms; animation: rotateInUpRight 1500ms; }

.main-nums.rt { margin: 0 0 0 30px; -webkit-animation: rotateInUpLeft 1500ms; animation: rotateInUpLeft 1500ms; }

/*----------------------------------------------------------------------------*/



.cf-plate {
	display: flex; justify-content: center; align-items: center; position: relative; width: 250px; height: 250px;
	border-radius: 100%;
	background-color: rgba(255, 255, 255, 1);
	box-shadow: -2vmin 2vmin 5vmin 2vmin rgba(0, 0, 0, .2), inset 0 0 0 0.2vmin #cccccc, inset 0 0 0 0.5vmin #fafafa, inset 0 0 10vmin 0.1vmin rgba(0, 0, 0, .2);
}

.cf-cup {
	z-index: 1; display: flex; justify-content: center; align-items: center; position: relative; width: 65%; height: 65%;
	border-radius: 100%;
	box-shadow: -2vmin 2vmin 5vmin -2vmin rgba(0, 0, 0, .5), inset 0 0 0.5vmin 0.2vmin #cccccc, inset 0 0 0 1vmin #fafafa;
	background-color: rgba(255, 255, 255, 1);
}

.cf-ring {
	z-index: 1; position: absolute; width: 80%; height: 80%;
	border-radius: 100%;
	box-shadow: 0 0 0.3vmin 0 #000, 0 0 0.5vmin 2.5vmin #dedede, inset 0 0 0.4vmin 0.1vmin rgba(0, 0, 0, 0.5);
	background-color: transparent;
}

.cf-liquid {
	display: flex; justify-content: center; align-items: center; position: relative; width: 80%; height: 80%;
	border-radius: 100%;
	background: linear-gradient(45deg, #35210d 0%, #231105 100%);
	overflow: hidden;
}

.cf-contents-bubble {
	filter: url("#goo") drop-shadow(0px 0px 3px #b37a3c);
	position: absolute; width: 100%; height: 100%;
	backface-visibility: hidden;
}

/*----------------------------------------------------------------------------*/

.cf-foam {
	filter: url("#scatter");
	position: absolute; top: 22%; left: -3%; width: 10%; height: 40%;
	border-radius: 100%;
	box-shadow: inset 0 0 0.1vmin 0.2vmin rgba(53, 33, 13, 0.2);
	background-color: #f8c99d;
	transform: rotate(21deg);
}

.cf-foam.foam2 { top: -7%; left: 14%; width: 6%; transform: rotate(53deg); }
.cf-foam.foam3 { top: -21%; left: 43%; transform: rotate(75deg); }
.cf-foam.foam4 { top: -20%; left: 46%; transform: rotate(105deg); }
.cf-foam.foam5 { top: -9%; left: 70%; height: 30%; transform: rotate(122deg); }
.cf-foam.foam6 { top: 8%; left: 98%; width: 5%; height: 60%; transform: rotate(152deg); }
.cf-foam.foam7 { top: 20%; left: 97%; width: 5%; height: 60%; transform: rotate(181deg); }
.cf-foam.foam8 { top: 51%; left: 96%; width: 5%; height: 40%; transform: rotate(211deg); }
.cf-foam.foam9 { top: 62%; left: 70%; width: 5%; height: 80%; transform: rotate(224deg); }
.cf-foam.foam10 { top: 72%; left: 62%; width: 5%; height: 50%; transform: rotate(74deg); }
.cf-foam.foam11 { top: 59%; left: 51%; width: 4%; height: 80%; transform: rotate(104deg); }
.cf-foam.foam12 { top: 44%; left: 9%; width: 4%; height: 80%; transform: rotate(124deg); }
.cf-foam.foam13 { top: 7%; left: -6%; width: 4%; height: 80%; transform: rotate(-26deg); }

.cf-foam-showy-container {
	position: absolute; top: 0; left: 0; width: 100%; height: 100%;
	animation-name: ant-cf-showy-move;
	animation-duration: 10s;
	animation-direction: normal;
	animation-iteration-count: infinite;
	animation-timing-function: ease-in-out;
	will-change: transform, opacity;
}

@media not all and (min-resolution: 0.001dpcm) {
	@supports (-webkit-appearance: none) {
		.cf-foam-showy-container {
			animation-name: none;
			animation-duration: inherit;
			animation-timing-function: inherit;
			will-change: inherit;
		}
	}
}

@keyframes ant-cf-showy-move {
	0% { transform: translate(0%, 0%); }
	10% { transform: translate(0%, 0%); }
	50% { transform: translate(45%, 20%); }
	90% { transform: translate(45%, 20%); }
	100% { transform: translate(45%, 20%); }
}
/*---------------------------------------*/
.cf-foam-showy-wrapper {
	position: absolute; top: 0; left: 0; width: 100%; height: 100%;
	animation-name: ant-cf-showy-rotate;
	animation-duration: 10s;
	animation-direction: normal;
	animation-iteration-count: infinite;
	animation-timing-function: ease-in-out;
	will-change: transform, opacity;
}

@media not all and (min-resolution: 0.001dpcm) {
	@supports (-webkit-appearance: none) {
		.cf-foam-showy-wrapper {
			animation-name: none;
			animation-duration: inherit;
			animation-timing-function: inherit;
			will-change: inherit;
		}
	}
}

@keyframes ant-cf-showy-rotate {
	0% { transform: rotate(0); }
	55% { transform: rotate(30deg); }
	90% { transform: rotate(30deg); }
	100% { opacity: 0; }
}
/*---------------------------------------*/
.cf-foam-showy-des {
	filter: url(#scatter);
	position: absolute; top: 40%; left: 40%; width: 13%; height: 18%;
	border-radius: 100%;
	box-shadow: inset 0 0 0.1vmin 0.2vmin rgba(53, 33, 13, 0.2);
	background-color: #f8c99d;
	transform: rotate(21deg);
}

.cf-foam-showy-des.foamdes2 { width: 10%; left: 47%; transform: rotate(-49deg); }
/*---------------------------------------*/

.cf-foam-showy-bubble.mbubble1 {
	top: 48%; left: 50%; width: 7%; height: 7%;
	animation-name: ant-cf-showy-mbubble1;
	animation-duration: 10s;
	animation-direction: normal;
	animation-iteration-count: infinite;
	animation-timing-function: ease-in-out;
	will-change: transform;
}
@media not all and (min-resolution: 0.001dpcm) {
	@supports (-webkit-appearance: none) {
		.cf-foam-showy-bubble.mbubble1 {
 			animation-name: none;
			animation-duration: inherit;
			animation-timing-function: inherit;
			will-change: inherit;
		}
	}
}

@keyframes ant-cf-showy-mbubble1 {
	0% { transform: scale(1) translate(0%, 0%); }
	35% { transform: scale(1) translate(60%, 40%); }
	45% { transform: scale(0) translate(60%, 40%); }
	100% { transform: scale(0) translate(60%, 40%); }
}

/*---------------------------------------*/

.cf-foam-showy-bubble.mbubble2 {
	top: 40%; left: 44%; width: 6%; height: 7%;
	transform: rotate(50deg);
	animation-name: ant-cf-showy-mbubble2;
	animation-duration: 10s;
	animation-direction: normal;
	animation-iteration-count: infinite;
	animation-timing-function: ease-in-out;
	will-change: transform;
}
@media not all and (min-resolution: 0.001dpcm) {
	@supports (-webkit-appearance: none) {
		.cf-foam-showy-bubble.mbubble2 {
			animation-name: none;
			animation-duration: inherit;
			animation-timing-function: inherit;
			will-change: inherit;
		}
	}
}
@keyframes ant-cf-showy-mbubble2 {
	0% { transform: scale(1) translate(0%, 0%); }
	39% { transform: scale(1) translate(10%, 10%); }
	49% { transform: scale(0) translate(10%, 10%); }
	100% { transform: scale(0) translate(10%, 10%); }
}

/*---------------------------------------*/

.cf-foam-showy-bubble.mbubble3 {
	top: 49%; left: 41%; width: 7%; height: 8%;
	transform: rotate(36deg);
	animation-name: ant-cf-showy-mbubble3;
	animation-duration: 10s;
	animation-direction: normal;
	animation-iteration-count: infinite;
	animation-timing-function: ease-in-out;
	will-change: transform;
}
@media not all and (min-resolution: 0.001dpcm) {
	@supports (-webkit-appearance: none) {
		.cf-foam-showy-bubble.mbubble3 {
			animation-name: none;
			animation-duration: inherit;
			animation-timing-function: inherit;
		}
	}
}
@keyframes ant-cf-showy-mbubble3 {
	0% { transform: scale(1) translate(0%, 0%); }
	45% { transform: scale(1) translate(0%, 0%); }
	55% { transform: scale(0) translate(0%, 0%); }
	100% { transform: scale(0) translate(50%, -40%); }
}

/*---------------------------------------*/

.cf-foam-showy-bubble.mbubble4 { top: 45%; left: 51%; width: 2%; height: 2%; transform: rotate(36deg); }

/*---------------------------------------*/

.cf-foam-showy-bubble {
	position: absolute; top: 40%; left: 2%; width: 5%; height: 7%;
	border-radius: 100%;
	box-shadow: 0vmin 0vmin 0.1vmin 0vmin #35210d, inset 0 0 0.5vmin 0.2vmin #662e22;
	background-color: #35210d;
}
.cf-foam-showy-bubble:after {
	content: "";
	display: block; position: absolute; top: 12%; right: 23%; width: 25%; height: 25%;
	border-radius: 100%;
	box-shadow: 0vmin 0vmin 0.3vmin 0vmin #ffffff;
	background-color: #fff;
	transform: rotate(-20deg);
}

.cf-foam-showy-bubble.bub2 { top: 30%; left: 5%; transform: rotate(25deg); }
.cf-foam-showy-bubble.bub3 { top: 23%; left: 8%; width: 3%; height: 5%; transform: rotate(39deg); }
.cf-foam-showy-bubble.bub4 { top: 43%; left: 94%; width: 5%; height: 7%; transform: rotate(-10deg); }
.cf-foam-showy-bubble.bub5 { top: 37%; left: 95%; width: 3%; height: 4%; transform: rotate(-17deg); }
.cf-foam-showy-bubble.bub6 { top: 0%; left: 39%; width: 6%; height: 9%; transform: rotate(76deg); }
.cf-foam-showy-bubble.bub7 { top: 1%; left: 60%; width: 4%; height: 7%; transform: rotate(106deg); }
.cf-foam-showy-bubble.bub8 { top: 91%; left: 35%; width: 4%; height: 7%; transform: rotate(106deg); }
.cf-foam-showy-bubble.bub9 { top: 63%; left: 4%; width: 5%; height: 7%; transform: rotate(-23deg); }
.cf-foam-showy-bubble.bub10 { top: 58%; left: 2%; width: 3%; height: 4%; transform: rotate(-18deg); }
.cf-foam-showy-bubble.bub11 { top: 91%; left: 63%; width: 4%; height: 6%; transform: rotate(72deg); }
.cf-foam-showy-bubble.bub12 { top: 3%; left: 31%; width: 4%; height: 6%; transform: rotate(68deg); }
.cf-foam-showy-bubble.bub13 { top: 85%; left: 21%; width: 4%; height: 6%; transform: rotate(118deg); }
.cf-foam-showy-bubble.bub14 { top: 53%; left: 95%; width: 4%; height: 6%; transform: rotate(373deg); }
.cf-foam-showy-bubble.bub15 { top: 0%; left: 50%; width: 3%; height: 5%; transform: rotate(96deg); }

/*---------------------------------------*/

.cf-foam-showy-sbubble {
	position: absolute; top: 48%; left: 1%; width: 1%; height: 2%;
	border-radius: 100%;
	box-shadow: 0vmin 0vmin 0.1vmin 0vmin #35210d, inset 0 0 0.5vmin 0.2vmin #662e22;
	background-color: #35210d;
}
.cf-foam-showy-sbubble:after {
	content: "";
	display: block; position: absolute; top: 12%; right: 23%; width: 25%; height: 25%;
	border-radius: 100%;
	box-shadow: 0vmin 0vmin 0.3vmin 0vmin #ffffff;
	background-color: #fff;
	opacity: .8;
	transform: rotate(-20deg);
}

.cf-foam-showy-sbubble.sbub2 { top: 37%; left: 3%; height: 1%; }
.cf-foam-showy-sbubble.sbub3 { top: 28%; left: 6%; height: 1%; }
.cf-foam-showy-sbubble.sbub4 { top: 35%; left: 96%; height: 1%; }
.cf-foam-showy-sbubble.sbub5 { top: 96%; left: 60%; height: 1%; }
.cf-foam-showy-sbubble.sbub6 { top: 72%; left: 8%; height: 1%; }

/*---------------------------------------*/

.cf-allfoam-shadow {
	position: absolute; width: 100%; height: 100%;
	border-radius: 100%;
	background: linear-gradient(45deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.22) 100%);
}

/*---------------------------------------*/

.cf-liquid-photomask {
	z-index: 10; position: absolute; width: 80%; height: 80%;
	border-radius: 100%;
	background: linear-gradient(45deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 20%, rgba(255, 255, 255, 0.26) 90%, rgba(255, 255, 255, 0.9) 100%);
}

/*---------------------------------------*/

.cf-cup-handle {
	position: absolute; top: 65%; left: 71%; width: 10%; height: 30%;
	border-radius: 1vmin;
	box-shadow: -2vmin -1vmin 2vmin 0vmin rgba(37, 37, 37, 0.1), 0vmin 0vmin 0vmin 0.1vmin rgba(102, 102, 102, 0.1), inset -1vmin 0 2vmin 0.1vmin #ffffff, inset 0 0 0.5vmin 0.5vmin #bbbbbb, inset 0 0 10vmin 0.1vmin rgba(195, 195, 195, 0.2);
	background-color: #fff;
	transform: rotate(-43deg);
}

/*---------------------------------------*/

.cf-steam-wrapper {
	z-index: 12; display: flex; justify-content: center; align-items: center; position: absolute; top: 50%; left: 50%; width: 50%; height: 50%;
	transform: translate(-50%, -50%);
}

.cf-steam-obj {
	width: 100%; height: 100%; min-width: 600px; min-height: 600px;
	border-radius: 100%;
	box-shadow: -156px 492px 123px -252px #fff;
	filter: url(#fog);
	animation-name: ant-cf-steam;
	animation-duration: 4s;
	animation-direction: normal;
	animation-iteration-count: infinite;
	animation-timing-function: ease-in-out;
	will-change: transform, opacity;
}
@keyframes ant-cf-steam {
	0% { opacity: 0; transform: translate(30%, -90%); }
	50% { opacity: .65; }
	100% { opacity: 0; transform: translate(60%, -120%); }
}

/*---------------------------------------*/

@media (max-width: 600px) {
	.cf-steam-obj { top: -80%; box-shadow: -156px 492px 123px -252px #fff; }
}
@media (max-width: 480px) {
	.cf-steam-obj { top: -160%; box-shadow: -166px 492px 53px -272px #fff; }
}

/*---------------------------------------*/
.cf-text { display: flex; flex-direction: column; justify-content: center; position: absolute; bottom: 50px; left: 0; right: 0; text-align: center; }

.cf-text .description, .cf-text .hbut { color: rgba(255, 255, 255, .99); font-size: 30px; line-height: 36px; }

.cf-text .hbut { margin: 30px 0 0 0; font-size: 26px; -webkit-animation: bounceInUp 2500ms; animation: bounceInUp 2500ms; }

.cf-text .description:nth-child(1) { -webkit-animation: fadeInDown 2000ms; animation: fadeInDown 2000ms; }
.cf-text .description:nth-child(2) { -webkit-animation: flipInX 2000ms; animation: flipInX 2000ms; }

/*---------------------------------------*/

@media screen and (min-width: 641px) and (max-width: 800px) {
	.ep-main { transform: translate(0, -10%); }
	.cf-plate { width: 150px; height: 150px; }
	.main-nums { font-size: 200px; }
	.cf-text .description, .cf-text .hbut { font-size: 26px; line-height: 36px; }
	.cf-text .hbut { font-size: 18px; }
}
@media screen and (min-width: 1px) and (max-width: 640px) {
	.ep-main { transform: translate(0, -10%); }
	.cf-plate { width: 120px; height: 120px; }
	.main-nums { font-size: 150px; }
	.cf-text .description, .cf-text .hbut { margin: 0 20px; font-size: 18px; line-height: 36px; }
	.cf-text .hbut { font-size: 16px; }
}


/*============================================================================*/