@charset "utf-8";
/* CSS Document */
*,*:before,*:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
body{ margin:0px; padding:0px; font-size:12px;font-family:"微软雅黑","黑体";color:#898989;line-height:1; background:#FFF;}
ul,li,dl,dd,dt,p,h1,h2,h3,h4,h5,h6,ol,form,input{ margin:0px; padding:0px;}
input,textarea { font-family: "微软雅黑"; border: none; outline: none; background: none; }
ul,li{ list-style:none}
img{border:0px; padding:0px; display: block;}
a{ color:#5c5c5c; text-decoration:none}

h2,h3,h4,b,strong { font-weight: normal; }
em,i { font-style: normal; }

.clear{ zoom: 1; }
.clear:after { content: ''; display: block; clear: both; }
.fl { float:left}
.fr { float:right}
.hidden{display:none; background: url() no-repeat center;}
.w1200{ width: 1200px; margin: 0 auto;}
.sideBar{ width: 72px; z-index: 98; position: fixed; top: 0; left: 0; z-index: 98; background: #000; height: 100vh;}
.sideBar ul{ width: 72px; position: absolute; top: 50%; transform: translateY(-50%);}
.sideBar ul li{ margin-bottom: 15px; position: relative; transition: 0.5s; overflow: hidden; width: 72px; transition: 0.5s; height: 46px;}
.sideBar ul li .icon{ width: 72px; height: 46px; position: relative;}
.sideBar ul li .icon img{ transition: 0.5s; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);}
.sideBar ul li .icon img.on{ opacity: 0;}
.sideBar ul li p{ width: 94px; height: 46px; position: absolute; left: 72px; line-height: 46px; top: 0; color: #fff;}
.sideBar ul li:hover{ width: 166px; background: linear-gradient(#860c16,#a70613);}
.sideBar ul li:hover .icon img{ opacity: 0;}
.sideBar ul li:hover .icon img.on{ opacity: 1;}

.top.page{ background: rgba(0,0,0,0.5); position: fixed; top: 0; left: 0;}
.sideBar.page{ background: rgba(0,0,0,0.5);}
.sideBar.page ul li:hover{ background: #292828;}
.top{ width: 100%; height: 120px; border-bottom: 1px solid #5c5c5c; background: #131313; position: relative; z-index: 99;}
.topBox{ width: 1200px; margin: 0 auto; overflow: hidden;}
.topBox .logo{ float: left; height:120px; line-height: 120px;}
.topBox .logo img{ display: inline-block; vertical-align: middle;}
.topBox .link{ float: right; line-height: 120px;}
.topBox .link ul{ padding: 0 12px; display: inline-block; vertical-align: middle; height: 54px; line-height: 54px; border: 1px solid #b90312; border-radius:30px;}
.topBox .link ul li{ border-radius:5px; overflow:hidden ; position: relative; line-height: 54px; float: left; width: 44px; text-align: center;}
.topBox .link ul li img{ display: inline-block; vertical-align: middle;}
.topBox .phone{ float: right; height: 120px; line-height: 120px; margin-right: 50px;}
.topBox .phoneBox{ padding-left: 20px; border-left:1px solid #525252; display: inline-block; vertical-align: middle;}
.topBox .phoneBox h2{ height: 36px; line-height: 36px; font-weight: normal; color: #fff;}
.topBox .nav{ float: right; overflow: hidden;}
.topBox .nav ul{ overflow: hidden;}
.topBox .nav ul li{ float: right; margin-right: 40px; height: 120px; line-height: 120px;}
.topBox .nav ul li a{  display: block; height: 118px; line-height: 118px; padding: 0 20px; font-size: 24px; color: #fff;}
.topBox .nav ul li.on a{ border-bottom:2px solid #c90212;}
.topBox .nav ul li:hover a{ border-bottom:2px solid #c90212;}

.indexContainer{ width: 100%; background: url(../images/bg_02.jpg) center top no-repeat; height: 3100px;}
.indexContainer .banner{ width: 100%; height: 915px;position: relative;}
.indexContainer .banner .bannerBox{ width: 1200px; margin: 0 auto; height: 100%; position: relative;}
.indexContainer .banner .bannerBox img{ position: absolute; right: 0; top: 50%; transform: translateY(-50%);}

.indexContainer .tit{ width: 100%; padding: 50px 0 80px 0;}
.indexContainer .tit img{ display: block; margin: 0 auto;}
.indexContainer .layer1{ width: 1200px; margin:0 auto;}
.indexContainer .layer1 img.pic{ width: 100%; height: auto; display: block; margin: 0 auto;}
.indexContainer .layer1 .swiper-button-next{ width: 60px; height: 60px; border-radius:50%; background: none; right: 0; text-align: center; line-height: 60px; opacity: 1; font-size: 18px; color: #fff; border: 1px solid #fff;}
.indexContainer .layer1 .swiper-button-next::after{ display: none;}
.indexContainer .layer1 .swiper-button-prev{ width: 60px; height: 60px; border-radius:50% ; background: none; ; left: 0; text-align: center; line-height: 60px; opacity: 1; font-size: 18px; color: #fff; border: 1px solid #fff;}
.indexContainer .layer1 .swiper-button-prev::after{ display: none;}
.indexContainer .layer2{ padding-top: 120px; width: 1245px; margin: 0 auto;}
.indexContainer .layer2 ul{ width: 100%; height: 715px; padding-top: 120px;}
.indexContainer .layer2 ul li{ transition: 0.5s; width: 415px; float: left; background: url(../images/layer2Bg_06.png); height: 715px; background-size:100% 100% ; padding-top: 97px; box-sizing: border-box; position: relative;}
.indexContainer .layer2 ul li img{ position: absolute; top: 0; left: 50%;  transform: translate(-50%,-50%); transition: 0.5s;}
.indexContainer .layer2 ul li img.on{ opacity: 0;}
.indexContainer .layer2 ul li h2{ font-size: 34px; text-align: center; color: #000; font-weight: normal; padding-bottom: 25px;}
.indexContainer .layer2 ul li p{ width: 100%; padding: 0 25px; box-sizing: border-box; font-size: 22px; color: #000; line-height: 34px;}
.indexContainer .layer2 ul li a{ display: block; margin:25px auto 0 auto; background: url(../images/index_29.png); width:313px; height: 54px; text-align: center; line-height: 54px; color: #dc0012; font-size: 24px; background-size:100% 100% ;}
.indexContainer .layer2 ul li:hover{ background: url(../images/layer2Bg_03.png); background-size:100% 100%;}
.indexContainer .layer2 ul li:hover img{ opacity: 0;}
.indexContainer .layer2 ul li:hover img.on{ opacity: 1;}
.indexContainer .layer2 ul li:hover a{ color: #FFF}
.footer{ width: 100%; background: #350b08;}
.footer .footerBox{ padding-bottom: 90px; width: 1200px; margin: 0 auto; padding-left: 225px; padding-top: 50px; background: url(../images/set_03.png) 38px 50px no-repeat;}
.footer .footerBox p{ font-size: 14px; color: #fff; line-height: 32px;}
.footer .footerBox p:last-child{ text-align: center;}

.cantact{ background: url(../cantactBg.png); height: 1080px; padding-top: 160px; box-sizing: border-box;}
.cantact .conBox{ padding-top: 105px; background: url(../images/jz_03.png); width: 1230px; height: 760px; background-size:100% 100%; margin: 0 auto;}
.cantact .conBox .left{ float: left; width: 250px; float: left; padding-top: 205px; padding-left: 85px; box-sizing: border-box;}
.cantact .conBox .left p{ font-size: 26px; color: #fff; padding-bottom: 35px;}
.cantact .conBox .left h2{ font-size: 32px; color: #c60202;}
.cantact .conBox .Right{ float: left; width: 870px; height:auto; padding: 0 25px 25px 25px; box-sizing: border-box; background: #787676; border-radius:10px;}
.cantact .conBox .Right h2{ color: #fff; text-align: center; font-size: 34px; line-height: 120px; font-weight: bold;}
.cantact .conBox .Right ul{ width: 100%;}
.cantact .conBox .Right ul li{ color: #fff; position: relative; padding-left: 56px; width: 100%; box-sizing: border-box; font-size: 26px; line-height: 50px;}
.cantact .conBox .Right ul li img{ position: absolute; left: 20px; top: 50%; transform: translateY(-50%);}
.cantact .conBox .Right img.map{ display: block; width: 100%; height: auto;}

.about{ padding: 180px 0 135px 0;}
.aboutBox{ width: 1230px; background: url(../images/about_03.png); height: 640px; background-size:100% 100% ; margin: 0 auto;}
.aboutBox .hd{ width: 320px; height: 100%; float: left; padding-left: 30px; padding-top: 220px; box-sizing: border-box;}
.aboutBox .hd ul{ width: 100%;}
.aboutBox .hd ul li{ cursor: pointer; margin-bottom: 15px; background: url(../images/about_11.png); width: 300px; height: 53px; line-height: 53px;text-indent: 80px; font-size: 22px; color: #fff;}
.aboutBox .hd ul li.on{ background: url(../images/about_18.png);}
.aboutBox .bd{ float: left; margin: 36px 0 0 0; width: 870px; height: 560px; background: #787676; border-radius:12px;}
.aboutBox .bd .list1{ padding: 0 25px; box-sizing: border-box; width: 100%;}
.aboutBox .bd .list1 h2{ color: #fff; text-align: center; font-size: 34px; line-height: 120px; font-weight: bold;}
.aboutBox .bd .list1 ul{ width: 100%;}
.aboutBox .bd .list1 ul li{ color: #fff; position: relative; padding-left: 56px; width: 100%; box-sizing: border-box; font-size: 26px; line-height: 50px;}
.aboutBox .bd .list1 ul li img{ position: absolute; left: 20px; top: 50%; transform: translateY(-50%);}
.aboutBox .bd .list1 img.map{ display: block; width: 100%; height: auto;}

.aboutBox .bd .list2{ width: 100%;}
.aboutBox .bd .list2 ul{ width: 100%;}
.aboutBox .bd .list2 ul li{ margin-bottom: 50px; width: 100%; height: 200px; padding-top: 60px;}
.aboutBox .bd .list2 ul li .icon{ width: 295px; height: 200px; float: left; position: relative;}
.aboutBox .bd .list2 ul li .icon img.pic{ position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); z-index: 1;}
.aboutBox .bd .list2 ul li .icon .bg{ left: 50%; top: 50%; transform: translate(-50%,-50%); z-index: 2; position: absolute; }
.aboutBox .bd .list2 ul li .text{ float: left; width: 545px; height: 190px; margin-top: 10px; background: #010101; border-radius:10px; padding: 15px 15px 0 74px; box-sizing: border-box; position: relative;}
.aboutBox .bd .list2 ul li .text span{ display: inline-block; left: 20px; width: 74px; text-align: center; line-height: 32px; font-size: 28px; color: #a60909; position: absolute; top: 50%; transform: translateY(-50%); writing-mode: vertical-lr}
.aboutBox .bd .list2 ul li .text p{ font-size: 22px; color: #fff; line-height: 28px; color: #fff;}

.AppTop{ display: none;}
.box {
     display: none;
     width: 100%;
     height: 100%;
     position: fixed;
     left:0;
     top:0;
     background-color:rgba(0,0,0,0.5);
 }
 .boxs {
     width: 400px;
	 line-height: 30px;
	 padding: 0 10px;
     background: #fff;
     box-shadow: 1px 7px 18px 0px rgba(84, 115, 128, 0.11);
     border-radius: 4px;
     cursor: pointer;
     position: absolute;
     left: 50%;
     top: 50%;
     margin-top: -15px;
     margin-left: -200px;
 }

@media only screen and (max-width:1000px ) {
	.top{ display: none;}
	body{ padding-top: 60px;}
	.AppTop{ box-shadow: 0 0 10px rgba(0,0,0,0.1); display: block; z-index: 99; background: #333; width: 100%; height: 60px; position: fixed; top: 0; left: 0;}
	.AppTop .logo{ padding-left: 20px; height: 60px; line-height: 60px;}
	.AppTop .logo img{ display: inline-block; vertical-align: middle; height: 70%; width: auto;}
	.sideClick{ position: absolute; width: 28px; height: 22px; right: 15px; top: 50%; transform: translateY(-50%);}
	.sideClick span{ width: 100%; height: 3px; border-radius:2px; background: #fff; transition: 0.5s; position: absolute;}
	.sideClick span:nth-child(1){ top: 0;}
	.sideClick span:nth-child(2){ top: 50%; transform: translateY(-50%);}
	.sideClick span:nth-child(3){ bottom: 0;}
	.sideClick.on span:nth-child(1){ top: 50%; transform: translateY(-50%) rotate(45deg);}
	.sideClick.on span:nth-child(2){ width: 0;}
	.sideClick.on span:nth-child(3){  top: 50%; transform: translateY(-50%) rotate(-45deg);}
	.sideBar{ display: block; left: -100%; transition: 0.5s; transition: 0.5; z-index: 100; width: 70%; height: 100vh; box-shadow: 0 0 10px rgba(0,0,0,0.1); position: fixed; top: 0; background: #444;}
	.AppNav{ display: none; width: 100%; position: absolute; top: 60px; left: 0; background: #333;}
	.AppNav ul{ width: 100%;}
	.AppNav ul li{ height: 100%; height: 48px; line-height: 48px; padding: 0 30px; box-sizing: border-box; border-bottom: 1px solid #d1d1d1;}
	.AppNav ul li a{ font-size: 14px; color: #fff;}
	.AppNav ul li:last-child{ border: 0;}
	.indexContainer{ height: auto; background-size:100% 100%;}
	.indexContainer .banner{ width: 100%; height: auto; padding: 80px 0;}
	.indexContainer .banner .bannerBox{ width: 100%;}
	.indexContainer .banner .bannerBox img{ position: relative; left: auto; top: auto; transform: none; margin: 0 auto; width: 60%; height: auto;}
	.indexContainer .layer1{ width: 100%; padding: 0 15px; box-sizing: border-box;}
	.indexContainer .tit{ padding: 30px 0;}
	.indexContainer .tit img{ width: 100%; margin: 0 auto;}
	.indexContainer .layer2{ width: 100%; padding: 0 15px; box-sizing: border-box;}
	.indexContainer .layer2 ul{ width: 100%; height: auto; overflow: hidden;}
	.indexContainer .layer2 ul li{ width: 100%; margin-bottom: 100px;}
	.indexContainer .layer2 ul li h2{ font-size: 26px;}
	.indexContainer .layer2 ul li p{ font-size: 16px;}
	.footer .footerBox{ width: 100%; padding: 200px 15px 40px 15px; box-sizing: border-box; background:url(../images/set_03.png) center 20px no-repeat ;}
	.cantact{ min-height: 100vh; background-size:auto 100%; width: 100%; height: auto; padding:25px 15px; box-sizing: border-box;}
	.cantact .conBox{ height: auto; overflow: hidden; width: 100%; background: none; background: #2c2c2c; padding: 0;padding-bottom: 15px; border-radius:15px ;}
	.cantact .conBox .left{ float: inherit; width: 100%; padding:35px 15px; box-sizing: border-box;}
	.cantact .conBox .left p{ font-size: 16px; padding-bottom: 15px;}
	.cantact .conBox .left h2{ font-size: 24px;}
	.cantact .conBox .Right{ padding: 0 10px 15px 10px; width: 95%; height: auto; float: inherit; margin: 0 auto;}
	.cantact .conBox .Right h2{ font-size: 16px;}
	.cantact .conBox .Right ul li{ padding-left: 25px; font-size: 12px; line-height: 22px;}
	.cantact .conBox .Right ul li img{ left: 0; width: 14px; height: auto;}
	.cantact .conBox .Right img.map{ width: 100%; height: auto; margin-top: 15px;}
	
	.about{ padding: 40px 15px; box-sizing: border-box;}
	.aboutBox{ background: none; width: 100%; height: auto; box-sizing: border-box; overflow: hidden; padding-bottom: 15px;}
	.aboutBox .hd{ float: inherit; width: 100%; padding: 30px 0 15px 0;}
	.aboutBox .hd{ text-align: center;}
	.aboutBox .hd ul li{ display: inline-block; width: 150px; line-height: 26px; text-align: left; text-indent: 40px; height: 26px; font-size: 14px; background-size:100% 100% ;}
	.aboutBox .hd ul li.on{ background-size:100% 100% ;}
	.aboutBox .bd{ height: auto; padding-bottom: 15px; width: 95%; margin: 0 auto; float: inherit;}
	.aboutBox .bd .list1{ padding: 0 10px;}
	.aboutBox .bd .list1 h2{ line-height: 60px; font-size: 22px;}
	.aboutBox .bd .list1 ul li{ padding-left: 25px; font-size: 12px; line-height: 24px;}
	.aboutBox .bd .list1 ul li img{ left: 0; height: 14px; width: auto;}
	.aboutBox .bd .list1 img.map{ width: 100%; height: auto;}
	.aboutBox .bd .list2 ul li{ width: 100%; height: auto; overflow: hidden; padding: 0;}
	.aboutBox .bd .list2 ul li .icon{ float: inherit; width: 100%; height: 300px;}
	.aboutBox .bd .list2 ul li .text{ width: 96%; margin: 0 auto; float: inherit; height: auto; padding:15px 15px 15px 74px}
	.aboutBox .bd .list2 ul li .text p{ font-size: 14px; line-height: 26px;}
}