/* banner */
var tabsSwiper = new Swiper('#tabs-container', {
    speed: 500,
    effect:'fade',
     autoplay: {
        delay: 5500,
        disableOnInteraction: false,
      },
    on: {
        slideChangeTransitionStart: function() {
            $(".tabs .active").removeClass('active');
            $(".tabs a").eq(this.activeIndex).addClass('active');
        },
        init: function(){
            swiperAnimateCache(this); //闅愯棌鍔ㄧ敾鍏冪礌 
            swiperAnimate(this); //鍒濆鍖栧畬鎴愬紑濮嬪姩鐢
          }, 
          slideChangeTransitionEnd: function(){ 
            swiperAnimate(this); 
          } 
    },
    navigation: {
        nextEl: ".banner .swiper-button-next",
        prevEl: ".banner .swiper-button-prev",
      },
})

$(function(){
  $(".tabs a").on('click', function(e) {
    e.preventDefault()
    $(".tabs .active").removeClass('active')
    $(this).addClass('active')
    tabsSwiper.slideTo($(this).index())
})
$('.counter').countUp();


/* section3 */
$('.section3 .tab_ul li').hover(function(){
  $(this).addClass('on').siblings().removeClass('on');
  $('.section3 .itembox').eq($(this).index()).fadeIn().siblings('.itembox').hide();
},function(){
    $(this).addClass('on').siblings().removeClass('on');
  $('.section3 .itembox').eq($(this).index()).siblings('.itembox').hide(); 
})
var itswiper = new Swiper('.section4 .swiper-container', {
	spaceBetween: 0,
	noSwiping: true,
});
$('.section4 .tab_ul li').hover(function(){
  $(this).addClass('on').siblings().removeClass('on');
  $('.section4 .itembox').eq($(this).index()).fadeIn().siblings('.itembox').hide();
  $('.section4 .sec4_box .sec4_desc').eq($(this).index()).fadeIn().siblings('.sec4_desc').hide();
  itswiper.slideTo($(this).index(),300, false);
})

})
$('.section2 .play').click(function(){
	$(this).fadeOut();
	$('.section2').removeClass('on');
	$('.section2 #spt').fadeIn();
	document.getElementById('spt').play();
})
var swiper2 = new Swiper('.product1 .swiper-container', {
  observer:true,
  observeParents:true,
  slidesPerView: 3,
        spaceBetween: 30,
  loop:false,
  breakpoints: {
            768: {
                slidesPerView: 1,
                spaceBetween: 10
            }
        },
  navigation: {
    nextEl: '.product1 .swiper-button-next',
    prevEl: '.product1 .swiper-button-prev',
  },
});
var swiper3 = new Swiper('.product2 .swiper-container', {
  observer:true,
  observeParents:true,
  slidesPerView: 3,
        spaceBetween: 30,
  loop:false,
  breakpoints: {
            768: {
                slidesPerView: 1,
                spaceBetween: 10
            }
        },
  navigation: {
    nextEl: '.product2 .swiper-button-next',
    prevEl: '.product2 .swiper-button-prev',
  },
});
var swiper4 = new Swiper('.product3 .swiper-container', {
  observer:true,
  observeParents:true,
  slidesPerView: 3,
        spaceBetween: 30,
  loop:false,
  breakpoints: {
            768: {
                slidesPerView: 1,
                spaceBetween: 10
            }
        },
  navigation: {
    nextEl: '.product3 .swiper-button-next',
    prevEl: '.product3 .swiper-button-prev',
  },
});
var swiper52 = new Swiper('.product4 .swiper-container', {
  observer:true,
  observeParents:true,
  slidesPerView: 3,
        spaceBetween: 30,
  loop:false,
  breakpoints: {
            768: {
                slidesPerView: 1,
                spaceBetween: 10
            }
        },
  navigation: {
    nextEl: '.product4 .swiper-button-next',
    prevEl: '.product4 .swiper-button-prev',
  },
});
var swiper6 = new Swiper('.product5 .swiper-container', {
  observer:true,
  observeParents:true,
  slidesPerView: 3,
        spaceBetween: 30,
  loop:false,
  breakpoints: {
            768: {
                slidesPerView: 1,
                spaceBetween: 10
            }
        },
  navigation: {
    nextEl: '.product5 .swiper-button-next',
    prevEl: '.product5 .swiper-button-prev',
  },
});