.title {font-family: 'Title', Arial, Helvetica, sans-serif; font-weight: 400; line-height: 120%; color: #231f20;}
.description {color: #555; font-size: 16px; line-height: 140%;}

.home-magic .wrap {min-height: 500px; position: relative;}

.hello-section {position: absolute; top: 0; left: 0; width: 50%;}
.hello-section .wrapper {padding: 24px 24px 0 240px; box-sizing: border-box; display: flex; flex-direction: column; gap: 16px;}
.hello-section .title {font-size: 28px;}

.common-section {position: absolute; bottom: 24px; right: 0; width: 50%;}
.common-section::after {content: ''; position: absolute; top: 0; left: 0; width: 80%; height: 100%; background: linear-gradient(180deg, #EAEFE5, #C7DABB); border-radius: 24px; z-index: 1;}
.common-section .wrapper {width: 80%; padding: 24px 100px 24px 24px; box-sizing: border-box; position: relative; z-index: 2; display: flex; flex-direction: column; gap: 16px;}
.common-section .title {font-size: 18px;}
.common-section .description {color: #555; font-size: 16px;}
.common-section .launch {position: absolute; right: 0; bottom: 40px; z-index: 3;}

.count-section {position: absolute; top: 0; right: 0; display: flex; flex-direction: column; gap: 0;}
.count-section .title {font-size: 32px;}

.img-box {position: absolute; border-radius: 32px; overflow: hidden; z-index: 999; display: flex; flex-direction: row; justify-content: center;}
.img-box img {object-fit: cover; width: 80%; height: auto;}




.img-box1 {width: 200px; height: 200px;}
.img-box2 {width: 200px; height: 200px;}
.img-box3 {width: 200px; height: 200px;}
.img-box4 {width: 110px; height: 110px;}
.img-box5 {width: 90px; height: 90px;}
.img-box6 {width: 160px; height: 160px;}
.img-box7 {width: 180px; height: 180px;}
.img-box8 {width: 130px; height: 130px;}

.img-box1 {background-color: #f8e7c0;
    top: 24px; left: 0;
    animation: fly1 3s cubic-bezier(0.22,1,0.36,1) forwards;
}
.img-box2 {background-color: #ACE1ED;
    top: -40px; left: 60%;
    animation: fly2 3s cubic-bezier(0.22,1,0.36,1) 0.1s forwards;
}
.img-box3 {background-color: #D4BCD6;
    bottom: 40px; right: calc(50% + 40px);
    animation: fly3 3s cubic-bezier(0.22,1,0.36,1) 0.2s forwards;
}
.img-box4 {background-color: #94cab1;
    right: 200px; top: 120px;
    animation: fly4 3s cubic-bezier(0.42,1,0.36,1) 0.15s forwards;
}
.img-box5 {background-color: #ffd3d3;
    left: 51%; top: 120px;
    animation: fly5 3s cubic-bezier(0.22,1,0.36,1) 0.05s forwards;
}
.img-box6 {background-color: #ffb3b5;
    right: 0; top: 80px;
    animation: fly6 3s cubic-bezier(0.22,1,0.36,1) 0.25s forwards;
}
.img-box7 {background-color: #b3c2ff;
    left: 200px; bottom: -20px;
    animation: fly7 3s cubic-bezier(0.22,1,0.36,1) 0.1s forwards;
}
.img-box8 {background-color: #D3D6BC;
    left: 30px; bottom: 100px;
    animation: fly8 3s cubic-bezier(0.22,1,0.36,1) 0.2s forwards;
}

@keyframes fly1 {
    0%   { opacity: 0; transform: translate(-340px, -260px) rotate(-25deg) scale(0.4); }
    60%  { opacity: 1; }
    100% { opacity: 1; transform: translate(0, 0) rotate(0deg) scale(1); }
}
@keyframes fly2 {
    0%   { opacity: 0; transform: translate(0px, -380px) rotate(15deg) scale(0.5); }
    60%  { opacity: 1; }
    100% { opacity: 1; transform: translate(0, 0) rotate(0deg) scale(1); }
}
@keyframes fly3 {
    0%   { opacity: 0; transform: translate(260px, -300px) rotate(-18deg) scale(0.45); }
    60%  { opacity: 1; }
    100% { opacity: 1; transform: translate(0, 0) rotate(0deg) scale(1); }
}
@keyframes fly4 {
    0%   { opacity: 0; transform: translate(380px, -200px) rotate(22deg) scale(0.4); }
    60%  { opacity: 1; }
    100% { opacity: 1; transform: translate(0, 0) rotate(0deg) scale(1); }
}
@keyframes fly5 {
    0%   { opacity: 0; transform: translate(-380px, 200px) rotate(20deg) scale(0.5); }
    60%  { opacity: 1; }
    100% { opacity: 1; transform: translate(0, 0) rotate(0deg) scale(1); }
}
@keyframes fly6 {
    0%   { opacity: 0; transform: translate(-180px, 300px) rotate(-12deg) scale(0.45); }
    60%  { opacity: 1; }
    100% { opacity: 1; transform: translate(0, 0) rotate(0deg) scale(1); }
}
@keyframes fly7 {
    0%   { opacity: 0; transform: translate(200px, 360px) rotate(16deg) scale(0.4); }
    60%  { opacity: 1; }
    100% { opacity: 1; transform: translate(0, 0) rotate(0deg) scale(1); }
}
@keyframes fly8 {
    0%   { opacity: 0; transform: translate(360px, 240px) rotate(-20deg) scale(0.5); }
    60%  { opacity: 1; }
    100% { opacity: 1; transform: translate(0, 0) rotate(0deg) scale(1); }
}
@media screen and (max-width: 1480px) {
    .img-box1 {width: 180px; height: 180px;}
    .img-box2 {width: 180px; height: 180px;}
    .img-box3 {width: 200px; height: 200px; bottom: 0;}
    .img-box4 {width: 110px; height: 110px; top: 90px;}
    .img-box5 {width: 90px; height: 90px; top: 80px;}
    .img-box6 {width: 160px; height: 160px;}
    .img-box7 {width: 180px; height: 180px; left: 190px; bottom: -30px;}
    .img-box8 {width: 130px; height: 130px; bottom: 60px;}
}

@media screen and (max-width: 1300px) {
    .img-box1 {width: 180px; height: 180px;}
    .img-box2 {width: 180px; height: 180px;}
    .img-box3 {width: 200px; height: 200px; bottom: 0;}
    .img-box4 {width: 110px; height: 110px; top: 90px;}
    .img-box5 {width: 90px; height: 90px; top: 80px;}
    .img-box6 {width: 160px; height: 160px;}
    .img-box7 {width: 180px; height: 180px; left: 190px; bottom: -30px;}
    .img-box8 {width: 130px; height: 130px; bottom: 60px;}
}

@media screen and (max-width: 960px) {
    .home-magic .wrap {height: auto; display: flex; flex-direction: column; gap: 100px;}
    .img-box4, .img-box5 {display: none;}
    .img-box1 {width: 110px; height: 110px; left: initial; top: 186px; right: 12px;}
    .img-box2 {width: 90px; height: 90px; left: initial; top: 80px; right: 0;}
    .img-box6 {width: 80px; height: 80px; right: 150px; top: 220px;}
    .img-box3 {width: 120px; height: 120px; bottom: 80px; right: calc(50% - 60px);}
    .img-box8 {width: 80px; height: 80px; left: 0; bottom: 80px;}
    .img-box7 {width: 80px; height: 80px; left: initial; right: 0; bottom: 80px;}

    .hello-section {position: relative; width: 75%; left: 0; top: 0;}
    .hello-section .wrapper {padding: 0; display: flex; gap: 24px;}
    .hello-section .title {font-size: 20px;}
    .hello-section .description {width: 90%;}
    .common-section {position: relative; width: 100%; bottom: 0; right: 0; padding: 24px; box-sizing: border-box; display: flex; flex-direction: column; gap: 16px;}
    .common-section::after {width: 100%;}
    .common-section .wrapper {width: 100%; padding: 0;}
    .common-section .launch {position: relative; right: 0; bottom: 0; z-index: 3;}
    .count-section {position: relative; padding: 60px 0 0 0; text-align: center;}

}


.select-region .caption {display: flex; flex-direction: column; gap: 16px; padding: 24px 0 48px 0; text-align: center;}
.select-region .caption .title {font-size: 48px;}
.select-region .caption .description {font-size: 24px;}


@media screen and (max-width: 960px) {
    .select-region .caption {padding: 24px 0;}
    .select-region .caption .title {font-size: 32px;}
    .select-region .caption .description {font-size: 16px;}
}