@charset "utf-8";
/* CSS Document */
/* reset */
html,body,h1,h2,h3,h4,h5,h6,div,dl,dt,dd,ul,ol,li,p,blockquote,pre,hr,figure,table,caption,th,td,form,fieldset,legend,input,button,textarea,menu{margin:0;padding:0;}
header,footer,section,article,aside,nav,hgroup,address,figure,figcaption,menu,details{display:block;}
table{border-collapse:collapse;border-spacing:0;}
caption,th{text-align:left;font-weight:normal;}
html,body,fieldset,img,iframe,abbr{border:0;}
i,cite,em,var,address,dfn{font-style:normal;}
[hidefocus],summary{outline:0;}
li{list-style:none;}
h1,h2,h3,h4,h5,h6,small{font-size:100%;}
sup,sub{font-size:83%;}
pre,code,kbd,samp{font-family:inherit;}
q:before,q:after{content:none;}
textarea{overflow:auto;resize:none;}
label,summary{cursor:default;}
a,button{cursor:pointer;}
h1,h2,h3,h4,h5,h6,em,strong,b{font-weight:bold;}
del,ins,u,s,a,a:hover{text-decoration:none;}
body,textarea,input,button,select,keygen,legend{font:12px/1.14 arial,\5b8b\4f53;color:#aaa;outline:0;}
body{background:#0c0c0c; font-family: -apple-system, BlinkMacSystemFont, 'Microsoft YaHei', sans-serif;font-size: 16px;color: #fff;line-height: 1.75;}
a,a:hover,a:active,a:visited,a:focus{color:#aaa; text-decoration: none;}
/* reset结束 */
html,body{ width: 100%; height: 100%; position: relative;}
#home{ width: 100%; height: 100%;}
#header{ position: fixed; z-index: 9999; display: flex; justify-content: space-between; align-items: center; height: 100px; width: 100%; padding:0 50px; background: #000;}
.nav{ width: 50%; max-width: 700px; min-width: 500px;}
.nav ul{ display: flex; justify-content: space-between;}
.nav ul li a{ position: relative; display: inline-block; line-height: 24px; color: #fff; font-size: 16px; }
.nav ul li a::before{  display: block; content: ""; position: absolute; width: 0; bottom: -10px; left: 0; height: 4px; background: #da0000; transition: all 0.5s; }
.nav ul li:hover a::before,.nav ul li.active a::before{ width: 100%; }
.tel{ min-width: 220px; height: 40px; display: flex; justify-content: space-between; align-items: center;}
.tel p{ padding: 0 15px; line-height: 40px;height: 40px; background: #da0000; border-radius: 30px;}
.tel p a{ color: #fff; font-size: 20px;}
.code{ position: relative; width: 35px; height: 35px;}
.code span.icon-code{ display: inline-block; width: 35px; height: 35px; background: url(../images/icon-code.png) no-repeat; background-size: 100% 100%; cursor: pointer;}
.code .code-img{ position: absolute; z-index: 999; bottom: -130px; left: -40px; width: 120px; height: 120px; opacity: 0; overflow: hidden; transition: all 0.5s;}
.code .code-img img{ width: 100%; height: 100%;}
.code:hover .code-img{opacity: 1;}
#header.oheight{ height: 80px; transition: all 0.5s;}
#header.oheight .nav ul li a::before{ bottom: -10px;}
.hbbg{ transition: all 0.5s; background: #000;}
#header.oheight .logo img{ max-height: 60px;}
#banner{ padding-top: 100px;}
#banner .swiper-container { width: 100%;height: auto; overflow: hidden;}
#banner .swiper-slide { position:relative }
#banner .swiper-slide img.bbg{width:100%; overflow: hidden; transform:scale(1.1,1.1); transition:1s linear 2s;}
#banner .swiper-slide-active img.bbg,.swiper-slide-duplicate-active img.bbg{transition:10s linear;transform:scale(1,1);}	
#banner .swiper-pagination{ width: auto; bottom:30px; text-align:right; right: 50px; left: auto; box-sizing: border-box;}
#banner .swiper-pagination-bullet{ width:18px;height:18px; background:none;border:2px solid #fff;}	
#banner .swiper-pagination-bullet-active{ background:#da0000; border:2px solid #da0000;}
/*作品展示*/
#work{ padding:100px 50px;}
#work .submenu{ width: 100%;}
.tit h3{ font-size: 40px; line-height: 40px; font-weight: normal;}
.tit P{ color: #fff;}
.sublist{ padding: 15px 0; height: auto; overflow: hidden;}
.sublist ul{ display: flex; justify-content: start;flex-wrap: wrap;}
.sublist ul li{ line-height: 40px; margin-bottom: 10px; }
.sublist ul li a{ padding: 10px 15px; background: #444; margin-right: 10px;}
.sublist ul li:hover a{ background: #da0000; color: #fff;}
#work .box{ width: 100%; overflow: hidden; position: relative;}
#work .box .swiper-container{ padding-bottom: 50px;}
#work .swiper-pagination{ bottom: 0; left: 0; width: auto; height: 50px;}
#work .swiper-button-next,#work .swiper-button-prev{ top: 120px; left: 0; background: none; width: 40px; height:30px; line-height: 30px; text-align: center; border: 1px solid #333; box-sizing: border-box;}
#work .swiper-button-next{ left: 50px;}
#work .row{ margin-right: -10px !important; margin-left: -10px !important;}
.work li{ padding:10px;}
.work a{ position: relative; display: block; overflow: hidden;}
.work a .txt{ position: absolute; top: 100%; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); display: flex; flex-direction:column; align-items: center; justify-content: center; transition: all 0.5s;}
.work a .txt span{ padding: 5px 15px; border: 1px solid #fff; color:#fff;}
.work li:hover a .txt{top: 0;}

.about{ display: flex; align-items: center; padding:0 50px;}
.about .box{ display: flex; justify-content: space-between; background: url(../images/about-bg.jpg) no-repeat;}
.about .rbox{ min-width: 300px; width: 25%; height: 100%; display: flex;flex-direction: column;}
.about .rbox a{ display: flex; flex-wrap: wrap; justify-content: center; align-items: center; width: 100%; height: 235px; line-height: 30px; text-align: center; background: #444; color: #fff; font-size: 24px;}
.about .rbox a small{ font-size: 16px;}
.about .rbox a.act{ background: #da0000;}
.about .lbox{ width: 40%;}
.about .cbox{ width: 60%;padding:30px 50px; height: 470px; box-sizing: border-box;}
.about .list{ display: flex; justify-content: space-between;}
.about .txt{ margin: 30px 0; line-height: 30px; color: #fff; max-height: 210px; overflow: hidden;}
.about .list .top{ width: 100%; padding: 10px 0; float: left;}
.about .list h1{ font-size: 40px; color: #fff; float: left;}
.about .list sup{ font-size: 14px; font-weight: normal;}
.about .list p{ width: 100%;}
.about .more{ width: 100%;}
.about .more a{ display: inline-block; padding: 10px 80px; background: #da0000; color: #fff;}
.case{ padding: 100px 50px;}
.case .tbox{ display: flex; justify-content: space-between; align-items: flex-end;}
.case .sublist{ font-size: 14px; color: #ddd;}
.case .sublist a{ display: inline-block; padding: 0 15px; }
.case .box{ padding-top: 30px;}
.new{ padding:50px; padding-bottom: 100px; overflow: hidden;}
.new ul{ margin-top: 20px; display: flex; justify-content: space-between;}
.new ul li{ width: 23%;}
.new ul li:last-child{ border: 0;}
.new ul li h2{ font-weight: normal; padding-top: 15px;}
.new ul li h4{ font-weight: normal; font-size: 12px; padding: 15px 0;}
.new ul li p{ font-size: 14px; line-height: 24px; padding-bottom: 20px;}
.new ul li:hover h2{ color: #da0000;}
.new ul li:hover p{ color: #fff;}

/*首页底部*/
.back_top{ position: fixed; right: 10px; bottom: 80px;}
.footer{ background: #020202;}
.fnav{ padding:15px 50px; text-align: center; border-bottom: 1px solid #111; color: #222;}
.fnav a{ display: inline-block; padding: 0 25px; font-size: 16px; color: #aaa;}
.fnav a:hover{ color: #fff;}
.fbox{ padding:0 50px; border-bottom: 1px solid #111; display: flex; justify-content: space-between;}
.fbox .lbox,.fbox .cbox,.fbox .rbox{ padding: 30px 0; width: 100%; border-right: 1px solid #111;}
.fbox .lbox{ border-left: 1px solid #111; padding-left: 10px;}
.fbox .cbox,.fbox .rbox{ padding-left: 50px; }
.fbox .rbox{ min-width: 440px;}
.fbox .lbox{ min-width: 400px;}
.fbox .lbox img{ float: left; max-width:150px; padding-right: 30px;}
.fbox .cbox p{ line-height: 24px; font-size: 14px; color: #666;}
.fbox .ftel{ float: left; padding-left: 60px; background: url(../images/ftel.png) no-repeat left;}
.fbox .ftel p{ font-size: 14px; color: #666; line-height: 24px;}
.fbox .ftel p b{ font-size: 24px; color: #fff;}
.fbox .rbox p{ color: #666;}
.fbox .rbox input.phone{ min-width: 280px; height: 50px; background: #444; border: 0; padding: 5px 10px; float: left;}
.fbox .rbox input.btn{ width: 100px; height: 50px; background: #da0000; border: 0; border-radius: 0; color: #fff;}
.fbot{ padding: 20px 50px; background:#0c0c0c; font-size: 14px; color: #888; text-align: center;}
.fbot a{ color: #aaa;}

#banner img{ max-width: 100%;}
/*分页*/
div.paginationbox{width:100%;height:auto;padding:30px 0; overflow:hidden}
ul.pagination{display:inline-block;padding:0;margin:0}
ul.pagination li{display:inline}
ul.pagination li span{color:#666;float:left;font-size:14px;padding:5px 12px;margin:0 5px;text-decoration:none;border:1px solid #222}
ul.pagination li a{color:#fff;float:left;font-size:14px;padding:5px 12px;margin:0 5px;text-decoration:none;border:1px solid #222}
.pagination li:first-child a,.pagination li:last-child a{border-radius:0}
ul.pagination li.bor0 a{border-color:#fff;cursor:auto}
ul.pagination li a.active,ul.pagination li.thisclass a{color:#fff;border:1px solid #da0000;cursor:default}
ul.pagination li.thisclass a{ background-color:#da0000;}
ul.pagination li a:hover:not(.active){background-color:#da0000;color:#fff;border-color:#da0000}
ul.pagination li.bor0 a:hover{background:0 0;color:#fff;border-color:#222}
ul.preNext{ width:100%; display: flex; justify-content: space-between; float: left; border-top: 1px dotted #222;}
ul.preNext li{ padding: 5px 15px; font-size: 12px;}
ul.preNext li a{color:#fff;}
ul.preNext li a:hover{color:#da0000}
ul.preNext li.pre,ul.preNext li.next{ background: #eee;}

.list_new ul li{ width: 100%; height: auto; overflow: hidden; margin-bottom: 30px; background: rgba(255, 255, 255, 0.1);}
.list_new ul li a{ display: flex; justify-content: space-between; width: 100%;}
.list_new ul li img{ display: block; width: 260px;}
.list_new ul li .txt{ width: 100%; padding: 30px;}
.list_new ul li .txt h2{ font-size: 18px;}
.list_new ul li .txt h4{ font-size: 12px; font-weight: normal; padding: 15px 0;}
.list_new ul li:hover a{ color: #fff;}

.ny-content{ width: 100%; height: auto; overflow: hidden; padding: 0 50px; border-left: 1px solid #222; border-right: 1px solid #222;}
.info{font-size: 14px; color: #666; padding-bottom: 30px; margin-bottom: 30px; border-bottom: 1px dotted #222;}
.info-list{ line-height: 30px;}
.info-list span{ padding-left:50px;}
.ny-content .tit{ padding: 15px 0; font-size: 20px;}
.ny-content .date{ font-size: 11px; color: #aaa; line-height: 30px; margin-bottom: 30px;}

.nyrbox{ width: 100%;}
.nyrbox .tit{ padding:0 15px; width: 100%; line-height: 40px; background: #333; color: #fff;}
.nyrbox .item{ padding-top: 10px;}
.nyrbox .item a{ display: block; padding-bottom: 10px;}
.nyrbox .item a:hover{ color: #fff;}
.nyrbox .item h3{ font-size: 16px; line-height: 24px; padding-bottom: 10px;}
.nyrbox .item p{ font-size: 14px; color: #666; line-height: 24px;}

.message{ max-width: 600px;}
.message input,.message textarea{ border: 1px solid #222; padding: 5px 10px; line-height: 30px; width: 100%; margin-bottom: 10px;}
.pagebg{background: url(../images/bg.jpg) no-repeat bottom #060606;}
#work.ptop{ max-width: 1200px; padding:30px 0;margin: auto; height: auto; overflow: hidden;}
.sidebar{ width: 240px; height: auto; float: left; overflow: hidden;}
.sidebar .tit{ background: #da0000; padding: 15px;}
.sidebar .tit h3{ font-size:30px}
.sidebar .tit p{ font-size: 12px;}
.sidebar ul{display: block;}
.sidebar ul li{width: 100%;}
.sidebar ul li a{ display: block; width: 100%; margin: 0; margin-bottom: 1px; padding: 0 15px;} 
#work.ptop .box{ width: 930px; float: left; margin-left: 30px;}
#work.ptop .work li{ width: 300px; padding: 0; float: left; margin-right: 15px; margin-bottom: 15px;}
#work.ptop .work li:nth-child(3n){ margin-right: 0;}

@media screen and (max-width: 1440px) {
	#home{ height: auto;}
}
@media screen and (max-width: 1200px) {
	#home{ height: auto;}
	#header{ padding:0 5px; height: 65px;}
	#header.oheight{ height: 65px;}
	#banner{ padding-top: 65px;}
	#work{ display: block; padding: 15px;}
	#work .submenu{ padding: 0; max-width: 100%; min-width: 100%;}
	#work .submenu li{ display: block; float: left; margin: 5px; margin-left: 0;}
	#work .submenu li a{ padding: 5px 15px;}
	.about{ display: block; padding: 15px;}
	.about .lbox,.about .rbox{ width: 100%; padding: 0;}
	.about .txt,.about .tit{ padding: 15px 0;}
	.about .more a{ width: 100%; text-align: center;}
	.about .list .item{ transform: scale(0.8);}
	.case{ padding: 15px;}
	.case .tbox{ display: block;}
	.case .tbox .sublist{ padding-top:10px;}
	.new { padding: 15px;}
	.new ul{ display: block;}

	.new ul li{ padding: 0; width: 100%; overflow: hidden; margin-bottom: 30px; border-bottom: 1px dotted #ddd;}
	.fnav,.fbox{ padding: 15px;}
	.fbox{ display: block;}
	.fbox .flbox{ width: 100%;}
	.fbox .lbox{ min-width: 100%; text-align: center;}
	.fbox .lbox img,.fbox .lbox .ftel{margin: auto; float: none;}
	.fbox .lbox img{ padding: 15px 0;}
	.fbox .lbox .ftel{ display: inline-block; }
	.fbox .cbox{ padding: 15px; border-top: 1px solid #2a2a2a;}
	.ny-content{ padding: 0; border-left:0; border-right: 0;}
	.about .box{ background: none;}
	.about .rbox{ padding: 0; max-width: 100%;}
	.about{ height: auto; overflow: hidden;}
	.about .box{ display: block;}
	.about .cbox{ width: 100%; padding: 0; height: auto;}
	.tit h3{ font-size: 24px; line-height: 30px;}
	.about .txt{ padding:0; max-height: 580px; margin: 0;}
	.fbox .lbox{ padding: 0;}
	#work.ptop .box{ width: 100%; margin: 0; padding: 10px;}
	.sidebar{ width: 100%;}
	.sidebar .sublist ul{ display: flex; justify-content: start;}
	.sidebar ul li{display: inline-block; width: auto; margin: 5px; float: left;}
}
@media screen and (max-width: 768px) {
	.code{ display: none;}
	.tel{ justify-content: end; min-width: 180px; display: block;}
	#banner .swiper-pagination-bullet{ width: 10px; height: 10px;}
	#banner .swiper-pagination{ right: 50%; margin-right: -30px; bottom: 5px;}
	#work .sublist ul{ display: block;}
	#banner .swiper-slide img.bbg{transform:scale(1,1); }
	.about .rbox{ display: block;}
	.about .more{ margin-bottom: 10px;}
	.about .rbox a{ width: 50%; float: left;}
	#work.ptop .work li{ width: 50%; margin: 0; padding: 5px;}
	.nyrbox{ display: none;}
	.tel p{ float: right; }
	.tit P{ font-size: 12px; line-height: 16px; }
	#work .submenu li{ margin:1%; width: 48%;  line-height: 32px; overflow: hidden; }
	#work .submenu li a{ margin: 0; width: 100%; overflow: hidden; text-align: center; text-overflow: ellipsis;white-space:nowrap;}
	.fnav a{ padding: 0 15px; }
	.about .rbox a{ height: 100px; }
	.about .rbox a small{ font-size: 10px; }
}