/* ===== BOX_lottie1: 로티 아이콘 카드 (호버 컬러전환 + 버블 데코) ===== */

/* ===== 그리드 컨테이너 ===== */
@media only all and (min-width:768px) {
	.BOX_lottie1 .wg_boxin{width: 100%; float: left; display: grid; grid-template-columns: repeat(4, 1fr); gap:2%; }
}
@media all and (max-width:1280px) and (min-width:1024px) {
	.BOX_lottie1 .wg_boxin{width: 100%; float: left; display: grid; height:100%; grid-template-columns: repeat(4, 1fr); gap:1%; }
}
@media all and (max-width:1023px) and (min-width:768px) {
	.BOX_lottie1 .wg_boxin{width: 100%; float: left; display: grid; height:100%; grid-template-columns: repeat(2, 1fr); gap:1%; }
}
@media only all and (max-width:767px) {
	.BOX_lottie1 .wg_boxin{width: 100%; float: left; display: grid; grid-template-columns: repeat(2, 1fr); gap:2%; }
}

/* ===== 카드 아이템 ===== */
@media only all and (min-width:768px) {
	.BOX_lottie1 .wg_boxin .wg_boxinin{width: 100%; float: left; position: relative; padding:clamp(21px, 1.563vw, 30px) clamp(21px, 1.563vw, 30px) clamp(105px, 7.813vw, 150px) clamp(21px, 1.563vw, 30px); background-color:rgba(255,255,255,0.9); border-radius: clamp(14px, 1.042vw, 20px) clamp(56px, 4.167vw, 80px) clamp(14px, 1.042vw, 20px) clamp(14px, 1.042vw, 20px); transition: all 0.5s; }
	.BOX_lottie1 .wg_boxin .wg_boxinin:hover{background-color:var(--primary);}
}
@media only all and (max-width:767px) {
	.BOX_lottie1 .wg_boxin .wg_boxinin{width: 100%; min-height: 85px; float: left; position: relative; padding: 15px 70px 15px 15px; background-color:rgba(255,255,255,0.9); border-radius: 10px 30px 10px 10px; transition: all 0.5s; }
	.BOX_lottie1 .wg_boxin .wg_boxinin:hover{background-color:var(--primary);}
}

/* ===== 이미지 영역 - 우하단 절대배치 ===== */
@media only all and (min-width:768px) {
	.BOX_lottie1 .wg_boxin .wg_boxinin .wg_img1{width: clamp(50px, 8.594vw, 110px); height: clamp(50px, 8.594vw, 110px); position: absolute; right: 20px; bottom: 20px; display: flex; justify-content: center; align-items: center; padding:15px;}
}
@media all and (max-width:1280px) and (min-width:768px) {
	.BOX_lottie1 .wg_boxin .wg_boxinin .wg_img1{width: clamp(80px, 8.594vw, 110px); height: clamp(80px, 8.594vw, 110px); position: absolute; right: 5px; bottom:5px; display: flex; justify-content: center; align-items: center; padding:15px;}
}
@media only all and (max-width:767px) {
	.BOX_lottie1 .wg_boxin .wg_boxinin .wg_img1{width:60px; height:60px; position: absolute; right: 10px; bottom:10px; display: flex; justify-content: center; align-items: center; padding:10px;}
}

/* ===== 버블 데코 (PC only) - z-index:1로 아이콘 뒤에 배치 ===== */
@media only all and (min-width:768px) {
	.BOX_lottie1 .wg_boxin .wg_boxinin:first-child .wg_img1:before{content: ""; background-color: #db493d; border-radius: 50%; width: 65px; height: 65px; position: absolute; left: 0px; bottom: 0px; opacity: 0; transition: all 0.5s; -webkit-transform: scale(0); transform: scale(0); z-index: 1;}
	.BOX_lottie1 .wg_boxin .wg_boxinin:first-child .wg_img1:after{content: ""; background-color: #db493d; border-radius: 50%; width: 20px; height: 20px; position: absolute; left: 0px; top: 15%; opacity: 0; transition: all 0.5s; -webkit-transform: scale(0); transform: scale(0); z-index: 1;}

	.BOX_lottie1 .wg_boxin .wg_boxinin:nth-child(2) .wg_img1:before{content: ""; background-color: #db493d; border-radius: 50%; width: 43px; height: 43px; position: absolute; left: 10px; bottom:20%; opacity: 0; transition: all 0.5s; -webkit-transform: scale(0); transform: scale(0); z-index: 1;}
	.BOX_lottie1 .wg_boxin .wg_boxinin:nth-child(2) .wg_img1:after{content: ""; background-color: #db493d; border-radius: 50%; width: 20px; height: 20px; position: absolute; left: 0px; top: 15%; opacity: 0; transition: all 0.5s; -webkit-transform: scale(0); transform: scale(0); z-index: 1;}

	.BOX_lottie1 .wg_boxin .wg_boxinin:nth-child(3) .wg_img1:before{content: ""; background-color: #db493d; border-radius: 50%; width: 50px; height: 50px; position: absolute; left: 10px; top:5%; opacity: 0; transition: all 0.5s; -webkit-transform: scale(0); transform: scale(0); z-index: 1;}
	.BOX_lottie1 .wg_boxin .wg_boxinin:nth-child(3) .wg_img1:after{content: ""; background-color: #db493d; border-radius: 50%; width: 20px; height: 20px; position: absolute; left: -5px; bottom: 25%; opacity: 0; transition: all 0.5s; -webkit-transform: scale(0); transform: scale(0); z-index: 1;}

	.BOX_lottie1 .wg_boxin .wg_boxinin:nth-child(4) .wg_img1:before{content: ""; background-color: #db493d; border-radius: 50%; width: 50px; height: 50px; position: absolute; right:15px; top:5%; opacity: 0; transition: all 0.5s; -webkit-transform: scale(0); transform: scale(0); z-index: 1;}
	.BOX_lottie1 .wg_boxin .wg_boxinin:nth-child(4) .wg_img1:after{content: ""; background-color: #db493d; border-radius: 50%; width: 20px; height: 20px; position: absolute; left: 10px; bottom: 30%; opacity: 0; transition: all 0.5s; -webkit-transform: scale(0); transform: scale(0); z-index: 1;}

	.BOX_lottie1 .wg_boxin .wg_boxinin:hover .wg_img1:before{ opacity: 1; -webkit-transform: scale(1); transform: scale(1); }
	.BOX_lottie1 .wg_boxin .wg_boxinin:hover .wg_img1:after{ opacity: 1; -webkit-transform: scale(1); transform: scale(1); }
}

/* ===== 이미지/로티 z-index:2 (버블 위) ===== */
.BOX_lottie1 .wg_boxin .wg_boxinin .wg_img1 img{width: clamp(50px, 7.813vw, 100px); float: left; position: relative; z-index: 2; }
.BOX_lottie1 .wg_boxin .wg_boxinin .wg_img1 lottie-player{width: clamp(50px, 7.813vw, 80px); float: left; position: relative; z-index: 2; }

/* ===== 텍스트1: 영문 소제목 ===== */
@media only all and (min-width:768px) {
	.BOX_lottie1 .wg_boxin .wg_boxinin .wg_tx1{width: 100%; float: left; font-size:calc(var(--tx-sm-size) * 0.8); color: #333; line-height: 130%; margin-bottom: 5px; transition: all 0.5s; }
}
@media only all and (max-width:767px) {
	.BOX_lottie1 .wg_boxin .wg_boxinin .wg_tx1{width: 100%; float: left; font-size:calc(var(--tx-sm-size) * 0.7); color: #333; line-height: 110%; margin-bottom: 5px; transition: all 0.5s; }
}
.BOX_lottie1 .wg_boxin .wg_boxinin:hover .wg_tx1{color: #fff;}

/* ===== 텍스트2: 한글 메인 ===== */
@media only all and (min-width:768px) {
	.BOX_lottie1 .wg_boxin .wg_boxinin .wg_tx2{font-size:calc(var(--tit-mds-size) * 0.9); color: #000; letter-spacing: -1px; line-height: 130%; font-weight: 600; transition: all 0.5s; }
}
@media all and (max-width:1280px) and (min-width:768px) {
	.BOX_lottie1 .wg_boxin .wg_boxinin .wg_tx2{font-size:calc(var(--tit-mds-size) * 0.8); }
}
@media only all and (max-width:767px) {
	.BOX_lottie1 .wg_boxin .wg_boxinin .wg_tx2{font-size:calc(var(--tit-mds-size) * 0.7); color: #000; letter-spacing: -1px; line-height: 130%; font-weight: 600; transition: all 0.5s; }
}
.BOX_lottie1 .wg_boxin .wg_boxinin:hover .wg_tx2{color: #fff;}