$(window).load(function(){
        $("#loading").fadeOut();
    });
    $(document).ready(function(){
        $('div.scroll_img a').click(function(){
            $('html, body').animate({
                scrollTop: $( $(this).attr('href') ).offset().top -100}, 1000);
                return false;
        }); 
        function move_gnd(){
            $('div.scroll_img a').animate({ 'top' : '0px' }, 1200)
            $('div.scroll_img a').animate({ 'top' : '10px' }, 1200, null, move_gnd )}
            move_gnd();
            var scrollUpDelay = 1;
            var scrollUpSpeed = 30;
            function scrollUp(){
                if(document.body.scrollTop<1){
                    return;
                }
                document.body.scrollTop=document.body.scrollTop-scrollUpSpeed;
                setTimeout('scrollUp()',scrollUpDelay);
            }
            $(window).scroll(function() {
                if($(document).scrollTop() > 300) {
                    $('#top_btn').fadeIn();
            } else {
                $('#top_btn').fadeOut();
            };
        });

        $("#top_btn").on("click", function() {
            $("html, body").animate({scrollTop:0}, 1000);
            return false;
        });
        function isElementUnderBottom(elem, triggerDiff) {
            var { top } = elem.getBoundingClientRect();
            var { innerHeight } = window;
            return top > innerHeight + (triggerDiff || 0);
        }
        function handleScroll() {
            var elems = document.querySelectorAll('.fade-in');
                elems.forEach(elem => {
                if (isElementUnderBottom(elem, -20)) {
                    elem.style.opacity = "0";
                    elem.style.transform = 'translateY(70px)';
                } else {
                    elem.style.opacity = "1";
                    elem.style.transform = 'translateY(0px)';
                }
            })
        }
        window.addEventListener('scroll', handleScroll);
        var header = $("#header");
        var windowWidth = $(window).width();
        $(".btn-gnb-open").on("click",function () {
            m_gnb_open ();
        });
        $(".btn-gnb-close").on("click",function () {
            m_gnb_close ();
        });

        $(".depth1 > li").on("mouseover", function () {
            depth2_open(this);
        });
        $(".navBox").mouseleave(function () {
            depth2_close(this);
        });

        $(".depth1 li > a").on("click",function () {
            m_depth2_open(this);
        });
        m_mode();

        $(window).resize(function () {
            if($(window).width() >= 1040 && $("#header").hasClass("m-gnb-open")) {
                m_gnb_close();
            }
            m_mode()
            if (windowWidth >= 1040) {
                $(".navBox").on("mouseleave", function () {
                    depth2_close(this);
                });
            }
        });

        function m_gnb_open() {
            windowHeight = $(window).height();
            winWidth = $(window).width();
            $("#header").addClass("m-gnb-open");
            $("body").addClass("openGnb-mode");
            $(".navi").append("<div class='gnb-bg' />");
            $(".gnb-bg").css({'width':winWidth,'height':windowHeight});
            $(window).resize(function () {
                m_mode();
                windowHeight = $(window).height();
                winWidth = $(window).width();
                $(".gnb-bg").css({'width':winWidth,'height':windowHeight}); 
            });
        }
        function m_gnb_close() {
            $("body").removeClass("openGnb-mode");
            $("#header").removeClass("m-gnb-open");
            m_depth2_close();
            $(".gnb-bg").remove(); 
            $(window).resize(function () {
                $(".gnb-bg").removeAttr("style");
            });
        }
        function m_depth2_open (el) {
            if($("#header").hasClass("m-gnb-open")) {
                if (!$(el).parent("li").hasClass("on")) {
                    $(el).parent("li").addClass("on").siblings("li").removeClass("on");
                    $(el).parent("li").siblings("li").children(".depth2").slideUp(200);
                    $(el).siblings(".depth2").slideDown(200);
                } else {
                    $(el).parent("li").removeClass("on");
                    $(el).siblings(".depth2").slideUp(200);
                }
            }
        }
        function m_depth2_close () {
            $(".depth1 li").removeClass("on");
            $(".depth2").slideUp(200).removeAttr("style");
        }
        function depth2_open (el) {
            if(!$("#header").hasClass("m-gnb-open")) {
                $(el).closest("#header").addClass("gnb-open");
            }
        }
        function depth2_close (el) {
            $(el).closest("#header").removeClass("gnb-open");
        }
        function m_mode(){
            var windowWidth = $(window).width();
            var body = $("body");
            if (windowWidth <= 1040) {
                body.addClass("m-mode")
            } else if (windowWidth > 1040) {
                body.removeClass("m-mode")
            }
        }
    });