.mainvisual.summer{
	/* display: none; */
}
.mainvisual_sp{
	/* display: none; */
}
.mainvisual_sp .maintext {
	box-sizing: border-box;
	padding-top: 8%;
	/* display: none !important; */
	/* 임시로 */
}
.mainvisual_sp.spring .ani_img_total img{
	width: 100%;
	height: 100%;
	object-fit: contain;
}
.mainvisual_sp.spring{
	width: 100%;
	min-height: 560px;
	aspect-ratio: 2.3 / 1;
	background: url(/GBGC/img/main_spring_img/spring_bg.svg) center center no-repeat;
    background-size: cover;
    position: relative;
    overflow: hidden;
}
.mainvisual_sp.spring .ani_img_total{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.mainvisual_sp.spring .ani_img_total .doobong01{
    position: absolute;
    display: inline-block;
    left: 17%;
    bottom: 12%;
    width: 13%;
	animation-name: doobong01;
	animation-duration:6.5s;
	animation-iteration-count:infinite;
	animation-direction:normal;
	animation-delay: 1s;
	opacity: 1;
	perspective: 500px;
}
@-webkit-keyframes doobong01 {
	0% {
		opacity: 1;
	}
	10% {
		opacity: 1;
	}
	13% {
		opacity: 1;
	}
	70%{
		opacity: 1;
	}
	75%{
		/* opacity: 0; */
	}
	80%{
		/* opacity: 0; */
	}
	85%{
		/* opacity: 0; */
	}
	90% {
		/* opacity: 0; */
	}
	98% {
		/* opacity: 0; */
	}
	100% {
		opacity: 1;
	}
}
.mainvisual_sp.spring .ani_img_total .doobong01 img{
	transform: rotateX(0) rotateY(0) rotateZ(0);
	animation-name: doobong01_img;
	animation-duration:6.5s;
	animation-iteration-count:infinite;
	animation-direction:normal;
	animation-delay: 1s;
	opacity: 1;
}
@-webkit-keyframes doobong01_img {
	0% {
		transform: rotateX(0) rotateY(0) rotateZ(0);
	}
	33.3333% {
		transform: rotateX(1deg) rotateY(2deg) rotateZ(1deg);
	}
	66.6666% {
		transform: rotateX(-1deg) rotateY(-2deg) rotateZ(-1deg);
	}
	100% {
		transform: rotateX(0) rotateY(0) rotateZ(0);
	}
}

.mainvisual_sp.spring .ani_img_total .doobong02{
    position: absolute;
    display: inline-block;
	left: 53%;
	bottom: -5%;
	width: 11%;
	z-index: 2;
	animation-name: doobong02;
	animation-duration:6.5s;
	animation-duration: noraml;
	animation-iteration-count:infinite;
	animation-direction:normal;
	animation-delay: 1s;
}
@-webkit-keyframes doobong02 {
	0% {
		left: 53%;
		bottom: -5%;
		width: 11%;
	}
	70%{
		left: 53%;
		bottom: -5%;
		width: 11%;
	}
	80%{
		left: 42%;
		bottom: -2%;
		width: 15%;
	}
	85%{
		left: 42%;
		bottom: 0%;
		width: 15%;
		transform: rotate(0deg);
	}
	90% {
		left: 42%;
		bottom: 0%;
		width: 15%;
		transform: rotate(5deg);
	}
	94% {
		left: 42%;
		bottom: -2%;
		width: 15%;
		transform: rotate(0deg);
	}
	100% {
		left: 53%;
		bottom: -5%;
		width: 11%;
		transform: rotate(0deg);
	}
}
.mainvisual_sp.spring .ani_img_total .ppika_01{
	position: absolute;
    display: inline-block;
	left: 41%;
	bottom:29%;
	width: 2%;
	opacity: 0;
	animation-name: ppika_01;
	animation-duration:6.5s;
	animation-duration: noraml;
	animation-iteration-count:infinite;
	animation-direction:normal;
	animation-delay: 1s;
}
@-webkit-keyframes ppika_01 {
	0% {
		left: 41%;
		bottom:29%;
		width: 2%;
		opacity: 0;
	}
	70%{
		left: 41%;
		bottom:29%;
		width: 2%;
		opacity: 0;
	}
	80%{
		left: 41%;
		bottom:29%;
		width: 2%;
		opacity: 0;
	}
	90% {
		left: 41%;
		bottom: 31%;
		width: 2%;
		opacity: 1;
	}
	93% {
		left: 41%;
		bottom: 31%;
		width: 2%;
		opacity: 1;
	}
	94% {
		left: 41%;
		bottom: 31%;
		width: 2%;
		opacity: 0;
	}
	100% {
		left: 43%;
		bottom:29%;
		width: 1.5%;
		opacity: 0;
	}
}
.mainvisual_sp.spring .ani_img_total .ppika_02{
	position: absolute;
    display: inline-block;
	left: 46%;
	bottom: 35%;
	width: 2%;
	animation-name: ppika_02;
	animation-duration:6.5s;
	animation-duration: noraml;
	animation-iteration-count:infinite;
	animation-direction:normal;
	animation-delay: 1s;
	opacity: 0;
}
@-webkit-keyframes ppika_02 {
	0% {
		left: 46%;
		bottom: 35%;
		width: 2%;
		opacity: 0;
	}
	70%{
		left: 46%;
		bottom: 35%;
		width: 2%;
		opacity: 0;
	}
	80%{
		left: 46%;
		bottom: 35%;
		width: 2%;
		opacity: 0;
	}
	90% {
		left: 46%;
		bottom: 37%;
		width: 2%;
		opacity: 1;
	}
	93% {
		left: 46%;
		bottom: 37%;
		width: 2%;
		opacity: 1;
	}
	94% {
		left: 46%;
		bottom: 37%;
		width: 2%;
		opacity: 0;
	}
	100% {
		left: 47%;
		bottom: 35%;
		width: 1%;
		opacity: 0;
	}
}
.mainvisual_sp.spring .ani_img_total .ppika_03{
	position: absolute;
	position: absolute;
    display: inline-block;
	left: 54%;
	bottom: 24%;
	width: 2%;
	animation-name: ppika_03;
	animation-duration:6.5s;
	animation-duration: noraml;
	animation-iteration-count:infinite;
	animation-direction:normal;
	animation-delay: 1s;
	opacity: 0;
}
@-webkit-keyframes ppika_03 {
	0% {
		left: 54%;
		bottom: 24%;
		width: 2%;
		opacity: 0;
	}
	70%{
		left: 54%;
		bottom: 24%;
		width: 2%;
		opacity: 0;
	}
	80%{
		left: 54%;
		bottom: 24%;
		width: 2%;
		opacity: 0;
	}
	90% {
		left: 54%;
		bottom: 26%;
		width: 2%;
		opacity: 1;
	}
	93% {
		left: 54%;
		bottom: 26%;
		width: 2%;
		opacity: 1;
	}
	94% {
		left: 54%;
		bottom: 26%;
		width: 2%;
		opacity: 0;
	}
	100% {
		left: 54.5%;
		bottom: 24%;
		width: 1%;
		opacity: 0;
	}
}

.mainvisual_sp.spring .ani_img_total .mid_flower{
	position: absolute;
    display: inline-block;
    left: 38%;
    bottom: -3%;
    width: 34%;
	animation-name: mid_flower;
	animation-duration:6.5s;
	animation-iteration-count:infinite;
	animation-direction:normal;
	animation-delay: 1s;
	z-index: 3;
}
@-webkit-keyframes mid_flower {
	0% {
		transform: rotate(0deg);
	}
	5%{
		transform: rotate(0deg);
	}
	10%{
		transform: rotate(0deg);
	}
	33.333%{

	}
	71% {
		transform: rotate(0deg);
	}
	72% {
		transform: rotate(1.5deg);
	}
	73% {
		transform: rotate(-1.5deg);
	}
	74% {
		transform: rotate(0deg);
	}
	96% {
		transform: rotate(0deg);
	}
	97% {
		transform: rotate(1.5deg);
	}
	98% {
		transform: rotate(-1.5deg);
	}
	99% {
		transform: rotate(0deg);
	}
	100% {

	}
}


.mainvisual_sp .cherry_blossom {
    overflow: hidden;
    position: absolute;
	top: 0;
	left: 0;
    width: 100%;
	height: 100%;
    background-size: cover;
    perspective: 1000px;
	pointer-events: none;
}

.mainvisual_sp .cherry_blossom .petal {
    position: absolute;
    background: linear-gradient(-45deg, #fdc90c 0%, #f4831f 40%, #e95f00 80%);
    border-radius: 10% 50% 40% 50%;
    z-index: 1;
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.8);
    pointer-events: none;
    transform-style: preserve-3d;
    transition: transform 1000ms linear;
}

@keyframes fall {
    0% {
        top: 0;
        opacity: 1;
    }

    80% {
        opacity: 1;
    }

    100% {
        top: 100%;
        opacity: 0.2;
    }
}








.mainvisual_sp .zzz{
    opacity: 0;
    position: absolute;
    display: inline-block;
    left: 37%;
    bottom: 114%;
    width: 5%;
    animation: heart-beat 2s ease-out infinite 1.5s;
}
.mainvisual_sp .zzz02{
    opacity: 0;
    position: absolute;
    display: inline-block;
    left: 32%;
    bottom: 105%;
    width: 5%;
    animation: heart-beat 2s ease-out infinite 1s;
}
.mainvisual_sp .zzz03{
    opacity: 0;
    position: absolute;
    display: inline-block;
    left: 27%;
    bottom: 95%;
    width: 4%;
    animation: heart-beat 2s ease-out infinite 0.5s;
}

@-webkit-keyframes heart-beat {
	0% {
	  transform: scale(0.75) rotate(35deg);
	  opacity: 1;
	}
	5%, 15%, 25% {
	  transform: scale(1) rotate(35deg);
	}
	10%, 20% {
	  transform: scale(0.75) rotate(35deg);
	}
	70% {
	  opacity: 1;
	}
	100% {
	  transform: rotate(35deg) translateY(-10px) translateX(-10px);
	  opacity: 0;
	}
  }
  @keyframes heart-beat {
	0% {
	  transform: scale(0.75) rotate(35deg);
	  opacity: 1;
	}
	5%, 15%, 25% {
	  transform: scale(1) rotate(35deg);
	}
	10%, 20% {
	  transform: scale(0.75) rotate(35deg);
	}
	70% {
	  opacity: 1;
	}
	100% {
	  transform: rotate(35deg) translateY(-10px) translateX(-10px);
	  opacity: 0;
	}
  }






.mainvisual_sp .rabbit{
	position: absolute;
	bottom: 28%;
	right: -5%;
	width: 8%;
	height: 11%;
	animation: xAxis 10s infinite cubic-bezier(0.02,0.01,0.21,1);
}

@keyframes xAxis {
	0% {
		right: -5%;
		bottom: 28%;
	}
	40%{
		right: 20%;
		bottom: 10%;
	}
	100%{
		right: 41%;
		bottom: 5%;
	}
}
@media screen and (max-width: 620px) {
	.mainvisual_sp .rabbit{
		bottom: 10%;
	}
	@keyframes xAxis {
		0% {
			right: -5%;
			bottom: 10%;
		}
		40%{
			right: 60%;
			bottom: 7%;
		}
		100%{
			right: 105%;
			bottom: 5%;
		}
	}
}





.mainvisual_sp .bird01{
	position: absolute;
	top: 3%;
	right: 22%;
	width: 2%;
	height: 5%;
	animation: bird01 10s infinite cubic-bezier(0.02,0.01,0.21,1);
	opacity: 1;
}
@keyframes bird01 {
	0%{
		opacity: 0;
	}
	20% {
		opacity: 1;
	}
	100%{
		opacity: 0;
	}
}
.mainvisual_sp .bird02{
	position: absolute;
	top: 4%;
	right: 23%;
	width: 2%;
	height: 5%;
	animation: bird02 10s infinite cubic-bezier(0.02,0.01,0.21,1);
}
@keyframes bird02 {
	0%{
		opacity: 0;
	}
	20% {
		opacity: 1;
	}
	100%{
		opacity: 0;
	}
}
.mainvisual_sp .bird03{
	position: absolute;
	top: 5%;
	right: 22%;
	width: 5%;
	height: 5%;
	perspective: 400px;
	animation: bird03 10s infinite cubic-bezier(0.02,0.01,0.21,1);
}
@keyframes bird03 {
	0% {
		right: -5%;
		bottom: 28%;
	}
	40%{
		right: 20%;
		bottom: 10%;
	}
	50%{
		right: 20%;
		bottom: 10%;
		width: 2%;
		opacity: 1;
	}
	100%{
		right: 21%;
		bottom: 10%;
		width: 1%;
		opacity: 0;
	}
}
.mainvisual_sp .bird03 img{
	transform: rotateX(0deg) rotateY(20deg) rotateZ(20deg);
	animation: bird05_img 10s infinite cubic-bezier(0.02,0.01,0.21,1);
}
@keyframes bird03_img {
	0% {
		transform: rotateX(0deg) rotateY(20deg) rotateZ(20deg);
	}
	75%{
		transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
	}
	100%{
		transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
	}
}

.mainvisual_sp .bird04{
	position: absolute;
	top: 4%;
	right: 27%;
	width: 2%;
	height: 5%;
	animation: bird04 10s infinite cubic-bezier(0.02,0.01,0.21,1);
	opacity: 0;
}
@keyframes bird04 {
	0%{
		opacity: 0;
	}
	20% {
		opacity: 1;
	}
	100%{
		opacity: 0;
	}
}
.mainvisual_sp .bird05{
	position: absolute;
	top: 5%;
	right: -5%;
	width: 5%;
	height: 5%;
	perspective: 400px;
	animation: bird05 10s infinite cubic-bezier(0.02,0.01,0.21,1);
	animation-delay: 0.5s;
}
@keyframes bird05 {
	0% {
		right: -5%;
		bottom: 28%;
	}
	40%{
		right: 24%;
		bottom: 10%;
	}
	50%{
		right: 24%;
		bottom: 10%;
		width: 2%;
		opacity: 1;
	}
	100%{
		right: 25%;
		bottom: 10%;
		width: 1%;
		opacity: 0;
	}
}
.mainvisual_sp .bird05 img{
	transform: rotateX(0deg) rotateY(30deg) rotateZ(40deg);
	animation: bird05_img 10s infinite cubic-bezier(0.02,0.01,0.21,1);
	animation-delay: 0.5s;
}
@keyframes bird05_img {
	0% {
		transform: rotateX(0deg) rotateY(30deg) rotateZ(40deg);
	}
	75%{
		transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
	}
	100%{
		transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
	}
}



/* 열매 */
.mainvisual_sp .fruit01{
	position: absolute;
	bottom: 15%;
	left: 57%;
	width: 2%;
	z-index: 6;
	animation-name: mid_flower02;
	animation-duration:6.5s;
	animation-iteration-count:infinite;
	animation-direction:normal;
	animation-delay: 1s;
}
.mainvisual_sp .fruit02{
	position: absolute;
	bottom: 11%;
	left: 61.5%;
	width: 4%;
	z-index: 6;
	animation-name: mid_flower02;
	animation-duration:6.5s;
	animation-iteration-count:infinite;
	animation-direction:normal;
	animation-delay: 1s;
}
@-webkit-keyframes mid_flower02 {
	0% {
		transform: rotate(0deg);
		transform-origin: center top;
	}
	5%{
		transform: rotate(0deg);
		transform-origin: center top;
	}
	10%{
		transform: rotate(0deg);
		transform-origin: center top;
	}
	33.333%{

	}
	71% {
		transform: rotate(0deg);
		transform-origin: center top;
	}
	72% {
		transform: rotate(2deg);
		transform-origin: center top;
	}
	75% {
		transform: rotate(-2deg);
		transform-origin: center top;
	}
	74% {
		transform: rotate(0deg);
		transform-origin: center top;
	}
	96% {
		transform: rotate(0deg);
		transform-origin: center top;
	}
	97% {
		transform: rotate(2deg);
		transform-origin: center top;
	}
	99% {
		transform: rotate(-2deg);
		transform-origin: center top;
	}
	100% {
		transform: rotate(0deg);
		transform-origin: center top;
	}
}
@media screen and (max-width: 620px) {
	.mainvisual_sp .fruit01{
		bottom: 3%;
	}
	.mainvisual_sp .fruit02{
		bottom: 2%;
	}
}




@media screen and (max-width: 620px) {
	.mainvisual_sp.spring {
		width: 100%;
        height: 630px;
		aspect-ratio: auto;
		background: url(/GBGC/img/main_spring_img/spring_bg.svg) center center no-repeat;
		background-size: cover;
		position: relative;
		overflow: hidden;
	}
	.mainvisual_sp.spring .maintext img.text {
        width: 43%;
    }
	.mainvisual_sp.spring .mainbtn {
		margin-top: 43px;
		gap: 12px;
	}
	.mainvisual_sp.spring .mainbtn li a{
		padding: 15px;
		padding-left: 25px;
		font-size: 16px;
		background-size: 23px;
	}
	.mainvisual_sp.spring .maintext img.text2 {
        width: 64%;
    }
}