@import url(basic.css);
        

        /*footer 개별 스타일*/
        footer{
            background: #E4E4E4;
            width: 100%;
        }

        footer .inner{
            max-width: 75vw;
            margin: 0 auto;
        }

        .footer_input03{
            background: #fff;
        }
        .footer_object-MENU{
            width: 200px;
            height: 200px;
            position: absolute;
            top: -150px;
            right: 0;
            background: url(images/icon/footer/menu_footerIMG.svg)no-repeat 0 0;
            background-size: 100%;
        }
        footer a, footer p{
            color: #000;
        }


        header>h1>a{
        background: url(images/icon/brand_Logo_WT.svg)no-repeat 0 0;
        }


       /*=========================
        section   01 style
        ===========================*/
        
        a, p, h2, h3{color: #fff;}
        body{background: #000;}


        .menu_01_main{
            padding: 0;
        }

        .MENUmain{
            position: relative;
            overflow: hidden;
            width: 100%;
            height: 70vh;
            display: flex;
            align-items: center;
            flex-direction: column;
            gap: 20px;
            justify-content: flex-end;
            padding-bottom: 15vh;
        }

        .main_title{
            width: max-content;
            margin: 0 auto;
        }

        .main_title, .MENUmain p{
          --animate-delay: 0.7s; 
        }
        .MENUmain h2, .MENUmain p{
            text-align: center;
            line-height: 1.65;
        }
        .MENUmain div{
            z-index: 10;
        }
        /* .MENUmain h1{
            display: block;
            margin-bottom: 200px;
        } */



        /*=========================
        section    02 style
        ===========================*/
        
        
        .series ul{
            display: flex;
            gap: 80px;
            width: 100%;
            height: max-content;
            flex-direction: column;
        }

        /* 이미지 위에 겹쳐질 그라데이션 오버레이 */
        .series_background::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 45%; /* 글자 높이(약 하단 40~50%) 위치까지 그라데이션 적용 */
            
            background: linear-gradient(
                to top, 
                rgba(0, 0, 0, 1) 0%, 
                rgba(0, 0, 0, 0.3) 60%, 
                rgba(0, 0, 0, 0) 100%
            );
        }
        .series_background{
            min-width: 100%;
            min-height: 600px;
            height: 70vh;
            position: relative;
            
        }
        .series01{background: url(images/viewmenu_series_img1.png)no-repeat 0 0; background-size: cover;}
        .series02{background: url(images//viewmenu_series_img2.png)no-repeat 0 0; background-size: cover;}
        .series03{background: url(images/viewmenu_series_img3.png)no-repeat 0 0; background-size: cover;}
        .series04{background: url(images/viewmenu_series_img4.png)no-repeat 0 0; background-size: cover;}
        .series05{background: url(images/viewmenu_series_img1.png)no-repeat 0 0; background-size: cover;}

        .open{ /*펼쳐질 내용*/
            display: none;
        }

        .series_content{
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            position: absolute;
            bottom: 0;
            padding: 50px;
            z-index: 5;

        }


        .dropdown{
            margin-top: 30px;
            display: flex;
            gap: 20px;
            height: max-content;
            align-items: center;
        }

        .dropdown div{
            width: 60px;
            height: 60px;
            background: url(images/icon/smallCTA_iconWT.svg)no-repeat 0 0;
            background-size: contain;
        }

        .dropdown p{
            font-size: 1.1em;
            font-family: 'Geist', sans-serif;
            font-weight: 700;
        }

        .series_title{
            font-size: 1.1em;
            font-weight: 600;
            margin-bottom: 8px;
            color: #fff;
        }

    













@media screen and (max-width: 1024px){

    .series_background{
        height: 40vh;
    }


    .series_content{
        padding: 25px;

    }

    .dropdown div{
        width: 40px;
        height: 40px;
    }
    
    .series ul{
        gap: 60px;
    }
}






@media screen and (max-width: 768px){
    .MENUmain{
            height: 80vh;
            padding-bottom: 30vh;
        }
    .MENUmain h2{
        line-height: 1.2;
    }

    .MENUmain p{
        font-weight: 300;
    }

        .series_background{
            min-height: 0 !important;
            height: 30vh !important;
        }
        


        .series_content{
            padding: 10px;

        }
        
        .series ul{
            gap: 30px;
        }


        .series_title{
            font-size: 14px;
            font-weight: 500;
            margin-bottom: 4px;
        }

        .series_info{
            font-size: 11px;
            width: 240px;
            font-weight: 300;
        }

        .dropdown div{
            width: 25px;
            height: 25px;
        }
        

        .dropdown{
            margin-top: 30px;
            gap: 8px;
        }

        .dropdown p{
            font-size: 16px;
            font-weight: 600;
        }

        .menu_02_series{
            padding: 0;
        }

    
    .footer_object-MENU {
        width: 90px;
        height: 90px;
        top: -63px;
        background-position: 0 0;
        background: url(images/icon/footer/menu_footerIMG.svg) no-repeat 0 0;
        background-size: 100%;
    }
   
}


/*aurora========================================================================================= */
:root {
  --bg: #000;
  --clr-1: #00c2ff;
  --clr-2: #33ff8c;
  --clr-3: #ffc640;
  --clr-4: #e54cff;

  --blur: 1rem;
  --fs: clamp(3rem, 8vw, 7rem);
  --ls: clamp(-1.75px, -0.25vw, -3.5px);
}

body{
  display: grid;
  place-items: center;
  background-color: var(--bg);
}


.aurora {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  mix-blend-mode: darken;
  pointer-events: none;
}

.aurora__item {
  overflow: hidden;
  position: absolute;
  width: 60vw;
  height: 60vw;
  background-color: var(--clr-1);
  border-radius: 37% 29% 27% 27% / 28% 25% 41% 37%;
  filter: blur(var(--blur));
  mix-blend-mode: overlay;
}

.aurora__item:nth-of-type(1) {
  top: -50%;
  animation: aurora-border 6s ease-in-out infinite,
    aurora-1 12s ease-in-out infinite alternate;
}

.aurora__item:nth-of-type(2) {
  background-color: var(--clr-3);
  right: 0;
  top: 0;
  animation: aurora-border 6s ease-in-out infinite,
    aurora-2 12s ease-in-out infinite alternate;
}

.aurora__item:nth-of-type(3) {
  background-color: var(--clr-2);
  left: 0;
  bottom: 0;
  animation: aurora-border 6s ease-in-out infinite,
    aurora-3 8s ease-in-out infinite alternate;
}

.aurora__item:nth-of-type(4) {
  background-color: var(--clr-4);
  right: 0;
  bottom: -50%;
  animation: aurora-border 6s ease-in-out infinite,
    aurora-4 24s ease-in-out infinite alternate;
}

@keyframes aurora-1 {
  0% {
    top: 0;
    right: 0;
  }

  50% {
    top: 100%;
    right: 75%;
  }

  75% {
    top: 100%;
    right: 25%;
  }

  100% {
    top: 0;
    right: 0;
  }
}

@keyframes aurora-2 {
  0% {
    top: -50%;
    left: 0%;
  }

  60% {
    top: 100%;
    left: 75%;
  }

  85% {
    top: 100%;
    left: 25%;
  }

  100% {
    top: -50%;
    left: 0%;
  }
}

@keyframes aurora-3 {
  0% {
    bottom: 0;
    left: 0;
  }

  40% {
    bottom: 100%;
    left: 75%;
  }

  65% {
    bottom: 40%;
    left: 50%;
  }

  100% {
    bottom: 0;
    left: 0;
  }
}

@keyframes aurora-4 {
  0% {
    bottom: -50%;
    right: 0;
  }

  50% {
    bottom: 0%;
    right: 40%;
  }

  90% {
    bottom: 50%;
    right: 25%;
  }

  100% {
    bottom: -50%;
    right: 0;
  }
}

@keyframes aurora-border {
  0% {
    border-radius: 37% 29% 27% 27% / 28% 25% 41% 37%;
  }

  25% {
    border-radius: 47% 29% 39% 49% / 61% 19% 66% 26%;
  }

  50% {
    border-radius: 57% 23% 47% 72% / 63% 17% 66% 33%;
  }

  75% {
    border-radius: 28% 49% 29% 100% / 93% 20% 64% 25%;
  }

  100% {
    border-radius: 37% 29% 27% 27% / 28% 25% 41% 37%;
  }
}