/* 기본 스타일 */
        li {
            position: relative;
        }
        a {
            display: block;
            padding: 15px;
            color: white;
            text-decoration: none;
            font-size: 16px;
        }

        /* 최상위 메뉴 스타일 */
        .menu {
            background-color: rgb(50,50,50);
            margin: 0;
            padding: 0;
            text-align: center;
        }
        .menu li {
            border-bottom:1px solid #777;
        }
        /* 서브메뉴 */
        .menu li ul {
            display: none; /* 기본적으로 서브메뉴 숨기기 */
            position: absolute;
            left: 0;
            top: 100%;
            background-color: rgb(50,50,50);
            min-width: 200px;
            z-index: 100;
            border-right:1px solid #777;
        }

        /* 서브메뉴 항목들을 수직으로 나열 */
        .menu li ul li {
            display: block; /* 서브메뉴 항목을 수직으로 나열 */
        }

        /* 서브의 서브메뉴 (두 번째 단계 메뉴)는 부모 메뉴의 중간쯤에서 오른쪽으로 나타나도록 설정 */
        .menu li ul li ul {
            left: 0%; /* 부모 메뉴의 중간을 기준으로 */
            top: 0;
            transform: translateX(75%); /* 부모 메뉴의 오른쪽으로 이동 */
            background-color: rgba(0,0,0,.65);
        }

        .menu li ul li a { /*서브메뉴의 크기지정*/
            font-size: 12px;
            padding: 12px;
        }

        .menu li ul li a:hover {
            background-color: rgb(120,120,120);
        }

        @media(min-width:720px){
            /* 기본: 최상위 메뉴 항목들은 수평 배치 */
            .menu > ul > li {
                display: inline-block; /* 수평 배치 */
                position: relative;
            }
        }

        /* 'active' 클래스를 통해 서브메뉴 열기 */
        .menu li.active > ul {
            display: block; /* 서브메뉴 표시 */
        }

        /* 서브메뉴가 마우스 오버 시 표시 */
        .menu li:hover > ul {
            display: block; /* 마우스 오버 시 서브메뉴 표시 */
        }