@charset "utf-8";
/*--  兴趣日语  --*/
.box1 .contain{position: relative; overflow: hidden;margin: auto; }
.box1 .contain .m-bd{margin-top: 30px;margin-bottom: 96px;}
.box1 .contain .m-bd ul{margin-top: 20px;}
.box1 .contain .m-bd h2{text-align: center; color: #ee93a1; font-size: 26px; font-weight: 400; height: 30px; line-height: 30px;}
.box1 .contain .m-bd li{position: relative; float: left; height: 200px; width: 240px; background-color: #ccc; overflow: hidden; }
.box1 .contain .m-bd li:hover .hover{display: block; }
.box1 .contain .m-bd li .hover{display: none; position: absolute; left: 0; top: 0; height: 200px; width: 240px; background-color: rgba(0, 0, 0, 0.5); transition: all .3s; -moz-transition: all .3s; -webkit-transition: all .3s; -o-transition: all .3s; }
.box1 .contain .m-bd li .hover .box{position: absolute; left: 12.5%; height: 80px; border: 3px solid #fff; color: #fff; }
.box1 .contain .m-bd li .hover .cn{line-height: 36px; font-size: 24px; }
.box1 .contain .m-bd li .hover .en{line-height: 30px; font-size: 16px; }
.box1 .contain .m-bd li{width: 20%; background-position: center; }
.box1 .contain .m-bd li .hover{width: 100%; }
.box1 .contain .m-bd li .hover .box{width: 75%; overflow: hidden; }
.box1 .contain .m-bd li .hover .box p{text-align: center;}
.box1 .contain .m-bd li .hover .cn{font-size: 20px; }
.box1 .contain .m-bd li .hover .en{font-size: 14px;font-family: MS Mincho; }
.box1 .contain .m-bd .l1{background-image: url(../images/xqb-1.jpg); background-repeat: no-repeat;-moz-background-size: 100% 100%;background-size: 100% 100%;}
.box1 .contain .m-bd .l2{background-image: url(../images/xqb-2.jpg); background-repeat: no-repeat;-moz-background-size: 100% 100%;background-size: 100% 100%;}
.box1 .contain .m-bd .l3{background-image: url(../images/xqb-3.jpg); background-repeat: no-repeat;-moz-background-size: 100% 100%;background-size: 100% 100%;}
.box1 .contain .m-bd .l4{background-image: url(../images/xqb-4.jpg); background-repeat: no-repeat;-moz-background-size: 100% 100%;background-size: 100% 100%;}
.box1 .contain .m-bd .l5{background-image: url(../images/xqb-5.jpg); background-repeat: no-repeat;-moz-background-size: 100% 100%;background-size: 100% 100%;}
.box1 .contain .m-bd .l6{background-image: url(../images/xqb-6.jpg); background-repeat: no-repeat;-moz-background-size: 100% 100%;background-size: 100% 100%;}
.box1 .contain .m-bd .l7{background-image: url(../images/xqb-7.jpg); background-repeat: no-repeat;-moz-background-size: 100% 100%;background-size: 100% 100%;}
.box1 .contain .m-bd .l8{background-image: url(../images/xqb-8.jpg); background-repeat: no-repeat;-moz-background-size: 100% 100%;background-size: 100% 100%;}
.box1 .contain .m-bd .l9{background-image: url(../images/xqb-9.jpg); background-repeat: no-repeat;-moz-background-size: 100% 100%;background-size: 100% 100%;}
.box1 .contain .m-bd .l10{background-image: url(../images/xqb-10.jpg); background-repeat: no-repeat;-moz-background-size: 100% 100%;background-size: 100% 100%;}
.box1 .funnySpText{margin-top: 10px; color: #333; font-size: 16px; line-height: 32px; text-align: center;}

@media (max-width: 767px){	
	.box1 .contain .m-bd h2{font-size: 18px;}
	.box1 .contain .m-bd{width: 90%;margin: 15px auto 52px;}
	.box1 .contain .m-bd ul{margin-top: 10px;}
	.box1 .contain .m-bd li{width: 32%;height:auto;margin-bottom: 10px;}
	.box1 .contain .m-bd .l3,.box1 .contain .m-bd .l4,.box1 .contain .m-bd .l6,.box1 .contain .m-bd .l7,.box1 .contain .m-bd .l9,.box1 .contain .m-bd .l10{margin-left: 2%;}
	.box1 .contain .m-bd .l2{display: none;}
	.box1 .contain .m-bd li:hover .hover{height: 100%;}
	.box1 .contain .m-bd li .hover .box{height: 75%;top: 12.5%;}
	.box1 .contain .m-bd li .hover .cn{font-size: 16px;line-height: 20px;}
	.box1 .funnySpText{margin-top:0;}
	.box2{padding: 10px 0 50px;}
}

@media screen and (min-width:768px) and (max-width:991px){

}

@media screen and (min-width:992px) and (max-width:1199px){
	.box1 .contain{width: 974px;}
	.box1 .contain .m-bd li{height: 179px;}
	.box1 .contain .m-bd li .hover{height: 179px;}
	.box1 .contain .m-bd li .hover .box{top: 49.5px;}
	.box1 .class-btn{top:560px;}
}

@media (min-width: 1200px){
	.box1 .contain{width: 1180px;}
	.box1 .contain .m-bd li{height: 216px;}
	.box1 .contain .m-bd li .hover{height: 216px;}
	.box1 .contain .m-bd li .hover .box{top: 68px;}
	.box1 .class-btn{top:600px;}
}