#app{position:relative;width:100%;max-width:480px;min-height:100vh;margin:0 auto;background-color:#fff;box-shadow:0 0 20px #0000001a;overflow:hidden}.layer-c{z-index:3;position:relative}.main-section,.greetings-section{position:relative;width:100%;font-size:0;line-height:0}.main-img,.greetings-img{width:100%;height:auto;display:block}.sub-img-box{position:absolute;left:50%;opacity:0;transform:translate(-50%,-45%);-webkit-transform:translate(-50%,-45%);will-change:transform,opacity}@keyframes fadeIn{0%{opacity:0;transform:translate(-50%,-45%)}to{opacity:1;transform:translate(-50%,-50%)}}.sub-pos-1{top:22%;--percent: 102;width:calc(var(--percent) * 1vw);max-width:calc(480px * (var(--percent) / 100));animation:fadeIn 1.5s ease-out .5s forwards}.sub-pos-2{top:51%;--percent: 102;width:calc(var(--percent) * 1vw);max-width:calc(480px * (var(--percent) / 100));animation:fadeIn 1.5s ease-out 1s forwards}.sub-pos-3{top:84%;--percent: 110;width:calc(var(--percent) * 1vw);max-width:calc(480px * (var(--percent) / 100));animation:fadeIn 1.5s ease-out 1.5s forwards}.greetings-section{width:90%;max-width:90%;margin:80px auto 0}.greetings-section.animate-start .greet-pos-1{top:13%;--percent: 19;width:calc(var(--percent) * 1vw);max-width:calc(480px * (var(--percent) / 100));animation:fadeIn 1.5s ease-out .3s forwards}.greetings-section.animate-start .greet-pos-2{top:25%;--percent: 54;width:calc(var(--percent) * 1vw);max-width:calc(480px * (var(--percent) / 100));animation:fadeIn 1.5s ease-out .8s forwards}.greetings-section.animate-start .greet-pos-3{top:39%;--percent: 44;width:calc(var(--percent) * 1vw);max-width:calc(480px * (var(--percent) / 100));animation:fadeIn 1.5s ease-out 1.3s forwards}.greetings-section.animate-start .greet-pos-4{top:67%;--percent: 22;width:calc(var(--percent) * 1vw);max-width:calc(480px * (var(--percent) / 100));animation:fadeIn 1.5s ease-out 1.8s forwards}.greetings-section.animate-start .greet-pos-5{top:85%;--percent: 80;width:calc(var(--percent) * 1vw);max-width:calc(480px * (var(--percent) / 100));animation:fadeIn 1.5s ease-out 2.3s forwards}*{margin:0;padding:0;box-sizing:border-box;-webkit-text-size-adjust:100%}body{font-family:sans-serif;background-color:#f0f0f0;overflow-x:hidden}#app{position:relative;width:100%;max-width:480px;height:13100px;margin:0 auto;background-color:#fff;box-shadow:0 0 20px #0000001a;overflow:hidden}.layer{position:absolute;top:0;left:0;width:100%;height:100%}.layer-a{z-index:1;background:linear-gradient(180deg,#fcfff0,#fff,#d8edf9,#fff,#d8edf9)}.layer-b{z-index:2;pointer-events:none}.layer-c{z-index:3}.main-section{position:relative;width:100%;max-width:100%;font-size:0;line-height:0;overflow:hidden}.main-img{width:100%;height:auto;display:block}.sub-img-box{position:absolute;left:50%;height:auto;opacity:0;transform:translate(-50%,-50%);-webkit-transform:translate(-50%,-50%);will-change:transform,opacity}.sub-img-box img{width:100%;height:auto;display:block}.sub-pos-1{top:22%;--percent: 102;width:calc(var(--percent) * 1vw);max-width:calc(480px * (var(--percent) / 100));animation:fadeIn 1.5s ease-in-out .5s forwards}.sub-pos-2{top:51%;--percent: 102;width:calc(var(--percent) * 1vw);max-width:calc(480px * (var(--percent) / 100));animation:fadeIn 1.5s ease-in-out 1s forwards}.sub-pos-3{top:84%;--percent: 110;width:calc(var(--percent) * 1vw);max-width:calc(480px * (var(--percent) / 100));animation:fadeIn 1.5s ease-in-out 1.5s forwards}@keyframes fadeIn{0%{opacity:0;transform:translate(-50%,-45%);-webkit-transform:translate(-50%,-45%)}to{opacity:1;transform:translate(-50%,-50%);-webkit-transform:translate(-50%,-50%)}}.greetings-section{position:relative;width:90%;max-width:90%;font-size:0;line-height:0;overflow:hidden;margin-top:80px;margin-left:15px;margin-right:20px}.greetings-img{width:100%;height:auto;display:block}.greet-pos-1{top:17%;--percent: 20;width:calc(var(--percent) * 1vw);max-width:calc(480px * (var(--percent) / 100));animation:fadeIn 1.5s ease-in-out .5s forwards}.greet-pos-2{top:38%;--percent: 60;width:calc(var(--percent) * 1vw);max-width:calc(480px * (var(--percent) / 100));animation:fadeIn 1.5s ease-in-out 1s forwards}.greet-pos-3{top:61%;--percent: 50;width:calc(var(--percent) * 1vw);max-width:calc(480px * (var(--percent) / 100));animation:fadeIn 1.5s ease-in-out 1.5s forwards}