/* CSS Document */
.tit{margin:0 auto;width:100%;height:auto;padding:50px 0px;}
.tit a{display:block;text-align:center;line-height:3;color:#0b61bf;font-size:3rem;width:100%;height:auto;margin:0 auto;background:url(../image/tit.png) no-repeat center bottom;font-weight:bold;letter-spacing:2px;}
.mm{margin:0 auto;width:100%;height:auto;position:relative;clear: both;float: left;}


.meal-cut{width:100%; margin:0 auto; text-align:center; }
.meal-cut ul{width:100%;height:auto;}
.meal-cut ul li{width:19%;margin-right:1%;float:left;height:18vh;overflow:hidden;background-size:100% 100% !important;margin-top:15px;}
.meal-cut ul li span{ display:block;width:100%;height:100%;background-size:100% 100% !important;padding:2%;background:none;}
.meal-cut ul li h3{display:block; font-size:2.6rem; padding-top: 20px;color:#000;line-height:2;letter-spacing:1px;}
.meal-cut ul li p{display:block; color:#222; max-width:80%; margin:0 auto;font-size:1.6rem;}

.meal-cut ul li:hover h3{color:#fff;}
.meal-cut ul li:hover p{color:#fff;}

.meal-cut ul li:nth-child(1) span{transition:all 1s;background-position:260px 0px;}
.meal-cut ul li:nth-child(1):hover span{  background:url(../image/c1.png) no-repeat;transition:all 1s;}
.meal-cut ul li:nth-child(1){background:url(../image/c1-2.png) no-repeat;transition:all 1s;}
.meal-cut ul li:nth-child(1):hover{  transition:all 1s;background-position:-260px 0px;}

.meal-cut ul li:nth-child(2) span{transition:all 1s;background-position:260px 0px;}
.meal-cut ul li:nth-child(2):hover span{  background:url(../image/c2.png) no-repeat;transition:all 1s;}
.meal-cut ul li:nth-child(2){background:url(../image/c2-2.png) no-repeat;transition:all 1s;}
.meal-cut ul li:nth-child(2):hover{  transition:all 1s;background-position:-260px 0px;}

.meal-cut ul li:nth-child(3) span{transition:all 1s;background-position:260px 0px;}
.meal-cut ul li:nth-child(3):hover span{  background:url(../image/c3.png) no-repeat;transition:all 1s;}
.meal-cut ul li:nth-child(3){background:url(../image/c3-2.png) no-repeat;transition:all 1s;}
.meal-cut ul li:nth-child(3):hover{  transition:all 1s;background-position:-260px 0px;}

.meal-cut ul li:nth-child(4) span{transition:all 1s;background-position:260px 0px;}
.meal-cut ul li:nth-child(4):hover span{  background:url(../image/c4.png) no-repeat;transition:all 1s;}
.meal-cut ul li:nth-child(4){background:url(../image/c4-2.png) no-repeat;transition:all 1s;}
.meal-cut ul li:nth-child(4):hover{  transition:all 1s;background-position:-260px 0px;}

.meal-cut ul li:nth-child(5) span{transition:all 1s;background-position:260px 0px;}
.meal-cut ul li:nth-child(5):hover span{  background:url(../image/c5.png) no-repeat;transition:all 1s;}
.meal-cut ul li:nth-child(5){background:url(../image/c5-2.png) no-repeat;transition:all 1s;}
.meal-cut ul li:nth-child(5):hover{  transition:all 1s;background-position:-260px 0px;}


.meal-cut ul li:nth-child(6) span{transition:all 1s;background-position:260px 0px;}
.meal-cut ul li:nth-child(6):hover span{  background:url(../image/c6.png) no-repeat;transition:all 1s;}
.meal-cut ul li:nth-child(6){background:url(../image/c6-2.png) no-repeat;transition:all 1s;}
.meal-cut ul li:nth-child(6):hover{  transition:all 1s;background-position:-260px 0px;}

.meal-cut ul li:nth-child(7) span{transition:all 1s;background-position:260px 0px;}
.meal-cut ul li:nth-child(7):hover span{  background:url(../image/c7.png) no-repeat;transition:all 1s;}
.meal-cut ul li:nth-child(7){background:url(../image/c7-2.png) no-repeat;transition:all 1s;}
.meal-cut ul li:nth-child(7):hover{  transition:all 1s;background-position:-260px 0px;}


.meal-cut ul li:nth-child(8) span{transition:all 1s;background-position:260px 0px;}
.meal-cut ul li:nth-child(8):hover span{  background:url(../image/c8.png) no-repeat;transition:all 1s;}
.meal-cut ul li:nth-child(8){background:url(../image/c8-2.png) no-repeat;transition:all 1s;}
.meal-cut ul li:nth-child(8):hover{  transition:all 1s;background-position:-260px 0px;}

.meal-cut ul li:nth-child(9) span{transition:all 1s;background-position:260px 0px;}
.meal-cut ul li:nth-child(9):hover span{  background:url(../image/c9.png) no-repeat;transition:all 1s;}
.meal-cut ul li:nth-child(9){background:url(../image/c9-2.png) no-repeat;transition:all 1s;}
.meal-cut ul li:nth-child(9):hover{  transition:all 1s;background-position:-260px 0px;}

.meal-cut ul li:nth-child(10) span{transition:all 1sbackground-position:260px 0px;}
.meal-cut ul li:nth-child(10):hover span{  background:url(../image/c10.png) no-repeat;transition:all 1s;}
.meal-cut ul li:nth-child(10){background:url(../image/c10-2.png) no-repeat;transition:all 1s;}
.meal-cut ul li:nth-child(10):hover{  transition:all 1s;background-position:-260px 0px;}


@media(max-width:767px){
.tit{padding:10px 0px;}
.meal-cut ul li{width:49% !important; float:left; }
.meal-cut ul li h3{font-size:2rem; font-weight:bold;}
.meal-cut ul li p{display:block;  max-width:100%; margin:10px auto; padding:0 10px; height:54px; overflow:hidden;}
.meal-cut ul li:nth-child(10){display:block !important;}
}

@media(max-width:1200px){
.meal-cut ul li{width:32.3333%; float:left; padding:5px;}
.meal-cut ul li:nth-child(10){display:none;}
}

@media(max-width:1320px){
.meal-cut ul li{width:32.3333%; float:left; padding:5px;}
.meal-cut ul li:nth-child(10){display:none;}
.meal-cut ul li h3{font-size:2rem; font-weight:bold;}
}
@media(max-width:1600px){

.meal-cut ul li h3{font-size:2.2rem; font-weight:bold;}
}