@charset "utf-8";
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, caption, tbody, tfoot, thead, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, caption, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, navbox, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0px; border: 0; font-size: 100%; outline: none; }
html { font-size: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; overflow-x: hidden;}
/* always display scrollbars */
body { font:14px/1.6 "PingFang SC Regular","Microsoft Yahei","微软雅黑","Arial","Helvetica","SimHei","黑体","STXihei","华文细黑",sans-serif; margin: 0 auto; color:#333; _background-attachment:fixed; 
_background-image:url(about:blank); width: 100%; height: 100%; overflow: hidden;}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, navbox, section { display: block; }
input, select,button{ vertical-align: middle; outline: none; padding:0; border:0;}
ol, ul,li{ list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
strong,i,em,b{ font-style:normal; font-weight:normal; }
img { border:0;}
input[type="text"], input[type="button"], input[type="submit"], input[type="reset"] { -webkit-appearance: none; border-radius: 0;}
textarea { -webkit-appearance: none; border-radius: 0; background:none; outline:none; padding:0; margin:0; border:none;}
::-moz-selection { background: #EE1C26; color: #fff; text-shadow: none; }
::selection { background: #EE1C26; color: #fff; text-shadow: none; }
a{ text-decoration:none; blr: expression(this.onFocus=this.blur()); cursor: pointer; color:#000; -webkit-transition: 0.3s; -moz-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; }
a:link, a:visited{ text-decoration: none;}
a:hover { text-decoration: none; color: #EE1C26; }
.clearfix:before, .clearfix:after { display: table; content: ""; line-height: 0px; }
.clearfix:after { clear: both; }
.clearfix { *zoom: 1; }
.fl{ float:left;}
.fr{ float:right;}
h1,h2,h3,h4,h5{ font-weight:normal; display:block;}
input,button,table,tr,td,textarea{ font-family:Microsoft yahei,Arial;}
body{ min-width: 320px; max-width: 1920px; width: 100%;}

@font-face {
	font-family: 'Bai'; 
	src: url('../font/BaiduanNumber.ttf');

	src:
		url('../font/BaiduanNumber.eot?#font-spider') format('embedded-opentype'),
		url('../font/BaiduanNumber.woff') format('woff'),
		url('../font/BaiduanNumber.ttf') format('truetype'),
		url('../font/BaiduanNumber.svg') format('svg');		
	font-weight: 300;
	font-style: normal;

}


@font-face {
		
	font-family: 'pfd'; 
	src: url('../font/pfdintextcomppro-regular_1-webfo.ttf'); 
	
	src:
		url('../font/pfdintextcomppro-regular_1-webfo.eot?#font-spider') format('embedded-opentype'),
		url('../font/pfdintextcomppro-regular_1-webfont.woff') format('woff'),
		url('../font/pfdintextcomppro-regular_1-webfo.ttf') format('truetype'),
		url('../font/pfdintextcomppro-regular_1-webfo.svg') format('svg');

	font-weight: normal;
	font-style: normal;

}


header{ position:fixed; width:100%; z-index:990; transition: all .3s ease-in-out; display: flex; flex-direction: column;background: -webkit-gradient(linear,center top,center bottom,from(rgba(0, 0, 0, 0.5)),to(rgba(0, 0, 0, 0)));}
header .Layer{ display: flex; flex-direction: row; justify-content: space-between; align-items: center; padding: 0 100px; height:160px;}
header .Layer .headerLogo{ position:relative;justify-content: center; display: flex; align-items: center;}
header .Layer .headerLogo img{ display:block; transition: all .3s ease-in-out;}
header .Layer .headerLogo img.img1{ display: block;}
header .Layer .headerLogo img.img2{ display: none; height: 80px;}

header .Layer .headerCeng{ display: flex; flex-direction: row; justify-content: space-between; align-items: center;}
header .Layer .headerCeng .navbox{ position:relative; display: flex; flex-direction: row;}
header .Layer .headerCeng .navbox .litag{ position:relative; margin:0 25px; transition:all .3s ease; transition: all .36s;}
/* header .Layer .headerCeng .navbox .litag:before{ content:""; position:absolute; width:0; height:6px; background:#EE1C26; bottom: 0; right:50%; left:50%;transition: all .3s ease-in-out;} */
header .Layer .headerCeng .navbox .litag a.anjie{ display:block; color:#fff; font-size:16px;}
/* header .Layer .headerCeng .navbox .litag:hover:before,header .Layer .headerCeng .navbox .litag.on:before{ width:100%; left:0; right:0;} */
header   .litag.on,header  .litag:hover{ transform: scale(1.1);}
/* header  .litag.on a, */
/* header  .litag.on a,header  .litag:hover a{ color: #1f286f  !important;} */
header .Layer .headerCeng .phone{ position: relative; justify-content: center; align-items: center; display: flex; flex-direction: row; color: #fff; padding-left: 40px;}
header .Layer .headerCeng .phone span{ display: flex; flex-direction: column;}
header .Layer .headerCeng .phone span img{ display:block; transition: all .3s ease-in-out;}
header .Layer .headerCeng .phone span img.img1{ display: block;}
header .Layer .headerCeng .phone span img.img2{ display: none;}
header .Layer .headerCeng .phone sup{ font-size: 24px; font-family: 'pfd'; padding-left: 10px;}


header.scroll{ background:#fff; box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);}
header.scroll .Layer{ height:80px;}
header.scroll .Layer .headerLogo img.img1,header.scroll .Layer .headerCeng .phone span img.img1{ display: none;}
header.scroll .Layer .headerLogo img.img2,header.scroll .Layer .headerCeng .phone span img.img2{ display: block;}
header.scroll .Layer .headerCeng .navbox .litag a.anjie{ color: #000;}
header.scroll .Layer .headerCeng .phone sup{ color: #000;}


header .dragonNav{ display: none; width:35px; height:25px; position:absolute; right:10px; cursor:pointer;}
header .dragonNav .line{display:block;width:100%;height:3px;border-radius:3px;background:#555;position:absolute;left:0;-webkit-transition: all .4s;transition: all .4s;}
header .dragonNav .line1{top:0px;-webkit-transform-origin: left top 0;-ms-transform-origin: left top 0;transform-origin: left top 0;}
header .dragonNav .line2{top:11px;}
header .dragonNav .line3{bottom: 0;-webkit-transform-origin: left bottom 0;-ms-transform-origin: left bottom 0;transform-origin: left bottom 0;}
header .dragonNav.active{-webkit-animation: rotate 0.5s linear 0s;animation: rotate 0.5s linear 0s;}

.meunbox{width:100%; height:calc(100%); position:fixed; left:0; top:60px; bottom:0; right:0; background:#eee; z-index:999; display:none;}
.meunbox .close{ position:absolute; right:0px; top:0px; z-index:10;box-sizing:border-box;width:40px; height:40px; -webkit-transition:-webkit-transform .25s ease; transition:transform .25s ease; cursor:pointer;}

.mobile .sub-menu{ width:100%; position:absolute; left:0; top:0; z-index:2; overflow-y:auto;}
.mobile .sub-menu ul{width: 100%;}
.mobile .sub-menu li{border-bottom:1px solid #e0e0e0; font-size: 16px;}
.mobile .sub-menu .tit{ display:block; width:100%; padding:0 3%; line-height:60px; color:#000; position:relative; box-sizing:border-box;}
.mobile .sub-menu .sub-tit:after{content:''; display:block; width:26px; height:26px; background:url(../images/ico_03.png) no-repeat center; background-size:20px auto; position:absolute; right:3%; top:15px;}
.mobile .sub-menu .sub-tit.on{ background:#e0020e;color:#fff;}
.mobile .sub-menu .sub-tit.on:after{background:url(../images/ico_03_h.png) no-repeat center;background-size:20px auto;}
.mobile .sub-menu .sec-list{line-height:40px;padding:10px 4%;display:none;}
.mobile .sub-menu .sec-list p{background:url(../images/ico_04.png) no-repeat left center;background-size:3px auto;font-size:14px;}
.mobile .sub-menu .sec-list a{padding-left:3%;color:#666;display:block;}

.header.on {position:fixed;}
.header.on .dragonNav .line {background: #545454;}
.header.active .dragonNav .line {background:#EE1C26;}
.header.active .dragonNav .line1{-webkit-transform: rotate(45deg);-ms-transform: rotate(45deg);transform: rotate(45deg);}
.header.active .dragonNav .line2 {opacity: 0;}
.header.active .dragonNav .line3 {-webkit-transform: rotate(-45deg);-ms-transform: rotate(-45deg);transform: rotate(-45deg);}

.banner{ display: flex; flex-direction: column;}
.banner .swiper-container{ width: 100%; height: 100%;}
.banner .swiper-container .swiper-slide{ display: flex; flex-direction: column;}
.banner .swiper-container img{ width: 100%; height: 100vh; object-fit: cover;}
.banner .swiper-container-cube .swiper-cube-shadow{ display: none;}
.banner .swiper-container-horizontal>.swiper-scrollbar{ display: none;}

.index{ display: flex; flex-direction: column; padding: 50px 0;}
.index .indexTitle{ display: flex; flex-direction: column; padding-bottom: 50px;}
.index .indexTitle h3{ font-family: 'pfd'; font-size: 52px; text-transform: uppercase;}
.index .indexTitle h2{ font-size: 28px;}

.inner{ padding: 0 260px;  min-width: 320px;}

.about{ background: url(../images/about.jpg) center bottom no-repeat; background-size: cover; padding: 0;}
.since{ display: flex; flex-direction: column; width: 50%; padding: 70px 0 20px;}
.since dl{ display: flex; flex-direction: row; color: #E8E8E8; font-size: 160px; text-transform: uppercase; line-height: 0.8;}
.since dl dt{ font-family: 'pfd';}
.since dl dd{ font-family: 'Bai';}
.since h2{ font-size: 30px; position: relative; z-index: 1; margin-top: -40px;}
.since figure{ line-height: 3; color: #666; display: flex; flex-direction: column; padding: 50px 0;}

.about .ceng{ display: flex; flex-direction: row; justify-content: space-between; align-items: center;}
.about .ceng .cengMore,.about .ceng .cengMore a{ display: flex; flex-direction: column; text-align: center; transition: all 300ms;}
.about .ceng .cengMore a span{ font-family: 'pfd'; font-size: 18px; text-transform: uppercase; line-height: 1;}
.about .ceng .cengMore a img{ height: 11px;}
.about .ceng .cengMore a:hover{ margin-left: 10px;}
.number{ display: flex; flex-direction: column; width: 50%;}
.number .numberBox{ display: flex; flex-direction: row; justify-content: space-around; position: relative; z-index: 10;}
.number .numberBox .numberList{ width: calc(100% / 3); display: flex; flex-direction: column;	justify-content: center; align-items: center; color: #FFF; line-height: 1; height: 200px;}
.number .numberBox .numberList:nth-child(1){ background: #EE1C26;}
.number .numberBox .numberList:nth-child(2){ background: #A0733E;}
.number .numberBox .numberList:nth-child(3){ background: #C6A47E;}
.number .numberBox .numberList .numberListDiv{ display: flex; flex-direction: row; align-items: baseline; font-weight: normal;}
.number .numberBox .numberList .numberListDiv span{ font-size: 90px; font-family: 'Bai'; margin-left: 5px;}
.number .numberBox .numberList .numberListP{ padding-top: 10px;}


.product{ background: url(../images/product.jpg) no-repeat; background-size: cover;}
.product .productList{ display: flex; flex-direction: column; background: #FFF;}
.product .productList ol{ display: flex; flex-wrap: wrap; justify-content: space-between; padding: 40px;}
.product .productList ol li{ width: 49%; display: flex; flex-direction: column; position: relative;}
.product .productList ol li:nth-child(3),.product .productList ol li:nth-child(4){ margin-top: 25px;}
.product .productList ol li .productListDiv{ display: flex; flex-direction: column; position: relative;}
.product .productList ol li .productListDiv .productListDivPic{ background: #000; display: flex; flex-direction: column;}
.product .productList ol li .productListDiv .productListDivPic img{ width: 100%; transition: all 300ms; cursor: pointer;}
.product .productList ol li .productListDiv .line{ position: absolute; z-index: 10; background: #FFF; opacity: 0.6; transition: all 300ms;}
.product .productList ol li .productListDiv .productListDivLine1{ left: 30px; bottom: 30px; width: 1px; height: 0;}
.product .productList ol li .productListDiv .productListDivLine2{ left: 30px; top: 30px; width: 0; height: 1px;}
.product .productList ol li .productListDiv .productListDivLine3{ right: 30px; top: 30px; width: 1px; height: 0;}
.product .productList ol li .productListDiv .productListDivLine4{ right: 30px; bottom: 30px; width: 0; height: 1px;}
.product .productList ol li .productListWord{ display: flex; flex-direction: column; justify-content: center; align-items: center; color: #FFF; text-align: center; position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: 40px; z-index: 20;}
.product .productList ol li .productListWord .productListWordTent{ display: flex; flex-direction: column; line-height: 3; transition: all 300ms;}
.product .productList ol li .productListWord .productListWordTent h2{ font-size: 22px; font-weight: bold; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.product .productList ol li .productListWord .productListWordTent h3{ text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.product .productList ol li .productListWord .productListWordMore{ display: flex; flex-direction: column; transition: all 300ms; opacity: 0;}
.product .productList ol li .productListWord .productListWordMore a{ display: flex; flex-direction: column; background: #EE1C26; color: #FFF; line-height: 2.4; padding: 0 40px;}
.product .productList ol li:hover .productListDiv .productListDivPic img{ opacity: 0.4;}
.product .productList ol li:hover .productListDiv .productListDivLine1{ height: calc(100% - 60px);}
.product .productList ol li:hover .productListDiv .productListDivLine2{ width: calc(100% - 60px);}
.product .productList ol li:hover .productListDiv .productListDivLine3{ height: calc(100% - 60px);}
.product .productList ol li:hover .productListDiv .productListDivLine4{ width: calc(100% - 60px);}
.product .productList ol li:hover .productListWord .productListWordMore{ opacity: 1; margin-top: 50px;}


.case{ display: flex; flex-direction: column;}
.case ol{ display: flex; flex-direction: row; justify-content: space-between;}
.case ol li{ width: 32%; display: flex; flex-direction: column; transition: all 300ms; padding-bottom: 20px;}
.case ol li .casePic,.case ol li .casePic a{ display: flex; flex-direction: column; overflow: hidden;}
.case ol li .casePic img{ width: 100%; -webkit-transform:scale(1.06); -moz-transform:scale(1.06); -ms-transform:scale(1.06); -o-transform:scale(1.06); transform:scale(1.06);
 -webkit-transition:all 0.3s linear; -moz-transition:all 0.3s linear; -o-transition:all 0.3s linear; transition:all 0.3s linear;}
.case ol li .caseTent{ display: flex; flex-direction: column; line-height: 2; padding: 30px 0; transition: all 300ms;}
.case ol li .caseTent h2 a{ display: block; font-size: 20px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.case ol li .caseTent p{ color: #666; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.case ol li .caseMore{ display: flex; flex-direction: column; transition: all 300ms; align-items: flex-start;}
.case ol li .caseMore a{ display: flex; flex-direction: column; background: #333; color: #FFF; line-height: 3; padding: 0 40px;}
.case ol li:hover{ background: #FFF; box-shadow: 0 0 10px 0 rgba(0,0,0,.1);}
.case ol li:hover .casePic img{ -webkit-transform:scale(1); -moz-transform:scale(1); -ms-transform:scale(1); -o-transform:scale(1); transform:scale(1);}
.case ol li:hover .caseTent{ padding: 30px 20px;}
.case ol li:hover .caseMore{ padding: 0 20px;}
.case ol li:hover .caseMore a{ background: #EE1C26;}

.news{ background: url(../images/news.jpg) center bottom no-repeat; background-size: 100% auto; padding-top: 0 !important; padding-bottom: 120px;}
.news .newsBox{ display: flex; flex-direction: row; justify-content: space-between;}
.news .newsBox .newsBoxLeft{ display: flex; flex-direction: column; width: 54%; position: relative;}
.news .newsBox .newsBoxLeft .newsBoxLeftPic,.news .newsBox .newsBoxLeft .newsBoxLeftPic a{ display: flex; flex-direction: column; overflow: hidden; height: 100%;}
.news .newsBox .newsBoxLeft .newsBoxLeftPic img{ width: 100%; height: 100%; object-fit: cover; transition: all 300ms;}
.news .newsBox .newsBoxLeft .newsBoxLeftTent{ display: flex; flex-direction: column; position: absolute; left: 20px; bottom: 20px; right: 20px; z-index: 10; background: #FFF; padding: 20px; line-height: 2;}
.news .newsBox .newsBoxLeft .newsBoxLeftTent h2 a{ display: block; overflow: hidden; font-size: 18px; text-overflow: ellipsis; white-space: nowrap;}
.news .newsBox .newsBoxLeft .newsBoxLeftTent p{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #666;}
.news .newsBox .newsBoxLeft:hover .newsBoxLeftPic img{ -webkit-transform:scale(1.06); -moz-transform:scale(1.06); -ms-transform:scale(1.06); -o-transform:scale(1.06); transform:scale(1.06);}
.news .newsBox .newsBoxRight{ display: flex; flex-direction: column; justify-content: space-between; width: 44%; position: relative;}
.news .newsBox .newsBoxRight .newsBoxRightDiv{ display: flex; flex-direction: column; justify-content: space-between; background: #F5F5F5; padding: 5% 30px; height: 37%; transition: all 300ms;}
.news .newsBox .newsBoxRight .newsBoxRightDiv a{ display: flex; flex-direction: column; height: 100%; justify-content: space-between; line-height: 2.2;}
.news .newsBox .newsBoxRight .newsBoxRightDiv a h2{ font-size: 20px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.news .newsBox .newsBoxRight .newsBoxRightDiv a p{ color: #666; padding-top: 10px;
	text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;}
.news .newsBox .newsBoxRight .newsBoxRightDiv:hover{ background: #EE1C26;}
.news .newsBox .newsBoxRight .newsBoxRightDiv:hover a h2,
.news .newsBox .newsBoxRight .newsBoxRightDiv:hover a p,
.news .newsBox .newsBoxRight .newsBoxRightDiv:hover a span{ color: #FFF;}


footer{ display: flex; flex-direction: column; background-color: #233249; background-image: linear-gradient(to bottom right, #692A3B , #233249);}
footer .foot{ display: flex; flex-direction: column; padding: 30px 0;}
footer .foot .inner{ display: flex; flex-direction: row; justify-content: space-between;}
footer .foot .footLeft{ display: flex; flex-direction: column; justify-content: space-between;}
footer .foot .footLeft .footLeftLogo{ display: flex; flex-direction: column;}
footer .foot .footLeft .footLeftLogo img{ width: 158px;}
footer .foot .footLeft .footLeftTel,footer .foot .footLeft .footLeftAdd{ display: flex; flex-direction: column; color: #FFF; font-size: 16px;}
footer .foot .footLeft .footLeftTel sup{ font-family: pfd; font-size: 54px;}
footer .foot .footBox{ display: flex; flex-direction: column; align-items: flex-end;}
footer .foot .footBox .footBoxOl{ display: flex; flex-direction: row;}
footer .foot .footBox .footBoxOl li{ display: flex; flex-direction: column; padding-left: 110px; line-height: 2.4; color: #FFF;}
footer .foot .footBox .footBoxOl li h2{ font-size: 18px; font-weight: bold;}
footer .foot .footBox .footBoxOl li figure{ display: flex; flex-direction: column; padding-top: 6px;}
footer .foot .footBox .footBoxOl li figure a{ color: #FFF; opacity: 0.5; }
footer .foot .footBox .footBoxEwm{ display: flex; flex-direction: row; text-align: center; padding-top: 30px;}
footer .foot .footBox .footBoxEwm figure{ display: flex; flex-direction: column; text-align: center; padding-left: 20px;}
footer .foot .footBox .footBoxEwm figure img{ width: 120px; height: 120px;}
footer .foot .footBox .footBoxEwm figure span{ color: #FFF; opacity: 0.5; padding: 10px 0 0; text-align: center;}
footer .weibu{ display: flex; flex-direction: column; background: #EE1C26;}
footer .weibu .inner{ display: flex; flex-direction: row; justify-content: space-between; color: #FFF; line-height: 60px;}


/* 项目案例 */
.streamer{ display: flex; flex-direction: column; position: relative;}
.streamer .xinjia{ display: flex; flex-direction: column; position: relative;}
.streamer .xinjia .streamerPic{ display: flex; flex-direction: column;}
.streamer .xinjia .streamerPic img{ width: 100%;}
.streamer .xinjia .streamerTent{ display: flex; flex-direction: column; justify-content: center; position: absolute; left: 0; top: 0; right: 0; bottom: 0; z-index: 10;}
.streamer .xinjia .streamerTent .inner{ display: flex; flex-direction: column; margin-top: 140px; color: #FFF;}
.streamer .xinjia .streamerTent .inner h3{ font-family: 'pfd'; font-size: 50px; text-transform: uppercase;}
.streamer .xinjia .streamerTent .inner h2{ font-size: 60px; font-weight: bold;}

.center{ display: flex; flex-direction: column; padding: 20px 0;}
.center .inner .case ol{ display: flex; flex-wrap: wrap;}
.center .inner .case ol li{ margin-top: 20px;}

.pages{ display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; padding: 40px 0;}
.pages a{ display: flex; flex-direction: column; justify-content: center; align-items: center; margin: 0 20px; width: 50px; height: 50px; border-radius: 50%; font-size: 18px;}
.pages a b{ width: 0; height: 0; border-top: 10px solid transparent; border-right: 14px solid #333; border-bottom: 10px solid transparent;}
.pages a i{ width: 0; height: 0; border-top: 10px solid transparent; border-left: 14px solid #333; border-bottom: 10px solid transparent;}
.pages a.on{ background: #EE1C26; color: #FFF;}
.pages a:hover{ color: #EE1C26;}
.pages a:hover b{ border-right: 14px solid #EE1C26;}
.pages a:hover i{ border-left: 14px solid #EE1C26;}

/* 关于我们 */
.streamer .number{ position: absolute; right: 260px; bottom: 0; z-index: 20;}
.guanyu{ display: flex; flex-direction: column; background: url(../images/about.jpg) center bottom no-repeat; background-size: cover; padding: 100px 0;}
.guanyu .inner{ display: flex; flex-direction: row; justify-content: space-between; align-items: center;}
.guanyu .inner .since{ padding: 0; width: 46%;}
.guanyu .inner .guanyuPic{ width: 50%; display: flex; flex-direction: column;}
.guanyu .inner .guanyuPic img{ width: 100%;}
.guanyu .inner .since dl{ font-size: 110px;}

.culture{ display: flex; flex-direction: row; justify-content: space-between;}
.culture .cultureLeft{ width: 65%; display: flex; flex-direction: column; position: relative;}
.culture .cultureLeft .cultureLeftPic{ display: flex; flex-direction: column; height: 100%;}
.culture .cultureLeft .cultureLeftPic img{ width: 100%; height: 100%; object-fit: cover;}
.culture .cultureLeft .cultureLeftTent{ display: flex; flex-direction: column; align-items: center; justify-content: center; position: absolute; right: 0; bottom: 0; z-index: 10; width: 30%; height: 50%; background: #EE1C26;}
.culture .cultureLeft .cultureLeftTent h3{ color: #FFF; text-align: center; font-family: 'pfd'; font-size: 50px; line-height: 1.2; text-transform: uppercase; opacity: 0.3;}
.culture .cultureLeft .cultureLeftTent h2{ position: absolute; left: 0; top: 0; right: 0; bottom: 0; font-size: 40px; display: flex; flex-direction: column; justify-content: center; align-items: center; z-index: 10; color: #FFF;}
.culture .cultureRight{ width: 35%; display: flex; flex-direction: column; position: relative; background: #333;}
.culture .cultureRight .cultureRightCont{ height: 50%; display: flex; flex-direction: column; justify-content: center; color: #FFF; line-height: 3; padding: 0 6%;}
.culture .cultureRight .cultureRightPic{ display: flex; flex-direction: column; height: 50%;}
.culture .cultureRight .cultureRightPic img{ width: 100%; height: 100%; object-fit: cover;}

.xinjiade{ display: flex; flex-direction: column; padding: 30px 0; background: #aaa;}
.xinjiade .inner{ display: flex; flex-direction: column;}
.xinjiade .inner figure{ color: #FFF; padding: 5px 0; text-align: center; font-size: 16px;}
@media screen and (max-width: 768px){
	.xinjiade{ padding: 10px 0;}
	.xinjiade .inner figure{ font-size: 14px; padding: 3px 0;}
}



.customer{ display: flex; flex-direction: column; padding: 50px 0;}
.customer .inner{ display: flex; flex-direction: column;}
.customer .inner .customerMing{ display: flex; flex-direction: column; align-items: center; padding-bottom: 50px;}
.customer .inner .customerMing h3{ font-family: 'pfd'; font-size: 52px; text-transform: uppercase;}
.customer .inner .customerMing h2{ font-size: 28px;}
.customer .inner .customerOl{ display: flex; flex-wrap: wrap;}
.customer .inner .customerOl li{ display: flex; flex-direction: column; align-items: center; justify-content: center; width: calc(100% / 6); padding: 20px 0;}
.customer .inner .customerOl li img{ max-width: 70%;}

/* 联系我们 */
.contact{ display: flex; flex-direction: column;}
.contact .inner{ display: flex; flex-direction: row; justify-content: space-between; margin: 50px 0;}
.contact .inner li{ display: flex; flex-direction: row; cursor: pointer;}
.contact .inner li figure{ display: flex; flex-direction: column; align-items: center; justify-content: center; width: 80px; height: 80px; border-radius: 50%; background: #888;}
.contact .inner li figure img{ width: 30px;}
.contact .inner li figcaption{ display: flex; flex-direction: column; padding-left: 20px; line-height: 2;}
.contact .inner li figcaption h3,.contact .inner li figcaption p{ font-size: 18px;}
.contact .inner li:hover figure{ background: #EE1C26;}
.contact .map{ display: flex; flex-direction: column;}
.contact .map img{ width: 100%;}


/* 新闻资讯 */
.zhong{ display: flex; flex-direction: column; background: #F5F5F5; padding: 20px 0;}
.zhong .inner{ display: flex; flex-direction: column;}
.zhong .inner ol{ display: flex; flex-wrap: wrap;}
.zhong .inner li{ width: calc(100% / 3); display: flex; flex-direction: column; transition: all 300ms;}
.zhong .inner li .zhongDiv{ display: flex; flex-direction: column; margin: 10px; padding: 20px; background: #FFF;}
.zhong .inner li .zhongDiv .zhongDivPic{ display: flex; flex-direction: column; position: relative;}
.zhong .inner li .zhongDiv .zhongDivPic a{ display: flex; flex-direction: column; overflow: hidden;}
.zhong .inner li .zhongDiv .zhongDivPic a img{ width: 100%; transition: all 300ms;}
.zhong .inner li .zhongDiv .zhongDivPic dl{ line-height: 1.4; display: flex; flex-direction: column; position: absolute; top: 0; right: 0; background: #333; text-align: center; padding: 10px; color: #FFF; transition: all 300ms; z-index: 10;}
.zhong .inner li .zhongDiv .zhongDivPic dl dt{ font-size: 28px;}
.zhong .inner li .zhongDiv .zhongDivWord{ display: flex; flex-direction: column; padding-top: 15px;}
.zhong .inner li .zhongDiv .zhongDivWord h2{ display: flex; flex-direction: column;}
.zhong .inner li .zhongDiv .zhongDivWord h2 a{ font-size: 18px; font-weight: bold; display: flex; flex-direction: column; text-overflow: -o-ellipsis-lastline; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical;}
.zhong .inner li .zhongDiv .zhongDivWord p{ color: #666; margin: 20px 0; text-overflow: -o-ellipsis-lastline; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical;}
.zhong .inner li .zhongDiv .zhongDivWord span{ display: flex; flex-direction: column;}
.zhong .inner li .zhongDiv .zhongDivWord span a{ font-size: 16px;}
.zhong .inner li:hover .zhongDiv{ box-shadow: 0 0 10px 0 rgba(0,0,0,0.1);}
.zhong .inner li:hover .zhongDiv .zhongDivPic a img{ -webkit-transform:scale(1.1); -moz-transform:scale(1.1); -ms-transform:scale(1.1); -o-transform:scale(1.1); transform:scale(1.1);}
.zhong .inner li:hover .zhongDiv .zhongDivPic dl{ background: #EE1C26;}
.zhong .inner li:hover .zhongDiv .zhongDivWord span a{ color: #EE1C26;}


/* 新闻资讯详情 */
.zhong .inner{ display: flex; flex-direction: column; padding-bottom: 50px;}
.detail{ display: flex; flex-direction: column; padding: 30px 50px; background: #FFF; margin-top: -80px; position: relative; z-index: 10;}
.weizhi{ display: flex; flex-direction: row; color: #666; align-items: center;}
.weizhi img{ width: 18px; margin-right: 10px;}
.weizhi a,.detail .weizhi b{ color: #666;}
.weizhi b{ padding: 0 10px;}
.weizhi span{ color: #EE1C26;}

.detail .detailMing{ display: flex; flex-direction: row; justify-content: space-between; align-items: center; padding: 30px 0; border-bottom: 1px solid #E5E5E5;}
.detail .detailMing div{ display: flex; flex-direction: column; padding-right: 20px;}
.detail .detailMing div h2{ font-size: 30px;}
.detail .detailMing div figure{ color: #666;}
.detail .detailMing div figure span{ padding-right: 30px;}
.detail .detailMing a{ display: flex; flex-direction: column; background: #EE1C26; border-radius: 5px; padding: 10px 30px; color: #FFF; font-size: 16px;}
.detail .detailMing a:hover{ opacity: 0.8;}

.detail .detailWord{ display: flex; flex-direction: column; padding: 20px 0 60px;}
.detail .detailWord p{ display: flex; flex-direction: column; padding: 10px 0; line-height: 2.2; font-size: 15px;}
.detail .detailWord img{ margin: 0 auto; max-width: 100%;}

.detail .detailDiv{ display: flex; flex-direction: row; justify-content: space-between;}
.detail .detailDiv .detailDivA{ display: flex; flex-direction: column; width: 44%; padding: 15px 2%; background: #F5F5F5; border-radius: 5px;}
.detail .detailDiv .detailDivA h2{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 16px;}
.detail .detailDiv .detailDivA figure{ display: flex; flex-direction: row; justify-content: space-between; padding-top: 10px;}
.detail .detailDiv .detailDivA figure span{ color: #666;}
.detail .detailDiv .detailDivA figure sup{ color: #EE1C26;}

/* 产品中心 */
.level{ display: flex; flex-direction: column; padding: 50px 0;}
.level .inner{ display: flex; flex-direction: row; justify-content: space-between;}
.cloumn{ display: flex; flex-direction: column; width: 25%;}
.cloumn .cloumnTit{ display: flex; flex-direction: column; line-height: 1.1;}
.cloumn .cloumnTit h3{ font-size: 60px; color: #EE1C26; text-transform: uppercase; font-family: 'pfd';}
.cloumn .cloumnTit h2{ font-size: 30px; padding-top: 10px;}
.cloumn .cloumnBox{ display: flex; flex-direction: column; background: #F5F5F5; margin-top: 50px;}
.cloumn .cloumnBox .cloumnBoxH4{ display: flex; flex-direction: column; padding: 20px; border-bottom: 1px solid #E5E5E5; color: #EE1C26; font-size: 22px; font-weight: bold;}
.cloumn .cloumnBox .cloumnBoxOl{ display: flex; flex-direction: column;}
.cloumn .cloumnBox .cloumnBoxOl li{ display: flex; flex-direction: column; transition: all 300ms; border-bottom: 1px solid #E5E5E5; padding: 10px;}
.cloumn .cloumnBox .cloumnBoxOl li a{ display: flex; flex-direction: row; align-items: center; justify-content: space-between; padding: 14px 10px;}
.cloumn .cloumnBox .cloumnBoxOl li a span{ font-size: 18px;}
.cloumn .cloumnBox .cloumnBoxOl li a sup{ display: flex; flex-direction: column;}
.cloumn .cloumnBox .cloumnBoxOl li a sup img{ width: 21px;}
.cloumn .cloumnBox .cloumnBoxOl li a sup img.img1{ display: block;}
.cloumn .cloumnBox .cloumnBoxOl li a sup img.img2{ display: none;}
.cloumn .cloumnBox .cloumnBoxOl li.on{ border-bottom: none;}
.cloumn .cloumnBox .cloumnBoxOl li.on a{ background: #EE1C26; box-shadow: 0 0 10px 0 rgba(0,0,0,0.2); width: 100%;}
.cloumn .cloumnBox .cloumnBoxOl li.on a span{ color: #FFF;}
.cloumn .cloumnBox .cloumnBoxOl li.on a sup img.img1{ display: none;}
.cloumn .cloumnBox .cloumnBoxOl li.on a sup img.img2{ display: block;}
.cloumn .cloumnBox .cloumnBoxDown{ display: flex; flex-direction: column; text-align: center; padding: 30px;}
.cloumn .cloumnBox .cloumnBoxDown h3{ font-size: 18px;}
.cloumn .cloumnBox .cloumnBoxDown h2{ font-size: 32px;}
.cloumn .cloumnBox .cloumnBoxDown img{ width: 120px; margin: 15px auto;}
.cloumn .cloumnBox .cloumnBoxDown span{ color: #666;}


.mian{ width: 72%; display: flex; flex-direction: column;}
.mian .weizhi{ border-bottom: 1px solid #E5E5E5; padding-bottom: 20px;}
.mian .mianBox{ display: flex; flex-direction: column;}
.mian .mianBox .mianBoxMing{ display: flex; flex-direction: column; font-size: 40px; font-weight: bold; padding: 40px 0; text-align: center;}
.mian .mianBox .mianBoxWord{ display: flex; flex-direction: column;}
.mian .mianBox .mianBoxWord h3{ font-size: 22px;}
.mian .mianBox .mianBoxWord p{ display: flex; flex-direction: column; line-height: 2; padding: 10px 0;}
.mian .mianBox .mianBoxWord img{ margin: 0 auto; max-width: 100%;}


/*人才招聘岗位*/
.join{ display: flex; flex-direction: column; padding: 20px 0;}
.join .inner{ display: flex; flex-direction: column;}
.join .inner .joinBox{ display: flex; flex-direction: column; padding: 0 40px; border: 1px solid #E5E5E5; margin: 20px 0; cursor: pointer;}
.join .inner .joinBox .joinBoxTop{ display: flex; flex-direction: row; justify-content: space-between; align-items: center; border-bottom: 1px solid #E5E5E5; padding: 20px 0;}
.join .inner .joinBox .joinBoxTop h2{ display: flex; flex-direction: row; align-items: center; font-size: 22px;}
.join .inner .joinBox .joinBoxTop h2 img{ width: 24px; margin-right: 15px;}
.join .inner .joinBox .joinBoxTop a.unfold{ color: #666; display: flex; flex-direction: row; align-items: center;}
.join .inner .joinBox .joinBoxTop a.unfold img{ width: 16px; margin-left: 10px;}
.join .inner .joinBox .joinBoxDown{ display: flex; flex-direction: row; flex-wrap: wrap; padding: 20px 0;}
.join .inner .joinBox .joinBoxDown span{ padding: 10px 0; display: flex; flex-direction: column; color: #555; width: calc(100% / 3);}
.join .inner .joinBox:hover{ background: #F5F5F5;}



/* 岗位弹出 */
.mixin{position:fixed;top:0 !important;left:0;display:none;z-index:10000; width:100%; height:100%; background:rgba(0,0,0,0.4);}
.mixin .layer{ max-width: 1200px; position: absolute; width: 65%; left: 50%; top: 50%; transform: translate(-50%,-50%); box-sizing: border-box; background: #FFF; border-radius: 5px;}
.mixin .layer .close{ position:absolute;right: -80px; top: -60px; display: flex; flex-direction: column; justify-content: center; align-items: center; font-size: 40px; line-height: 1; color: #aaa; background: #FFF; border-radius: 50%; width: 80px; height: 80px; box-shadow: 0 0 10px 0 rgba(0,0,0,0.3); }
.mixin .layer .close:hover{ color: #FFFFFF; background: #EE1C26;}
.mixin .layer .mixinBox{display: flex; flex-direction: column; padding: 50px;}
.mixin .layer .mixinBox .mixinBoxTop{ display: flex; flex-direction: row; justify-content: space-between; border-bottom: 1px solid #E5E5E5; padding-bottom: 40px;}
.mixin .layer .mixinBox .mixinBoxTop figure{ display: flex; flex-direction: column; line-height: 2.2;}
.mixin .layer .mixinBox .mixinBoxTop figure sup{ color: #000; font-size: 24px;}
.mixin .layer .mixinBox .mixinBoxDown{ display: flex; flex-direction: column; max-height: 400px; overflow-y: scroll; padding-right: 50px; margin: 40px 0;}
.mixin .layer .mixinBox .mixinBoxDown::-webkit-scrollbar { width: 5px;}
.mixin .layer .mixinBox .mixinBoxDown::-webkit-scrollbar-thumb {border-radius: 3px; background: #EE1C26; width: 5px; }
.mixin .layer .mixinBox .mixinBoxDown::-webkit-scrollbar-track {border-radius: 3px; background: #E5E5E5; width: 5px; }
.mixin .layer .mixinBox .mixinBoxDown div{ display: flex; flex-direction: column;}
.mixin .layer .mixinBox .mixinBoxDown div:nth-child(2){ margin-top: 30px;}
.mixin .layer .mixinBox .mixinBoxDown div h2{ font-size: 18px; font-weight: bold; padding: 10px 0;}
.mixin .layer .mixinBox .mixinBoxDown div p{ line-height: 2.4;}
.mixin .layer .mixinBox .mixinBoxLink{ display: flex; flex-direction: row; color: #EE1C26; font-size: 18px;}
.mixin .layer .mixinBox .mixinBoxLink a{ text-decoration: underline; color: #EE1C26;}