.box {
    width:100%;
}
.border-box {
    position: relative;
    width: 100%;
    height: 100%;
}
.border-box::before,
.border-box::after {
    position: absolute;
    content: ' ';
    width: 0;
    height: 0;
    border: 3px solid transparent;
    box-sizing: border-box;
}
.border-box::before {
    top: 0;
    left: 0;
    /* 鼠标离开后的回退效果，如果不设置回退效果，则鼠标离开后就直接很生硬的隐藏了 */
    transition: border-color 0s ease-in 0.8s,width 0.2s ease-in 0.6s,height 0.2s ease-in 0.4s;
}
.border-box::after {
    bottom: 0;
    right: 0;
    transition: border-color 0s ease-in 0.4s,width 0.2s ease-in 0.2s,height 0.2s ease-in;
}
.border-box:hover:before,
.border-box:hover:after {
    width: 100%;
    height: 100%;
}
.border-box:hover::after {
    border-bottom-color: #dcb96e;
    border-left-color: #dcb96e;
    transition: border-color 0s ease-out 0.4s,width 0.2s ease-out 0.4s,height 0.2s ease-out 0.6s;
}
.border-box:hover::before {
    border-top-color: #dcb96e;
    border-right-color: #dcb96e;
    transition: width 0.2s ease-out,height 0.2s ease-out 0.2s;
}
.border-box img{
	display:table;
}
.nav{
    display:-webkit-box;
    display:-moz-box;
    display:box;
    display:-ms-flexbox;
    margin:auto;
    background-color:#de7d60;
}
.nav div{
    -webkit-box-flex:1;
    -moz-box-flex:1;
    box-flex:1;
    text-align:center;
    overflow:hidden;
    border-right:2px solid #fff;
    width:16.6666%;
}
.nav div a{
	width:100%;
	line-height: 50px;
	display: table;
	color:#fff;
}
.nav div:hover,.activate{
    background-color:#dcb96e;
}
.expert_layout{
    list-style:none;
    padding:0;
    margin:0;
}
.expert_layout li{
    float:left;
    width:23.5%;
    margin:2% 0 0 2%;
}
.expert_layout li:first-child,.expert_layout li:nth-child(5){
    margin-left:0;
}
.expert_info_layout{
    background-color:#f9f9f9;
    padding:5% 2%;
    text-align:center;
}
.expert_info_layout p{
    font-weight:bold;
    font-size:1.2em;
    padding:0;
    margin:0;
}
.expert_info_layout span{
    font-weight:bold;
}
.clear_float{
    clear:both;
}
@media screen and (min-device-width:371px) and (max-device-width: 420px) {
    .expert_layout li{
        width:49%;
    }
    .expert_layout li:nth-child(odd){
        margin-left:0;
    }
    .nav{
	        display: block;
	}
	.nav div{
	    width: 24.4%;
	    float: left;
	    background-color: #de7d60;
	    margin-top: 2px;
	}
	.activate {
	    background-color: #dcb96e !important;
	}
}
@media screen and (min-device-width:320px) and (max-device-width: 370px) {
    .expert_layout li{
        width:49%;
    }
    .expert_layout li:nth-child(odd){
        margin-left:0;
    }
    .nav{
	        display: block;
	}
	.nav div{
	    width: 24.3%;
	    float: left;
	    background-color: #de7d60;
	    margin-top: 2px;
	}
	 .activate {
	    background-color: #dcb96e !important;
	}
}