<script src="https://code.jquery.com/jquery-latest.min.js"></script>
    <script src="../../../sys_swiper_cdn/swiper-bundle.min.js"></script>
    <script>
        $(window).on('scroll resize', function(){
            animate();
        });
      
        $(document).ready(function(){
            resizekeyvisualMain();
            $(window).resize(resizekeyvisualMain);

            $('#key_visual .swiper-slide').each(function(index){
                var index = index+1, 
                url = $(this).find('.box-image img').attr('src');
                $(this).find('.box-image').css('background-image', 'url('+url+')');
                $(this).addClass('item'+index);
            });

            var key_visual = new Swiper('#key_visual',{
                autoplay: { delay: 3000, disableOnInteraction: false },
                speed: 200, 
                loop: true, 
                effect: 'slide', 
                navigation: {
                    nextEl: '#key_visual .btn-next', 
                    prevEl: '#key_visual .btn-prev', 
                }, 
                pagination: {
                    el: "#key_visual .pagination",
                    type: "fraction",
                    formatFractionCurrent: function (number) {
                        return ('0' + number).slice(-2);
                    },
                    formatFractionTotal: function (number) {
                        return ('0' + number).slice(-2);
                    },
                    renderFraction: function (currentClass, totalClass) {
                        return '<div class="pg_num">'
                        +'<span class="' + currentClass + '" style="vertical-align:middle;"></span>' 
                        + '<span class="_gubun">/</span>' 
                        + '<span class="' + totalClass + '" style="vertical-align:middle;"><span>'
                        + '</div>'	
                        +	'<div class="btn_area">'
                        +	'<button type="button" class="start"></button>'
                        +	'<button type="button" class="stop"></button>'
                        + '</div>';
                    }
                }
            });

            $('#key_visual > .pagination > .btn_area > .start').click(function(){
                $(this).hide();
                $('#key_visual .pagination .btn_area button.stop').show();
                key_visual.autoplay.start();
                return false;
            });

            $('#key_visual > .pagination > .btn_area > .stop').click(function(){
                $(this).hide();
                $('#key_visual .pagination .btn_area button.start').show();
                key_visual.autoplay.stop()
                return false;
            });
        });
      
        function resizekeyvisualMain(){
            /*
            if(window.innerWidth > 1279){
            $('#visual_slide').height($(window).height() - $('#header').height());
            } else {
            $('#visual_slide').height($(window).height());
            }
            */
            console.log(img_wrap_height);
            var img_wrap_height = $(".img_wrap").height();
            $('#key_visual').height( img_wrap_height );
        }

        function animate(){
            $('.fixo-animation').each(function(index){
                var scrollPos = $(window).scrollTop()+($(window).height()/1.5);
                if(scrollPos > $(this).offset().top){
                    $(this).addClass('animate');
                }
            });
        }
    </script>
  
    <link rel="stylesheet" href="../../../sys_swiper_cdn/swiper-bundle.min.css" />
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700;900&display=swap');
        @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap');
        /* font-family:'Noto Sans KR', snas-serif; */
        * {	margin:0; padding:0; border:0; }
        body { font-family: 'Noto Sans KR', sans-serif; font-size:14px; }
        header  { display:block; width:100%; height:80px; text-align:center; }
        section, article { width:100%; }
        article + article { margin-top:80px; }
                             
        .G_bg1 { color:#fff; background:linear-gradient(90deg, rgba(246,231,4,1) 0%, rgba(246,146,4,1) 49%, rgba(255,0,0,1) 100%); }
        .G_bg2 { color:#fff; background:linear-gradient(to right, #32e16a, #06c4c6); } 
        .G_bg3 { color:#fff; background:linear-gradient(to right, #00d4ff, #0a7be9); } 
        .G_bg4 { background:#f1f1f1; }
        .G_wd1170 { margin:0 auto; width:1170px; }
        

        .allWrap { display:block; width:100%; }

        .top_logoArea { width:min-content; margin:0 auto; padding-top:25px; box-sizing:border-box; }
        .top_logoArea span { width:max-content; font-family:"Noto Sans Kr","Sans-serif"; font-weight:700; font-size:20px; }

        .visual_slide { position: relative;  margin:0 auto; width:100%; height:500px; overflow: hidden;  }
        .visual_slide .swiper-wrapper .swiper-slide { display:block; width:100%; height:500px; font-size:50px; line-height:500px;  text-align:center; color:#fff; } 
      
        .visual_slide .arrow-wrap {	position: absolute; top: 45%; left: 50%; z-index: 10;	transform: translate(-50%, -50%);	width: 100%; max-width: 1500px;	box-sizing: border-box;	}
        .visual_slide .btn-arrow {	position: absolute; top: 0;	width: 55px; height: 55px;	background-size: auto 55px;	background-repeat: no-repeat;	background-position: center;	cursor: pointer;	}
        .visual_slide .btn-arrow.btn-prev { left: 40px;  border-width:0 0 1px 1px; border-style:solid; border-color:#fff; transform:rotate(45deg);	}
        .visual_slide .btn-arrow.btn-next { right: 40px; border-width:1px 1px 0 0; border-style:solid; border-color:#fff; transform:rotate(45deg); }

        .visual_slide .pagination { position:absolute; left:50%; bottom:50px; z-index:10; display:flex; flex-direction:row; justify-content:space-between; align-items:center; max-width:100px; background:rgba(0,0,0,0.3); transform:translateX(-50%); border-radius:30px; padding:5px 10px; }
        .visual_slide .pagination .pg_num { display:flex; justify-content:center; align-items:center; width:60%; height:35px; color:#fff; font-family:'Roboto'; font-size:1.2rem; letter-spacing:-1px; margin-left:6px; }
        .visual_slide .pagination .pg_num span._gubun {	font-family:'Roboto'; font-size:1rem; margin:0 5px; }
        .visual_slide .pagination .btn_area	{ display:inline-block;  width:40%; text-align:right; line-height:0; }
        .visual_slide .pagination .btn_area button { display:inline-block;  margin-left:10px; width:30px; height:30px; border-radius:20px; background:rgba(0,0,0 0.5); }
        .visual_slide .pagination .btn_area button.start { position:relative; display:none; cursor:pointer;	} 
        .visual_slide .pagination .btn_area button.start:before { content:""; position:absolute; left:10px; top:11px; width:7px; height:7px; border-style:solid; border-width:2px 2px 0 0; rotate:45deg; border-color:#000; }
        .visual_slide .pagination .btn_area button.stop  { position:relative; cursor:pointer; } 
        .visual_slide .pagination .btn_area button.stop:before { content:""; position:absolute; left:10px; top:10px; width:10px; height:10px; background:#000; }
        .visual_slide .swiper-pagination-bullet{ display: inline-block;	width: 15px; height: 15px; border-radius:15px;	background: #fff;	box-shadow: 0px 1px 2px #555 inset;	margin: 0 5px;	cursor: pointer;	}
    </style>
</head>
<body>
    
    <div class="allWrap" id="wrap_top">
        <header>
            <div class="top_logoArea">
                <span>RELATION.CO.KR</span>
            </div>
        </header>
    
        <section>
            <div class="visual_slide" id="key_visual">
                <div class="swiper-wrapper">
                    <div class="swiper-slide G_bg1">S1</div>
                    <div class="swiper-slide G_bg2">S2</div>
                    <div class="swiper-slide G_bg3">S3</div>
                </div>
                <div class="arrow-wrap">
                    <div class="btn-arrow btn-prev" aria-label="Previous slide"></div>
                    <div class="btn-arrow btn-next" aria-label="Next slide"></div>
                </div>
                <div class="pagination">
                    <div class="btn_area">
                        <button type="button" class="start">start</button>
                        <button type="button" class="stop">stop</button>
                    </div>
                </div>	
            </div>

            <article class="G_bg4">
                <div class="special_slide">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide">S1</div>
                        <div class="swiper-slide">S2</div>
                        <div class="swiper-slide">S3</div>
                        <div class="swiper-slide">S4</div>
                    </div>
                </div>
            </article>
        </section>
    </div>