body { margin: 0 auto; position: relative; min-height: 100vh; }
img { vertical-align: top; }
.container { width: 100%; max-width: 768px; margin: 0 auto; padding: 0; position: relative; overflow: hidden; }
.container .ab { display: block; position: absolute; }
.container .ab.center { left: 50%; transform: translateX(-50%); }
.container .ab img { width: 100%; }
.container .ab iframe { width: 100%; }

/* 눈송이 스타일 */
.snowflake {
    position: absolute;
    top: -50px;
    animation-name: fall, sway;
    animation-timing-function: linear, ease-in-out;
    animation-iteration-count: 1, infinite;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url('../img/main/snow.png');
}

/* 아래로 떨어지는 애니메이션 */
@keyframes fall {
    0% { top: -50px; }
    100% { top: min(calc(1116/768 * 100vw), 1116px); }
}

/* 좌우 흔들림 애니메이션 */
@keyframes sway {
    0% { transform: translateX(0); }
    25% { transform: translateX(10px); }
    50% { transform: translateX(0); }
    75% { transform: translateX(-10px); }
    100% { transform: translateX(0); }
}

.con1 .ab.i1_1 { top: 127px; width: 665px; } 
.con1 .ab.t1_1 { top: 728px; width: 371px; } 
.con1 .ab.t1_2 { top: 926px; width: 495px; } 

@media screen and (max-width:768px) {
    .con1 .ab.i1_1 { top: calc(127/768*100vw); width: calc(665/768*100vw); } 
    .con1 .ab.t1_1 { top: calc(728/768*100vw); width: calc(371/768*100vw); } 
    .con1 .ab.t1_2 { top: calc(926/768*100vw); width: calc(495/768*100vw); } 
}





.con2 .ab.v1_1 { top: 80px; width: 668px; }
.con2 .ab.v1_1 iframe { height: 376px; } 

@media screen and (max-width:768px) {
    .con2 .ab.v1_1 { top: calc(80/768*100vw); width: calc(668/768*100vw); } 
    .con2 .ab.v1_1 iframe { height: calc(376/768*100vw); } 
}





.con3 .ab.t3_1 { top: 206px; left: 51px; width: 459px; }
.con3 .ab.i3_1 { top: 386px; width: 666px; }
.con3 .ab.t3_2 { top: 692px; left: 51px; width: 544px; }
.con3 .ab.t3_3 { top: 1009px; right: 51px; width: 429px; }
.con3 .ab.i3_2 { top: 1189px; width: 666px; }
.con3 .ab.t3_4 { top: 1495px; right: 51px; width: 653px; }

@media screen and (max-width:768px) {
    .con3 .ab.t3_1 { top: calc(206/768*100vw); left: calc(51/768*100vw); width: calc(459/768*100vw); }
    .con3 .ab.i3_1 { top: calc(386/768*100vw); width: calc(666/768*100vw); }
    .con3 .ab.t3_2 { top: calc(692/768*100vw); left: calc(51/768*100vw); width: calc(544/768*100vw); }
    .con3 .ab.t3_3 { top: calc(1009/768*100vw); right: calc(51/768*100vw); width: calc(429/768*100vw); }
    .con3 .ab.i3_2 { top: calc(1189/768*100vw); width: calc(666/768*100vw); }
    .con3 .ab.t3_4 { top: calc(1495/768*100vw); right: calc(51/768*100vw); width: calc(653/768*100vw); }
}





.con4 .ab.t4_1 { top: 167px; width: 528px; }
.con4 .ab.t4_2 { top: 399px; width: 643px; }
.con4 .ab.i4_1 { top: 655px; width: 668px; }
.con4 .ab.t4_3 { top: 938px; width: 487px; }

@media screen and (max-width:768px) {
    .con4 .ab.t4_1 { top: calc(167/768*100vw); width: calc(528/768*100vw); }
    .con4 .ab.t4_2 { top: calc(399/768*100vw); width: calc(643/768*100vw); }
    .con4 .ab.i4_1 { top: calc(655/768*100vw); width: calc(668/768*100vw); }
    .con4 .ab.t4_3 { top: calc(938/768*100vw); width: calc(487/768*100vw); }
}





.con5 .ab.t5_1 { top: 334px; width: 654px; }
.con5 .ab.i5_1 { top: 548px; width: 668px; }
.con5 .ab.t5_2 { top: 835.12px; width: 629px; }
.con5 .ab.i5_2 { top: 1036px; left: 191px; width: 444px; }
.con5 .ab.t5_3 { top: 1621px; width: 622px; }
.con5 .ab.t5_4 { top: 1951px; width: 627px; }
.con5 .ab.t5_5 { top: 2014px; width: 344px; }
.con5 .ab.i5_3 { top: 2141px; left: 130px; width: 458px; }
.con5 .ab.t5_6 { top: 2700px; width: 682px; }
.con5 .ab.t5_7 { top: 3063px; width: 476px; }

@media screen and (max-width:768px) {
    .con5 .ab.t5_1 { top: calc(334/768*100vw); width: calc(654/768*100vw); }
    .con5 .ab.i5_1 { top: calc(548/768*100vw); width: calc(668/768*100vw); }
    .con5 .ab.t5_2 { top: calc(835.12/768*100vw); width: calc(629/768*100vw); }
    .con5 .ab.i5_2 { top: calc(1036/768*100vw); left: calc(191/768*100vw); width: calc(444/768*100vw); }
    .con5 .ab.t5_3 { top: calc(1621/768*100vw); width: calc(622/768*100vw); }
    .con5 .ab.t5_4 { top: calc(1951/768*100vw); width: calc(627/768*100vw); }
    .con5 .ab.t5_5 { top: calc(2014/768*100vw); width: calc(344/768*100vw); }
    .con5 .ab.i5_3 { top: calc(2141/768*100vw); left: calc(130/768*100vw); width: calc(458/768*100vw); }
    .con5 .ab.t5_6 { top: calc(2700/768*100vw); width: calc(682/768*100vw); }
    .con5 .ab.t5_7 { top: calc(3063/768*100vw); width: calc(476/768*100vw); }
}





.con6 .ab.t6_1 { top: 157px; width: 580px; }
.con6 .ab.i6_1 { top: 306px; left: 50px; width: 322px; }
.con6 .ab.t6_2 { top: 630px; left: 72px; width: 275px; }
.con6 .ab.t6_3 { top: 718px; left: 50px; width: 322px; }
.con6 .ab.i6_2 { top: 306px; right: 50px; width: 322px; }
.con6 .ab.t6_4 { top: 647px; right: 50px; width: 320px; }
.con6 .ab.t6_5 { top: 718px; right: 50px; width: 322px; }
.con6 .ab.t6_6 { top: 886px; width: 682px; }
.con6 .ab.t6_7 { top: 1053px; width: 280px; }

@media screen and (max-width:768px) {
    .con6 .ab.t6_1 { top: calc(157/768*100vw); width: calc(580/768*100vw); }
    .con6 .ab.i6_1 { top: calc(306/768*100vw); left: calc(50/768*100vw); width: calc(322/768*100vw); }
    .con6 .ab.t6_2 { top: calc(630/768*100vw); left: calc(72/768*100vw); width: calc(275/768*100vw); }
    .con6 .ab.t6_3 { top: calc(718/768*100vw); left: calc(50/768*100vw); width: calc(322/768*100vw); }
    .con6 .ab.i6_2 { top: calc(306/768*100vw); right: calc(50/768*100vw); width: calc(322/768*100vw); }
    .con6 .ab.t6_4 { top: calc(647/768*100vw); right: calc(50/768*100vw); width: calc(320/768*100vw); }
    .con6 .ab.t6_5 { top: calc(718/768*100vw); right: calc(50/768*100vw); width: calc(322/768*100vw); }
    .con6 .ab.t6_6 { top: calc(886/768*100vw); width: calc(682/768*100vw); }
    .con6 .ab.t6_7 { top: calc(1053/768*100vw); width: calc(280/768*100vw); }
}