@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css");
@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css') format('woff');
    font-weight: normal;
    font-style: normal;
}

html,body {
  scroll-behavior: smooth;
}

img {
    max-width: 100% !important;
}

.service.event.detail .bbs-detail.innerfull .cont.full {
    overflow: unset !important;
}

.event-info-diy {
    margin: 0 auto;
    width: 100% !important;
}

section {    
    overflow-x: hidden;
    margin:0 auto;
    font-family: 'pretendard';
}

section .pro-container{
  position: absolute;
  width: 1140px;  
  left: 50%;
  transform: translateX(-50%);
}

section .quick-slide {
  width: 1140px;
  overflow-x: hidden;
  margin: 0 auto;
}

section .quick-slide .swiper-wrapper {
  width: 900%;
  height: auto;
}

section .quick-slide .swiper-slide {
  flex-shrink: 1;
  width: 392px;
  height: 100%;
  overflow: hidden;
  text-align: left;
}

section.section01 {
    position: relative;  
    width: 100%; 
}

section.section01 > div {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    margin: 0 auto;
}

.shake {
    position: absolute !important;
    top: 41%;
    left: 42% !important;
  -webkit-animation-name: shake;
  -webkit-animation-duration: 1.2s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  -webkit-transform-origin: 50% 100%;
}

@-webkit-keyframes shake {
  0% {
    -webkit-transform: translate(2px, 1px) rotate(0deg);
  }
  10% {
    -webkit-transform: translate(-1px, -2px) rotate(-2deg);
  }
  20% {
    -webkit-transform: translate(-3px, 0px) rotate(3deg);
  }
  30% {
    -webkit-transform: translate(0px, 2px) rotate(0deg);
  }
  40% {
    -webkit-transform: translate(1px, -1px) rotate(1deg);
  }
  50% {
    -webkit-transform: translate(-1px, 2px) rotate(-1deg);
  }
  60% {
    -webkit-transform: translate(-3px, 1px) rotate(0deg);
  }
  70% {
    -webkit-transform: translate(2px, 1px) rotate(-2deg);
  }
  80% {
    -webkit-transform: translate(-1px, -1px) rotate(4deg);
  }
  90% {
    -webkit-transform: translate(2px, 2px) rotate(0deg);
  }
  100% {
    -webkit-transform: translate(1px, -2px) rotate(-1deg);
  }
}

.festa-confetti {
  display: inline-block; position: absolute; flex: none;
  width: var(--confetti-width); max-width: 100%; aspect-ratio: var(--confetti-ratio);
  vertical-align: middle; pointer-events: none; isolation: isolate;
}
.festa-confetti__ribbon, .festa-confetti__piece, .festa-confetti__ribbon::before {
  position: absolute; display: block; inset: 0;
}
.festa-confetti__ribbon { clip-path: var(--confetti-line-clip); }
.festa-confetti__ribbon::before, .festa-confetti__piece {
  background-image: var(--confetti-image); background-repeat: no-repeat;
  background-position: center; background-size: 100% 100%;
}
.festa-confetti__ribbon::before {
  content: ""; clip-path: inset(0 100% 0 0);
  animation: festa-line-ltr var(--confetti-duration, 4s) cubic-bezier(.4, 0, .2, 1) infinite;
  animation-play-state: var(--confetti-play-state, running);
}
.festa-confetti--03 .festa-confetti__ribbon::before,
.festa-confetti--04 .festa-confetti__ribbon::before {
  clip-path: inset(0 0 0 100%); animation-name: festa-line-rtl;
}
.festa-confetti__piece {
  clip-path: var(--confetti-piece-clip); opacity: .65;
  animation: festa-piece-twinkle var(--twinkle-duration, 2.6s) ease-in-out infinite;
  animation-delay: var(--twinkle-delay, 0s);
  animation-play-state: var(--confetti-play-state, running);
}

@keyframes festa-line-ltr {
  0%, 8% { clip-path: inset(0 100% 0 0); }
  72%, 100% { clip-path: inset(0); }
}
@keyframes festa-line-rtl {
  0%, 8% { clip-path: inset(0 0 0 100%); }
  72%, 100% { clip-path: inset(0); }
}
@keyframes festa-piece-twinkle {
  0%, 100% { opacity: .4; filter: brightness(.95); }
  22% { opacity: .7; filter: brightness(1); }
  39% { opacity: 1; filter: brightness(1.7); }
  56% { opacity: .72; filter: brightness(1.1); }
  70% { opacity: .5; filter: brightness(1); }
  82% { opacity: .85; filter: brightness(1.25); }
}

.festa-confetti--01 {    
    transform: translateX(-50%);
  --confetti-image: url("https://resources.fujifilm.co.kr/upload/img/event/525/pc/con01.png");
  --confetti-width: 128px;
  --confetti-ratio: 128 / 78;
  --confetti-line-clip: polygon(evenodd, 0% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 0%, 15.2344% 35.7461%, 16.0706% 33.0017%, 20.1115% 23.7179%, 22.7485% 23.7179%, 24.4501% 25.1142%, 27.7344% 30.5037%, 27.7344% 34.8095%, 22.9598% 46.5622%, 21.2556% 49.359%, 20.1507% 49.359%, 15.2344% 41.2912%, 15.2344% 35.7461%, 0% 0%, 50.3906% 48.4524%, 54.4386% 41.8095%, 59.2567% 36.5385%, 60.2485% 36.5385%, 61.9665% 37.9482%, 66.0156% 45.9218%, 66.0156% 48.9835%, 64.3262% 51.7559%, 59.609% 58.2067%, 57.1495% 60.8974%, 54.5257% 60.8974%, 53.6147% 59.4025%, 50.3906% 52.789%, 50.3906% 48.4524%, 0% 0%);
}
.festa-confetti--01 .festa-confetti__piece--1 {
  --confetti-piece-clip: polygon(15.2344% 35.7461%, 16.0706% 33.0017%, 20.1115% 23.7179%, 22.7485% 23.7179%, 24.4501% 25.1142%, 27.7344% 30.5037%, 27.7344% 34.8095%, 22.9598% 46.5622%, 21.2556% 49.359%, 20.1507% 49.359%, 15.2344% 41.2912%);
  --twinkle-duration: 2.6s;
  --twinkle-delay: -0.40s;
}
.festa-confetti--01 .festa-confetti__piece--2 {
  --confetti-piece-clip: polygon(50.3906% 48.4524%, 54.4386% 41.8095%, 59.2567% 36.5385%, 60.2485% 36.5385%, 61.9665% 37.9482%, 66.0156% 45.9218%, 66.0156% 48.9835%, 64.3262% 51.7559%, 59.609% 58.2067%, 57.1495% 60.8974%, 54.5257% 60.8974%, 53.6147% 59.4025%, 50.3906% 52.789%);
  --twinkle-duration: 3.1s;
  --twinkle-delay: -1.13s;
}

.festa-confetti--02 {
    
    transform: translateX(-50%);
  --confetti-image: url("https://resources.fujifilm.co.kr/upload/img/event/525/pc/con02.png");
  --confetti-width: 100px;
  --confetti-ratio: 100 / 113;
  --confetti-line-clip: polygon(evenodd, 0% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 0%, 8.5% 71.577%, 9.5891% 69.6494%, 15.7929% 64.1593%, 17.2071% 64.1593%, 18.3886% 65.2048%, 20.4333% 67.9191%, 21.5% 69.807%, 21.5% 71.8154%, 19.3886% 74.6182%, 15.2071% 78.3186%, 11.7169% 78.3186%, 8.5% 73.5739%, 8.5% 71.577%, 0% 0%, 89.5% 6.0902%, 92.5891% 0.6228%, 93.7929% -0.4425%, 96.2071% -0.4425%, 99.4109% 2.3928%, 100.5% 4.3203%, 100.5% 7.1841%, 97.4109% 12.6515%, 96.2071% 13.7168%, 94.7929% 13.7168%, 92.6029% 11.7788%, 89.5% 7.2022%, 89.5% 6.0902%, 0% 0%);
}
.festa-confetti--02 .festa-confetti__piece--1 {
  --confetti-piece-clip: polygon(8.5% 71.577%, 9.5891% 69.6494%, 15.7929% 64.1593%, 17.2071% 64.1593%, 18.3886% 65.2048%, 20.4333% 67.9191%, 21.5% 69.807%, 21.5% 71.8154%, 19.3886% 74.6182%, 15.2071% 78.3186%, 11.7169% 78.3186%, 8.5% 73.5739%);
  --twinkle-duration: 2.8s;
  --twinkle-delay: -0.81s;
}
.festa-confetti--02 .festa-confetti__piece--2 {
  --confetti-piece-clip: polygon(89.5% 6.0902%, 92.5891% 0.6228%, 93.7929% -0.4425%, 96.2071% -0.4425%, 99.4109% 2.3928%, 100.5% 4.3203%, 100.5% 7.1841%, 97.4109% 12.6515%, 96.2071% 13.7168%, 94.7929% 13.7168%, 92.6029% 11.7788%, 89.5% 7.2022%);
  --twinkle-duration: 3.3s;
  --twinkle-delay: -1.54s;
}

.festa-confetti--03 {
    transform: translateX(-50%);
  --confetti-image: url("https://resources.fujifilm.co.kr/upload/img/event/525/pc/con03.png");
  --confetti-width: 83px;
  --confetti-ratio: 83 / 42;
  --confetti-line-clip: polygon(evenodd, 0% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 0%, 81.3253% 42.364%, 88.9071% 27.381%, 91.8158% 27.381%, 94.4441% 32.5749%, 96.9076% 39.8775%, 98.1928% 44.9571%, 98.1928% 52.7414%, 93.0935% 67.8571%, 88.8796% 67.8571%, 81.3253% 50.4404%, 81.3253% 42.364%, 0% 0%);
}
.festa-confetti--03 .festa-confetti__piece--1 {
  --confetti-piece-clip: polygon(81.3253% 42.364%, 88.9071% 27.381%, 91.8158% 27.381%, 94.4441% 32.5749%, 96.9076% 39.8775%, 98.1928% 44.9571%, 98.1928% 52.7414%, 93.0935% 67.8571%, 88.8796% 67.8571%, 81.3253% 50.4404%);
  --twinkle-duration: 2.5s;
  --twinkle-delay: -1.22s;
}

.festa-confetti--04 {
    transform: translateX(-50%);
  --confetti-image: url("https://resources.fujifilm.co.kr/upload/img/event/525/pc/con04.png");
  --confetti-width: 150px;
  --confetti-ratio: 150 / 138;
  --confetti-line-clip: polygon(evenodd, 0% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 0%, 19% 35.4375%, 20.3623% 31.7355%, 21.1273% 30.0725%, 22.7208% 30.0725%, 26.7945% 31.5485%, 30.8641% 33.7602%, 31.6667% 34.6325%, 31.6667% 35.566%, 30.2913% 40.0508%, 29.4714% 40.942%, 28.6126% 40.942%, 24.5554% 39.472%, 19% 37.2076%, 19% 35.4375%, 0% 0%, 71.6667% 93.3927%, 72.3927% 91.8144%, 73.1359% 91.0066%, 75.9213% 89.4928%, 77.3744% 89.4928%, 80.0933% 90.2316%, 82.1567% 90.9792%, 84.8856% 93.2039%, 85.6667% 94.0528%, 85.6667% 95.0131%, 84.2889% 98.0083%, 82.8451% 100.3623%, 81.2546% 100.3623%, 71.6667% 95.1515%, 71.6667% 93.3927%, 0% 0%);
}
.festa-confetti--04 .festa-confetti__piece--1 {
  --confetti-piece-clip: polygon(19% 35.4375%, 20.3623% 31.7355%, 21.1273% 30.0725%, 22.7208% 30.0725%, 26.7945% 31.5485%, 30.8641% 33.7602%, 31.6667% 34.6325%, 31.6667% 35.566%, 30.2913% 40.0508%, 29.4714% 40.942%, 28.6126% 40.942%, 24.5554% 39.472%, 19% 37.2076%);
  --twinkle-duration: 2.9s;
  --twinkle-delay: -1.63s;
}
.festa-confetti--04 .festa-confetti__piece--2 {
  --confetti-piece-clip: polygon(71.6667% 93.3927%, 72.3927% 91.8144%, 73.1359% 91.0066%, 75.9213% 89.4928%, 77.3744% 89.4928%, 80.0933% 90.2316%, 82.1567% 90.9792%, 84.8856% 93.2039%, 85.6667% 94.0528%, 85.6667% 95.0131%, 84.2889% 98.0083%, 82.8451% 100.3623%, 81.2546% 100.3623%, 71.6667% 95.1515%);
  --twinkle-duration: 3.2s;
  --twinkle-delay: -2.36s;
}

/* 동작 줄이기 설정에서 정지 화면을 표시 */
@media (prefers-reduced-motion: reduce) {
  .festa-confetti__ribbon::before {animation:none;clip-path:inset(0);}
  .festa-confetti__piece {animation:none;opacity:1;filter:none;}
}

.festa-confetti .festa-confetti__piece {
    animation-duration: 0.5s;
}

/* 배경 이미지가 줄어들면 부모 높이도 같은 비율로 줄어듦 */
section.section01 > div > img:first-child {
    display: block;
    width: 100%;
    height: auto;
}

/* 복 이미지: 186 ÷ 1920 × 100 */
section.section01 > div > img.shake {
    position: absolute;
    top: 43%;
    left: 42%;
    width: 9.6875%;
    height: auto;
}

/* 장식 공통: 기존 aspect-ratio와 애니메이션 유지 */
section.section01 .festa-confetti {
    position: absolute;
    height: auto;
    transform: translateX(-50%);
}

/* con01: 128 ÷ 1920 × 100 */
section.section01 .festa-confetti--01 {
    top: 48%;
    left: 73%;
    width: 6.666667%;
}

/* con02: 100 ÷ 1920 × 100 */
section.section01 .festa-confetti--02 {
    top: 31%;
    left: 72%;
    width: 5.208333%;
}

/* con03: 83 ÷ 1920 × 100 */
section.section01 .festa-confetti--03 {
    top: 53%;
    left: 28%;
    width: 4.322917%;
}

/* con04: 150 ÷ 1920 × 100 */
section.section01 .festa-confetti--04 {
    top: 30%;
    left: 27%;
    width: 7.8125%;
}

section.section02 {          
    width: 100%;
    max-width: 1920px;
    height: fit-content;
    position: sticky;
    top: 96px;
    z-index: 3;
    background-color: #60363a;
}

section.section02 > div  {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin: 0 auto;
}

section.section02 img {
    max-width: none !important;
}

section.section02 .tab-container{
    width: 100%;
    display: flex;    
    align-items: center;
    justify-content: center;
}

section.section02 a{
    width: 100%;
    height: fit-content;
    display: flex;
    justify-content: center;
    align-items: center;
}

section.section03 {
    margin: 0 auto;
    position: relative;   
}

section.section03 > div {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    margin: 0 auto;
}

.asset01,
.asset02,
.asset03,
.asset04 {
    position: absolute;
    z-index: 2;
    background-repeat: no-repeat;
    background-size: contain;
    transform-origin: center;
    animation: tilt-shaking 1s infinite linear;
    pointer-events: none;
}

.asset01 {
    background-image: url(https://resources.fujifilm.co.kr/upload/img/event/525/mo/img/main_asset01.png);
    top: 54%;
    left: 75%;
    width: 14%;
    height: auto;
    aspect-ratio: 219 / 160;
}

.asset02 {
    background-image: url(https://resources.fujifilm.co.kr/upload/img/event/525/mo/img/main_asset02.png);
    top: 30%;
    left: 0%;
    width: 14%;
    height: auto;
    aspect-ratio: 188 / 120;
}

.asset03 {
    background-image: url(https://resources.fujifilm.co.kr/upload/img/event/525/mo/img/main_asset03.png);
    top: 50%;
    left: 14%;
    width: 12%;
    height: auto;
    aspect-ratio: 247 / 287;
}

.asset04 {
    background-image: url(https://resources.fujifilm.co.kr/upload/img/event/525/mo/img/main_asset04.png);
    top: 23%;
    left: 87%;
    width: 10%;
    height: auto;
    aspect-ratio: 122 / 171;
}

@keyframes tilt-shaking {
  0% { transform: rotate(0deg); }
  25% { transform: rotate(10deg); }
  50% { transform: rotate(0deg); }
  75% { transform: rotate(-10deg); }
  100% { transform: rotate(0deg); }
}

.camera {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.camera .bottom {
    position: relative;
    width: 480px;
    height: 160px;
    border-radius: 10px 10px 30px 30px;
}

/* 이미지가 나오는 영역 */
.camera .picture {
    position: absolute;
    top: 70px;
    left: 0;
    width: 100%;
    height: 17em;
    margin: 0;
    overflow: hidden;
}

/* 영역 위에 숨겨진 이미지가 아래로 내려옴 */
.camera .picture::before {
    content: "";
    position: absolute;
    top: 0;
    left: 80px;
    width: 7em;
    height: 7em;

    background: url("https://resources.fujifilm.co.kr/upload/img/event/525/pc/main_postcard.png")
                center / contain no-repeat;

    transform: translateY(-100%);
    animation: photo-slide-down 8s ease-in-out infinite;
}

@keyframes photo-slide-down {
    0% {
        transform: translateY(-100%);
    }
    50%, 100% {
        transform: translateY(0);
    }
}

section.section03 button.goToBtn {
    position: absolute;
    width: 31.5%;
    height: 5.6%;
    left: 50%;
    top: 86.5%;
    transform: translateX(-50%);
    border-radius: 18px;
}

section.section04 {
    margin: 0 auto;
    position: relative;   
}

section.section04 > div {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    margin: 0 auto;
}

section.section04 .pro-container.pro-1{
    top: 23%;
}

section.section04 .pro-container.pro-2{
    top: 47%;
}

section.section04 .pro-container.pro-3{
    top: 71.5%;
}

section.section04 button.goToBtn {
    position: absolute;
    width: 31.3%;
    height: 1%;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 21px;
}

section.section04 button.btn-1 {
    top: 79.3%;
}

section.section04 button.btn-2 {
    top: 97.19%;
}

section.section05 {
    margin: 0 auto;
    position: relative;   
}

section.section05 > div {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    margin: 0 auto;
}

section.section05 .pro-container{
    top: 14%;
}

section.section05 button.goToBtn {
    width: 26.3%;
    height: 3.9%;
    position: absolute;
    top: 32.9%;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 100px;
}

section.section05 button.goToBtn-1 {
    width: 26.3%;
    height: 3.9%;
    position: absolute;
    bottom: 6.2%;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 100px;
}

section.section06 {
    margin: 0 auto;
    position: relative;   
}

section.section06 > div {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    margin: 0 auto;
}

section.section06 .pro-container{
    top: 17%;
}

/* 이미지 스왑 */
section .swap img {
    position: absolute !important;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    animation: swapFade 4s infinite steps(1, end);
}

section .swap img.img1 {
    opacity: 1;
    animation-delay: 0s;
}

section .swap img.img2 {
    animation-delay: 2s;
}

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

section.section04 .swap {
    position: absolute;
    overflow: hidden;
    left: 50%;
    transform: translateX(-50%);
}

section.section04 .swap-1 {    
    width: auto;
    height: 12%;
    max-width: 1297px;
    max-height: 1091px;;
    top: 9.75%;
    left: 55.4%;
    aspect-ratio: 1297 / 1091;
}

section.section04 .swap-2 {    
    width: auto;
    height: 11%;;
    max-width: 1096px;
    max-height: 998px;
    top: 34.2%;;
    left: 50%;
    aspect-ratio: 1096 / 998;
}

section.section04 .swap-3 {    
    width: auto;
    height: 12%;
    max-width: 1352px;
    max-height: 1053px;;
    top: 58.5%;
    left: 56.7%;
    aspect-ratio: 1352 / 1053;
}