.mobile{
	display: none;
}
@media screen and (max-width: 770px){
	.main{
		display: none;
	}
	body{
		background: #FBF8F1;
	}
	.mobile{
		display: block;
		width: 100%;
		height: 100%;
	}
	.menu-m{
		float: left;
		width: 100%;
		height: 50px;
		padding-top: 10px;
	}
	.mb{
		width: 500px;
		height: 30px;
	}
	.mn{
		padding-top: 3px;
		font-size: 20px;
	}
	.mn i{
	 	cursor: pointer;
	}
	.slide-m{
		float: left;
		width: 100%;
		height: 155px;
		background: #FBF8F1;
	}
	.banner{
		float: left;
		width: 100%;
		height: 42px;
		margin-top: 7px;
		background: #FBF8F1;
	}
	.deal{
		float: left;
		width: 100%;
		height: 185px;
		margin-top: 15px;
		background: #FBF8F1;
	}
	.card-m{
		float: left;
		width: 110px;
		height: 151px;
		margin-right: 9px;
	}
	.card-m:hover .m-txt{
		transform: translateY(-28px);
	}
	.card-m:hover .m-mh{
		transform: translateY(-38px);
	}
	.card-m1{
		float: left;
		width: 110px;
		height: 151px;
	}
	.card-m1:hover .m-txt{
		transform: translateY(-28px);
	}
	.card-m1:hover .m-mh{
		transform: translateY(-38px);
	}
	.card-m-info{
		width: 110px;
		height: 40px;
		background: white;
		box-sizing: border-box;
		overflow: hidden;
	}
	.m-txt{
		width: 110px;
		height: 35px;
		font-family: 'Courier New';
		font-size: 8px;
		padding-top: 6px;
		transition: 0.5s;
	}
	.m-mh{
		width: 110px;
		height: 35px;
		transition: 0.5s;
		margin-top: 10px;
	}
	.m-mh button{
		font-size: 9px;
	}
	.del{
		height: 180px;
		border: 1px solid #503123;
		padding-top: 25px;
	}
	.anh-m{
		position: absolute;
		margin-top: -35px;
		margin-left: -3px;
	}
	.menunho-m{
		width: 100%;
		height: 100%;
		position: fixed;
		z-index: 3;
		margin-top: 50px;
		display: none;
	}
	.menunho-m a{
		text-decoration: none;
		color: #503123;
		font-family: 'Courier New';
	}
	.menunho-m a:hover{
		color: #339AF0;
	}
	.hien{
		display: block;
		animation: ad 0.5s forwards;
	}
	@keyframes ad{
		0%{
			transform: scale(0.85);
		}
		100%{
			transform: scale(1);
		}
	}
	.frm-m input[type=text]{
		height: 25px;
		padding: 1px;
		font-size: 8px;
		margin-top: 5px;
		width: 260px;
	}
	.frm-m input[type=submit]{
		position: absolute;
		width: 50px;
		font-size: 8px;
		margin-left: 3px;
		margin-top: 4.3px;
		height: 25px;
		padding: 0px;
		border: 0px;
		background: #503123;
		color: white;
	}
	.ttc-m{
		float: left;
		width: 100%;
		height: 118px;
	}
	.mn-m{
		float: left;
		width: 100%;
	}
	.ttc-mttn{
		padding-left: 0px;
		padding-right: 0px;
		box-sizing: border-box;
		overflow: hidden;
		cursor: pointer;
	}
	.nen-m{
		position: absolute;
		background: linear-gradient(45deg, #22682a 0%,#9b4a1b 40%,#3a342a 100%);
		opacity: 0.7;
		z-index: 3;
		margin-top: -120px;
		width: 240px;
		height: 120px;
	}
	.txt-m{
		position: absolute;
		z-index: 4;
		margin-top: -85px;
		color: white;
		font-family: 'Courier New';
		font-size: 20px;
	}
	.ttc-mttn:hover .gchan-m1{
		transform: rotate(40deg);
	}
	.ttc-mttn:hover .gchan-m2{
		transform: rotate(-40deg);
	}
	.ttc-mttn img{
		transition: 0.5s;
	}
	.ttc-mttn:hover img{
		transform: scale(1.3);
	}
	.gchan-m1{
		position: absolute;
		width: 155px;
		height: 0.5px;
		background: white;
		margin-top: -60px;
		margin-left: 40px;
		z-index: 4;
		transition: 0.5s;
	}
	.gchan-m2{
		position: absolute;
		width: 155px;
		height: 0.5px;
		background: white;
		margin-top: -60px;
		margin-left: 40px;
		z-index: 4;
		transition: 0.5s;
	}
	.ttc1-m{
		float: left;
		width: 100%;
		height: 118px;
	}
	.ttn-mttn{
		padding-left: 0px;
		padding-right: 0px;
	}
	.tt-mttn{
		padding-left: 0px;
		padding-right: 0px;
		box-sizing: border-box;
		overflow: hidden;
		cursor: pointer;s
	}
	.tt-mttn:hover .gchan1-m1{
		transform: rotate(40deg);
	}
	.tt-mttn:hover .gchan1-m2{
		transform: rotate(-40deg);
	}
	.tt-mttn img{
		transition: 0.5s;
	}
	.tt-mttn:hover img{
		transform: scale(1.3);
	}
	.nen1-m{
		position: absolute;
		background: linear-gradient(45deg, #22682a 0%,#9b4a1b 40%,#3a342a 100%);;
		opacity: 0.7;
		z-index: 3;
		margin-top: -120px;
		width: 120px;
		height: 120px;
	}
	.txt1-m{
		position: absolute;
		z-index: 4;
		margin-top: -85px;
		color: white;
		font-family: 'Courier New';
		font-size: 16px;
	}
	.gchan1-m1{
		position: absolute;
		width: 100px;
		height: 0.5px;
		background: white;
		margin-top: -60px;
		margin-left: 10px;
		z-index: 4;
		transition: 0.5s;
	}
	.gchan1-m2{
		position: absolute;
		width: 100px;
		height: 0.5px;
		background: white;
		margin-top: -60px;
		margin-left: 10px;
		z-index: 4;
		transition: 0.5s;
	}
	.ttc-tittle{
		float: left;
		width: 100%;
		height: 40px;
		font-size: 20px;
		font-family: 'Courier New';
		padding-top: 10px;
	}
	.gc{
		position: absolute;
		width: 100px;
		height: 0.5px;
		background: red;
		margin-left: 198px;
	}
	.ttc-sp-m{
		float: left;
		width: 100%;
		height: 330px;
		margin-top: 10px;
	}
	.card-m-1{
		width: 90px;
		height: 155px;
		float: left;
		cursor: pointer;
		margin-right: 5px;
	}
	.card-m-2{
		width: 90px;
		height: 155px;
		float: left;
		cursor: pointer;
	}
	.card-m-if{
		width: 90px;
		height: 30px;
		box-sizing: border-box;
		overflow: hidden;
	}
	.card-m-1:hover .card-m-txt{
		transform: translateY(-30px);
	}
	.card-m-1:hover .card-m-mh{
		transform: translateY(-56px);
	}
	.card-m-2:hover .card-m-txt{
		transform: translateY(-30px);
	}
	.card-m-2:hover .card-m-mh{
		transform: translateY(-56px);
	}
	.card-m-txt{
		width: 90px;
		height: 30px;
		font-family: 'Courier New';
		font-size: 6.5px;
		padding-top: 5px;
		transition: 0.5s;
	}
	.card-m-mh{
		width: 90px;
		height: 30px;
		margin-top: -57px;
		transition: 0.5s;
		margin-top: 30px;
	}
	.card-m-mh button{
		font-size: 8px;
		padding: 3px;
	}
	.all-m{
		float: left;
		width: 100%;
		font-family: 'Courier New';
	}
	.all-m a{
		text-decoration: underline;
		color: #503123;
	}
	.all-m a:hover{
		color: #339AF0;
	}
	.fs-m{
		float: left;
		width: 100%;
		height: 160px;
		background-size: cover;
		margin-top: 20px;
		background-attachment: fixed;
		background-position: center;
	}
	.email-m{
		width: 100%;
		height: 60px;
		padding-top: 17px;
	}
	.nenfooster-m{
		width: 100%;
		position: absolute;
		height: 60px;
		background: linear-gradient(45deg, #22682a 0%,#9b4a1b 40%,#3a342a 100%);
		opacity: 0.7;
	}
	.email-m span{
		color: white;
		font-family: 'Courier New';
		font-size: 13px;
	}
	.email-m input[type=text]{
		width: 180px;
		padding: 4px;
		font-size: 10px;
		border-radius: 4px;
		border: 0.5px solid #794A35;
	}
	.email-m input[type=submit]{
		width: 50px;
		padding: 5px;
		font-size: 10px;
		border: 0px;
		background: #8D7C62;
		color: white;
		border-radius: 4px;
	}
	.fo-end-m{
		width: 100%;
		height: 100px;
		background: #8D7C62;
	}
	.m-li1{
		padding-right: 0px;
		padding-left: 0px;
		box-sizing: border-box;
		overflow: hidden;
		height: 100px;
	}
	.m-li1 ul{
		margin-top: 30px;
	}
	.m-li1 ul li{
		border: 0px;
		font-size: 7px;
		padding-top: 0px;
		background: #8D7C62;
	}
	.m-li1 a{
		text-decoration: none;
		color: white;
	}
	.m-li1 a:hover{
		color: #F57224;
	}
	.m-li2{
		padding-right: 0px;
		padding-left: 0px;
		padding-top: -10px;
		box-sizing: border-box;
		overflow: hidden;
		height: 100px;
	}	
	.m-li2 ul{
		margin-top: -13px;
	}
	.m-li2 span{
		font-size: 11px;
		color: white;
	}
	.m-li2 p{
		font-size: 6px;
		text-indent: 10px;
		color: white;
	}
	.m-li2 ul li{
		border: 0px;
		padding-top: 0px;
		background: #8D7C62;
	}
	.m-li3{
		padding-right: 0px;
		padding-left: 0px;
		padding-top: -10px;
		box-sizing: border-box;
		overflow: hidden;
		height: 100px;
	}
	.m-li3 ul{
		margin-top: -12px;
	}
	.m-li3 span{
		font-size: 11px;
		color: white;
	}
	.m-li3 ul li{
		border: 0px;
		padding-top: 0px;
		background: #8D7C62;
	}
	.m-li3 a{
		text-decoration: none;
		font-size: 7px;
		color: white;
	}
	.m-li3 a:hover{
		color: #FD8D04;
	}
	.m-li3 ul li ul li{
		border: 0px;
		padding: 0px;
		background: #8D7C62;
	}
	.gduoi-m{
		width: 50px;
		height: 0.5px;
		background: red;
		margin-top: -5px;
		position: absolute;
	}
	.page-m{
		width: 100%;
		background: #503123;
		color: white;
		font-size: 10px;
	}
	.page-m a{
		color: white;
	}
}
@media screen and (max-width: 500px) {
	.main{
		display: none;
	}
	.mobile{
		display: block;
	}
	.fs-m{
		width: 500px;
		background-size: 600px;
	}
	.nenfooster-m{
		width: 500px;
	}
}