/* For screen bigger than 800px */
@media (min-width: 800px) {
.nav li {
        float: left;
        width: 22%;
        text-align: center;
        transition: all .5s;
    }/* //将li排列在一条水平线上 */
.nav a{
        display: block;
        width: auto;
   }
.icon {
        padding-top: 22px;
    }
.icon + span {
        margin-top: 100px;
        -webkit-transition: margin .5s;
        -moz-transition: margin .5s;
        -o-transition: margin .5s;
        -ms-transition: margin .5s;
        transition: margin .5s;    }
.nav a {
        height: 300px;
    }
 .nav a:hover,
 .nav a:active,
 .nav a:focus {
        height: 360px;    }
.nav a:hover .icon + span {
        margin-top: 176px;
        -webkit-transition: margin .5s;
        -moz-transition: margin .5s;
        -o-transition: margin .5s;
        -ms-transition: margin .5s;
        transition: margin .5s;
    }
.nav img {
        position: relative;
        display: inline-block;
        margin: 0 auto;
        padding: 10px;
        border-radius: 50%;
        font-size: 43px;
        box-shadow: 0 0 0 30px transparent;
        background: rgba(255, 255, 255, 0.1);
transition: all .6s ease-in-out;    }
 .nav a:hover img,
    .nav a:active img,
    .nav a:focus img {
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.2);
        -webkit-transition: all .4s ease-in-out;
        -moz-transition: all .4s ease-in-out;
        -o-transition: all .4s ease-in-out;
        -ms-transition: all .4s ease-in-out;
        transition: all .4s ease-in-out;
    }



   

}

/* The "tablet" and "mobile" version */
@media (min-width: 520px) and (max-width: 798px) {
.nav li {
	display: block;
        float: left;
        width: 50%;
    }/* //将li布局在两列上 */
.nav a{
	padding: 20px;
   }
/* //增加一些padding，让元素看起来更美观 */
.nav li span,
    .nav li span.icon {
        display: inline-block;
    }
.nav li {
	width: 250px;
	padding-top:20px;
}
.nav li span.icon {
        width: 50%;
        margin-left: 15px;  
    }
.nav li .icon + span {
        font-size: 24px;
        
    }
 .icon + span {
		width: 50px;
		height: 50px;
        position: relative;
        top: -20px;
        left: 150px; 
    }
.nav li img {
        display: inline-block;
        padding: 8% 9%;
        border: 4px solid transparent;
        border-radius: 50%;
        font-size: 36px;
        background: rgba(255, 255, 255, 0.1);
	transition: all .5s;    }
 .nav li:hover img,
     .nav li:active img,
     .nav li:focus img {
        border: 4px solid rgba(255, 255, 255, 0.1);
    }

}

@media (max-width: 519px) {
 /*显示nav元素*/
.nav .navtoogle {
        margin: 0;
        display: block;
    }
/*省略图显示*/
    #imgLogo{
        display: block;
        margin-bottom: 20px;
        cursor: pointer;    }
    /*ul列表隐藏*/
    #ulList{
        display: none;    
}
 /*js未触发，切换菜单*/
.no-js .nav ul {
        max-height: 720px;
        overflow: hidden;
    }
/*js触发，切换菜单*/
 .js .nav ul {
        max-height: 0;
        overflow: hidden;
    }
}