$(document).ready(function(){
    $('.main-slick').slick({
        slidesToShow:1,
        slidesToScroll:1,
        fade:true,
        appendArrows:$('.main-controll'),
        prevArrow:"<div><i class='xi-angle-left'></i></div>",
        nextArrow:"<div><i class='xi-angle-right'></i></div>",
        dots:true,
        appendDots:$('.main-controll'),
        dotsClass:"main-dots"
    });


    $('.sec3-lt').slick({
        slidesToShow:1,
        slidesToScroll:1,
        fade:true,
        arrows:false,
        dots:true,
        appendDots:$('.sec3-rt ul'),
        customPaging: function(slider, i) { 
            return '<span class="dot-button">' + $(slider.$slides[i]).attr('data-dot-title')+ '</span>'+"<div class='circle'></div>";
        },
    });

    $('.sec6-wrap').slick({
        slidesToShow:1,
        slidesToScroll:1,
        fade:true,
        arrows:false,
        speed:1000,
        autoplay:true,
        autoplaySpeed:1500,
    });

    var $elems = $(".elm");
    var winheight = $(window).height();
    var executed=false;
	$elems.addClass('active');
    $(window).scroll(function () {
        animate_elems();
    });
    function animate_elems() {
        wintop = $(window).scrollTop();

        $elems.each(function () {
            $elm = $(this);
            topcoords = $elm.offset().top;
            if(executed==false){
                if (wintop >= (topcoords - (winheight * 0.5))) {
                    var progressRate=$('.cha-num').attr("data-rate");
                    $({rate:0}).animate({rate:progressRate},{
                        duration:1500,
                        progress:function(){
                            var now=this.rate;
                            $('.cha-num').html(Math.ceil(now))
                        }
                    })
                    var progressRate1=$('.cha-num2').attr("data-rate");
                    $({rate:0}).animate({rate:progressRate1},{
                        duration:1500,
                        progress:function(){
                            var now=this.rate;
                            $('.cha-num2').html((Math.ceil(now))+"+")
                        }
                    })
                    var progressRate2=$('.cha-num3').attr("data-rate");
                    $({rate:0}).animate({rate:progressRate2},{
                        duration:1500,
                        progress:function(){
                            var now=this.rate;
                            $('.cha-num3').html((Math.ceil(now)))
                        }
                    })
                    executed=true;
                } 
            }
        });
    };

    $(window).scroll(function(){
        var wScoll=$(window).scrollTop();
        if(wScoll>=$('.sec6').offset().top - $('.sec6').height()/2){
            $('.site-map li').removeClass('on');
            $('.site-map li').eq(3).addClass('on')
        }else if(wScoll>=$('.sec4').offset().top-$('.sec4').height()/2){
            $('.site-map li').removeClass('on');
            $('.site-map li').eq(2).addClass('on')
        }else if(wScoll>=$('.sec2').offset().top-$('.sec2').height()/2){
            $('.site-map li').removeClass('on');
            $('.site-map li').eq(1).addClass('on')
        }else if(wScoll>=$('.sec1').offset().top-$('.sec1').height()/2){
            $('.site-map li').removeClass('on');
            $('.site-map li').eq(0).addClass('on')
        }
        

    })
    

    if($(window).scrollTop() >=$('.sec4').offset().top && $(window).scrollTop() <=$('.sec6').offset().top){
        $('#header #nav .menu_tit').css({color:"#fff"});
    }else{
        $('#header #nav .menu_tit').css({color:"#000"});
    }

    $(document).on("click",".site-map a",function(event){
        event.preventDefault();
            $('html,body').animate({
                scrollTop:$(this.hash).offset().top
        },400);
    });

    function responsiveSlick(){
        if($(window).width()<901){
            $('.sec4-inner ul').slick({
                slidesToShow:2.3,
                slidesToScroll:1,
                appendArrows:$('.mo-con'),
                prevArrow:"<div><i class='xi-angle-left'></i></div>",
                nextArrow:"<div><i class='xi-angle-right'></i></div>",
                responsive:[
                    {
                        breakpoint:601,
                        settings:{
                            slidesToShow:1,
                            centerMode:true,
                        }
                    }
                ]
            });


        }
    };
    responsiveSlick();

    $(window).resize(function(){
        responsiveSlick();
    });

})