.foucebox {
	width:1100px;
    height:465px;
	margin:30px auto;
    position:relative;
}
.foucebox .bd {
	position:relative;
	float:left;
	width:715px;
	height:465px;
	overflow:hidden;
}
.foucebox .hd {
	width:375px;
    height:465px;
	float:right;
    overflow:hidden;
    position:relative;
}
.foucebox .hd ul {
    position:absolute;
    left:0;
    top:0;
    height:465px;
}
.foucebox .hd ul li {
	float:left;
	margin:0 1px 1px 0px;
	display:inline;
	position:relative;
}
.foucebox .hd ul a {
	display:block;
}
.foucebox .hd ul img {
    display:block;
}
.foucebox .hd ul .mask {
	width:124px;
	height:92px;
	display:block;
	position:absolute;
	left:0;
	top:0;
	z-index:3;
	background:rgba(5,5,5,0.3);
}
.foucebox .hd ul a:hover .mask,.foucebox .hd ul .on .mask {
	display:none;
	position:relative;
}
.foucebox .pageState {
    position:absolute;
    right:0;
    bottom:-45px;
    width:375px;
    text-align:center;
}
.foucebox .pageState a {
    display:inline-block;
    margin-right:5px;
    border:1px solid #016829;
    padding:3px 6px;
    color:#016829;
    font-size:1.4rem;
    line-height:14px;
    border-radius:5px;
}
.foucebox .pageState a.on {
    color:#ffffff;
    border-color:#666666;
    background:#666666;
}

@media only screen and (max-width:640px){ 
.foucebox {
	width:100%;
    height:auto;
	margin:2.5rem auto;
}
.foucebox .bd {
	width:100%;
	height:auto;
}
.foucebox .hd {
	width:100%;
    height:auto;
}
.foucebox .hd ul {
    position:relative;
    height:auto;
}
.foucebox .hd ul li{margin:0 10px 10px 0}
.foucebox .hd ul li:nth-child(3n){margin-right:0}
.foucebox .pageState {
    display:none;
    bottom:-20px;
    width:100%;
    text-align:center;
}
}

@media only screen and (max-width:420px){ 
.foucebox .hd ul img{width:100%}
.foucebox .hd ul .mask {
	width:100%;
	height:100%;
}
.foucebox .hd ul li{width:31%;margin:0 10px 10px 0}
.foucebox .hd ul li:nth-child(3n){margin-right:0}

}