.navbar-menu, .footer-mobile-nav, .mobile-case{
	display:none;
}
.content-photo {
width: 24%;
float: left;
margin: 0px 0.5%;
}
@media screen and (min-width : 320px) and (max-width:680px) {
	ul.catelist li {
		width: 50%;
	}
	.about-left {
		width: 100%;
		margin-bottom: 20px;
	}
	.about-right {
		width: 100%;
	}
}
@media screen and (min-width : 680px) {
	ul.catelist li {
		width: 25%;
	}
}
@media screen and (min-width : 320px) and (max-width:959px) {
	.content-photo {
		width: 49%;
	}
	.changel {
		right: 70px;
	}
	.nav-toggle{
		width:36px;
		border: 1px solid #555;
		position:relative;
		display:inline-block;
		vertical-align:middle;
		height:30px;
		line-height:30px;
		border-radius:4px;
		border-style:solid;
		font-size:14px;
		position:absolute;
		right: 10px;
		top: 18px;
	}
	.nav-toggle:before,
	.nav-toggle:after{
		content:"";
		position:absolute;
		top:11px;
		left:8px;
		width:22px;
		height:2px;
		border-radius:1px;
		background:#ccc;
		-webkit-transition:all 0.25s ease;
		     -o-transition:all 0.25s ease;
		        transition:all 0.25s ease;
	}
	.nav-toggle:after{
		top:18px;
	}
	.nav-toggle.close:before{
		left:8px;
		top:15px;
		-webkit-transform:rotate(45deg);
		     -o-transform:rotate(45deg);
		        transform:rotate(45deg);
	}
	.nav-toggle.close:after{
		left:8px;
		top:15px;
		-webkit-transform:rotate(-45deg);
		     -o-transform:rotate(-45deg);
		        transform:rotate(-45deg);
	}

	.navbar-menu{
		padding-top: 5px;
		display: none;
		background: #2c2c2c;
		padding-bottom: 10px;
	}
	.navbar-menu li {
		width: 90%;
		margin:auto;
		position:relative;
	}
	.navbar-menu li a{
		padding: 10px 15px;
		display: block;
		color: #f4f4f4;
		font-size: 14px;
		border-bottom:1px solid #555;
	}


	.navbar-menu li .parent span {
		position:absolute;
		right: 0px;
		top: 10px;
	}
	.navbar-menu li .parent span:after {
		content: '+';
	    float: right;
	    font-size: 14px;
	    font-weight: normal;
	    margin-top: -2px;
	    margin-right: 8px;
	    -webkit-transition: -webkit-transform .3s ease;
	    transition: -webkit-transform .3s ease;
	    transition: transform .3s ease;
	    transition: transform .3s ease, -webkit-transform .3s ease;
	}
	.navbar-menu li .parent span.close:after{
		-webkit-transform: rotate(45deg) scale(1.08);
    	-ms-transform: rotate(45deg) scale(1.08);
    	transform: rotate(45deg) scale(1.08);
	}

	.navbar-menu li.active a {
		color: #909090;
	}
	.navbar-menu li ul {
		display:none;
	}
	.navbar-menu li.active ul li a{
		color: #f4f4f4;
	}
	.header {
		max-width: 100%;
	}
	.navlist {
		display:none;
	}


	.footer-head {
		width: 98%;
		padding-top: 20px;
	}
	.footer-title {
		width: 100%;
	}
	.footer-body {
		width: 98%;
	}
	.footer-body ul.footernav {
		display:none;	
	}
	.footer-body ul.footer-mobile-nav {
		width: 100%;
		display: block;
	}
	.footer-body ul.footer-mobile-nav li {
		width: 100%;
		margin-top: 0px;
		font-size: 14px;
		border-bottom:1px solid #ddd;
		position:relative;
	}
	.footer-body ul.footer-mobile-nav li a{
		display: block;
		color: #666;
		padding: 10px 0px;
	}
	.footer-body ul.footer-mobile-nav li.active a {
		color: #555;
	}

	.footer-body ul.footer-mobile-nav li .parent span {
		position:absolute;
		right: 0px;
		top: 8px;
	}

	.footer-body ul.footer-mobile-nav li .parent span:after {
		content: '+';
	    float: right;
	    font-size: 14px;
	    font-weight: normal;
	    margin-top: -2px;
	    margin-right: 8px;
	    -webkit-transition: -webkit-transform .3s ease;
	    transition: -webkit-transform .3s ease;
	    transition: transform .3s ease;
	    transition: transform .3s ease, -webkit-transform .3s ease;
	}
	.footer-body ul.footer-mobile-nav li .parent span.close:after{
		-webkit-transform: rotate(45deg) scale(1.08);
    	-ms-transform: rotate(45deg) scale(1.08);
    	transform: rotate(45deg) scale(1.08);
	}

	.footer-body ul.footer-mobile-nav li ul {
		display:none;
		width: 100%;
	}
	.footer-body ul.footer-mobile-nav li ul li {
		border:none;
	}
	.footer-body ul.footer-mobile-nav li ul li a, .footer-body ul.footer-mobile-nav li.active ul li a{
		color: #777;
		font-size: 13px;
	}

	.footer-body .contact {
		width: 100%;
		margin: 30px auto 0px;
	}
	.contact .about, .contact .map {
		width: 100%;
	}
	.contact .map {
		margin: 30px auto;
	}
	.footer-foot {
		width: 98%;
	}
	.foot-left, .foot-right, .foot-right ul{
		width: 100%;
		float:none;
	}

	/* info css*/
	.info {
		width: 90%;
	}
	.info h2 {
		font-size: 30px;
	}

	.list {
		width: 90%;
	}
	.list li .txt {
		margin: 0 0 0 35%;
	}

	/* css */
	.case {
		display:none;
	}
	.mobile-case {
		width: 90%;
		margin: 30px auto 0px;
		display:block;
	}
	.mobile-case li {
		width: 23%;
		float: left;
		margin: 0px 1% 15px;
		position: relative;
	}
	.mobile-case li img {
		width: 100%;
	}

	.mobile-case li .txt {
		width: 100%;
		height: 40px;
		color: #fff;
		position: absolute;
		left: 0px;
		top: 50%;
		margin-top: -20px;
		text-align: center;
		font-size: 16px;
		vertical-align: middle;
		line-height: 20px;
	}
	.mobile-case li .txt span {
		display: block;
	}

	.zr-left, .zr-right {
		width: 100%;
	}
}
@media screen and (min-width : 580px) and (max-width:959px) {
	.content-photo {
		width: 32%;
	}
}
@media screen and (min-width : 960px) and (max-width:1040px) {
	.header {
		max-width: 100%;
	}
	.navlist li {
		padding: 0px 23px;
	}
	div.togglenav a {
		padding: 5px 18px;
	}
	.footer-head {
		width: 98%; 
	}
	.footer-title {
		width: 100%;
	}
	.footer-body {
		width: 98%;
	}
	.contact .about img {
		width: 100px;
		height: 100px;
	}
	.footer-foot {
		width: 98%;
	}

	.info {
		width: 90%;
	}
	.info h2 {
		font-size: 40px;
	}

	.list {
		width: 90%;
	}
	.list li .txt {
		margin: 15px 0 0 35%;
	}

	/* css */
	.case {
		width: 90%;
		height: 500px;
	}
	.boxF, .boxS, .boxT, .overlay {
		width: 140px;
	}
	.case .part1 {
		width: 610px;
    	margin-left: -305px;
	}
	.case .part2 {
	    width: 760px;
	    top: 128px;
	    margin-left: -380px;
	}
	.case .part3 {
		width: 610px;
		top: 257px;
		margin-left: -305px;
	}
}
@media screen and (min-width: 1040px) and (max-width: 1400px){
	.header {
		max-width: 100%;
	}
	.navlist li {
		padding: 0px 28px;
	}
	div.togglenav a {
		padding: 5px 20px;
	} 

	.footer-head {
		width: 98%;
	}
	.footer-body {
		width: 98%;
	}
	.contact .about img {
		width: 100px;
		height: 100px;
	}
	.footer-foot {
		width: 98%;
	}
	.info {
		width: 90%;
	}
	.info h2 {
		font-size: 45px;
	}

	.list {
		width: 90%;
	}

	/* css */
	.case {
		width: 90%;
		height: 550px;
	}
	.boxF, .boxS, .boxT, .overlay {
		width: 160px;
	}
	.case .part1 {
		width: 690px;
		margin-left: -345px;
	}
	.case .part2 {
	    width: 860px;
	    top: 146px;
	    margin-left: -430px;
	}
	.case .part3 {
		width: 690px;
		top: 292px;
		margin-left: -345px;
	}


}