body, h1, h2, h3, h4, h5 p, ul {
            margin: 0;
            padding: 0;
        }

        body {
            font-family: 'Bebas Neue', sans-serif;
            flex-direction: column; 
            align-items: center;
            font-size: 16px; 
            height: 100vh;
            background: #f0f0f0; 
        }

        h1 {
            font-size: 20rem;
            text-align: center;
            padding-top: 300px; padding-bottom: 300px;
            color: #000000;
            line-height: 1.1;
            background: ;
        }

        h2 {
            font-size: 3rem;
            padding-bottom: 40px; 
            line-height: 1.1;
        }

        h3 {
            font-family: 'Pretendard-Regular', sans-serif;
            font-size: 1rem;
            padding-bottom: 40px;
        }

        h4{
            font-family: 'Bebas Neue', sans-serif;
            font-style: normal;
            font-size: 1rem;
        }

        h5 {
            font-size: 20rem;
            text-align: center;
            line-height: 0.8;
            color: #000000;
            margin: auto;
            padding-top: 50px;
            padding-bottom: 50px;
        }

         h6 {
            font-size: 20rem;
            text-align: center;
            margin: 0;
            padding-top: 420px; padding-bottom: 0px;
            color: #000000;
            line-height: 1.1;
            background: ;
        }

        section {
            font-size: 3rem;
            text-align: left;
            padding: 20px; 
            padding-bottom: 100px;
        }

        p{
             font-family: 'Pretendard-Regular', sans-serif;
             font-size: 1rem;
             line-height: 1.3;
        }

        p2{ 
            font-size: 3rem;
            padding-bottom: 100px; 
            line-height: 1.1;}

        p3{
            font-family: 'Pretendard-Regular', sans-serif;
            font-size: 1rem;
            line-height: 1.3;
            align-self: flex-end;
        }

        p4{
            font-family: "courier-std", monospace;
            font-weight: 400;
            font-style: normal;
            font-size: 1rem;
            padding-top: 3px;
            padding-bottom: 3px;
        }

        p5{ 
            font-size: 3rem;
            padding: 30px; 
            line-height: 1.1;}

        p6{font-size: 3rem;
            line-height: 1.1;}

        section::after {
            content: "";  
            display: block; 
            height: 1px; 
            background-color: black; 
            width: 100%; 
            position: relative; 
            left: 0; 
            bottom: 0; 
        }

        footer::before {
                    content: "";  
                    display: block; 
                    height: 1px; 
                    background-color: black; 
                    width: 100%; 
                    position: relative; 
                    left: 0; 
                    bottom: 0; 
                }

        footer{margin: auto;}

        .item{width: 50%; 
            padding-bottom: 50px;
            justify-content: space-around;
            overflow: hidden;
        }

         .item2{width: 50%; 
            padding-bottom: 50px;
            text-align: right;
            justify-content: space-around;
            overflow: hidden;
        }

        .img1 {background-image: url('../img/1.png');
            height: auto;
            background-attachment: fixed;}

        .text-flow-container {
            width: 100%;
            overflow: hidden;
            position: relative;
            white-space: nowrap;
            height: 16px;
            background: #f0f0f0; 
            font-family: "courier-std", monospace;
            font-weight: 400;
            font-style: normal;
        }

        .parent {
          flex-direction: column;
          align-items: flex-end;
          height: 100%;
          padding-top: 0px;
        }

        .flow-text {
            position: absolute;
            left: 100%;
            color: black; 
            animation: flow-text 20s linear infinite;
        }

        .wrap{width: 96%; 
            margin: auto;
            padding-bottom: 50px;}

        .wrap2{width: 70%; 
            margin: auto;
            padding-bottom: 50px;
            display: block; }

        .wrap3{width: 96%; 
            margin: auto;
            padding-bottom: 400px;}

        .wrap4{width: 1100; 
            margin: auto;
            padding-bottom: 0px;}

        .flex{display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            padding-top: 50px; 
            padding-bottom: 20px;
            width: 96%;
            gap: 1%;}

        .flex2{display: flex;
            gap: 2%}

        .flex3{display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            width: 96%;
            gap: 1%}

        .flex4{display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            padding-top: 50px; 
            padding-bottom: 400px;
            width: 96%;
            gap: 1%;}    

        .flex5{display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            padding-top: 50px; 
            padding-bottom: 350px;
            width: 96%;
            gap: 1%;}



        .flex .flexitem {width:32%;}
        .flex .flexitem h4{font-size: 1rem; }
        .flex .flexitem img{width: 100%; height: auto; }

        .flex4 .flexitem {width:32%;}
        .flex4 .flexitem h4{font-size: 1rem; }
        .flex4 .flexitem img{width: 100%; height: auto; }

        .flex5 .flexitem {width:32%;}
        .flex5 .flexitem h4{font-size: 1rem; }
        .flex5 .flexitem img{width: 100%; height: auto; }

        .f1{background: url('../img/main.png'); 
            background-size: 100%;
            background-repeat: no-repeat;}

        .f2{background: url('../img/back1.png'); 
            background-attachment:fixed;
            background-position: center;
            background-size: 30%; 
            background-repeat:no-repeat;
            overflow: hidden;
        }

        .f3{background: url('../img/back2.png'); 
            background-attachment:fixed;
            background-position: center;
            background-size: 60%; 
            background-repeat:no-repeat;
            overflow: hidden;
        }

        .sticker{position: absolute;
            top: 0px; width: 30px; left: 294px; top: 176px;}
        .sticker2{position: absolute;
            top: 0px; width: 30px; left: 519px; top: 170px;}
        .sticker3{position: absolute;
            top: 0px; width: 30px; left: 635px; top: 560px;}
        .sticker4{position: absolute;
            top: 0px; width: 30px; left: 890px; top: 138px;}
        .sticker5{position: absolute;
            top: 0px; width: 30px; left: 1006px; top: 164px;}
        .sticker6{position: absolute;
            top: 0px; width: 30px; left: 1044px; top: 112px;}
        .sticker7{position: absolute;
            top: 0px; width: 30px; left: 1124px; top: 196px;}
        .sticker8{position: absolute;
            top: 0px; width: 30px; left: 1280px; top: 277px;}

        .menuflex {
            display: flex;
            justify-content: space-between;
            align-items: center;
            }

        .center{text-align: center;}

        .padbot{padding-bottom: 50px;}

        .wh{color: #ffffff;}


        .imgal{align-content: center; width: 100%;}
        .imgal2{align-content: center; width: 50%;}

        .image-container {
            position: relative;
            width: 100%;
            height: 100%;
            }

        .image-container img {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            transition: opacity 0.5s ease;
        }

        .top-image {
            opacity: 0;
        }

        .image-container:hover .top-image {
            opacity: 1;
        }

        .image-swap:hover {
            background-image: url('../img/alt1.png'); /* Image changes on hover */
        }

        .cl2{display:none; 
            background-color: #472AFF; 
            width:1200px; height:auto; 
            position:absolute; align-items: center; 
            left: 360px; top: 8100px;
            padding: 30px;}
        .cl1{text-decoration: underline;}
        .cl1:hover{color: #472AFF;}
        .cl1:hover ~ .cl2{display: block;}

        .cl4{display:none; 
            background-color: #472AFF; 
            width:800px; height:36px; 
            position:absolute; justify-content: space-around; 
            left: 560px; top: 650px}
        .cl3{text-decoration: underline;}
        .cl3:hover{color: #472AFF;}
        .cl3:hover ~ .cl4{display: block;}

        .cl6{display:none; 
            background-color: #472AFF; 
            width:800px; height:36px; 
            position:absolute; justify-content: space-around; 
            left: 560px; top: 650px}
        .cl5{text-decoration: underline;}
        .cl5:hover{color: #472AFF;}
        .cl5:hover ~ .cl6{display: block;}

        .cl8{display:none; 
            background-color: #472AFF; 
            width:800px; height:36px; 
            position:absolute; justify-content: space-around; 
            left: 560px; top: 650px}
        .cl7{text-decoration: underline;}
        .cl7:hover{color: #472AFF;}
        .cl7:hover ~ .cl8{display: block;}

        .cl10{display:none; 
            background-color: #472AFF; 
            width:800px; height:36px; 
            position:absolute; justify-content: space-around; 
            left: 560px; top: 650px}
        .cl9{text-decoration: underline;}
        .cl9:hover{color: #472AFF;}
        .cl9:hover ~ .cl10{display: block;}  

        .cl12{display:none; 
            background-color: #472AFF; 
            width:800px; height:36px; 
            position:absolute; justify-content: space-around; 
            left: 560px; top: 650px}
        .cl11{text-decoration: underline;}
        .cl11:hover{color: #472AFF;}
        .cl11:hover ~ .cl12{display: block;}      

        .cl14{display:none; 
            background-color: #472AFF; 
            width:800px; height:36px; 
            position:absolute; justify-content: space-around; 
            left: 560px; top: 650px}
        .cl13{text-decoration: underline;}
        .cl13:hover{color: #472AFF;}
        .cl13:hover ~ .cl14{display: block;} 

        .cl16{display:none; 
            background-color: #472AFF; 
            width:800px; height:36px; 
            position:absolute; justify-content: space-around; 
            left: 560px; top: 650px}
        .cl15{text-decoration: underline;}
        .cl15:hover{color: #472AFF;}
        .cl15:hover ~ .cl16{display: block;}

        .cl18{display:none; 
            background-color: #472AFF; 
            width:800px; height:36px; 
            position:absolute; justify-content: space-around; 
            left: 560px; top: 650px}
        .cl17{text-decoration: underline;}
        .cl17:hover{color: #472AFF;}
        .cl17:hover ~ .cl8{display: block;}

        .liner {line-height: 0.5;}  

        .cl20{display:none; 
            background-color: #472AFF; 
            width:1200px; height:auto; 
            position:absolute; align-items: center; 
            left: 360px; top: 10500px;
            padding: 30px;}
        .cl19{text-decoration: underline;}
        .cl19:hover{color: #472AFF;}
        .cl19:hover ~ .cl20{display: block;} 

                @font-face {
            font-family: 'Pretendard-Black';
            src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Black.woff') format('woff');
            font-weight: 900;
            font-style: normal;
        }
        @font-face {
            font-family: 'Pretendard-ExtraBold';
            src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-ExtraBold.woff') format('woff');
            font-weight: 800;
            font-style: normal;
        }
        @font-face {
            font-family: 'Pretendard-Bold';
            src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Bold.woff') format('woff');
            font-weight: 700;
            font-style: normal;
        }
        @font-face {
            font-family: 'Pretendard-Medium';
            src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Medium.woff') format('woff');
            font-weight: 500;
            font-style: normal;
        }
        @font-face {
            font-family: 'Pretendard-Regular';
            src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff') format('woff');
            font-weight: 400;
            font-style: normal;
        }
        @font-face {
            font-family: 'Pretendard-Thin';
            src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Thin.woff') format('woff');
            font-weight: 100;
            font-style: normal;
        }


        @keyframes flow-text {
            from { left: 100%; }
            to { left: -100%; }
        }

        @media (max-width: 800px) {
            h1 { font-size: 4rem; }
            section { font-size: 1rem; }
            }

        }