* {
    padding: 0px;
    margin: 0px;
}

ul {
    padding: 0;
}
.lis {
    position: absolute;
    top: 25%;
    left: 0px;
    line-height: 45px;
    font-size: 16px;
    background: #fff;
    padding-bottom: 30px;
}

.navwholes .banner{
	height: 0;
	width: 100%;
	margin-bottom: 45px;
}
.layui-carousel img {
    width: 100%;
    height: 100%;
}

.navwhole {
    width: 100%;
}

.navwhole .banner {
        width: 100%;
    position: relative;
    z-index: 1;
	height:unset;
}

.navwhole  .banner img {
    max-width: 500%;
    width: 100%;
}

.navwhole .banner  .phone_nav  img {
    max-width: 35%;
    width: 32%;
}


.navwhole .banner .nav {
    padding: 0.3% 3%;
    width: 90%;
    height: 300px;
    position: absolute;
    top: 0;
    display: flex;
    justify-content: space-between;
}

.navwhole .banner .nav .nav_logo {
    width: 120px;
    height: 50px;
    /* position: absolute; */
    /* top: 20px;
    left: 140px; */
}

.navwhole .banner .nav .nav_flex {
    padding-right: 10px;
    width: 58%;
    line-height: 100px;
    position: relative;
    /* overflow: hidden; */
    text-align: center;
}

.navwhole .banner .nav .nav_flex .nav_ul {
    display: flex;
    justify-content: space-between;
}


.navwhole .banner .nav .phone_nav {
    display: none;
    position: relative;
}

.navwhole .banner .nav .nav_ul {
    font-size: 16px;
    color: #fff;
    position: relative;
}

.language {
    color: #fff;
    position: absolute;
    top: -30px;
    right: 30px;
}

.navwhole .banner .nav .nav_ul .nav_drop {
    /* border: 1px solid #000; */
    position: fixed;
    color: #000;
    border-radius: 5px;
    position: relative;
    text-align: center;
    padding: 5px 0 20px 0;
    top: -20px;
    left: 5px;
    width: 100px;
    background: #ffffff;
    line-height: 35px;
 }

.navwhole .banner .nav .nav_flex .nav_ul ul li:hover .nav_drop{display:block;}



.navwhole .banner .nav .nav_ul .nav_drop2 {
    /* border: 1px solid #000; */
    width: 100px;
}

.fontcolor {
    color: #fff;
}

.navwhole .banner .nav .nav_ul li .nav_drop {
    opacity: 0;
}

.navwhole .banner .nav .nav_ul li .nav_drop li {
    width: 100%;
}

.navwhole .banner .nav .nav_ul li:hover .nav_drop {
    opacity: 1;
}


/*手机端导航*/

.phone-header {
	position: fixed;
	display: none;
	width:100vw;
	height: 70px;
	background: #fff;
	z-index: 999;
	left: 0;
	right: 0;
	/*border-bottom: 1px solid #ddd;*/
}


/**/

.phone-header-box {
	position: fixed;
	top: 10px;
	left: 0;
	/*background: #fff;*/
	width: 100vw;
	top: 0;
	z-index: 50;
}

.phone-header h1 {
	line-height: 20px;
	padding: 10px 0 0 25px;
	margin: 0;
	margin-bottom: 10px;
	height:50px;
}

.phone-header .menu-push {
	/*position: absolute;
	right: 15px;
	top: 5px;*/
	width: 40px;
	height: 40px;
	padding: 12px 8px 0;
	/*background: #fff;*/
	/*z-index: 999;*/
	float: right;
	margin-right: 15px;
}

.phone-header .menu-push.fixed {
	position: fixed;
	background: rgba(255, 255, 255, .8);
}

.phone-header .menu-push.fixed.menu-open {
	width: 100%;
	background: rgba(255, 255, 255, 1);
}

.phone-header .menu-push .push-line {
	float: right;
	width: 27px;
	height: 27px;
}

.phone-header .menu-push .line {
	display: block;
	width: 27px;
	height: 3px;
	margin-bottom: 4px;
	background: #fff;
	overflow: hidden;
	transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
	-webkit-transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
	-moz-transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
	-o-transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.phone-header .menu-push.menu-open {
	/*background: #e5e5e5;*/
}

.phone-header .menu-push.menu-open .line {
	background: #fff;
}

.phone-header .menu-push.menu-open .line-1 {
	width: 30px;
	transform: translate(0px, 7px) rotate(45deg);
	-webkit-transform: translate(0px, 7px) rotate(45deg);
	-moz-transform: translate(0px, 7px) rotate(45deg);
	-o-transform: translate(0px, 7px) rotate(45deg);
}

.phone-header .menu-push.menu-open .line-2 {
	width: 0px;
	transform: translateX(27px);
	-webkit-transform: translateX(27px);
	-moz-transform: translateX(27px);
	-o-transform: translateX(27px);
}

.phone-header .menu-push.menu-open .line-3 {
	width: 30px;
	transform: translate(0px, -7px) rotate(-45deg);
	-webkit-transform: translate(0px, -7px) rotate(-45deg);
	-moz-transform: translate(0px, -7px) rotate(-45deg);
	-o-transform: translate(0px, -7px) rotate(-45deg);
}

.phone-header .menu-list {
	position: absolute;
	left: 0;
	width: 100%;
	z-index: 999;
	display: none;
	height: 100vh;
	background: #fff;
}

.phone-header .menu-list form .choose {
	padding: 16px 15px 11px;
	background: #fff;
	box-shadow: 0px 3px 3px #f1f1f1 inset;
}

.phone-header .menu-list form .choose a {
	float: left;
	font-size: 12px;
	color: #666666;
	line-height: 12px;
}

.phone-header .menu-list form .choose i {
	float: left;
	width: 1px;
	height: 7px;
	margin: 3px 27px 0;
	background: #c2c1c1;
}

.phone-header .menu-list form .choose a.on {
	color: #ff0000;
}

.phone-header .menu-list .form {
	height: 36px;
	background: #e9e9e9;
}

.phone-header .menu-list form input {
	float: left;
}

.phone-header .menu-list form .text {
	width: 80%;
	height: 33px;
	line-height: 33px;
	border: none;
	padding-left: 15px;
	background: #e9e9e9;
}

.phone-header .menu-list form .search {
	height: 33px;
	width: 33px;
	margin-right: 15px;
	float: right;
	border: none;
	background: #e9e9e9 url("http://www.nabel.cc/static/web/css/../img/form_ico.png") no-repeat center center;
	background-size: 15px 15px;
}

.phone-header .menu-list ul {
	float: none;
	overflow: auto;
}

.phone-header .menu-list li {
	float: none;
	background: #ffffff;
	padding: 0;
	margin: 0;
}

.phone-header .menu-list li .z1 {
	display: block;
	height: 43px;
	line-height: 43px;
 	color: #333333;
	border-bottom: 1px solid #e5e5e5;
	padding: 0 25px;
	position: relative;
}

.phone-header .menu-list li .z1 i {
	position: absolute;
	right: 15px;
	top: 14px;
	width: 17px;
	height: 17px;
	background: url("http://www.nabel.cc/static/web/css/../img/menu_list1.png") no-repeat right center;
	background-size: 17px 17px;
}

.phone-header .menu-list li .z1.active {
	color: #333333;
	background: #e5e5e5;
	border-color: transparent;
	font-weight:bold;
	border-bottom: 1px solid #F00;
}

.phone-header .menu-list li .z1.active i {
	background-image: url("http://www.nabel.cc/static/web/css/../img/menu_list2.png");
}

.phone-header .menu-list li dl {
	padding: 0px 0;
	display: none;
	margin: 0;
}

.phone-header .menu-list li dd {}

.phone-header .menu-list li dd a {
	padding: 0 25px;
	background: #f5f5f5;
	display: block;
	height: 30px;
	line-height: 30px;
 	color: #7c7c7c;
}

.phone-header .menu-list li dd:hover a {
	background: #e5e5e5;
	color: #fff;
}

.phone-header .menu-list li dd {
	-webkit-margin-start: 0px;
}

.phone-header .menu-list ul {
	-webkit-padding-start: 0px;
}

.phone-header-box h1 img {
	/*height: 50px;*/
}


/*手机端导航*/



@media screen and (max-width: 1402px) {
    .navwhole .banner .nav .nav_flex {
        padding-right: 10px;
        width: 64%;
        line-height: 100px;
        position: relative;
        overflow: hidden;
        text-align: center;
    }
}

@media screen and (max-width: 1340px) {
    .navwhole .banner .nav .nav_flex {
        padding-right: 10px;
        width: 69%;
        line-height: 100px;
        position: relative;
        overflow: hidden;
        text-align: center;
    }
}

@media screen and (max-width: 1280px) {
    .navwhole .banner .nav .nav_flex {
        padding-right: 10px;
        width: 80%;
        line-height: 100px;
        position: relative;
        overflow: hidden;
        text-align: center;
    }
}

@media screen and (max-width: 1100px) {
    .navwhole .banner .nav .nav_flex {
        /* border: 1px solid #000; */
        /* padding-right: 10px; */
        width: 88%;
        line-height: 100px;
        position: relative;
        /* overflow: hidden; */
        text-align: center;
    }
}


/*屏幕小于1024 */

@media screen and (max-width: 980px) {
	
	.navwhole .banner .nav {
    padding: 0.3% 3%;
    width: 90%;
    height: auto;
    position: absolute;
    top: 0;
    display: flex;
    justify-content: space-between;
}
	
.phone-header {
    display: block;
    height: auto;
}
	.layui-carousel {
	        height: 250px !important;
	    }
		 
    .layui-carousel img {
        width: 150%;
        height: 100%;
    }
    .navwhole {
        width: 100%;
    }
    .navwhole .banner {
        /* height: 700px; */
    }
    .navwhole .banner .nav {
        width: 94%;
        padding: 3%;
    }
    .navwhole .banner .nav .comp_img {
        float: left;
		display:none;
    }
    .navwhole .banner .nav .nav_logo {
        /* width: 60%; */
    }
    .navwhole .banner .nav .nav_flex {
        display: none;
    }
    .navwhole .banner .nav .phone_nav {
        display: block;
    }
    .navwhole .banner .nav .phone_nav .nav_drop .phone_li {
        font-size: 9px;
        width: 37%;
        margin: 0px 0px;
        float: right;
    }
    .navwhole .banner .nav .phone_nav .nav_drop .phone_li .phone_img {
        text-align: right;
        width: 80%;
    }
    .navwhole .banner .nav .phone_nav .nav_drop .phone_li .phone_navdis {
        width: 100px;
        position: relative;
        right: 30px;
        background: #fff;
        /* opacity: 0; */
        /* transition: 1s; */
        display: none;
    }
    .navwhole .banner .nav .phone_nav .nav_drop .phone_li .phone_navdis li {
        padding: 10% 0;
        text-align: center;
        position: relative;
        padding: 12px 0px;
    }
    .navwhole .banner .nav .phone_nav .nav_drop .phone_li .phone_navdis li ul {
        width: 80%;
        position: absolute;
        top: 5px;
        left: -79px;
        background: #fff;
        opacity: 0;
        transition: 1s;
        line-height: 30px;
    }
    .navwhole .banner .nav .phone_nav .nav_drop .phone_li .phone_navdis li:hover ul {
        opacity: 1;
    }
    .navwhole .banner .nav .phone_nav .nav_drop .phone_li:hover .phone_navdis {
        /* opacity: 1; */
        display: block;
    }
    .navwhole .banner .nav .phone_nav .nav_drop .nav_drop {
        width: 50%;
    }
} 


@media (max-width: 750px){
	
	.navwhole .banner{
		
		overflow:hidden}
.navwhole .banner img{
    width: 120%;
}


.phone-header .menu-push {
    width: 35px;
    height: 35px;
    padding: 10px 5px 0 0;
}

.phone-header-box h1 img {
    height: 30px;
}

.phone-header {
    display: block;
    height: auto;
}
}

@media (max-width: 500px){
.navwhole .banner img {
    width: 150%;
}

.navwhole .phone-header-box img {
    width: 50%;
}
.phone-header {
    display: block;
     height: auto; 
    width: 100%;
}


}



@media screen and (max-width: 400px)
{
.navwhole .banner img {
    width: 160%;
}


.navwhole .phone-header-box img {
    width: 50%;
}

}