.cursor {
    cursor: url('cc.png') 16 16, auto;
}

.horizontal {
    background-color: #ffb4da;
    padding: 0 20px;
}

.horizontal ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex; 
}

.horizontal li a {
    display: block;
    padding: 15px 20px;
    text-decoration: none;
    color: white;
    font-weight: bold;
}

.horizontal li a:hover {
    background-color: #e591c0;
}

html {
    scroll-behavior: smooth;
}

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
font-family: Arial, sans-serif;
color: #000;
text-align: center;
background: #fff0f8;
}

.gradient-area {

background: linear-gradient(to bottom, #fff0f8 0%, #ffffff 1000px);
}


h2 {
margin-top: 100px; 
margin-bottom: 20px;
font-size: 2.5rem;
}
p {
margin-bottom: 24px;
line-height: 1.6;
}


h1 {
font-size: 5rem;
position: relative;
z-index: 2;
margin-bottom: 0;
margin-top: 300px;
}

@import url('https://fonts.googleapis.com/css2?family=Bagel+Fat+One&display=swap');


.heart1 {
width: 100%;
max-width: 300px;
width: 300px;
border-radius: 10px;
position: absolute;
top: 580px;
right: 200px;
}


.heart {
width: 100%;
max-width: 350px;
width: 350px;
border-radius: 10px;
position: absolute;
top: 550px;
left: 200px;
}

.center-img {
width: 80%;
max-width: 300px;
border-radius: 10px;
margin: 20px auto;
display: block;
}

.dog {
width: 80%;
max-width: 450px;
border-radius: 10px;
margin: 20px auto;
display: block;
}

.dots-img {
display: block;
margin: 75px auto;
width: 25px;
}


.kkk {
width: 100%;
max-width: 600px;
border-radius: 10px;
position: absolute;
top: 3500px;
left: 30px;
}


.emoji {
width: 100%;
max-width: 100px;
border-radius: 10px;
position: absolute;
top: 3700px;
left: 480px;
}

.cry{
width: 100%;
max-width: 300px;
border-radius: 10px;
position: absolute;
top: 4200px;
right: 150px;
}


.tear{
width: 100%;
max-width: 90px;
border-radius: 10px;
position: absolute;
top: 4380px;
right: 315px;
}

.레이스 {
width: 100%;
max-width: 2000px;
border-radius: 10px;
position: absolute;
top: 0px;
left: 0px;
}

.소리 {
width: 100%;
max-width: 300px;
border-radius: 10px;
position: absolute;
top: 10000px;
right: 300px;
}


.money
{
width: 100%;
max-width: 450px;
border-radius: 10px;
position: absolute;
top: 11600px;
right: 150px;
}

.car
{
width: 100%;
max-width: 500px;
border-radius: 10px;
position: absolute;
top: 11000px;
left: 100px;
}

.light
{
width: 100%;
max-width: 450px;
border-radius: 10px;
position: absolute;
top: 11200px;
left: 345px;
}

.cat
{
width: 100%;
max-width: 350px;
border-radius: 10px;
position: absolute;
top: 6700px;
left: 250px;
}
.소
{
width: 100%;
max-width: 400px;
border-radius: 10px;
position: absolute;
top: 7350px;
right: 100px;
}

.말풍선
{
width: 100%;
max-width: 300px;
border-radius: 10px;
position: absolute;
top: 7350px;
right: 450px;
}


.clock
{
width: 70%;
max-width: 200px;
margin: 20px auto;
display: block;
}

.발바닥
{
width: 100%;
max-width: 150px;
border-radius: 10px;
position: absolute;
top: 6600px;
left: 550px;
}

.발바닥2
{
width: 100%;
max-width: 120px;
border-radius: 10px;
position: absolute;
top: 6500px;
left: 450px;
}

.캔
{
width: 100%;
max-width: 300px;
border-radius: 10px;
position: absolute;
top: 8600px;
right: 100px;
}

.통조림
{
width: 100%;
max-width: 150px;
border-radius: 10px;
position: absolute;
top: 8850px;
right: 300px;
}

.통조림1
{
width: 100%;
max-width: 300px;
border-radius: 10px;
position: absolute;
top: 9000px;
left: 180px;
}

.다마고치1
{
width: 100%;
max-width: 100px;
border-radius: 10px;
position: absolute;
top: 13090px;
right: 530px;
}

.다마고치2
{
width: 100%;
max-width: 80px;
border-radius: 10px;
position: absolute;
top: 13000px;
left: 550px;
}



@keyframes fade {
0% { opacity: 0; }
100% { opacity: 1; }
}
.fade {
animation: fade 1.5s infinite alternate ease-in-out;
}

@keyframes fade {
0% { opacity: 0; }
100% { opacity: 1; }
}
.fade2 {
animation: fade 2s infinite alternate ease-in-out;
}

@keyframes shake {
0% { transform: translateX(0); }
50% { transform: translateX(5px); }
100% { transform: translateX(0); }
}
.moving {
animation: shake 0.1s infinite alternate;
}

@keyframes shake {
0% { transform: translatey(0); }
50% { transform: translatey(5px); }
100% { transform: translatey(0); }
}
.shaking {
animation: shake 1s infinite alternate;
}



.video-section {
position: relative;
width: 100%;
height: 1000px;
overflow: hidden;
margin: 60px auto;
padding:20px;
display: flex;
align-items: center;
justify-content: center;
background-color: transparent;
}


.video-section .bg-video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 0;
}

.video-section .section-content {
position: relative;
z-index: 1;
color: #fff;
text-align: center;
padding-top: 0;
}

.highlight {
color: #ff537d;
}

header {
padding-top: 0px;
padding-bottom: 0px;
height: 600px;
background-color: transparent;
}


section {
width: 100%;
margin: 0px auto;
padding: 150px 20px;
box-sizing: border-box;
background-color: transparent;
}

section:first-of-type {
padding: 100px 20px;
}

.right {
text-align: right;
max-width: 1000px;
margin: 0 auto;
line-height: 1.6;
background-color: transparent; \
}



.country-list li {
background: rgba(255, 255, 255, 0.8);
color: #000;
padding: 10px;
border-radius: 10px;
margin-bottom: 10px;
list-style: none;
}


.video-section {
padding: 100px 20px;
}


section[style*="background-color: #fff4fd;"] {
padding: 100px 20px;
background-color: #fff4fd !important;
}


.left {
text-align: left;
max-width: 1000px;
margin: 0 auto;
line-height: 1.6;
}


footer {
text-align: center;
padding: 30px 0;
color: #000;
}

.text-box {
background-color: #FF4882;
color: white;
padding: 10px 20px;
padding-bottom: 5px;
line-height: 1.2;
}

.bagel-fat-one-regular {
font-family: "Bagel Fat One", system-ui;
font-weight: 400;
font-style: normal;
}


@keyframes rotate360 { from { transform: rotateY(0deg); } to { transform: rotateY(360deg); } }

.move { animation: rotate360 2s linear infinite; }

@keyframes wave {
0% { transform: rotatez(0deg); }
50% { transform: rotatez(10deg); }
100% { transform: rotatez(0deg); }
}
.move2 {
animation: wave 1s infinite alternate;
transform-origin: 50% 100%;
}

@keyframes rotate180 { from { transform: rotatez(0deg); } to { transform: rotatez(20deg); } }

.move3 { animation: rotate180 2s linear infinite alternate; }


.artboard{
width: 100%;
max-width: 1000px;
margin: 0 auto;
}


@keyframes float {
0%, 100% {
transform: translateY(0);
}

50% {
transform: translateY(-20px);
}
}

.floating {
animation: float 2s ease-in-out infinite alternate;
}

@keyframes popup {
0% {
opacity: 0;
transform: scale(0.5) translateY(20px);
}

100% {
opacity: 1;
transform: scale(1) translateY(0);
}
}

.popup {
animation: popup 3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards infinite;
}

.popup1 {
animation: popup 3.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards infinite;
}


.qu {
    position: relative;
    width: 100%;
    min-height: 500px; 
    overflow: hidden; 
    padding: 150px 20px;
}

.qu-bg-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; 
    z-index: 0;
}

.qu .artboard {
    position: relative;
    z-index: 2; 
    
}


.qu h2 {
    color: white; 
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); 
}

@keyframes blinking {
    0% { opacity: 0; }     
    50% { opacity: 1; }   
    100% { opacity: 0; }
}

.blinking {
    animation: blinking 1s infinite; }




.simple-multi-column-footer {
    background-color: #ffb4da;
    color: #fff;
    padding: 30px 20px 15px; 
}


.footer-grid {
    text-align: center; 
    max-width: 900px;
    margin: 0 auto 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid #e591c0;
}

.col h4 {
    color: white;
    margin-bottom: 5px; 
    font-size: 1.1em;
}


.col p {
    margin: 3px 0; 
    font-size: 0.9em;
}


.footer-copyright {
    text-align: center;
    font-size: 0.8em;
    color: #fff;
    opacity: 0.8; 
    padding-top: 5px; 
}