@import url('https://webfontworld.github.io/kopus/KoPubWorldBatang.css');
        html{font-family: 'KoPubWorldBatang';}
        body{-ms-overflow-style: none;}
         ::-webkit-scrollbar {display: none;}
        
        body,h1,h2,h3,p,footer{margin: 0;padding: 0; word-break: keep-all;}
        h1{padding: auto; margin: auto; font-size: 80pt; font-weight: 700px; letter-spacing: -0.9rem}
        h3{background:darkgray; font-size: 48pt; text-align: left;}
        .wrap{width: 1400px; margin: auto; position: relative;}
        .section-with-bg1{
            background-image: url('../img/헤더배경.png');
            background-size: cover;
            position: relative;}
        .handcuff{margin-bottom: -400px; position: relative; left: 700px;}
        .background-black{background-color: black; color: white;}
        .background-white{background-color: white;}
        .textcenter{text-align: center;}
        .flex{display: flex; gap: 5%; margin: auto;}
        .flexitem{width: 40%; flex: none; margin: auto;}
        .flex1{display: flex; gap: 0%; margin: auto; width: 600px;}
        .flexitem1{width: 300px; flex: none; margin: auto;}
        .blacktowhite{background: rgb(0,0,0);
        background: linear-gradient(180deg, rgba(0,0,0,1) 0%, 
          rgba(255,255,255,1) 100%);}
        .whitetoblack{background: rgb(255,255,255);
        background: linear-gradient(180deg, rgba(255,255,255,1) 0%, 
          rgba(0,0,0,1) 100%);}
        .case{background: rgb(0,0,0);
        background: linear-gradient(180deg, rgba(0,0,0,1) 0%, 
          rgba(170,170,170,1) 100%); color: white;
        letter-spacing: 7rem; padding-bottom: 10px; font-size: 24pt;}
        .casep{color: white; margin-top: 20px; font-size: 18pt;}
        .img{width: 600px; height: auto; padding-top: 100px;}
        .lawname{font-size: 40pt; text-align: left; margin-top: -150px;}
        .law{font-size: 20pt; text-align: left; margin-top: 50px;}
        .sctx {
            overflow: hidden;
            position: relative;
            width: 100%;
            height: 70px;
            background-color: black;
            color: white;
        }
        .sctx p {
            position: absolute;
            white-space: nowrap;
            display: inline-block;
            font-size: 40px;
            font-weight: bolder;
            animation: marquee 5s linear infinite;
            animation-delay: 0.2s;
            margin: 0;
            padding-top: 15px;
        }
        @keyframes marquee {
            0% { left:100%; }
            100% { left:-100%; }
        }
        
        .action-button {
            display: block;
            width: 200px;
            background-color: #ff6666; /* 연빨강 */
            color: white;
            border: none;
            padding: 15px 30px;
            border-radius: 10px;
            font-size: 20px;
            cursor: pointer;
            text-align: center;
            text-decoration: none;
            margin: 20px auto; /* Center the button */
            transition: background-color 0.3s ease; /* 애니메이션 효과 */
        }
        
        .action-button:hover {
            background-color: red; /* 빨강 */
        }
        
        .hidden-section {
            height: 100vh;
            background-color: white;
            position: fixed;
            bottom: -100%;
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            opacity: 0;
            z-index: 2;
            transition: opacity 1s ease, bottom 1s ease;
        }
        
        .hidden-section:target {
            bottom: 0;
            opacity: 1;
        }
        
        .hidden-section .content {
            text-align: center;
            width: 80%; /* Ensures content takes the full width */
            padding: 20px; /* Adds some padding for better appearance */
        }
        
        .close-button {
            position: absolute;
            top: 20px;
            right: 20px;
            background-color: transparent;
            color: lightgray;
            font-size: 50px;
            padding: 10px;
            border-radius: 50%;
            text-align: center;
            line-height: 24px;
            text-decoration: none;
            cursor: pointer;
            transition: color 0.3s ease; /* 애니메이션 효과 */
        }
        
        .close-button:hover {
            color: darkgray;
        }

.footer-button {
    display: inline-block;
    width: 150px;
    background-color: gray; /* Button color */
    color: white;
    text-align: center;
    padding: 15px;
    border: none;
    border-radius: 10px;
    text-decoration: none;
    font-size: 18px;
    cursor: pointer;
    margin: 20px 10px; /* Margin between buttons */
    transition: background-color 0.3s ease;
}

.footer-button:hover {
    background-color: red; /* Hover color */
}

.footer-button2 {
    display: inline-block;
    width: 50px;
    background-color: gray; /* Button color */
    color: white;
    text-align: center;
    padding: 15px;
    border: none;
    border-radius: 5px;
    text-decoration: none;
    font-size: 18px;
    cursor: pointer;
    margin: 20px 10px; /* Margin between buttons */
    transition: background-color 0.3s ease;
}

.footer-button2:hover {
    background-color: red; /* Hover color */
}

footer {
    text-align: center;
    padding: 20px;
    background-color: #f1f1f1;
    margin-top: 50px;
}

.vl {
  border-left: 1px solid white;
  height: 50px;
}