$(document).ready(function(){
    var widthEfect = '200px';
    var widthStart = '190px';
    var heightEfect = '170px';
    var heightStart = '160px';
    var positionEfect = '1px';
    var positionStart = '6px';
    var durationZoomIn = 200;
    var durationZoomOut = 200;

    $('.home-crossroad li.box-1').hover(function(){
        $('.spc', this).animate({
            width: widthEfect,
            height: heightEfect
        }, durationZoomIn);
        $(this).animate({
            top: positionEfect,
            left: positionEfect
        }, durationZoomIn);
        
    
    }, function(){
        $('.spc', this).animate({
            width: widthStart,
            height: heightStart
        }, durationZoomOut);
        $(this).animate({
            top: positionStart,
            left: positionStart
        }, durationZoomOut);
        
    
    });
    $('.home-crossroad li.box-2').hover(function(){
        $('.spc', this).animate({
            width: widthEfect,
            height: heightEfect
        }, durationZoomIn);
        $(this).animate({
            top: positionEfect,
            right: positionEfect
        }, durationZoomIn);
        
    
    }, function(){
        $('.spc', this).animate({
            width: widthStart,
            height: heightStart
        }, durationZoomOut);
        $(this).animate({
            top: positionStart,
            right: positionStart
        }, durationZoomOut);
        
    
    });
    $('.home-crossroad li.box-3').hover(function(){
        $('.spc', this).animate({
            width: widthEfect,
            height: heightEfect
        }, durationZoomIn);
        $(this).animate({
            bottom: positionEfect,
            left: positionEfect
        }, durationZoomIn);
        
    
    }, function(){
        $('.spc', this).animate({
            width: widthStart,
            height: heightStart
        }, durationZoomOut);
        $(this).animate({
            bottom: positionStart,
            left: positionStart
        }, durationZoomOut);
        
    
    });
    $('.home-crossroad li.box-4').hover(function(){
        $('.spc', this).animate({
            width: widthEfect,
            height: heightEfect
        }, durationZoomIn);
        $(this).animate({
            bottom: positionEfect,
            right: positionEfect
        }, durationZoomIn);
        
    
    }, function(){
        $('.spc', this).animate({
            width: widthStart,
            height: heightStart
        }, durationZoomOut);
        $(this).animate({
            bottom: positionStart,
            right: positionStart
        }, durationZoomOut);
        
    
    });
    
    $('.home-crossroad li').click(function(){
        window.location = $('a', this).attr('href');
    });
});