
/**** pc ****/
.gmotion {
	position: relative;
	width: 100%;
	float: left;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 100px 0px;
	overflow: hidden
}
.gmotion .fire {
	width: 100%;
	float: left;
	opacity: 1;
	position: absolute;
	left: 0px;
	top:-100px;
	bottom:0px;
	z-index: 3;
	transition: all 0.5s;
	-moz-transition: all 0.5s;
	-webkit-transition: all 0.5s;
	-o-transition: all 0.5s;
}
.gmotion .fire lottie-player {
	width: 100%;
	height: 100%;
	opacity: 1;
}
.gmotion .fire2 {
	width: 100%;
	float: left;
	opacity: 0;
	;
	position: absolute;
	left: 0px;
	top: -200px;
	z-index: 3
}
.gmotion .fire2 lottie-player {
	width: 100%;
	height: 700px;
	opacity: 0;
}
.gmotion.animate .fire {
	width: 100%;
	display: block;
	opacity: 1;
	position: absolute;
	left: 0px;
	top: -300px;
	z-index: 3
}
.gmotion.animate .fire lottie-player {
	width: 100%;
	height: 1400px;
	opacity: 1;
}
.gmotion.animate .fire2 {
	width: 100%;
	display: block;
	position: absolute;
	left: 0px;
	top: -200px;
	z-index: 3;
	opacity: 1;
}
.gmotion.animate .fire2 lottie-player {
	width: 100%;
	height: 700px;
	display: block;
	opacity: 1;
}
.gmotion.off .fire lottie-player {
	width: 100%;
	height: 1000px;
	display: none
}
/**** pc2 ****/
@media all and (max-width:1280px) and (min-width:1025px) {
}
/**** 모바일 ****/
@media only all and (max-device-width:1199px) {
.gmotion {
	position: relative;
	width: 100%;
	float: left;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 20px 0px;
	overflow: hidden
}
.gmotion .fire {
	width: 100%;
	float: left;
	opacity: 1;
	position: absolute;
	left: 0px;
	top: -80px;
	bottom:190px;
	z-index: 3;
	transition: all 0.5s;
	-moz-transition: all 0.5s;
	-webkit-transition: all 0.5s;
	-o-transition: all 0.5s;
}
.gmotion .fire lottie-player {
	width: 100%;
	height: 100%;
	opacity: 1;
}
.gmotion .fire2 {
	width: 100%;
	float: left;
	opacity: 0;
	;
	position: absolute;
	left: 0px;
	top: -50px;
	z-index: 3
}
.gmotion .fire2 lottie-player {
	width: 100%;
	height: 300px;
	opacity: 0;
}
.gmotion.animate .fire {
	width: 100%;
	display: block;
	opacity: 1;
	position: absolute;
	left: 0px;
	top: -150px;
	z-index: 1
}
.gmotion.animate .fire lottie-player {
	width: 100%;
	height: 500px;
	opacity: 1;
}
.gmotion.animate .fire2 {
	width: 100%;
	display: block;
	position: absolute;
	left: 0px;
	top: -50px;
	z-index: 3;
	opacity: 1;
}
.gmotion.animate .fire2 lottie-player {
	width: 100%;
	height: 300px;
	display: block;
	opacity: 1;
}
.gmotion.off .fire lottie-player {
	width: 100%;
	height: 500px;
	display: none
}
}
@media only all and (max-device-width:1023px) {
.gmotion .fire {
	top:-60px;
	bottom:168px;
}
}
@media only all and (max-device-width:767px) {
.gmotion .fire {
	top:-40px;
	bottom:140px;
}
}
@media only all and (max-device-width:539px) {
.gmotion .fire {
	top:-30px;
	bottom:114px;
}
}


/**** pc ****/
.tx_ani {
	width: 100%;
	float: left;
	height: 80px;
	overflow: hidden;
	position: relative
}
/**** pc2 ****/
@media all and (max-width:1199px) and (min-width:1025px) {
}
/**** 모바일 ****/
@media only all and (max-device-width:1199px) {
.tx_ani {
	height: 68px;
}
}
@media only all and (max-device-width:1023px) {
.tx_ani {
	height: 56px;
}
}
@media only all and (max-device-width:767px) {
.tx_ani {
	height: 48px;
}
}
@media only all and (max-device-width:539px) {
.tx_ani {
	height: 38px;
}
}
@media only all and (max-device-width:410px) {
.tx_ani {
	height: 34px;
}
}
.tx_ani h2 {
	width: 100%;
	float: left;
	display: flex;
	justify-content: center;
	align-items: center;
	transition: all 0.5s;
	-moz-transition: all 0.5s;
	-webkit-transition: all 0.5s;
	-o-transition: all 0.5s;
	opacity: 1;
	position: absolute;
	top: 0px;
	left: 0px
}
.tx_ani.animate h2 {
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-bottom: 0px;
	opacity: 1;
	position: absolute;
	top: 0px;
	left: 0px
}
.tx_ani h4 {
	width: 100%;
	float: left;
	display: flex;
	justify-content: center;
	align-items: center;
	transition: all 0.5s;
	-moz-transition: all 0.5s;
	-webkit-transition: all 0.5s;
	-o-transition: all 0.5s;
	opacity: 1;
	position: absolute;
	top: 0px;
	left: 0px
}
.tx_ani.animate h4 {
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-bottom: 0px;
	opacity: 1;
	position: absolute;
	top: 0px;
	left: 0px
}
.animate__bounceIn {
	-webkit-animation-duration: .75s;
	animation-duration: .75s;
 -webkit-animation-duration: calc(var(--animate-duration)*0.75);
 animation-duration: calc(var(--animate-duration)*0.75);
	-webkit-animation-name: none!important;
	animation-name: none!important;
	font-size: 100px;
	opacity: 1
}
.animate__bounceIn.animate {
	-webkit-animation-duration: .75s;
	animation-duration: .75s;
 -webkit-animation-duration: calc(var(--animate-duration)*0.75);
 animation-duration: calc(var(--animate-duration)*0.75);
	-webkit-animation-name: bounceIn!important;
	animation-name: bounceIn!important;
	opacity: 1
}
.animate__bounceIn.delay {
	-webkit-animation-duration: .75s;
	animation-duration: .75s;
 -webkit-animation-duration: calc(var(--animate-duration)*0.75);
 animation-duration: calc(var(--animate-duration)*0.75);
	-webkit-animation-name: none!important;
	animation-name: none!important;
	font-size: 100px;
	opacity: 1;
}
.animate__bounceIn.animate {
	-webkit-animation-duration: .75s;
	animation-duration: .75s;
 -webkit-animation-duration: calc(var(--animate-duration)*0.75);
 animation-duration: calc(var(--animate-duration)*0.75);
	-webkit-animation-name: bounceIn!important;
	animation-name: bounceIn!important;
	opacity: 1;
	animation-delay: 0.5s;
}
.delay {
	animation-delay: 0.1s;
}
.animate__swing {
	-webkit-transform-origin: top center;
	transform-origin: top center;
	-webkit-animation-name: none!important;
	animation-name: none!important;
}
.animate__swing.animate {
	-webkit-transform-origin: top center;
	transform-origin: top center;
	-webkit-animation-name: swing!important;
	animation-name: swing!important
}
.animate__flipInX {
	-webkit-backface-visibility: visible !important;
	backface-visibility: visible !important;
	-webkit-animation-name: none!important;
	animation-name: none!important;
	font-size: 100px;
	opacity: 1
}
.animate__flipInX.animate {
	-webkit-backface-visibility: visible !important;
	backface-visibility: visible !important;
	-webkit-animation-name: flipInX!important;
	animation-name: flipInX!important;
	;
	opacity: 1
}
