﻿@charset "utf-8";
/* CSS Document */
.phone_nav{display:none;}
@media screen and (max-width:1002px){
	.phone_nav{display: block;}
	.body_on{overflow:hidden; /*width:100%; height:100%; position:fixed; left: 0; top: 0;*/}
	
	/*头部*/
	.phone_nav .top{ background: #fff; height: 50px; position:fixed; left: 0; top: 0; width: 100%; box-sizing: border-box; padding: 0 20px; z-index:999;border-bottom: 1px solid #ececec;}
	.phone_nav .top .a{float: left; height: 30px; margin: 10px 0;}
	.phone_nav .top .a img{height:100%;}
	.phone_nav .top .but{ float:right; width: 25px; height: 25px; margin:10px 0; display: block;}	
	.phone_nav .top .but i{width:100%; height: 2px; margin-top: 15px; background: #a50319; display: block; position: relative; transition: 0.4s;}
	.phone_nav .top .but i:before,
	.phone_nav .top .but i:after{content:""; position:absolute; left:0; top:0; display:block; width:100%; height:2px; background: #000; transition: 0.4s;}
	.phone_nav .top .but i:before{ margin-top: -7px;}
	.phone_nav .top .but i:after{ margin-top: 7px;}
	
	/*背景*/
	.phone_nav .box{ width:100%; height: 100%; background-color: rgba(0,0,0,.85); position: fixed; left: 0; top: 0; z-index: 998; transform: translateX(100%); transition: 0.7s; }
	.phone_nav .box_con{ margin:50px 20px 10px 20px; overflow-x: hidden;}
	
	/*列表*/
	.phone_nav .box_con ul{ border-bottom: 1px solid rgba(225,225,225,0.7);}
	.phone_nav .box_con li{ border-bottom: 1px solid rgba(225,225,225,0.7); padding: 15px 10px; position: relative;}
	.phone_nav .box_con li a{color:#fff; font-size: 16px; display: block; line-height: 30px;}
	.phone_nav .box_con li:last-child{border-bottom: 0; }
	.phone_nav .box_con ol{display: none; padding-top: 10px;}
	.phone_nav .box_con .a_zk{position:absolute; right:0; top:15px; width: 30px; height: 30px; transition:0.4s;  transform: rotate(-90deg);
	background: url(../images/ico_nav.png) center no-repeat;}
	.phone_nav .box_con .a_zk_on{transform: rotate(0deg);}
	
	/*打开样式*/
	.phone_on .top .but i:before{ transform: rotate(45deg); margin: 0;}
	.phone_on .top .but i:after{ transform: rotate(-45deg); margin: 0;}
	.phone_on .top .but i{ background:none;}
	.phone_on .box{transform: translateX(0%); }
	
	
	/*另外一个手机导航*/
	.item-has-children {position: relative;}
	.phone_nav .item-has-children .a_zk{position:absolute; right:0; top:7px; width: 30px; height: 30px; transition:0.4s;  transform: rotate(-90deg);
	background: url(../images/ico_nav.png) center no-repeat; cursor: pointer;}
	.phone_nav .item-has-children .a_zk_on{transform: rotate(0deg);}
	.phone_nav header .a{float: left; height: 30px; margin: 10px 20px;}
	.phone_nav header .a img{height:100%;}
	.overflow-hidden{ overflow:hidden;width:100%; height:100%; position:fixed; left: 0; top: 0;}
	.cd-main-content { min-height: 100%; position: relative; z-index: 2;  -webkit-transition-property: -webkit-transform; -moz-transition-property: -moz-transform; transition-property: transform; -webkit-transition-duration: 0.4s; -moz-transition-duration: 0.4s; transition-duration: 0.4s; }
	.cd-main-content.lateral-menu-is-open {-webkit-transform: translateX(-260px); -moz-transform: translateX(-260px); -ms-transform: translateX(-260px); -o-transform: translateX(-260px); transform: translateX(-260px); }
	.main-content{padding-top: 50px;}
	
	header {border-bottom: 1px solid #ececec; box-sizing: border-box; position: fixed; top: 0; left: 0; height: 50px; width: 100%; background: #fff; z-index: 999; /* Force Hardware Acceleration in WebKit */
	-webkit-transform: translateZ(0); -webkit-backface-visibility: hidden; -webkit-transition-property: -webkit-transform; -moz-transition-property: -moz-transform; transition-property: transform; -webkit-transition-duration: 0.4s; -moz-transition-duration: 0.4s; transition-duration: 0.4s; }
	header.lateral-menu-is-open { -webkit-transform: translateX(-260px); -moz-transform: translateX(-260px); -ms-transform: translateX(-260px); -o-transform: translateX(-260px); transform: translateX(-260px); }
	
	#cd-menu-trigger { position: absolute; right: 0; top: 0; height: 100%; width: 50px; background-color: #a50319;}
	#cd-menu-trigger .cd-menu-text { height: 100%; text-transform: uppercase; color: #FFF; font-weight: 600; display: none; }
	#cd-menu-trigger .cd-menu-icon {display: inline-block; position: absolute; left: 50%; top: 50%; bottom: auto; right: auto; -webkit-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); -o-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); width: 18px; height: 2px; background-color: #FFF;}
	#cd-menu-trigger .cd-menu-icon::before, #cd-menu-trigger .cd-menu-icon:after { content: ''; width: 100%; height: 100%; position: absolute; background-color: inherit; left: 0; }
	#cd-menu-trigger .cd-menu-icon::before { bottom: 5px; }
	#cd-menu-trigger .cd-menu-icon::after { top: 5px; }
	#cd-menu-trigger.is-clicked .cd-menu-icon { background-color: rgba(255, 255, 255, 0); }
	#cd-menu-trigger.is-clicked .cd-menu-icon::before, #cd-menu-trigger.is-clicked .cd-menu-icon::after { background-color: white; }
	#cd-menu-trigger.is-clicked .cd-menu-icon::before { bottom: 0; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); }
	#cd-menu-trigger.is-clicked .cd-menu-icon::after { top: 0; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); }
	
	#cd-lateral-nav { position: fixed; height: 100%; right: 0; top: 0; visibility: hidden;z-index: 1; width: 0; background-color: #242e30; overflow-y: auto;
	-webkit-transform: translateZ(0); -webkit-backface-visibility: hidden; -webkit-transition: -webkit-transform .4s 0s, visibility 0s .4s; -moz-transition: -moz-transform .4s 0s, visibility 0s .4s; transition: transform .4s 0s, visibility 0s .4s; -webkit-transform: translateX(80px); -moz-transform: translateX(80px); -ms-transform: translateX(80px); -o-transform: translateX(80px); transform: translateX(80px); }
	#cd-lateral-nav .cd-navigation { margin: 10px 0 16px; }
	#cd-lateral-nav .sub-menu { padding: 0 10px 20px 15px; display: none; }
	#cd-lateral-nav a { display: block; line-height: 1.5em; padding: 10px 30px 10px 15px; color: #fff; font-size: 16px;}
	#cd-lateral-nav a.current { background-color: #3a4a4d; color: #FFF; }
	#cd-lateral-nav.lateral-menu-is-open { width: 260px;-webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); visibility: visible; -webkit-transition: -webkit-transform .4s 0s, visibility 0s 0s; -moz-transition: -moz-transform .4s 0s, visibility 0s 0s; transition: transform .4s 0s, visibility 0s 0s; -webkit-overflow-scrolling: touch; }
	#cd-lateral-nav .item-has-children > a { position: relative; text-transform: uppercase; font-weight: 600;}
	#cd-lateral-nav .sub-menu a {padding: 8px;}
}
@media screen and (max-width:758px){
	.phone_nav .top {padding: 0 15px;}
	.phone_nav .box_con {margin: 50px 15px 10px 15px;}
	.phone_nav .box_con li a {font-size: 15px;}
	.phone_nav .box_con li {padding: 10px;}
	.phone_nav .box_con .a_zk {top: 10px;}
	.phone_nav .box_con ul {padding-top: 10px;}
}
@media screen and (max-width:470px){/*--320--*/
	.phone_nav .top {padding: 0 10px;}
	.phone_nav .box_con {margin: 50px 10px 10px 10px;}
	.phone_nav .box_con li a {font-size: 14px;}
	
	/*另一个*/
	#cd-lateral-nav.lateral-menu-is-open {width: 180px;}
	.cd-main-content.lateral-menu-is-open {transform: translateX(-180px);}
	header.lateral-menu-is-open {transform: translateX(-180px);}
	#cd-lateral-nav a {padding: 6px 30px 6px 10px; font-size: 14px;}
	.phone_nav .item-has-children .a_zk {background-size: 12px auto; top: 2px;}
	#cd-lateral-nav .sub-menu {padding: 0 10px 10px 15px;}
}
