$(function() {
     var width = $(window).width();
     var length = $('.ctn1 .ctn-list .con .ctn-box').length;
     if (width > 768) {
         $('.ctn1 .ctn-list .con .ctn-box').each(function(index) {
             $(this).css('z-index', length - index);
             $(this).hoverdelay({
                 hoverduring: 300,
                 outduring: 100,
                 hoverevent: function() {
                     $(this).addclass('active');
                     $(this).find('.bottom .b-w ul li:first-child').addclass('active');
                     $(this).find('.bottom .b-t .box:first-child').addclass('active');
                     $(this).find('.bottom').slidedown();

                 },
                 outevent: function() {
                     $(this).removeclass('active');
                     $(this).find('.bottom .b-w ul li').removeclass('active');
                     $(this).find('.bottom .b-t .box').removeclass('active');
                     $(this).find('.bottom').slideup();
                 }
             });
         });
     } else {
         $('.ctn1 .ctn-list .con .ctn-box').each(function(index) {
             $(this).css('z-index', length - index);
         });
         $('.ctn1 .ctn-list .con .ctn-box .top').click(function() {
             if ($(this).parent().hasclass('active')) {
                 $(this).parent().removeclass('active');
                 $(this).parent().find('.bottom .b-w ul li').removeclass('active');
                 $(this).parent().find('.bottom .b-t .box').removeclass('active');
                 $(this).next().slideup();
             } else {
                 $('.ctn1 .ctn-list .con .ctn-box').removeclass('active');
                 $('.ctn1 .ctn-list .con .ctn-box .bottom .b-w ul li').removeclass('active');
                 $('.ctn1 .ctn-list .con .ctn-box .bottom .b-t u.box').removeclass('active');
                 $('.ctn1 .ctn-list .con .ctn-box .bottom').slideup();
                 $(this).parent().addclass('active');
                 $(this).parent().find('.bottom .b-w ul li:first-child').addclass('active');
                 $(this).parent().find('.bottom .b-t .box:first-child').addclass('active');
                 $(this).next().slidedown();
             }

         })
     }



     $('.ctn1 .ctn-list').on('click', ' .ctn-box.active .bottom .b-w ul li', function() {
         var index = $(this).index();
         $(this).addclass('active').siblings().removeclass('active');
         $(this).parent().parent().next().find('.box').eq(index).addclass('active').siblings().removeclass('active');
     })

 })