/*****************************************
*                  index                 *
*****************************************/

body {
	min-width: 1000px;
}

.area {
	position: relative;
}

.section {
	position: relative;
}

#custom {}

#standard {}

#custom .section {
	background-color: #e9c926;
	background-position: center top;
	background-repeat: no-repeat;
	overflow: hidden;
}

#cut-1 {
	height: 917px;
	background-image: url(../images/index/cut-1-bg_2025.jpg);
	z-index: 6;
}

#cut-1 .cut1_img_group {
	width: 100%;
	position: relative;
	height: 100%;
	margin-left: auto;
	margin-right: auto;
}

#cut-1 .cut1_img_group .cut1-right {
	width: 1265px;
	height: 1312px;
	background-repeat: no-repeat;
	background-image: url("../images/index/cut1-right2025.png?t=01");
	background-size: contain;
	position: absolute;
	/* right: 266px; */
	/*right: 296px;*/
	left: calc(50% - 181px);
    bottom: -164px;
}

#cut-1 .cut1_img_group .cut1-left {
	width: 379px;
	height: 410px;
	background-repeat: no-repeat;
	background-image: url("../images/index/cut1-left.png");
	background-size: contain;
	position: absolute;
	/* left: 289px; */
	left: 0;
	bottom: -34px;
	z-index: 2;
}

#cut-2 {
	height: 1096px;
	background-image: url(../images/index/cut-2-bg.jpg);
}

#cut-3 {
	height: 889px;
	background-image: url(../images/index/cut-3-bg_demo.jpg);
}

#cut-4 {
	height: 813px;
	background-image: url(../images/index/cut-4-bg.jpg);
}

/*
#cut-1 .text-1 {
	top: 107px;
	left: 19px;
	width: 383px;
	height: 359px;
	background: url(../images/index/cut-1-text-1.png) 0 0 no-repeat;
}

#cut-1 .text-2 {
	top: 314px;
	left: 612px;
	width: 406px;
	height: 152px;
	background: url(../images/index/cut-1-text-2.png) 0 0 no-repeat;
}
*/

/* #cut-1 .text {
	top: -57px;
	left: 104px;
	width: 311px;
	height: 391px;
	background: url(../images/index/cut-1-text.png) 0 0 no-repeat;
	-webkit-transform-origin: left top;
	transform-origin: left top;
	animation: text-animation 6s cubic-bezier(0.645, 0.045, 0.355, 1) infinite;
} */

#cut-1 .air-right, #cut-1 .air-left {
	position: absolute;
	pointer-events: none;
}

#cut-1 .air-right {
	width: 424px;
	height: 539px;
	background: url(../images/index/air-right.png) 0 0 no-repeat;
	mix-blend-mode: screen;
}

#cut-1 .air-left {
	width: 242px;
	height: 476px;
	background: url(../images/index/air-left.png) 0 0 no-repeat;
	mix-blend-mode: screen;
}

#cut-1 .ar-1 {
	/* top: 214px;
	left: 595px; */
	top: -75px;
	right: 50px;
	transform: rotate(-45deg);
	animation: air-right-animation 6s linear infinite;
}

#cut-1 .ar-2 {
	/* top: 364px;
	left: 535px; */
	top: 60px;
	right: -12px;
	transform: rotate(-50deg);
	animation: air-right-animation 6s linear -3s infinite;
}

#cut-1 .al-1 {
	/* top: 87px;
	left: 372px; */
	top: 110px;
	left: 551px;
	transform: rotate( -45deg);
	animation: air-left-animation 9s linear infinite;
}

#cut-1 .al-2 {
	/* top: 267px;
	left: 332px; */
	top: 236px;
	left: 620px;
	transform: rotate( -45deg);
	animation: air-left-animation 9s linear -4.5s infinite;
}
#cut-1 .pc_title {
	width: 460px;
	height: 333px;
	position: absolute;
	left: calc(50% - 578px);
	top: 179px;
	background-size: contain;
	background-repeat: no-repeat;
	background-image: url("../images/index/cut-1-title_2025.png?t=01");
	-webkit-transition: .3s ease-out;
	-moz-transition: .3s ease-out;
	-ms-transition: .3s ease-out;
	-o-transition: .3s ease-out;
	transition: .3s ease-out;
	/*animation: text-animation 3s cubic-bezier(0.645, 0.045, 0.355, 1) infinite;*/
}
#cut-1 .pc_title1 {
	width: 456px;
	height: 313px;
	position: absolute;
	left: 240px;
	top: 200px;
	background-size: contain;
	background-repeat: no-repeat;
	background-image: url("../images/index/pc_title1.png");
}

#cut-1 .pc_title2 {
	width: 400px;
	height: 262px;
	position: absolute;
	left: 240px;
	top: 347px;
	background-size: contain;
	background-repeat: no-repeat;
	background-image: url("../images/index/pc_title2.png");
	transform-origin: left top;
	animation: text-animation 6s cubic-bezier(0.645, 0.045, 0.355, 1) infinite;
}

#cut-1 .pc_title2_cover {
	width: 400px;
	height: 262px;
	position: absolute;
	left: 240px;
	top: 347px;
	transform-origin: left top;
	animation: text-animation 6s cubic-bezier(0.645, 0.045, 0.355, 1) infinite;
	z-index: 3;
}

.black_cover {
	width: 45px;
	height: 78px;
	position: relative;
	left: 94px;
	top: 0px;
	background-image: url(../images/index/pc_title2.png);
	transform-origin: left top;
	background-position: -94px 0;
}
#cut-1:hover .cut1_img_group .cut1-right {
    animation: text-animation2 3s cubic-bezier(0.645, 0.045, 0.355, 1) infinite;
}
#cut-1:hover .pc_title {
	animation: text-animation3 3s cubic-bezier(0.645, 0.045, 0.355, 1) infinite;
}
/* .black_cover.cover2 {
	width: 30px;
	height: 31px;
	background-color: #221815;
	position: relative;
	left: 106px;
	top: 14px;
	transform: rotate(0deg);
}

.black_cover.cover3 {
	width: 22px;
	height: 31px;
	background-color: #221815;
	position: relative;
	left: 100px;
	top: -4px;
	transform: rotate(24deg);
} */
@keyframes text-animation {
	0% {
		transform: rotate(-2.5deg);
	}
	50% {
		transform: rotate(1.25deg);
	}
	100% {
		transform: rotate(-2.5deg);
	}
}
@keyframes text-animation2 {
	0% {
		transform: rotate(0deg);
	}
	50% {
		transform: rotate(-2.5deg);
	}
	100% {
		transform: rotate(0deg);
	}
}
@keyframes text-animation3 {
	0% {
		transform: rotate(0deg);
	}
	50% {
		transform: rotate(2.5deg);
	}
	100% {
		transform: rotate(0deg);
	}
}
@keyframes air-right-animation {
	0% {
		top: -50px;
		right: 40px;
		opacity: 0;
	}
	25% {
		opacity: 0.75;
	}
	85% {
		opacity: 0.75;
	}
	100% {
		top: 120px;
		right: -30px;
		opacity: 0;
	}
}

@keyframes air-left-animation {
	0% {
		/* top: 57px; */
		top: 170px;
		left: 610px;
		/* left: 382px; */
		opacity: 0;
	}
	25% {
		opacity: 0.75;
	}
	85% {
		opacity: 0.75;
	}
	100% {
		/* top: 267px; */
		top: 400px;
		/* left: 332px; */
		left: 730px;
		opacity: 0;
	}
}

/* @keyframes bar_moving{
	0%{
		transform: rotate(-5deg);
	}
	100%{
		transform: rotate(10deg);
	}
} */

@keyframes water_drop1 {
	0% {
		opacity: 0;
		transform: translateY(-10px);
	}
	100% {
		opacity: 1;
		transform: translateY(0px);
	}
}

@keyframes water_drop2 {
	0% {
		opacity: 0;
		transform: translateY(-20px);
	}
	100% {
		opacity: 1;
		transform: translateY(0px);
	}
}

@keyframes water_drop3 {
	0% {
		opacity: 0;
		transform: translateY(-5px);
	}
	100% {
		opacity: 1;
		transform: translateY(0px);
	}
}

@keyframes water_drop4 {
	0% {
		opacity: 0;
		transform: translateY(-15px);
	}
	100% {
		opacity: 1;
		transform: translateY(0px);
	}
}

@keyframes water_drop5 {
	0% {
		opacity: 0;
		transform: translateY(-3px);
	}
	100% {
		opacity: 1;
		transform: translateY(0px);
	}
}

@keyframes water_drop6 {
	0% {
		opacity: 0;
		transform: translateY(-6px);
	}
	100% {
		opacity: 1;
		transform: translateY(0px);
	}
}

@keyframes water_drop7 {
	0% {
		opacity: 0;
		transform: translateY(-10px);
	}
	100% {
		opacity: 1;
		transform: translateY(0px);
	}
}

@keyframes water_drop8 {
	0% {
		opacity: 0;
		transform: translateY(-4px);
	}
	100% {
		opacity: 1;
		transform: translateY(0px);
	}
}

@keyframes water_drop9 {
	0% {
		opacity: 0;
		transform: translateY(-5px);
	}
	100% {
		opacity: 1;
		transform: translateY(0px);
	}
}

#cut-1 .hole {
	top: 95px;
	left: 18px;
	width: 460px;
	height: 417px;
	background: url(../images/index/cut-1-hole.png) 0 0 no-repeat;
	transition: .5s cubic-bezier(0.175, 0.885, 0.32, 1.475);
	transform: scale(1);
}

#cut-1.intro .hole {
	transform: scale(0);
}

#cut-1 .extra {
	display: none;
	top: 404px;
	left: 793px;
	width: 209px;
	height: 204px;
	background: url(../images/index/cut-1-bg-extra.png) 0 0 no-repeat;
}

#cut-1 .kol {
	background-position: 0 0;
	background-repeat: no-repeat;
}

#cut-1 .kol-1 {
	/*	top: 106px;
	left: 9px;
	width: 475px;
	height: 396px;
	border-radius: 50% 50%;
	background: rgba(0, 0, 0, 0.3);
	-webkit-transform: rotate(-28deg);
	-moz-transform: rotate(-28deg);
	-ms-transform: rotate(-28deg);
	-o-transform: rotate(-28deg);
	transform: rotate(-28deg);*/
	top: -87px;
	left: 19px;
	width: 457px;
	height: 589px;
	/*	background: rgba(0, 0, 0, 0.3);*/
	/*	background: url(../images/index/cut-1-kol-1.png) 0 0 no-repeat;*/
	-webkit-clip-path: url('#myClip');
	clip-path: url('#myClip');
}

/*
#cut-1 .kol-1:before {
	position: absolute;
	content: '';
	top: 42px;
	left: 56px;
	width: 337px;
	height: 505px;
	background: url(../images/index/cut-1-kol-1.png) 0 0 no-repeat;
}
*/

#cut-1 .kol-1 .kol-wrapper {
	position: absolute;
	top: 100px;
	left: 22px;
	transition: .35s cubic-bezier(0.175, 0.885, 0.32, 1.175) .6s;
	transform: scale(1);
}

#cut-1.intro .kol-1 .kol-wrapper {
	top: 500px;
	transform: scale(0.1);
}

#cut-1 .kol-1 .kol-wrapper .head {
	position: absolute;
	top: 0;
	left: 0;
	transform-origin: 80px 350px;
}

#cut-1 .kol-1 .kol-wrapper.style-2 .head {
	-webkit-animation: headshaking 1.5s linear 0s infinite;
	animation: headshaking 1.5s linear 0s infinite;
}

#cut-1 .kol-1 .kol-wrapper.style-2:after {
	content: '';
	position: absolute;
	top: 338px;
	left: 162px;
	width: 63px;
	height: 93px;
	background: url(../images/index/cut-1-kol-1_rock-hand.png) 0 0 no-repeat;
}

@keyframes headshaking {
	0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	50% {
		-webkit-transform: rotate(10deg);
		transform: rotate(10deg);
	}
	100% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}
}

@-webkit-keyframes headshaking {
	0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	50% {
		-webkit-transform: rotate(10deg);
		transform: rotate(10deg);
	}
	100% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}
}

#cut-1 .kol-2 {
	top: 470px;
	left: 355px;
	width: 465px;
	height: 257px;
	background-image: url(../images/index/cut-1-kol-2.png);
	transition: .5s cubic-bezier(0.165, 0.84, 0.44, 1) .1s;
}

#cut-1.intro .kol-2 {
	left: 155px;
	opacity: 0;
}

#cut-1 .kol-2:after {
	position: absolute;
	top: -44px;
	left: 149px;
	content: '';
	width: 88px;
	height: 65px;
	background: url(../images/index/cut-1-kol-2-bubble.png) 0 0 no-repeat;
	/*transform: scale(0);*/
	transform-origin: 32px 64px;
	transition: .1s ease-out;
}

#cut-1 .kol-2.intro:after {
	transform: scale(0);
}

#cut-1 .slogan {
	position: absolute;
	top: 112px;
	left: 569px;
}

#cut-1 .slogan .text {
	background-position: 0 0;
	background-repeat: no-repeat;
	opacity: 0;
	transform: scale(0.8) translateY(25px) rotate(-30deg);
	transition: .5s cubic-bezier(0.175, 0.885, 0.32, 1.475);
}

#cut-1 .slogan.transition-in .text {
	opacity: 1;
	transform: scale(1) translateY(0) rotate(0deg);
}

#cut-1 .slogan .text-1 {
	top: 0px;
	left: 3px;
	width: 123px;
	height: 104px;
	background-image: url(../images/index/cut-1-text-1.png);
	transition-delay: .1s;
}

#cut-1 .slogan .text-2 {
	top: 44px;
	left: 105px;
	width: 85px;
	height: 111px;
	background-image: url(../images/index/cut-1-text-2.png);
	transition-delay: .15s;
}

#cut-1 .slogan .text-3 {
	top: 63px;
	left: 177px;
	width: 196px;
	height: 186px;
	background-image: url(../images/index/cut-1-text-3.png);
	transition-delay: .2s;
}

#cut-1 .slogan .text-4 {
	top: 137px;
	left: 365px;
	width: 62px;
	height: 71px;
	background-image: url(../images/index/cut-1-text-4.png);
	transition-delay: .25s;
}

#cut-1 .slogan .text-5 {
	top: 126px;
	left: 0px;
	width: 105px;
	height: 130px;
	background-image: url(../images/index/cut-1-text-5.png);
	transition-delay: .3s;
}

#cut-1 .slogan .text-6 {
	top: 190px;
	left: 107px;
	width: 73px;
	height: 85px;
	background-image: url(../images/index/cut-1-text-6.png);
	transition-delay: .35s;
}

#cut-1 .slogan .text-7 {
	top: 223px;
	left: 178px;
	width: 84px;
	height: 85px;
	background-image: url(../images/index/cut-1-text-7.png);
	transition-delay: .4s;
}

#cut-1 .slogan .text-8 {
	top: 231px;
	left: 228px;
	width: 182px;
	height: 110px;
	background-image: url(../images/index/cut-1-text-8.png);
	transition-delay: .45s;
	transform-origin: left bottom;
}

#cut-1 .btn-share {
	top: 46px;
	right: 30px;
	width: 46px;
	height: 59px;
	background: url(../images/index/btn-share.png) 0 0 no-repeat;
}

#cut-1 .btn-share:hover {
	opacity: 0.7;
}

#cut-2 .title {
	top: 89px;
	left: 402px;
	width: 197px;
	height: 64px;
	background: url(../images/index/cut-2-title.png) 0 0 no-repeat;
	z-index: 2;
}

#cut-2 .extra-1 {
	top: -15px;
	left: 132px;
	width: 571px;
	height: 295px;
	background: url(../images/index/cut-2-extra-1.png) 0 0 no-repeat;
	z-index: 1;
}

#cut-2 .extra-2 {
	top: 217px;
	left: 680px;
	width: 74px;
	height: 100px;
	background: url(../images/index/cut-2-extra-2.png) 0 0 no-repeat;
}

#cut-2 .text {
	z-index: 2;
}

#cut-2 .desc {
	z-index: 1;
}

#cut-2 .text-1 {
	top: 141px;
	left: 620px;
	width: 397px;
	height: 230px;
	background: url(../images/index/cut-2-text-1.png) 0 0 no-repeat;
}

#cut-2 .text-2 {
	top: 332px;
	left: 45px;
	width: 343px;
	height: 260px;
	background: url(../images/index/cut-2-text-2.png) 0 0 no-repeat;
}

#cut-2 .text-3 {
	top: 529px;
	left: 643px;
	width: 305px;
	height: 240px;
	background: url(../images/index/cut-2-text-3.png) 0 0 no-repeat;
}

#cut-2 .desc-1 {
	top: 355px;
	left: 683px;
	width: 276px;
	height: 110px;
	background: url(../images/index/cut-2-desc-1.png?v=190327) 0 0 no-repeat;
}

#cut-2 .desc-2 {
	top: 584px;
	left: 114px;
	width: 216px;
	height: 110px;
	background: url(../images/index/cut-2-desc-2.png) 0 0 no-repeat;
}

#cut-2 .desc-3 {
	top: 788px;
	left: 645px;
	width: 356px;
	height: 110px;
	background: url(../images/index/cut-2-desc-3.png) 0 0 no-repeat;
}

#cut-2 .shadow {
	top: 310px;
	left: 370px;
	width: 305px;
	height: 506px;
	background: url(../images/index/cut-2-shadow.png) 0 0 no-repeat;
	z-index: 3;
	mix-blend-mode: multiply;
}

.paragraph {
	color: #000000;
	font-size: 36px;
	font-weight: 700;
	font-style: italic;
}

#cut-3 .paragraph {
	left: 743px;
}

#cut-3 .paragraph-1 {
	top: 118px;
}

#cut-3 .paragraph-2 {
	top: 188px;
}

#cut-3 .paragraph-3 {
	top: 258px;
}

#cut-3 .paragraph-4 {
	top: 328px;
}

#cut-3 .paragraph-5 {
	top: 398px;
}

#cut-3 .paragraph-6 {
	top: 468px;
}

#cut-4 .paragraph {
	left: 28px;
}

#cut-4 .paragraph-1 {
	top: 85px;
}

#cut-4 .paragraph-2 {
	top: 155px;
}

#cut-4 .paragraph-3 {
	top: 225px;
}

#cut-4 .paragraph-4 {
	top: 295px;
}

.can {
	left: 50%;
	width: 255px;
	height: 470px;
	margin: 0 0 0 -128px;
	-webkit-transition: .3s ease-out;
	-moz-transition: .3s ease-out;
	-ms-transition: .3s ease-out;
	-o-transition: .3s ease-out;
	transition: .3s ease-out;
	-webkit-transform-origin: center -50px;
	-moz-transform-origin: center -50px;
	-ms-transform-origin: center -50px;
	-o-transform-origin: center -50px;
	transform-origin: center -50px;
	z-index: 5;
}

.canwrapper {
	/*	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	-ms-transform: scale(1);
	-o-transform: scale(1);
	transform: scale(1);*/
	/*	-webkit-transition: .35s ease-out;
	-moz-transition: .35s ease-out;
	-ms-transition: .35s ease-out;
	-o-transition: .35s ease-out;
	transition: .35s ease-out;
	opacity: 1;*/
}

.canwrapper.intro {
	/*	-webkit-transform: scale(0);
	-moz-transform: scale(0);
	-ms-transform: scale(0);
	-o-transform: scale(0);
	transform: scale(0);*/
	/*	opacity: 0;*/
}

#custom .can.scale {
	-webkit-transform: translateX(-250px) translateY(218px) scale(0);
	-moz-transform: translateX(-250px) translateY(218px) scale(0);
	-ms-transform: translateX(-250px) translateY(218px) scale(0);
	-o-transform: translateX(-250px) translateY(218px) scale(0);
	transform: translateX(-250px) translateY(218px) scale(0);
}

.can.intro {
	-webkit-transform: translateX(-250px) translateY(218px) scale(1);
	-moz-transform: translateX(-250px) translateY(218px) scale(1);
	-ms-transform: translateX(-250px) translateY(218px) scale(1);
	-o-transform: translateX(-250px) translateY(218px) scale(1);
	transform: translateX(-250px) translateY(218px) scale(1);
}

.can:before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 323px;
	height: 290px;
	background: url(../images/index/hand-can.png) 0 0 no-repeat;
	-webkit-transition: .15s ease-out;
	-moz-transition: .15s ease-out;
	-ms-transition: .15s ease-out;
	-o-transition: .15s ease-out;
	transition: .15s ease-out;
	opacity: 0;
}

.can.intro:before {
	opacity: 1;
}

.can:after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: url(../images/index/can.png) 0 0 no-repeat;
	background-size: cover;
	-webkit-transform: rotate(0deg) scale(1);
	-moz-transform: rotate(0deg) scale(1);
	-ms-transform: rotate(0deg) scale(1);
	-o-transform: rotate(0deg) scale(1);
	transform: rotate(0deg) scale(1);
	-webkit-transition: .35s ease-out .15s;
	-moz-transition: .35s ease-out .15s;
	-ms-transition: .35s ease-out .15s;
	-o-transition: .35s ease-out .15s;
	transition: .35s ease-out .15s;
}

.can.intro:after {
	top: -136px;
	left: 46px;
	-webkit-transform: rotate(32deg) scale(0.98);
	-moz-transform: rotate(32deg) scale(0.98);
	-ms-transform: rotate(32deg) scale(0.98);
	-o-transform: rotate(32deg) scale(0.98);
	transform: rotate(32deg) scale(0.98);
}

.can-1 {
	top: 134px;
	z-index: 6;
}

.can-2 {
	top: 1050px;
}

.can-3 {
	top: 2004px;
}

.can-4 {
	top: 2817px;
}

.can-origin {
	/*	display: none;
	top: 215px;
	left: 50%;
	width: 397px;
	height: 471px;
	margin-left: -400px;*/
	background: url(../images/index/can_demo.png) 0 0 no-repeat;
	background-size: contain;
	/*z-index: 6;*/
	top: 134px;
	left: 50%;
	width: 255px;
	height: 470px;
	margin: 0 0 0 -128px;
	-webkit-transition: .3s ease-out;
	-moz-transition: .3s ease-out;
	-ms-transition: .3s ease-out;
	-o-transition: .3s ease-out;
	transition: .3s ease-out;
	-webkit-transform-origin: center -50px;
	-moz-transform-origin: center -50px;
	-ms-transform-origin: center -50px;
	-o-transform-origin: center -50px;
	transform-origin: center -50px;
	z-index: 3;
}

.can-origin .drop1 {
	width: 13px;
	height: 18px;
	background: url(../images/index/drop1.png) 0 0 no-repeat;
	background-size: contain;
	position: absolute;
	right: 35px;
	top: 199px;
	opacity: 0;
}

.can-origin .drop1.active {
	animation: water_drop1 .3s ease-in-out both;
}

.can-origin .drop2 {
	width: 18px;
	height: 24px;
	background: url(../images/index/drop2.png) 0 0 no-repeat;
	background-size: contain;
	position: absolute;
	right: 25px;
	top: 232px;
	opacity: 0;
}

.can-origin .drop2.active {
	animation: water_drop2 1.8s ease-in-out -.45s both;
}

.can-origin .drop3 {
	width: 8px;
	height: 10px;
	background: url(../images/index/drop3.png) 0 0 no-repeat;
	background-size: contain;
	position: absolute;
	right: 58px;
	top: 250px;
	opacity: 0;
}

.can-origin .drop3.active {
	animation: water_drop3 .4s ease-in-out .05s both;
}

.can-origin .drop4 {
	width: 18px;
	height: 20px;
	background: url(../images/index/drop4.png) 0 0 no-repeat;
	background-size: contain;
	position: absolute;
	right: 62px;
	top: 262px;
	opacity: 0;
}

.can-origin .drop4.active {
	animation: water_drop4 1.2s ease-in-out -.3s both;
}

.can-origin .drop5 {
	width: 6px;
	height: 9px;
	background: url(../images/index/drop5.png) 0 0 no-repeat;
	background-size: contain;
	position: absolute;
	right: 42px;
	top: 265px;
	opacity: 0;
}

.can-origin .drop5.active {
	animation: water_drop5 .4s ease-in-out -.05s both;
}

.can-origin .drop6 {
	width: 8px;
	height: 9px;
	background: url(../images/index/drop6.png) 0 0 no-repeat;
	background-size: contain;
	position: absolute;
	right: 70px;
	top: 237px;
	opacity: 0;
}

.can-origin .drop6.active {
	animation: water_drop6 .5s ease-in-out -.07s both;
}

.can-origin .drop7 {
	width: 11px;
	height: 13px;
	background: url(../images/index/drop7.png) 0 0 no-repeat;
	background-size: contain;
	position: absolute;
	top: 305px;
	right: 45px;
	opacity: 0;
}

.can-origin .drop7.active {
	animation: water_drop7 .6s ease-in-out -0.1s both;
}

.can-origin .drop8 {
	width: 5px;
	height: 6px;
	background: url(../images/index/drop8.png) 0 0 no-repeat;
	background-size: contain;
	position: absolute;
	right: 50px;
	top: 298px;
	opacity: 0;
}

.can-origin .drop8.active {
	animation: water_drop8 .2s ease-in-out .1s both;
}

.can-origin .drop9 {
	width: 5px;
	height: 8px;
	background: url(../images/index/drop9.png) 0 0 no-repeat;
	background-size: contain;
	position: absolute;
	right: 44px;
	top: 294px;
	opacity: 0;
}

.can-origin .drop9.active {
	animation: water_drop9 .2s ease-in-out .03s both;
}

.hand {
	left: 50%;
	/*	width: 1080px;
	height: 607px;*/
	width: 1171px;
	height: 912px;
	margin: 0 0 0 -960px;
	background: url(../images/index/hand-whole.png) 0 0 no-repeat;
}

.hand-1 {
	top: 1959px;
}

.hand-2 {
	top: 2872px;
	z-index: 2;
}

.hand-blur {
	width: 548px;
	height: 870px;
	margin: 0 0 0 89px;
	background: url(../images/index/hand-blur_demo.png) 0 0 no-repeat;
	/*	-webkit-transition: all 0.25s cubic-bezier(0.23, 1, 0.32, 1);
	-moz-transition: all 0.25s cubic-bezier(0.23, 1, 0.32, 1);
	-ms-transition: all 0.25s cubic-bezier(0.23, 1, 0.32, 1);
	-o-transition: all 0.25s cubic-bezier(0.23, 1, 0.32, 1);
	transition: all 0.25s cubic-bezier(0.23, 1, 0.32, 1);*/
	/* -webkit-transform-origin: 95% 813px;
	-moz-transform-origin: 95% 813px;
	-ms-transform-origin: 95% 813px;
	-o-transform-origin: 95% 813px;
	transform-origin: 95% 813px; */
	-webkit-transform-origin: 34% 813px;
	-moz-transform-origin: 34% 813px;
	-ms-transform-origin: 34% 813px;
	-o-transform-origin: 34% 813px;
	transform-origin: 34% 813px;
}

.collision .hand-blur {
	/*	-webkit-transform: rotate(5deg) translateX(-200px);
	-moz-transform: rotate(5deg) translateX(-200px);
	-ms-transform: rotate(5deg) translateX(-200px);
	-o-transform: rotate(5deg) translateX(-200px);
	transform: rotate(5deg) translateX(-200px);*/
	-webkit-animation: handCollision 0.25s cubic-bezier(0.215, 0.61, 0.355, 1) 0s forwards;
	animation: handCollision 0.25s cubic-bezier(0.215, 0.61, 0.355, 1) 0s forwards;
}

.collision-back .hand-blur {
	-webkit-transform: rotate(0deg) translateX(0px);
	-moz-transform: rotate(0deg) translateX(0px);
	-ms-transform: rotate(0deg) translateX(0px);
	-o-transform: rotate(0deg) translateX(0px);
	transform: rotate(0deg) translateX(0px);
}

@keyframes handCollision {
	0% {
		-webkit-transform: translateX(0) rotate(0deg);
		transform: translateX(0) rotate(0deg);
	}
	40% {
		-webkit-transform: translateX(-200px) rotate(0deg);
		transform: translateX(-200px) rotate(0deg);
	}
	100% {
		-webkit-transform: translateX(-160px) rotate(5deg);
		transform: translateX(-160px) rotate(5deg);
	}
}

@-webkit-keyframes handCollision {
	0% {
		-webkit-transform: translateX(0) rotate(0deg);
		transform: translateX(0) rotate(0deg);
	}
	40% {
		-webkit-transform: translateX(-200px) rotate(0deg);
		transform: translateX(-200px) rotate(0deg);
	}
	100% {
		-webkit-transform: translateX(-160px) rotate(5deg);
		transform: translateX(-160px) rotate(5deg);
	}
}

.bubble {
	top: 2475px;
	left: 50%;
	width: 490px;
	height: 432px;
	margin: 135px 0 0 -235px;
	background: url(../images/index/bubble_demo.png) 0 0 no-repeat;
	background-size: contain;
	z-index: 1;
	opacity: 0;
	-webkit-transform: scale(0);
	-moz-transform: scale(0);
	-ms-transform: scale(0);
	-o-transform: scale(0);
	transform: scale(0);
	-webkit-transform-origin: 240px 370px;
	-moz-transform-origin: 240px 370px;
	-ms-transform-origin: 240px 370px;
	-o-transform-origin: 240px 370px;
	transform-origin: 240px 370px;
	-webkit-transition: all 0.25s;
	-moz-transition: all 0.25s;
	-ms-transition: all 0.25s;
	-o-transition: all 0.25s;
	transition: all 0.25s;
}

.bubble-extra {
	top: -16px;
	left: 50%;
	width: 510px;
	height: 383px;
	margin: 0 0 0 -233px;
	background: url(../images/index/cut-1-kol-1-bubble.png) 0 0 no-repeat;
	z-index: 5;
	-webkit-transition: all ease-out 0.15s 0.175s;
	-moz-transition: all ease-out 0.15s 0.175s;
	-ms-transition: all ease-out 0.15s 0.175s;
	-o-transition: all ease-out 0.15s 0.175s;
	transition: all ease-out 0.15s 0.175s;
	-webkit-transform-origin: 136px 296px;
	-moz-transform-origin: 136px 296px;
	-ms-transform-origin: 136px 296px;
	-o-transform-origin: 136px 296px;
	transform-origin: 136px 296px;
	z-index: 6;
}

.collision .bubble {
	opacity: 1;
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	-ms-transform: scale(1);
	-o-transform: scale(1);
	transform: scale(1);
	z-index: 5;
}

.bubble-extra.intro {
	opacity: 0;
	-webkit-transform: scale(0.5);
	-moz-transform: scale(0.5);
	-ms-transform: scale(0.5);
	-o-transform: scale(0.5);
	transform: scale(0.5);
}

.bubble-extra.outro {
	opacity: 0;
	-webkit-transform: scale(0.5);
	-moz-transform: scale(0.5);
	-ms-transform: scale(0.5);
	-o-transform: scale(0.5);
	transform: scale(0.5);
	-webkit-transition: all ease-out 0.25s 0s;
	-moz-transition: all ease-out 0.25s 0s;
	-ms-transition: all ease-out 0.25s 0s;
	-o-transition: all ease-out 0.25s 0s;
	transition: all ease-out 0.25s 0s;
}

#standard .title, #standard .content {
	position: absolute;
}

#standard .content {
	width: 100%;
}

#extra-csv {
	height: 544px;
	background-image: url(../images/index/extra-csv-bg.gif);
	background-repeat: repeat-x;
	background-position: center top;
	background-size: 2px 100%;
	overflow: hidden;
}

#extra-csv:after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 40px;
	background: url(../images/index/extra-csv-bg_extra.png) 0 0 repeat-x;
	z-index: 2;
}

#extra-csv .title {
	top: 60px;
	left: 372px;
	width: 273px;
	height: 53px;
	background: url(../images/index/extra-csv-title.png?v=180921) 0 0 no-repeat;
}

#extra-csv .content {
	top: 140px;
}

#extra-csv .content p {
	color: #702c07;
	font-size: 16px;
	font-weight: 600;
	line-height: 25px;
	text-align: center;
	margin-bottom: 25px;
}

#campaign {
	background-image: url(../images/index/campaign-bg.jpg);
    background-size: cover;
    background-color: #e9c926;
    background-position: center top;
    min-height: 510px;
    height: auto;
}

#campaign .title {
	top: 69px;
	left: 406px;
	width: 189px;
	height: 53px;
	background: url(../images/index/campaign-title.png) 0 0 no-repeat;
}

#campaign .content {
	padding-top: 178px;
    padding-bottom: 50px;
    position: relative;
}
}

#campaign ul, #extra-csv ul {
	font-size: 0;
	text-align: center;
}
#campaign ul{
	display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
#campaign li, #extra-csv li {
	display: inline-block;
	width: 455px;
	height: 243px;
	margin: 0 13px;
	background: #ffffff;
}
#campaign li{
	margin: 13px;
}
#campaign li a, #extra-csv li a {
	display: block;
	position: relative;
	width: 100%;
	height: 100%;
	background-color: #b3ae98;
	overflow: hidden;
}

#campaign li a:hover, #extra-csv li a:hover {
	opacity: 0.7;
}

#campaign li a img, #extra-csv li a img {
	display: block;
}

#campaign li a:after, #extra-csv li a:after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: #ffffff 8px solid;
	box-sizing: border-box;
}

#products {
	height: 483px;
	background-image: url(../images/index/products-bg.jpg);
	background-color: #e9c926;
	background-position: center top;
}

#products .title {
	top: 69px;
	left: 431px;
	width: 138px;
	height: 53px;
	background: url(../images/index/products-title.png) 0 0 no-repeat;
}

#products .content {
	top: 178px;
}

#products .related-content {}

#products .related-content li {
	/*	border-color: #ffe55f;
	background: #ffe55f;*/
}

#products .related-content li a {
	border-color: #ffe55f;
	background: #ffe55f;
}

#products .related-content .order-0 {
	left: -185px;
}

#products .related-content .order-1 {
	left: 0;
}

#products .related-content .order-2 {
	left: 186px;
}

#products .related-content .order-3 {
	left: 372px;
}

#products .related-content .order-4 {
	left: 558px;
}

#products .related-content .order-5 {
	left: 744px;
}

#products .related-content li a {
	color: #623003;
}

#products .related-arrow {}

#products .related-arrow li {
	height: auto;
}

/*#products .related-arrow li.prev {left: 13px;}
#products .related-arrow li.next {right: 13px;}*/

#products .related-arrow li a {
	top: 79px;
	width: 57px;
	height: 60px;
	background-position: center top;
}

#products .related-arrow li a:hover {
	background-position: center bottom;
}

#products .related-arrow li.prev a {
	background-image: url(../images/index/arrow-prev.png);
	left: 13px;
}

#products .related-arrow li.next a {
	background-image: url(../images/index/arrow-next.png);
	right: 13px;
}

#tvcm {
	height: 510px;
	background-image: url(../images/index/tvcm-bg.jpg);
	background-color: #e9c926;
	background-position: center top;
}

#tvcm .title {
	top: 69px;
	left: 451px;
	width: 98px;
	height: 53px;
	background: url(../images/index/tvcm-title.png) 0 0 no-repeat;
}

#tvcm .content {
	top: 178px;
}

#tvcm li {}

#tvcm li a {}

#tvcm li a:after {
	top: 91px;
	left: 151px;
	background: url(../images/index/tvcm-play.png) 0 0 no-repeat;
}

#tvcm .pic {
	background: rgba(74, 48, 3, 1);
}

/* 0.3 */

#tvcm .pic:after {
	border-color: #d09d00;
}

#tvcm .videos-content {
	height: 307px;
}

#tvcm .videos-arrow {}

#tvcm .videos-arrow li {
	height: auto;
}

#tvcm .videos-arrow li.prev {
	left: 13px;
}

#tvcm .videos-arrow li.next {
	right: 13px;
}

#tvcm .videos-arrow li a {
	top: 92px;
	width: 57px;
	height: 60px;
	background-position: center top;
}

#tvcm .videos-arrow li a:hover {
	background-position: center bottom;
}

#tvcm .videos-arrow li.prev a {
	background-image: url(../images/index/arrow-prev.png);
	left: 13px;
}

#tvcm .videos-arrow li.next a {
	background-image: url(../images/index/arrow-next.png);
	right: 13px;
}

#knowledge {
	height: 421px;
	background-image: url(../images/index/knowledge-bg.jpg);
	background-color: #e9c926;
	background-position: center top;
}

#knowledge .content {
	top: 89px;
}

#knowledge ul {
	font-size: 0;
	text-align: center;
}

#knowledge li {
	display: inline-block;
	margin: 0 15px;
}

#knowledge li a {
	display: block;
	width: 455px;
	height: 243px;
	background-position: 0 0;
	background-repeat: no-repeat;
}

#knowledge li a:hover {
	opacity: 0.7;
}

#knowledge li a.item-1 {
	background-image: url(../images/index/knowledge-1.jpg);
}

#knowledge li a.item-2 {
	background-image: url(../images/index/knowledge-2.jpg);
}

#shop {
	height: 367px;
	background-image: url(../images/index/shop-bg.jpg);
	background-color: #e9c926;
	background-position: center top;
}

#shop .title {
	top: 69px;
	left: 384px;
	width: 266px;
	height: 53px;
	background: url(../images/index/shop-title.png) 0 0 no-repeat;
}

#shop .content {
	top: 178px;
}

#shop ul {
	font-size: 0;
	text-align: center;
}

#shop li {
	display: inline-block;
	width: 230px;
	height: 100px;
	margin: 0 3px;
	vertical-align: top;
}

#shop li a {
	display: table-cell;
	width: 230px;
	height: 100px;
	vertical-align: middle;
	/*	background: url(../images/index/shop-arrow.png) #ffe55f 199px center no-repeat;*/
	background-color: #ffe55f;
	background-position: 0 0;
	background-repeat: no-repeat;
}

#shop li a:hover {
	opacity: 0.7;
}

/*#shop li a img {margin: 0 0 0 -20px;}*/

#social {
	padding: 89px 0;
	background: #e5e0c2;
}

#social .content {
	position: relative;
}

#social ul {
	font-size: 0;
	text-align: center;
}

#social li {
	display: inline-block;
	margin: 0 13px;
}

#social li a {
	display: block;
	width: 455px;
	height: 100px;
	/*background-image: url(../images/index/social-items.jpg);*/
	background-color: #b3ae98;
	background-repeat: no-repeat;
}

#social li a:hover {
	opacity: 0.7;
}

#social li a.facebook {
	background-position: 0 0;
}

#social li a.instagram {
	background-position: 0 0;
}

#pop {}

.pop-container {
	background: rgba(233, 201, 38, 0.8);
}

.pop-main {
	margin-top: 80px;
	margin-bottom: 80px;
}

.pop-main .btn-close {
	top: -72px;
	right: 0;
	width: 144px;
	height: 72px;
	background-image: url(../images/index/pop-btn-close.png);
}

.pop-main .btn-close:hover {
	background-position: center bottom;
}

#video {
	width: 1000px;
}

#video .embed {
	width: 1000px;
	height: 560px;
	background: #000000;
	overflow: hidden;
}

#video .btn-close {}

/*----- CSV -----*/

#main .no-transition {
	-webkit-transition: none;
	-moz-transition: none;
	-ms-transition: none;
	-o-transition: none;
	transition: none;
}

.fixed_bg {
	position: absolute;
	top: 0px;
	left: 50%;
	width: 1920px;
	height: 100%;
	margin-left: -960px;
}

.fixed_bg .bg_beer {
	position: absolute;
	top: 86px;
}

.fixed_bg .bg_beer img {
	position: relative;
	z-index: 2;
}

.toleft {
	left: -19px;
	transform-origin: top left;
}

.toright {
	right: -10px;
	transform-origin: top right;
}

.fixed_bg .bg_beer .fly-bubble div {
	position: absolute;
	width: 84px;
	height: 84px;
	background: url(../images/index/extra-csv-bubble.png) center no-repeat;
	background-size: contain;
	z-index: 1;
	-webkit-animation: bgfly-bubble ease-out 2.5s forwards;
	-moz-animation: bgfly-bubble ease-out 2.5s forwards;
	-ms-animation: bgfly-bubble ease-out 2.5s forwards;
	-o-animation: bgfly-bubble ease-out 2.5s forwards;
	animation: bgfly-bubble ease-out 2.5s forwards;
}

@-webkit-keyframes bgfly-bubble {
	0% {
		top: 100%;
		opacity: 0;
		-webkit-transform: scale(0) translate3d(0%, 0, 0);
	}
	20% {
		opacity: 1;
		-webkit-transform: scale(1) translate3d(20%, 0, 0);
	}
	80% {
		opacity: 1;
		-webkit-transform: scale(1) translate3d(-20%, 0, 0);
	}
	100% {
		top: -50%;
		opacity: 0;
		-webkit-transform: scale(0) translate3d(0%, 0, 0);
	}
}

@-moz-keyframes bgfly-bubble {
	0% {
		top: 100%;
		opacity: 0;
		-moz-transform: scale(0) translate3d(0%, 0, 0);
	}
	20% {
		opacity: 1;
		-moz-transform: scale(1) translate3d(20%, 0, 0);
	}
	80% {
		opacity: 1;
		-moz-transform: scale(1) translate3d(-20%, 0, 0);
	}
	100% {
		top: -50%;
		opacity: 0;
		-moz-transform: scale(0) translate3d(0%, 0, 0);
	}
}

@-o-keyframes bgfly-bubble {
	0% {
		top: 100%;
		opacity: 0;
		-o-transform: scale(0) translate3d(0%, 0, 0);
	}
	20% {
		opacity: 1;
		-o-transform: scale(1) translate3d(20%, 0, 0);
	}
	80% {
		opacity: 1;
		-o-transform: scale(1) translate3d(-20%, 0, 0);
	}
	100% {
		top: -50%;
		opacity: 0;
		-o-transform: scale(0) translate3d(0%, 0, 0);
	}
}

@keyframes bgfly-bubble {
	0% {
		top: 100%;
		opacity: 0;
		transform: scale(0) translate3d(0%, 0, 0);
	}
	20% {
		opacity: 1;
		transform: scale(1) translate3d(20%, 0, 0);
	}
	80% {
		opacity: 1;
		transform: scale(1) translate3d(-20%, 0, 0);
	}
	100% {
		top: -50%;
		opacity: 0;
		transform: scale(0) translate3d(0%, 0, 0);
	}
}

@keyframes shake {
	10%, 90% {
		transform: translate3d(-1px, 0, 0);
	}
	20%, 80% {
		transform: translate3d(2px, 0, 0);
	}
	30%, 50%, 70% {
		transform: translate3d(-4px, 0, 0);
	}
	40%, 60% {
		transform: translate3d(4px, 0, 0);
	}
}

.fixed_bg .bg_beer .fly-bubble div.type1 {
	width: 84px;
	height: 84px;
}

.fixed_bg .bg_beer .fly-bubble div.type2 {
	width: 64px;
	height: 64px;
}

.fixed_bg .bg_beer .fly-bubble div.type3 {
	width: 34px;
	height: 34px;
}