@charset "UTF-8";

:root {
    --page-width: 750px;
}

* { box-sizing: border-box; }

html { 
	overflow-x: clip;
	scroll-behavior: smooth;
}

body {
    margin: 0;
	overflow-x: clip;
    background: #edf2f8;
    font-family: Arial, "Noto Sans KR", sans-serif;
}

img,
video {
    display: block;
    width: 100%;
}

a,
button {
    -webkit-tap-highlight-color: transparent;
}
.mt-100 {
    margin-top: 100%;
}
.mt-80 {
    margin-top: 80%;
}
.mt-60 {
    margin-top: 60%;
}
.mt-50 {
    margin-top: 50%;
}
.mt-30 {
    margin-top: 30%;
}
.mt-20 {
    margin-top: 20%;
}
.mt-10 {
    margin-top: 10%;
}
.mt-5 {
    margin-top: 5%;
}
.mb-150 {
    margin-bottom: 150%;
}
.mb-100 {
    margin-bottom: 10%;
}
.mb-80 {
    margin-bottom: 80%;
}
.mb-60 {
    margin-bottom: 60%;
}
.mb-50 {
    margin-bottom: 50%;
}
.mb-30 {
    margin-bottom: 30%;
}
.mb-20 {
    margin-bottom: 20%;
}
.mb-10 {
    margin-bottom: 10%;
}
.mb-5 {
    margin-bottom: 5%;
}

.pt-100 {
    padding-top: 100%;
}
.pt-80 {
    padding-top: 80%;
}
.pt-60 {
    padding-top: 60%;
}
.pt-50 {
    padding-top: 50%;
}
.pt-30 {
    padding-top: 30%;
}
.pt-25 {
    padding-top: 25%;
}
.pt-20 {
    padding-top: 20%;
}
.pt-15 {
    padding-top: 15%;
}
.pt-10 {
    padding-top: 10%;
}
.pt-5 {
    padding-top: 5%;
}
.pb-150 {
    padding-bottom: 150%;
}
.pb-100 {
    padding-bottom: 100%;
}
.pb-80 {
    padding-bottom: 80%;
}
.pb-60 {
    padding-bottom: 60%;
}
.pb-50 {
    padding-bottom: 50%;
}
.pb-30 {
    padding-bottom: 30%;
}
.pb-20 {
    padding-bottom: 20%;
}
.pb-10 {
    padding-bottom: 10%;
}
.pb-5 {
    padding-bottom: 5%;
}
.margin-auto{
	margin: auto;
}
.landing-wrap {
	position: relative;
    width: 100%;
    max-width: var(--page-width);
    margin: 0 auto;
    overflow: visible;
    background: #fff;
}

.landing-section {
    position: relative;
    width: 100%;
}

.image-link {
    display: block;
}

.image-link img {
    width: 100%;
}

/* GATE : MP4 ~ YouTube */
.gate {
    background: url("../images/gate_01/gate_img.mp4") center top / 100% auto no-repeat;
}
.gate__video {
    width: 100%;
    height: auto;
/*    aspect-ratio: 750 / 1334;*/
    object-fit: cover;
	position: absolute;
	z-index: 1;
}
.gate__visual {
	position: relative;
	width: 100%;
	max-width: 750px;
	margin: 0 auto;
	overflow: hidden;
	z-index: 1;
	background: #3a83d2;
}
.gate__btm {
    width: 100%;
	position: relative;
	z-index: 10;
}
.gate__contents {
	position: absolute;
	inset: 0;
	display: flex;
	align-content: flex-start;
	align-items: center;
	flex-wrap: wrap;
	z-index: 3;
	pointer-events: none;
	max-width: 750px;
}
.gate__btm-txt {
	position: relative;
	width: 100%;
	height: auto;
	top: 59%;
}
.gate__btm-drop {
	position: relative;
	width: 100%;
	height: auto;
	top: 34%;
	    /*
     * 움직임 렌더링 최적화
     */
    will-change: transform, opacity;
    transform-origin: center center;
    pointer-events: none;
}
.gate__btm-title {
	position: relative;
	width: 100%;
	height: auto;
	top: 38%;
	
    /*
     * 움직임 렌더링 최적화
     */
    will-change: transform;
    transform: translate3d(0, 0, 0);
}
/*
 * Gate 하단 타이틀 부유 애니메이션
 * 위 → 아래 → 반동 → 위
 */
.gate__btm-title.is-floating {
    animation:
        gate-title-float 2.8s
        cubic-bezier(0.45, 0, 0.25, 1)
        infinite;
}

@keyframes gate-title-float {
    /*
     * 시작: 위쪽
     */
    0% {
        transform: translate3d(0, -8px, 0);
    }

    /*
     * 아래로 내려옴
     */
    42% {
        transform: translate3d(0, 10px, 0);
    }

    /*
     * 아래쪽에서 살짝 위로 반동
     */
    55% {
        transform: translate3d(0, 6px, 0);
    }

    /*
     * 다시 살짝 내려가며 반동 마무리
     */
    66% {
        transform: translate3d(0, 9px, 0);
    }

    /*
     * 원래 위쪽으로 복귀
     */
    100% {
        transform: translate3d(0, -8px, 0);
    }
}
/*
 * Gate 중간 물방울
 * 천천히 떠오르며 미세하게 좌우 이동
 */
.gate__btm-drop.is-drop-bubble {
    animation:
        gate-drop-bubble 6.8s
        ease-in-out
        infinite;
}

@keyframes gate-drop-bubble {
    0%,
    100% {
        transform:
            translate3d(0, 4px, 0)
            scale(0.99);
        opacity: 0.92;
    }

    25% {
        transform:
            translate3d(2px, -2px, 0)
            scale(1.005);
        opacity: 1;
    }

    50% {
        transform:
            translate3d(-2px, -7px, 0)
            scale(1.012);
        opacity: 0.98;
    }

    75% {
        transform:
            translate3d(1px, -3px, 0)
            scale(1.004);
        opacity: 1;
    }
}
.youtube-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 750 / 422;
    overflow: hidden;
    background: #1f1f1f;
}
.youtube-wrap {
	position: relative;
	width: 100%;
	aspect-ratio: 16/9;
}
.youtube-wrap iframe,
.youtube-wrap #youtubePlayer,
.youtube-poster {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.youtube-poster {
    z-index: 1;
    object-fit: cover;
}

.youtube-play {
    position: absolute;
    z-index: 2;
    left: 50%;
    top: 50%;
    width: 62px;
    height: 62px;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, .7);
    transform: translate(-50%, -50%);
    cursor: pointer;
}

.youtube-play::after {
    content: "";
    position: absolute;
    left: 26px;
    top: 19px;
    border-left: 20px solid #fff;
    border-top: 12px solid transparent;
    border-bottom: 12px solid transparent;
}

/* NAV */
.landing-nav {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 9999;

    display: grid;
    grid-template-columns: repeat(5, 1fr);

    width: 100%;
    max-width: 750px;
    margin: 0 auto;
	
/*
	transform: translateZ(0);
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
*/
}

.nav-item {
	
	position: relative;
    display: block;
    overflow: hidden;
	z-index: 1;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;

    box-shadow:
        0 4px 5px 2px rgba(0, 0, 0, 0.09),
        0 4px 5px 2px rgba(0, 0, 0, 0.04);

    transition:
        box-shadow 0.25s ease,
        transform 0.25s ease;
}

.nav-item img {
	display: block;
    width: 100%;
    transition: opacity 0.16s ease;
}

.nav-default {
    position: relative;
    z-index: 1;
    opacity: 1;
}

.nav-active {
    position: absolute;
    z-index: 2;
    inset: 0;
    opacity: 0;
}
.nav-item.is-active {
    z-index: 2;
}
/* 현재 활성화된 메뉴 */
.nav-item.is-active .nav-default {
    opacity: 0;
}

.nav-item.is-active .nav-active {
    opacity: 1;
}

/* 마우스를 사용하는 PC 환경에만 hover 적용 */
@media (hover: hover) and (pointer: fine) {
    .nav-item:hover .nav-default,
    .nav-item:focus-visible .nav-default {
        opacity: 0;
    }

    .nav-item:hover .nav-active,
    .nav-item:focus-visible .nav-active {
        opacity: 1;
    }

    .nav-item:hover {
        z-index: 3;

        box-shadow:
            0 8px 16px rgba(0, 0, 0, 0.12),
            0 3px 6px rgba(0, 0, 0, 0.06);
    }
}

/* 네비게이션에 섹션 상단이 가리지 않도록 보정 */
#section01,
#section02,
#section03,
#section04,
#section05,
#section06 {
    scroll-margin-top: var(--nav-height, 0px);
}

/* SECTION 01 */
.section01 {
    overflow: hidden;
/*    padding: 8% 8% 8%;*/
    background: url("../images/gate_02/event_01_background.png") center top / 100% auto no-repeat;
	margin-top: -10%;
}

.section01__event-num {
    width: 37%;
}

.section01__title {
	position: relative;
    width: 100%;
    margin: auto;
	padding-top: 16%;
	will-change: transform;
	transform-origin: center center;
}
/*
 * SECTION01 타이틀
 * 물 위에 떠있는 듯한 미세한 흔들림
 */
.section01__title.is-title-float{
    animation:
        section01-title-float 5.2s ease-in-out infinite;
}

@keyframes section01-title-float{

    /* 시작 */
    0%{
        transform:
            scale(1);
    }

    /* 다시 원위치 */
    50%{
        transform:
            rotate(0.3deg)
            scale(1.02);
    }

    /* 종료 */
    100%{
        transform:
            scale(1);
    }
}

.section01__sub-title {
/*	padding-top: 10%;*/
	width: 100%;
}

.section01__card {
    position: relative;
    width: 85%;
    margin: 20% auto 13% auto;
	z-index: 3;
}
.section01__event_bg {
    position: absolute;
    z-index: 0;

    top: 0;
    left: 0;

    width: 100%;
    height: auto;

    object-fit: fill;
    pointer-events: none;
}
/* 흰색 배경 위에 올라가는 요소 묶음 */
.section01__card-content {
    position: relative;
    z-index: 1;

    display: flex;
    flex-direction: column;
    align-items: center;

    width: 100%;
/*	gap: 100px;*/
    /* 흰색 배경 내부 위·아래 여백 */
    padding: 15% 0;
}
.section01__txt-top,
.section01__txt-btm{
    width: 100%;
}
.section01__img {
    width: 85%;
}
.section01__ticket-btn {
    width: 80%;
}

.section01__btm {
    width: 100%;
}

.section01__top_obj {
	position: absolute;
	top: 4%;
	opacity: 0.7;
}
.section01__top_obj-move {
	position: absolute;
	top: 3.5%;

    z-index: 1;
    pointer-events: none;

    transform-origin: 50% 65%;
    will-change: transform, opacity;
}
.ticket-btn-list {
	width: 90%;
	display: flex;
	gap: 3%;
}
/*
 * SECTION 01 상단 선물 강조 모션
 * 대기 → 위로 팝업 → 미세 반동 → 제자리 → 대기
 */
.section01__top_obj-move.is-gift-pop {
    animation: section01-gift-pop 4.2s ease-in-out infinite;
}

@keyframes section01-gift-pop {
    /* 기본 대기 */
    0%,
    24% {
        opacity: 0.92;
        transform:
            translate3d(0, 0, 0)
            scale(1)
            rotate(0deg);
    }

    /* 살짝 위로 떠오름 */
    34% {
        opacity: 1;
        transform:
            translate3d(0, -4px, 0)
            scale(1.018)
            rotate(-0.3deg);
    }

    /* 아주 약한 반동 */
    42% {
        transform:
            translate3d(0, -2px, 0)
            scale(1.008)
            rotate(0.15deg);
    }

    /* 제자리 복귀 */
    52%,
    100% {
        opacity: 0.92;
        transform:
            translate3d(0, 0, 0)
            scale(1)
            rotate(0deg);
    }
}

/* SECTION 02 */
.section02 {
    overflow: hidden;
/*    padding: 8% 8% 10%;*/
/*	gap: 100px;*/
    padding: 17% 0 0 0;
}
.section02__leaf-l,
.section02__leaf-ll,
.section02__leaf-r{
    will-change: transform;
}
.section02__leaf-l{
    transform-origin: 15% 85%;
}

.section02__leaf-ll{
    transform-origin: 20% 90%;
}

.section02__leaf-r{
    transform-origin: 85% 80%;
}
/*나뭇잎 흔들리는 효과 시작*/
.section02__leaf-l.is-leaf-float-1{
    animation:
        leafWind01 5.8s ease-in-out infinite;
}

@keyframes leafWind01{

    0%,60%,100%{
        transform:rotate(0deg);
    }

    70%{
        transform:translateY(-2px) rotate(-2.5deg);
    }

    80%{
        transform:translateY(-1px) rotate(1deg);
    }

    90%{
        transform:rotate(-0.4deg);
    }
}
.section02__leaf-ll.is-leaf-float-2{
    animation:
        leafWind02 5.1s ease-in-out infinite;
}

@keyframes leafWind02{

    0%,55%,100%{
        transform:rotate(0deg);
    }

    66%{
        transform:rotate(2deg);
    }

    76%{
        transform:translateY(-2px) rotate(-0.8deg);
    }

    86%{
        transform:translateY(-1px) rotate(0.3deg);
    }
}
.section02__leaf-r.is-leaf-float-3{
    animation:
        leafWind03 6.4s ease-in-out infinite;
}

@keyframes leafWind03{

    0%,62%,100%{
        transform:rotate(0deg);
    }

    72%{
        transform:translateY(-2px) rotate(2.2deg);
    }

    82%{
        transform:translateY(-1px) rotate(-0.9deg);
    }

    90%{
        transform:rotate(0.35deg);
    }
}
.section02__content {
    position: relative;
    z-index: 1;

    display: flex;
    flex-direction: column;
    align-items: center;

    width: 100%;
/*	gap: 100px;*/
}
.section02__event-num {
    width: 30%;
}

.section02__txt-top{
    width: 100%;
}
.section02__txt-btm{
    width: 100%;
}
.section02__img {
    width: 100%;
}

/* EVENT 02 참여 방법 슬라이드 */
.section02__steps-wrap {
    position: relative;
    width: 100%;
}
.section02__steps {
    display: flex;
    gap: 2.5%;

    width: 84%;
    margin: 0 auto;

    overflow-x: auto;
    overflow-y: hidden;

    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;

    cursor: grab;

    scrollbar-width: none;
    -ms-overflow-style: none;

    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
}

.section02__steps::-webkit-scrollbar {
    display: none;
}

.section02__steps.is-dragging {
    cursor: grabbing;
    scroll-behavior: auto;
    scroll-snap-type: none;
}

.section02__steps .steps-slide {
    flex: 0 0 72%;
    width: 100%;
    height: auto;

    scroll-snap-align: center;
    scroll-snap-stop: always;

    user-select: none;
    -webkit-user-drag: none;
    pointer-events: none;
}
.steps-arrow {
    position: absolute;
    z-index: 5;
    top: 50%;

    width: 8%;
    max-width: 60px;
    min-width: 36px;
    aspect-ratio: 1 / 1;

    padding: 0;
    border: 0;
    background: transparent;

    transform: translateY(-50%);
    cursor: pointer;

    transition:
        opacity 0.2s ease,
        transform 0.2s ease;
}
.steps-arrow img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;

    user-select: none;
    -webkit-user-drag: none;
    pointer-events: none;
}
.steps-arrow--prev {
    left: 10%;
	top: 55%;
}
.steps-arrow--next {
    right: 10%;
	top: 55%;
}
/* 첫 장의 이전 버튼 / 마지막 장의 다음 버튼 숨김 */
.steps-arrow:disabled {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    cursor: default;
}
/* 너무 갑자기 나타나거나 사라지지 않게 함*/
.steps-arrow {
    transition:
        opacity 0.2s ease,
        transform 0.2s ease;
}
.section02__ticket-btn {
    width: 60%;
}

.section02__btm {
    width: 100%;
    margin-top: 11%;
}


.deco {
    position: absolute;
    pointer-events: none;
}
/*
 * CTA 버튼 선택 유도 모션
 * 대기 → 살짝 확대 → 눌림 → 복귀
 */
.section01__ticket-btn-jeju,
.section01__ticket-btn-yeosu,
.section01__ticket-btn-ilsan,
.section01__ticket-btn-gwanggyo,
.section02__ticket-btn {
    position: relative;
    will-change: transform, filter;
    transform-origin: center center;
}

.section01__ticket-btn-jeju.is-cta-pulse,
.section01__ticket-btn-yeosu.is-cta-pulse,
.section01__ticket-btn-ilsan.is-cta-pulse,
.section01__ticket-btn-gwanggyo.is-cta-pulse,
.section02__ticket-btn.is-cta-pulse {
    animation:
        ticket-btn-pulse 3.8s
        cubic-bezier(0.4, 0, 0.2, 1)
        infinite;
}

@keyframes ticket-btn-pulse {
    0%,
    68%,
    100% {
        transform: scale(1);
        filter: drop-shadow(0 0 0 rgba(0, 0, 0, 0));
    }

    74% {
        transform: scale(1.025);
        filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.12));
    }

    80% {
        transform: scale(0.985);
        filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.08));
    }

    86% {
        transform: scale(1.012);
        filter: drop-shadow(0 4px 7px rgba(0, 0, 0, 0.1));
    }

    92% {
        transform: scale(1);
        filter: drop-shadow(0 0 0 rgba(0, 0, 0, 0));
    }
}

.section01__balloon { right: 2%; top: 18%; width: 18%; }
.section01__drop-01 { left: 0; top: 16%; width: 14%; }
.section01__drop-02 { right: 0; top: 27%; width: 16%; }

.section02__leaf-l { left: 0; top: 3%; width: 18%; }
.section02__leaf-ll { left: 0%; top: 0%; width: 26%; }
.section02__leaf-r { right: 0; top: 1%; width: 27%; }
.section02__drop-03 { left: 3%; bottom: 2%; width: 16%; }

/* SECTION 03~06 */

.section03 {
    background: url("../images/sec_03/background.png") center top / cover no-repeat;
	width: 100%;
	height: auto;
}

.section03__main-title {
    position: relative;
	width: 90%;
	padding-top: 18%;
    transform-origin: center center;
    will-change: transform;
}
/*
----------------------------------------
SECTION03 MAIN TITLE
숨쉬는 듯한 미세 확대
----------------------------------------
*/

.section03__main-title.is-breath{
    animation:
        section03-main-title-breath 5.8s ease-in-out infinite;
}

@keyframes section03-main-title-breath{

    0%,
    100%{
        transform:
            scale(1)
            rotate(0deg);
    }

    25%{
        transform:
            scale(1.004)
            rotate(-0.05deg);
    }

    50%{
        transform:
            scale(1.012)
            rotate(0.08deg);
    }

    75%{
        transform:
            scale(1.006)
            rotate(-0.03deg);
    }

}
.section03__main-txt {
    width: 100%;
	padding-top: 10%;
}
.section03__drop {
	left: 0%;
	top: 2%;
	width: 100%;
	
	transform-origin: center center;
    will-change: transform, opacity;
}
/*
 * SECTION03 물방울 부유 모션
 */
.section03__drop.is-drop-float {
    animation:
        section03-drop-float 7.2s
        ease-in-out
        infinite;
}

@keyframes section03-drop-float {
    0%,
    100% {
        transform:
            translate3d(0, 0, 0)
            scale(1);
        opacity: 0.96;
    }

    25% {
        transform:
            translate3d(2px, -4px, 0)
            scale(1.004);
        opacity: 1;
    }

    50% {
        transform:
            translate3d(-2px, -7px, 0)
            scale(1.008);
        opacity: 0.98;
    }

    75% {
        transform:
            translate3d(1px, -3px, 0)
            scale(1.003);
        opacity: 1;
    }
}

.section04 {
    background: url("../images/sec_04/background.png") center top / cover no-repeat;
	width: 100%;
	height: auto;
}

.section05 {
    background: url("../images/sec_05/background.png") center top / cover no-repeat;
	width: 100%;
	height: auto;
}

.section06 {
    background: url("../images/sec_06/background.png") center top / cover no-repeat;
	width: 100%;
	height: auto;
}
.branch-inner {
	width: 100%;
	padding: 6% 0;
}
.branch-title {
    width: 48%;
    margin: 0 auto 3%;
}
.branch-sub-title {
    width: 95%;
    margin: 3% 0 4% auto;
}
/* 지점 배너 스와이프 */
.branch-swipe {
    display: flex;
    gap: 2.5%;

    width: 100%;
    padding: 0 5% 2% 5%;
	padding-right: 0;

    overflow-x: auto;
    overflow-y: hidden;

    scroll-snap-type: none;
    scroll-behavior: smooth;

    touch-action: pan-y;
    cursor: grab;

    scrollbar-width: none;
    -ms-overflow-style: none;
    overscroll-behavior-x: contain;
}

.branch-swipe::-webkit-scrollbar {
    display: none;
}

.branch-swipe.is-dragging {
    cursor: grabbing;
    scroll-behavior: auto;
}

.branch-swipe .branch-banner {
    /* 1~3번 이미지: 원본 730px ÷ 기준 750px */
    --slide-width: 97.333333%;

    flex: 0 0 var(--slide-width);
    width: var(--slide-width);
    max-width: none;
    height: auto;

    margin: 0;

    scroll-snap-align: start;
    scroll-snap-stop: always;

    user-select: none;
    -webkit-user-drag: none;
    pointer-events: none;
}

/* 4번 이미지는 원본 가로가 710px */
.branch-swipe .branch-banner:last-child {
    --slide-width: 94.666667%;
}
.branch-txt-btm {
    width: 78%;
/*    margin: 0 auto 5%;*/
	left: 5%;
}

/*
.branch-banner {
   height: auto;
}
*/

.branch-ticket-btn {
    width: 80%;
    margin: 10% auto;
}

.branch-gift-title {
    width: 32%;
    margin: 8% auto 4%;
}

.sec-drop-01 { left: 0; top: 7%; width: 15%; }
.sec-drop-02 { right: 0; top: 24%; width: 15%; }
.sec-paper-01 { left: 0; bottom: 12%; width: 20%; }
.sec-paper-01-fade { left: 0; bottom: 2%; width: 20%; }
.sec-paper-02 { right: 0; bottom: 18%; width: 22%; }
.sec-paper-02-fade { right: 0; bottom: 4%; width: 22%; }

.landing-footer img { width: 100%; }

@media (max-width: 480px) {
    .branch-section { min-height: 620px; }

    .youtube-play {
        width: 52px;
        height: 52px;
    }

    .youtube-play::after {
        left: 22px;
        top: 16px;
        border-left-width: 17px;
        border-top-width: 10px;
        border-bottom-width: 10px;
    }
	.steps-arrow {
    width: 36px;
    height: 36px;
}

.steps-arrow span {
    width: 9px;
    height: 9px;

    border-top-width: 2px;
    border-right-width: 2px;
}
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    .gate__btm-title.is-floating {
        animation: none;
        transform: none;
    }
	.section01__top_obj-move.is-gift-pop {
    	animation: none;
    	opacity: 1;
    	transform: none;
	}
	.section03__drop.is-drop-float {
    	animation: none;
    	transform: none;
    	opacity: 1;
	}
}
.deco_wrap {
    position: absolute;
    inset: 0;
    pointer-events: none;
}
/*물방울 데코*/
.deco__drop-l { left: 2%; top: 29%; width: 20%; z-index: 99;}
.deco__drop-r { right: 2%; top: 29.6%; width: 10%; z-index: 99;}
.deco__drop-rr { right: 2%; top: 44.2%; width: 15%; z-index: 99;}
.deco__drop-rrr { right: 9%; top: 47.8%; width: 13%; z-index: 99;}
.deco__drop-rrrr { right: 9%; top: 58%; width: 13%; z-index: 99;}
.deco__drop-ll { left: 2%; top: 61%; width: 13%; z-index: 99;}
/*배경지정*/
.footer-btn {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 24%;
	display: block;
	z-index: 10;
}

/* GATE */
.gate{
    background:url("../images/gate_01/background.png") center top no-repeat;
    background-size:100% auto;
}

/* SECTION01 */
.section01{
    background:url("../images/sec_01/background.png") center top no-repeat;
    background-size:100% auto;
}

/* SECTION02 */
.section02{
    background:url("../images/sec_02/background.png") center top no-repeat;
    background-size:100% auto;
}

/* SECTION03 */
.section03{
    background:url("../images/sec_03/background.png") center top no-repeat;
    background-size:100% auto;
}

/* SECTION04 */
.section04{
    background:url("../images/sec_04/background.png") center top no-repeat;
    background-size:100% auto;
	background-color: #4434da;
}

/* SECTION05 */
.section05{
    background:url("../images/sec_05/background.png") center top no-repeat;
    background-size:100% auto;
	background-color: #2071fd;
}

/* SECTION06 */
.section06{
    background:url("../images/sec_06/background.png") center top no-repeat;
    background-size:100% auto;
	background-color: #4434da;
}
/*
 * 스크롤 진입 Fade-Up
 */
.scroll-reveal {
    opacity: 0;
    translate: 0 24px;

    transition:
        opacity 0.75s ease,
        translate 0.85s cubic-bezier(0.22, 1, 0.36, 1);

    transition-delay: var(--reveal-delay, 0ms);
}

.scroll-reveal.is-revealed {
    opacity: 1;
    translate: 0 0;
}
.branch-ticket-btn.scroll-reveal {
    translate: 0 12px;
}

.branch-ticket-btn.scroll-reveal.is-revealed {
    translate: 0 0;
}
.branch-swipe.scroll-reveal {
    translate: 18px 0;
}

.branch-swipe.scroll-reveal.is-revealed {
    translate: 0 0;
}
@media (prefers-reduced-motion: reduce) {
    .scroll-reveal,
    .scroll-reveal.is-revealed {
        opacity: 1;
        translate: none;
        transition: none;
    }

    .branch-swipe.is-hinting {
        scroll-behavior: auto;
    }
}