/* ****************** HTML 편집기  ****************** */

.html_459751_ {overflow:hidden;}
.html_459751_:after {content:''; display:block; clear:both;}

        /* ─── Reset & 기본 설정 ─── */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Nanum Gothic', sans-serif;
            background-color: #f4f4f4;
            color: #333;
        }

        /* ─── Hero 배너 ─── */
        .hero {
            position: relative;
            background: #0054a6;
            color: #fff;
            text-align: center;
            padding: 80px 20px;
            overflow: hidden;
        }

        .hero::before,
        .hero::after {
            content: "";
            position: absolute;
            width: 200%;
            height: 200%;
            top: -50%;
            left: -50%;
            z-index: 0;
            background: rgba(0, 84, 166, 0.8);
        }

        .hero::before {
            transform: rotate(45deg);
        }

        .hero::after {
            background: rgba(66, 149, 245, 0.6);
            transform: rotate(-45deg);
        }

        .hero .inner {
            position: relative;
            z-index: 1;
            max-width: 800px;
            margin: 0 auto;
        }

        .hero h1 {
            font-size: 2.5rem;
            margin-bottom: 12px;
            font-weight: bold;
        }

        .hero p {
            font-size: 1rem;
            opacity: 0.9;
        }

        /* ─── 프로필 카드 ─── */
        .wrapper {
            max-width: 1200px;
            margin: 40px auto;
            background: #fff;
            border: 1px solid #ddd;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
        }

        .content {
            padding: 40px;
            text-align: center;
        }

        .dept-content {
            display: none; /* JS 실행 전 기본 숨김 */
        }

        /* JS가 실패하거나 URL 파라미터가 없을 때 기본적으로 첫 번째 프로필을 보여줍니다. */
        #content-dept1 {
            display: block;
        }

        .dept-content img {
            /* 이미지가 컨테이너를 벗어나지 않도록 max-width를 사용합니다. */
            max-width: 100%;
            height: auto;
            border-radius: 4px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
            vertical-align: middle; /* 이미지 하단 공백 제거 */
        }

        /* ─── 반응형 ─── */
        @media (max-width: 768px) {
            .content {
                padding: 20px;
            }
        }

        @media (max-width: 600px) {
            .hero h1 {
                font-size: 2rem;
            }
        }