function slickSlide() {

	function resetHeight(){
		$('.main_slide_g').css('height', $(window).innerHeight());
	}
	window.addEventListener("resize", resetHeight);
	resetHeight();

	//main_slide
	var $mainSlide = $('#main_slide'),
		$mainArrow = $('.main_slide_btn'),
		$mainDots = $('.main_slide_i'),
		$mainPlay = $('.main_slide_s');

	$mainSlide.slick({
		fade: true,
		autoplay:true,
		infinite: true,
		autoplaySpeed:8000,
		slidesToShow: 1,
		slidesToScroll: 1,
		//hover, click을 포함한 모든 focus에도 슬라이드 재생
		pauseOnHover:false,
		pauseOnFocus:false,
		cssEase:'linear',
		prevArrow: $mainArrow.find('.prev'),
		nextArrow: $mainArrow.find('.next'),
		appendDots: $mainDots,
		dots: true,
	});

	//메인슬라이드 재생여부
	$mainPlay.find('.status').on('click', function(){
		if($(this).hasClass('play') == true){
			$(this).removeClass('play').addClass('stop');
			$mainSlide.slick('slickPlay');
		}else {
			$(this).removeClass('stop').addClass('play');
			$mainSlide.slick('slickPause');
		}
	});

	//메인슬라이드 효과 addClass
	if(typeof $.fn.Slick === 'undefined'){
		//처음 화면 강제로 on
		setTimeout(function() {
			$mainSlide.find('.v01').addClass('on');
		}, 300);

		//슬라이더가 바뀌기 전에
		$mainSlide.on('beforeChange', function(event, slick, currentSlide, nextSlide){
			//초기화
			$mainSlide.find('div[class*="v0"]').removeClass('on');
			$mainSlide.find('.v0'+(nextSlide+1)).addClass('on');
		});
	}

}

function motion (){
	gsap.fromTo('#main_slide .dot', .8, {
		opacity:0,
	},{
		opacity:1,
		stagger: 0.1,
		overwrite:0,
		yoyo:true,
		repeat:-1,
		repeatDelay:0.2,
		ease: Power0.easeNone
	});
	gsap.fromTo('#main_slide .dot', .8, {
		scale:0.4,
	},{
		scale:1,
		yoyo:true,
		stagger: 0.05,
		repeat:-1,
		delay: 0.1,
		overwrite:0,
		repeatDelay:0.1,
		ease: Power0.easeNone
	});
}

function productsPopupJS(){

	$('#product-popup .popup-close').on('click', function(){
		$('#bg').hide();
		$('#product-popup').remove();
	});

	//products slide
	$('#product-popup .product-popup-list').slick({
		fade: false,
		slidesPerRow: 3,
		variableWidth: false,
		autoplay:false,
		speed: 300,
		pauseOnHover:false,
		pauseOnFocus:false,
		arrows: false,
		dots: true,
		cssEase:'linear',
		responsive: [
			{
				breakpoint: 1280,
				settings: {
					slidesPerRow: 2,
				}
			},
			{
				breakpoint: 768,
				settings: {
					slidesPerRow: 1,
				}
			}
		],
	});
}


$(function(){
	slickSlide();
	motion();
});