질문 있습니다!!

Modal 창 gnb 부분에서 hover 했을때 왼쪽에서 부터 차오르는 형태로 해보고 싶어서 코딩을 했는데 의도한대로 나오지 않고 a 태그가 밑으로 자꾸 떨어집니다ㅠㅠ
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        @import url('https://fonts.googleapis.com/css?family=Montserrat:300,400,500&display=swap');
        @import url('http://fonts.googleapis.com/css?family=Monoton');
        @import url('https://fonts.googleapis.com/css?family=Raleway&display=swap');
        body {
            font-family: 'Montserrat', sans-serif;
            margin: 0;
            color: #222;
        }
        
        a {
            text-decoration: none;
            color: #222;
        }

        /* Video */
        .video-frame:before {
            content: '';
            position: absolute;
            width: 100%;
            height: 100%;
            background: linear-gradient(-135deg, rgba(30, 143, 255, 0.904), transparent);
        }

        .video-frame video {
            position: fixed;
            min-width: 100%;
            min-height: 100%;
            z-index: -1;
        }

        /* Logo */
        .logo {
            position: absolute;
            top: 50px; left: 100px;
            transition: .3s;
            cursor: pointer;
        }

        .logo.active {
            z-index: 100;
        }

        /* Header */
        .header {
            position: absolute;
            left: 100px; bottom: 100px;
            width: 800px;
            color: #fff;
            animation: show1 2s 1s linear;
            animation-fill-mode: both;
        }

        .header h1 {
            font-size: 60px;
            margin: 0;
        }

        .header h1 span {
            display: block;
            color: crimson;
        }

        .header p {
            font-size: 1.2em;
            line-height: 1.5em;
        }

        .header a {
            display: inline-block;
            text-align: center;
            color: #fff;
            border: 2px solid #fff;
            border-radius: 20px;
            padding: 10px 20px;
            width: 120px;
            margin-right: 20px;
            text-transform: uppercase;
        }

        /* .btn-book {}

        .btn-learn {} */

        .header a:hover {
            background-color: #fff;
            color: #000;
        }

        /* Anniversary */
        .anniversary {
            position: absolute;
            right: 100px;
            bottom: 50px;
            text-align: center;
            animation: show2 2s 1s linear;
            animation-fill-mode: both;
            transition: .3s;
        }

        .anniversary em {
            display: block;
            font-style: normal;
            font-size: 30px;
            letter-spacing: 5px;
        }

        .anniversary span {
            font-family: 'Monoton', sans-serif;
            font-size: 130px;
        }
        
        .anniversary.active {
            z-index: 100;
            color: #fff;
        }

        /* Trigger */
        .trigger {
            position: absolute;
            top: 50px; right: 50px;
            width: 40px;
            height: 20px;
            z-index: 100;
            cursor: pointer;
            /* border: 1px solid #000; */
        }

        .trigger span {
            position: absolute;
            width: 100%;
            height: 1px;
            background-color: #000;
            transition: .3s;
        }

        .trigger span:nth-child(1) {
            top: 0;
        }

        .trigger span:nth-child(2) {
            top: 50%;
            width: 80%;
        }

        .trigger span:nth-child(3) {
            top: 100%;
        }

        .trigger.active span {
            background-color: #fff;
        }

        .trigger.active span:nth-child(1) {
            top: 50%;
            transform: rotate(45deg);
        }

        .trigger.active span:nth-child(2) {
            opacity: 0;
        }

        .trigger.active span:nth-child(3) {
            top: 50%;
            transform: rotate(-45deg);
        }

        /* Modal */
        .modal-gnb {
            font-family: 'Raleway', sans-serif;
            position: absolute;
            left: 0; top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.788);
            display: none;
        }

        .gnb {
            position: absolute;
            left: 50%; top: 50%;
            transform: translate(-50%, -50%);
        }

        .gnb a {
            position: relative;
            display: block;
            color: #fff;
            font-size: 4em;
            padding: 10px;
            animation: gnb 2s linear;
            animation-fill-mode: both;
        }

        .gnb a:before {
            position: absolute;
            top: 0;
            left: 0;
            color: crimson;
            width: 0;
            overflow: hidden;
            content: attr(data-txt);
            /* transition: .5s; */
            padding: 10px;
            transition: .3s;
            /* border: 2px solid yellow; */
        }

        .gnb a:hover:before {
            width: 100%;
        }

        /* .gnb a:hover {
            color: crimson;
        } */

        .gnb a:nth-child(1) {
            animation-delay: .2s;
        }

        .gnb a:nth-child(2) {
            animation-delay: .4s;
        }

        .gnb a:nth-child(3) {
            animation-delay: .6s;
        }

        .gnb a:nth-child(4) {
            animation-delay: .8s;
        }

        .gnb a:nth-child(5) {
            animation-delay: 1s;
        }

        @keyframes show1 {
            0% {
                opacity: 0;
                margin-left: -150px;
            }
            100% {
                opacity: 1;
                margin-left: 0;
            }
        }

        @keyframes show2 {
            0% {
                opacity: 0;
                transform: translateX(150px);
            }
            100% {
                opacity: 1;
                transform: translateX(0);
            }
        }

        @keyframes gnb {
            0% {
                opacity: 0;
                transform: translate(-20px, -20px)
            }
            100% {
                opacity: 1;
                transform: translate(0, 0)
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="video-frame">
            <video src="images/video-sky.mp4" autoplay muted loop poster="images/video-landing-preview.png"></video>
        </div>
        <div class="logo">
            <img src="images/logo.png">
        </div>
        <div class="header">
            <h1>
                <span>Wave Ocean</span>
                The World's Ocean
            </h1>
            <p>
                The Atlantic Ocean is situated between the Americas and European/African continents. Atlantic Ocean is the second largest and saltiest ocean in the world. It resembles an S-shape between the Americas, Europe and Africa. “Atlantic” originated from the Greek god “Atlas” who carried the sky for eternity.
            </p>
            <a class="btn-book" href="#1">Book Now</a>
            <a class="btn-learn" href="#2">Learn More</a>
        </div>
        <div class="anniversary">
            <em>Anniversary</em><span>60</span>
        </div>
        <div class="trigger">
            <span></span>
            <span></span>
            <span></span>
        </div>
        <div class="modal-gnb">
            <div class="gnb">
                <a href="#1" data-txt="Attractions">Attractions</a>
                <a href="#2" data-txt="Hotels & Spa">Hotels & Spa</a>
                <a href="#3" data-txt="Shop & Dine">Shop & Dine</a>
                <a href="#4" data-txt="Celebrate">Celebrate</a>
                <a href="#5" data-txt="Promotions">Promotions</a>
            </div>
        </div>
        <div class="audio">
            <audio id="ado" src="images/piano-bgm.mp3" autoplay loop></audio>
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script>
        $(".trigger").click(function() {
            $(this).toggleClass('active')
            $(".anniversary").toggleClass('active')
            $(".logo").toggleClass('active')
            $(".modal-gnb").fadeToggle()
        })

        var ado = document.getElementById('ado');
        ado.volume = .3;
        </script>
</body>
</html>
인프런 커뮤니티 질문&답변
