body{
        background: #115190;
    }
    ul{
        margin: 0;
        padding: 0;
    }
    #welcome{
        font-size: 30px;
        color: #fff;
        text-align: center;
        font-family: 'DFKai-SB';
        margin-top: 30px;
    }
    #jgg{
        width:906px;
        height: 486px;
        margin: 30px auto;
        border: 5px solid #fff;

    }
     #jgg ul li{
        width: 300px;
        height: 160px;
        background-color: pink;
        list-style-type:none;
        float: left;
        border: 1px solid #fff;
        position: relative;
    }
    #jgg ul li .default{
        opacity: 1;
    }
    #jgg ul li img{
        width:300px;
        height:160px;
        position: absolute;
        top:0;
        left: 0;
        opacity: 0;
        transition: all 1s linear;
    }
    #jgg ul li a{
        width: 100%;
        height: 100%;
        display: none;
        color:#ffcc00;
        font-size: 35px;
        font-family:'DFKai-SB','Arial';
        text-decoration: none;
        background: rgba(0,0,0,0.5);
        text-align: center;
        /*line-height: 80px;*/
        position: relative;
        top: 0px;
        left: 0px;
    }
    #jgg ul li a .hardy{
        font-size: 18px;
        top: 90px;
    }
    #jgg ul li a p{
        position: relative;
        margin: 0;
        top: 53px;
        }
    #jgg ul li:hover a{
        display: block;
    }
    #jgg ul li:hover .top{
        top:-162px;
        opacity: 1;
        z-index: 99;
    }
    #jgg ul li:hover .left{
        left:-302px;
        opacity: 1;
        z-index: 99;
    }
    #jgg ul li:hover .right{
        left:302px;
        opacity: 1;
        z-index: 99;
    }
    #jgg ul li:hover .bottom{
        top:162px;
        opacity: 1;
        z-index: 99;
    }