@charset "utf-8";

html{ overflow-x: hidden;}
body{ margin:0; padding:0; font-size:12px;color:#898989;line-height:1; background:#FFF;}
ul,li,dl,dd,dt,p,h1,h2,h3,h4,h5,h6,ol,form,input{ margin:0; padding:0;}
input,textarea { font-family: "PINGFANG_MEDIUM"; border: none; outline: none; background: none; }
ul,li{ list-style:none}
img{border:0; padding:0; 
/* display: block; */
}
a{ color:#5c5c5c; text-decoration:none}

.w1360{ width: 1360px; max-width: 100%; margin: 0 auto; box-sizing: border-box;}
.top{ height: 130px; position: fixed; left: 0; top: 0; width: 100%; z-index: 9; transition: 0.5s;}
.top.on{ box-shadow: 0 0 10px rgba(0,0,0,0.1); background: #fff; height: 90px;}
.top.on .topBox .nav ul li{ height: 90px; line-height: 90px;}
.top.on .topBox .nav ul li a{ color: #333;}
.top.on .topBox .logo{ height: 90px; line-height: 90px;}

.top .topBox{ overflow: hidden;}
.top .topBox .logo{ transition: 0.5s; float: left; height: 130px; line-height: 130px;}
.top .topBox .logo img{ display: inline-block; vertical-align: middle; height: 50px; width: auto;}
.top .topBox .nav{ float: right;}
.top .topBox .nav ul{ overflow: hidden;}
.top .topBox .nav ul li{ transition: 0.5s; float: left; margin-left: 40px; line-height: 130px;}
.top .topBox .nav ul li a{ font-size: 18px; color: #fff;}

.banner{ width: 100%; position: relative; min-height: 840px;}
.banner img{ display: block; width: 100%; min-height: 840px; height: 100%; object-fit: cover;}
.banner .bannerBox{ position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);}
.banner .bannerBox h2{ font-size: 38px; color: #fff; font-weight: bold; font-size: 38px; line-height: 38px; margin-bottom: 15px;}
.banner .bannerBox p{ font-size: 16px; color: #fff; margin-bottom: 35px; line-height: 34px;}

.indexContainer .layer1{ width: 100%; padding: 55px 0;}
.indexContainer .layer1 .layer1Box{margin: 0 auto; background: #2b64ac; padding: 0 25px 0 25px; box-sizing: border-box;}
.indexContainer .layer1 .layer1Box .tit{ height: 135px; line-height: 135px; text-align: center; font-size: 46px; color: #fff;}
.indexContainer .layer1 ul{ width: 100%; overflow: auto;}
.indexContainer .layer1 ul li{ width: 49%; float: left; margin: 0 2% 25px 0;  box-sizing: border-box; position: relative;}
.indexContainer .layer1 ul li:nth-child(2n){ margin-right: 0;}
.indexContainer .layer1 ul li img{ display: block; width: 100%; height: auto;}
.indexContainer .layer1 ul li .text{ width: 100%; height: 100%; position: absolute; left: 0; top: 0; padding: 30px 60px; box-sizing: border-box;}
.indexContainer .layer1 ul li .text h2{ font-size: 32px; font-weight: bold; color: #fff; line-height: 48px; margin-bottom: 20px; height: 96px; overflow: hidden;}
.indexContainer .layer1 ul li .text p{ font-size: 18px; color: #fff; line-height: 34px; color: #fff;}
.indexContainer .layer1 ul li .text p span{ font-weight: bold; color: #fff; margin-right: 10px;}
.indexContainer .title{ padding: 70px 0;}
.indexContainer .title h2{ text-align: center; font-size: 64px; color: #333; line-height:110px; color: #171717; margin-bottom: 50px;}
.indexContainer .title p{ font-size: 22px; line-height: 48px;  text-align: center; color: #929292;}
.indexContainer .layer2{ padding-bottom: 160px;}
.indexContainer .layer2.blue{background: #1b468e;}
.indexContainer .layer2.blue .title h2{ color: #fff;}
.indexContainer .layer2.blue .title p{ color: #fff;}
.indexContainer .layer2.blue .layer2Box .con .text h2{ color: #fff;}
.indexContainer .layer2.blue .layer2Box .con .text p{ color: #fff;}
.indexContainer .layer2.blue .layer2Box .con .text p:after{ background: #fff;}
.indexContainer .layer2.blue .layer2Box .con .text span{color: #fff;}
.indexContainer .layer2Box .con{ width: 100%; overflow: hidden;}
.indexContainer .layer2Box .con .text{ float: left; width: calc(100% - 680px); padding: 0 60px 0 0; box-sizing: border-box;}
.indexContainer .layer2Box .con .text h2{ font-size: 42px; color: #333; height: 76px; line-height: 76px; font-weight: bold;}
.indexContainer .layer2Box .con .text p{ font-size: 20px; line-height: 52px; color: #666; padding-left: 35px; position: relative; font-weight: 300;}
.indexContainer .layer2Box .con .text p:after{ width: 8px; height: 8px;  position: absolute; left: 10px; top: 25px; background: #666; border-radius:50%; content: '';}
.indexContainer .layer2Box .con .text span{ display: block; margin-top: 45px; font-size: 22px; line-height: 50px; color: #919191; font-weight: 300;}

.indexContainer .layer2Box .con.con2 .text{ float: right; padding: 0 0 0 60px; box-sizing: border-box;}
.indexContainer .layer2Box .con.con2 .icon{ float: left;}

.indexContainer .layer2Box .con .icon{ float: right; width: 680px; height: 510px;}
.indexContainer .layer2Box .con .icon img{ display: block; width: 100%; height: 100%;}

.indexContainer .layer3{ width: 100%; padding-bottom: 90px; background: #f9f9ff;}
.indexContainer .layer3 .con{ width: 100%;}
.indexContainer .layer3 .con h2{ height: 105px; text-align: center; line-height: 105px; font-size: 32px; color: #000;}
.indexContainer .layer3 .con ul{ width: 100%; height: 320px; overflow: hidden;}
.indexContainer .layer3 .con ul li{ width: 18.4%; float: left; padding: 0 30px; box-sizing: border-box; margin: 0 2% 0 0; background: #fff; height: 320px;}
.indexContainer .layer3 .con ul li:last-child{ margin-right: 0;}
.indexContainer .layer3 .con ul li .icon{ width: 100%; height: 195px; position: relative;}
.indexContainer .layer3 .con ul li .icon img{ position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);}
.indexContainer .layer3 .con ul li:nth-child(2n){ background: #3272ba;}
.indexContainer .layer3 .con ul li p{ font-size: 18px; color: #000; line-height: 32px; text-align: center;}
.indexContainer .layer3 .con ul li:nth-child(2n) p{ color: #fff;} 

.indexContainer .layer4{ width: 100%; background: #3271b8; padding-bottom: 90px;}
.indexContainer .layer4 .con{ overflow: hidden;}
.indexContainer .layer4 .con .bt{ width: 100%; height: 135px; line-height: 135px;}
.indexContainer .layer4 .con .conBox{ width: 49%; float: left; margin: 0 2% 45px 0;}
.indexContainer .layer4 .con .conBox:nth-child(2n){ margin-right: 0;}
.indexContainer .layer4 .con .conBox .icon{ width: 100%; height: 430px; background: #fff;}
.indexContainer .layer4 .con .conBox .icon img{ display: block; width: 100%; height: 100%;}
.indexContainer .layer4 .con .conBox .text{ width: 100%; height: auto; min-height: 425px; background: #f6f6f6;}
.indexContainer .layer4 .con .conBox .text h2{ height: 110px; line-height: 110px; text-align: center; font-size: 26px; color: #333;}
.indexContainer .layer4 .con .conBox .text ul{ text-align: center;}
.indexContainer .layer4 .con .conBox .text ul li{ vertical-align: top;  padding-bottom: 50px;}
.indexContainer .layer4 .con .conBox .text ul.two li{ display: inline-block; margin: 0 1%; width: 44%;}
.indexContainer .layer4 .con .conBox .text ul.three li{ display: inline-block; margin: 0 1%; width: 31%;}
.indexContainer .layer4 .con .conBox .text ul li img{ border-radius:50% ; display: block; margin: 0 auto;}
.indexContainer .layer4 .con .conBox .text ul li p{ color: #101010; font-weight: bold; padding-top: 15px; text-align: center; font-size: 20px; line-height: 32px;}
.indexContainer .layer4 .con .conBox .text span{ display: block; text-align: center; font-size: 20px; line-height: 44px; color: #7d7d7d;}
.indexContainer .layer4 .con .conBox .text.Nr1{ height: 600px;}
.indexContainer .layer4 .con.three .conBox{ width: 32%; margin: 0 2% 0 0;}
.indexContainer .layer4 .con.three .conBox:last-child{ margin-right: 0;}







.indexContainer .layer4.white{ background: #fff;}



.indexContainer .layer5{ width: 100%;}
.indexContainer .layer5Box ul{ width: 100%; overflow: hidden;}
.indexContainer .layer5Box ul li{ width: 24.25%; float: left; margin: 0 1% 0 0; overflow: hidden; position: relative;}
.indexContainer .layer5Box ul li:last-child{ margin-right: 0;}
.indexContainer .layer5Box ul li img{ display: block; width: 100%; height: auto; transition: 0.5s;}
.indexContainer .layer5Box ul li .text{ height: 100%; width: 100%; position: absolute; left: 0; top: 0; padding: 30px 30px 0 30px; box-sizing: border-box;}
.indexContainer .layer5Box ul li .text h2{ font-size: 32px; color: #fff; line-height: 46px; font-weight: bold; margin-bottom: 60px; height: 92px; overflow: hidden;}
.indexContainer .layer5Box ul li .text p{ line-height: 32px; font-size: 16px; color: #fff;}
.indexContainer .layer5Box ul li .text a{ position: absolute; bottom: 45px; transition: 0.5s; display: block; width: 155px; height: 40px; border: 1px solid #fff; border-radius:20px; text-align: center; line-height: 38px; font-size: 16px; color: #fff;}
.indexContainer .layer5Box ul li:hover img{ transform: scale(1.2);}
.indexContainer .layer5Box .bottom{ padding: 60px 0; text-align: center; font-size: 22px; color: #fff; color: #333; line-height: 36px;}




.footer{ width: 100%; background: #171717;}
.footer .company{ width: 100%; background: url(../images/indexBg_03.png); background-size:100% 100% ; background-attachment:fixed; padding: 90px 0;}
.footer .company h2{ text-align: center; color: #fff; font-weight: bold; font-size: 44px; margin-bottom: 48px;}
.footer .company p{ text-align: center; font-size: 18px; color: #fff; text-align: center; margin-bottom: 25px;}
.footer .company a{ display: block; margin: 0 auto; width: 175px; height: 44px; border-radius:22px; text-align: center; font-size: 16px; color: #fff; background: #20519f; line-height: 44px;}
.footerBox{ width: 100%; background: #171717; padding: 130px 0;}
.footerBox .Nr{ overflow: hidden;}
.footerBox .Nr .icon{ float: right; width: 635px;}
.footerBox .Nr .icon img{ display: block; width: 100%; height:auto;}
.footerBox .Nr .text{ width: calc(100% - 635px); float: left; padding-right: 180px; box-sizing: border-box;}
.footerBox .Nr .text h2{ font-size: 42px; color: #fff; font-weight: bold; height: 74px; line-height: 74px;}
.footerBox .Nr .text ul{ width: 100%;}
.footerBox .Nr .text ul li{ position: relative; line-height: 32px; margin-top: 35px; padding-left: 75px; font-size: 18px; color: #fff; box-sizing: border-box;}
.footerBox .Nr .text ul li .code{ width: 110px; height: 110px; background: #fff; padding: 5px; box-sizing: border-box;}
.footerBox .Nr .text ul li .code img{ display: block; width: 100%; height: 100%; position: relative; top: auto;}
.footerBox .Nr .text ul li a{ color: #fff;}
.footerBox .Nr .text ul li img{ position: absolute; left: 0; top:10px;}
.footerBox .Nr .text ul li p{ height: 72px; line-height: 72px; font-size: 22px; color: #fff;}
.footerBox .Nr .text ul li p a{ font-size: 16px; color: #fff;}
.footerBox .Nr .text ul li input{ display: block; width: 380px; height: 52px; border-radius:26px; border: 1px solid #b7b7b7; background: #fff; padding: 0 20px; box-sizing: border-box;}
.footerBox .Nr .text ul li textarea{ box-sizing: border-box; display: block; width: 100%; border-radius:12px ; padding: 20px; resize: none; height: 160px; background: #fff;}

.pageBnnaer{ width: 100%; position: relative;}
.pageBnnaer img{ display: block; width: 100%; height: auto;}
.pageBnnaer .bannerLogo{ width: 13%; position: absolute; left: 50%; transform: translateX(-50%); bottom: 70px; display: block;}

.pageContainer{ width: 100%;}
.pageContainer .title{ padding: 110px 0 70px 0;}
.pageContainer .title h2{ text-align: center; font-size: 46px; font-weight: bold; color: #333; line-height: 96px; margin-bottom: 45px;}
.pageContainer .title p{ font-weight: 300; padding: 0 65px; box-sizing: border-box; text-align: center; font-size: 22px; color: #818181; line-height: 42px;}

.pageContainer .ConBox{ overflow: hidden; padding-bottom: 130px;}
.pageContainer .ConBox .icon{ float: left; width: 680px;}
.pageContainer .ConBox .icon img{ display: block; height: auto; width: 100%;}
.pageContainer .ConBox .text{ width: calc(100% - 680px); float: left;  padding: 0 0 0 50px; box-sizing: border-box;}
.pageContainer .ConBox .list{ width: 100%; padding-bottom: 30px;}
.pageContainer .ConBox .list h2{ color: #0b2c55; line-height: 80px; font-size: 62px; font-weight: bold;}
.pageContainer .ConBox .list ul{  width: 100%; padding-top: 20px;}
.pageContainer .ConBox .list ul li{ font-size: 18px; color: #6c6c6c; line-height: 42px; color: #6a6a6a;}
.pageContainer .ConBox .list ul li span{ display: inline-block; vertical-align: middle; background: #6a6a6a; margin-right: 12px; width: 5px; height: 5px; border-radius:50%;}

.pageContainer .ConBox .tab1{ width: 100%;}
.pageContainer .ConBox .tab1 table{ width: 100%;}
.pageContainer .ConBox .tab1 table th{ height: 80px; text-align: left; font-size: 20px; color: #171717;}
.pageContainer .ConBox .tab1 table td{ padding: 5px 0; font-size: 18px; color: #7d7d7d; line-height: 22px;}
.pageContainer .ConBox .tab1 table tr td:first-child{ font-weight: bold; text-align: left;}

.pageContainer .con.blue{ background: #1b4790;}
.pageContainer .con.blue .title h2{ color: #fff;}
.pageContainer .con.blue .title p{color: #fff; opacity: 0.6; }
.pageContainer .con.blue .ConBox .list h2{color: #fff;}
.pageContainer .con.blue .ConBox .list ul li{color: #fff;}
.pageContainer .con.blue .ConBox .list ul li span{ background: #fff;}
.pageContainer .con.blue .ConBox .tab1 table th{color: #fff;}
.pageContainer .con.blue .ConBox .tab1 table td{color: #fff; opacity: 0.6;}
.pageContainer .con.blue .ConBox .tab1 table td:nth-child(1){ width: 230px;}

.pageContainer .ConBox.ConBox2 .icon{ float: right;}
.pageContainer .ConBox.ConBox2 .text{ float: left; padding: 0 50px 0 0;}

.dataContainer{ width: 100%;  padding-top: 90px;}
.dataContainer .title{ padding:60px 0 60px 0;}
.dataContainer .title h2{ text-align: center; font-size: 46px; font-weight: bold; color: #333; line-height: 96px; margin-bottom: 45px;}
.dataContainer .title p{ font-weight: 300; padding: 0 65px; box-sizing: border-box; text-align: center; font-size: 22px; color: #818181; line-height: 42px;}
.dataContainer .title h2:last-child{ margin-bottom: 0;}
.dataContainer .layer1{ padding-bottom: 20px;}
.dataContainer .layer1 ul{ width: 100%; overflow: hidden;}
.dataContainer .layer1 ul li{ perspective: inherit; width: 32%; float: left; margin: 0 2% 0 0; overflow: hidden;}
.dataContainer .layer1 ul li img{ display: block; width: 100%; height: auto; transition: 0.5s;}
.dataContainer .layer1 ul.list2 li{ width: 23.5%;}
.dataContainer .layer1 ul li:hover img{ transform: scale(1.1);} 
.dataContainer .layer1 ul li:last-child{ margin-right: 0;}
.dataContainer .layer1 p{ padding: 55px; box-sizing: border-box; text-align: center; font-size: 20px; line-height: 48px; text-align: center; font-weight: 300; color: #6b6b6b;}
.dataContainer .layer1 dl{ width: 100%; overflow: hidden;}
.dataContainer .layer1 dl dd{ width: 25%; float: left; padding-bottom: 80px;}
.dataContainer .layer1 dl dd img{ display: block; margin: 0 auto 10px auto; width: 95px; height: 95px; border-radius:50% ;}
.dataContainer .layer1 dl dd h2{ text-align: center; line-height: 32px; color: #0a0a0a;}

.videoContainer{ width: 100%; padding-top: 130px;}
.videoContainer .videoBanner{ margin: 0 auto; height: 760px; background: #000; position: relative;}
.videoContainer .videoBanner .click{ background: url(../images/video_03.png); width: 126px; height: 126px; position: absolute; left: 50%; top: 50%; border-radius:50%; background-size:100% 100% ; transform: translate(-50%,-50%); cursor: pointer;}

.videoCon{ padding: 150px 0;}
.videoCon .Nr{ overflow: hidden;}
.videoCon .Nr .bt{ padding-bottom: 60px; font-size: 28px; color: #000000; line-height: 48px;}
.videoCon .Nr .icon{ width: 620px; height: 400px; float: left;}
.videoCon .Nr .icon img{ display: block; width: 100%; height: 100%;}
.videoCon .Nr .text{ width: calc(100% - 620px); float: left; padding: 0 0 0 60px; box-sizing: border-box;}
.videoCon .Nr .text h2{ height: 48px; line-height: 48px; color: #000; font-size: 24px;}
.videoCon .Nr .text ul{ padding-bottom: 30px; width: 100%;}
.videoCon .Nr .text ul li{ font-weight: 300; width: 100%; padding-left: 30px; line-height: 44px; font-size: 20px; color: #676767; position: relative;}
.videoCon .Nr .text ul li:after{ width: 6px; height: 6px; border-radius:50%; position: absolute; left: 12px; top: 19px; display: block; content: ''; background: #676767;}
.videoCon .Nr .text p{ width: 100%; font-size: 18px; margin-bottom: 20px; line-height: 44px; color: #717171; letter-spacing: 1px; font-weight: 300;}

.videoCon.blue{ background: linear-gradient(to right,#1a458c,#3374bb);}
.videoCon.blue .Nr .bt{ color: #fff;}
.videoCon.blue .Nr .text{ float: left; padding: 0 60px 0 0;}
.videoCon.blue .Nr .icon{ float: right;}
.videoCon.blue .Nr .text h2{color: #fff; }
.videoCon.blue .Nr .text ul li{color: #fff; opacity: 0.7;}
.videoCon.blue .Nr .text ul li:after{ background: #fff; opacity: 0.7;}
.videoCon.blue .Nr .text p{color: #fff; opacity: 0.7}

.NewAdd{ width: 100%; background: linear-gradient(to right,#1a458d,#3374bb);}
.NewAdd .title h2{ color: #fff;}
.NewAdd .title p{ color: #fff;}
.NewAdd .Main{ width: 1380px; margin: 0 auto; padding-top: 190px; background: url(../images/NewBg.png) 30px top no-repeat; padding-bottom: 50px;}
.NewAdd .Main ul{ width: 100%;}
.NewAdd .Main ul li{ position: relative; width: 230px; float: left; padding: 0 25px; box-sizing: border-box;}
.NewAdd .Main ul li h2{ font-size: 18px; color: #fff; line-height: 32px; height: 152px; text-align: center;}
.NewAdd .Main ul li p{ color: #fff; text-align: center; line-height: 36px; font-weight: 300; font-size: 14px; line-height: 20px; padding: 0 20px;}
.NewAdd .Main ul li img{ position: absolute; top: -180px; left: 66px;  width: 80px; height: 80px;}
.NewAdd .Main ul li:nth-child(2) img{ left: 74px;}
.NewAdd .Main ul li:nth-child(3) img{ left: 80px;}
.NewAdd .Main ul li:nth-child(4) img{ left: 85px;}
.NewAdd .Main ul li:nth-child(5) img{ left: 91px;}
.NewAdd .Main ul li:nth-child(6) img{ left: 97px;}

/* ========== PC 端多视口适配 ========== */
/* 小桌面 / 窄屏笔记本 (1001px - 1360px)：避免横向滚动，内容流式+留白 */
@media (min-width: 1001px) and (max-width: 1360px){
	.NewAdd .Main{ zoom: 0.8}
	.MainWarp{ width: 100%; overflow-x: scroll; }
	.pageContainer .ConBox .list h2{ font-size: 48px;}
	.indexContainer .layer4 .con .conBox .text ul.three li{ width: 30%;}
	.indexContainer .layer4 .con .conBox .icon{ height: auto;}
	.indexContainer .layer1 ul li .text{ padding: 30px;}
	.indexContainer .layer1 ul li .text h2{ height: auto; font-size: 16px; line-height: 28px;}
	.indexContainer .layer1 ul li .text p{ font-size: 14px;}
	.indexContainer .layer5Box ul li .text{ }
	.indexContainer .layer5Box ul li .text h2{ margin-bottom: 10px; font-size: 18px; line-height: 24px; height: auto;}
	.indexContainer .layer5Box ul li .text p{ line-height: 24px;}
	.w1360{ width: 100%; padding: 0 32px;}
	.top .topBox .nav ul li{ margin-left: 28px;}
	.top .topBox .nav ul li a{ font-size: 16px;}
	.indexContainer .layer2Box .con .icon{ width: 48%; height: 380px;}
	.indexContainer .layer2Box .con .text{ width: 52%; padding: 0 30px 0 0;}
	.indexContainer .layer2Box .con.con2 .text{ padding: 0 0 0 30px;}
	.indexContainer .layer2Box .con.con2 .icon{ width: 48%;}
	.indexContainer .layer3 .con ul li{ width: 18%; margin: 0 2.5% 0 0; padding: 0 18px;}
	.indexContainer .layer4 .con .conBox{ width: 49%;}
	.indexContainer .layer5Box ul li{ width: 23.5%; margin: 0 2% 0 0;}
	.pageContainer .ConBox .icon{ width: 48%;}
	.pageContainer .ConBox .text{ width: 52%; padding: 0 0 0 30px;}
	.pageContainer .ConBox.ConBox2 .icon{ width: 48%;}
	.pageContainer .ConBox.ConBox2 .text{ width: 52%; padding: 0 30px 0 0;}
	.footerBox .Nr .icon{ width: 48%;}
	.footerBox .Nr .text{ width: 52%; padding-right: 30px;}
	.videoCon .Nr .icon{ width: 48%; height: 300px;}
	.videoCon .Nr .text{ width: 52%; padding: 0 0 0 30px;}
	.videoCon.blue .Nr .icon{ width: 48%;}
	.videoCon.blue .Nr .text{ width: 52%; padding: 0 30px 0 0;}
	.dataContainer .layer1 ul li{ width: 31%; margin: 0 3.5% 0 0;}
	.dataContainer .layer1 ul.list2 li{ width: 23%;}
	.indexContainer .title h2{ font-size: 32px; line-height: 54px;}
	.indexContainer .title p{ font-size: 18px;}
	.indexContainer .layer2Box .con .text h2{ font-size: 24px;}
	
}

/* 标准桌面 (1361px - 1600px)：保持设计稿宽度，微调间距 */
@media (min-width: 1361px) and (max-width: 1600px){
	.indexContainer .layer2Box .con .text{ padding: 0 50px 0 0;}
	.indexContainer .layer2Box .con.con2 .text{ padding: 0 0 0 50px;}
	.footerBox .Nr .text{ padding-right: 120px;}
}

/* 大屏桌面 (1601px - 1920px)：限制内容最大宽度，避免过宽阅读 */
@media (min-width: 1601px) and (max-width: 1920px){
	.banner .bannerBox{ max-width: 1360px;}
}

/* 超宽屏 (1920px+)：主内容与文案区限制最大宽度 */
@media (min-width: 1921px){
	.banner .bannerBox{ max-width: 1360px; width: 100%;}
	.indexContainer .layer1 .layer1Box{ max-width: 1360px;}
	.footer .company{ background-size: cover; }
}


.AppTop{ display: none;}
.SideBar{ display: none;}
@media(max-width:1000px){
	.NewAdd{ width: 100%;}
	.NewAdd .MainWarp{ width: 100%; overflow-x: scroll;}
	
	.indexContainer .layer4 .con .conBox .text h2{ font-size: 18px;}
	.indexContainer .layer4 .con .conBox .text.Nr1{ height: auto;}
	.indexContainer .layer4 .con{ width: 100%; white-space: nowrap; overflow-x: scroll; text-align: left;}
	.indexContainer .layer4 .con .conBox{ float: initial; display: inline-block;  vertical-align: top;}
	.indexContainer .layer5Box ul li .text{ padding: 15px;}
	.indexContainer .layer5Box ul li .text h2{ font-size: 18px; line-height: 26px; margin-bottom: 15px; height: auto;}
	.indexContainer .layer5Box ul li .text p{ font-size: 12px; line-height: 24px;}
	
	.footerBox .Nr{ padding-top: 15px;}
	.footerBox .Nr .text ul li textarea{ width: 100%; box-sizing: border-box;}
	.conWarp{ width: 100%; overflow-x: scroll;}
	.indexContainer .layer3 .con ul{ width: 1000px;}
	.indexContainer .layer3 .con ul li{ padding: 0 15px;}
	.indexContainer .layer3 .con h2{ font-size: 24px;}
	.indexContainer .layer3 .con ul li p{ font-size: 14px;}
	.indexContainer .layer4 .con .conBox .text ul li p{ font-size: 14px; white-space: normal;}
	.indexContainer .layer2Box .con .text h2{ font-size: 28px;}
	.indexContainer .layer2Box .con .text p{ font-size: 16px; }
	.top{ display: none;}
	.banner .bannerBox .Nr{ padding: 15px; background: rgba(255,255,255,0.5);  border-radius:10px; margin-bottom: 10px;   backdrop-filter: blur(8px); /* 模糊效果 */}
	.banner .bannerBox p{ color: #333;}
	.banner .bannerBox h2{ color: #333;}
	body{ padding-top: calc(60px + env(safe-area-inset-top)); padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right);}
	.w1360{ width: 100%; max-width: 100%; padding: 0 15px; box-sizing: border-box;}
	.SideBar .serach{ width: 95%; position: absolute; position: absolute; left: 50%; transform: translateX(-50%); top: 20px;}
	.SideBar .serach button{ float: right; background: url(../images/02.png) center center no-repeat #eee; width: 50px; height: 50px; border: none; border-radius:5px ; background-size:24px auto;}
	.SideBar .serach input{ display: block; float: left; border: 1px solid #ddd; width: calc(100% - 65px); border-radius:6px; height: 50px; box-sizing: border-box; padding: 0 15px;}
	.AppTop{width: 100%; display:block; position: fixed; left: 0; top: 0; background: #fff; box-shadow: 0 0 10px rgba(0,0,0,0.2);height: 60px; z-index: 99; padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); padding-top: env(safe-area-inset-top);}
	.AppTop .SideClick{ position: absolute; right: 15px; top: 50%; transform: translateY(-50%); width: 28px; height: 24px; transition: 0.5s;}
	.AppTop .SideClick span{ display: block; position: absolute; left: 0; width: 100%; height: 2px; background: #333; border-radius:2px; transition: 0.5s;}
	.AppTop .SideClick span:nth-child(1){ top: 0;}
	.AppTop .SideClick span:nth-child(2){ top: 50%; transform: translateY(-50%);}
	.AppTop .SideClick span:nth-child(3){ bottom: 0;}
	.AppTop .logo{ height: 60px; line-height: 60px; padding-left: 15px;}
	.AppTop .logo img{ display: inline-block; vertical-align: middle; height: 60%; width:auto;}
	.AppTop .SideClick.on{ transform: translateY(-50%) rotate(180deg);}
	.AppTop .SideClick.on span:nth-child(1){ top: 50%; transform: translateY(-50%) rotate(-45deg);}
	.AppTop .SideClick.on span:nth-child(2){ width: 0;}
	.AppTop .SideClick.on span:nth-child(3){ top: 50%; transform: translateY(-50%) rotate(45deg);}
	.SideBar{ box-shadow: 0 0 10px rgba(0,0,0,0.1); display: block; width: 100%;  left: -100%; transition: 0.5s; height: calc(100vh - 60px); top: 0;  position: fixed; z-index: 109; background: #fff; top: 60px; padding: 0 0; box-sizing: border-box; overflow: hidden;}
	.SideBar .Warp{ width: 200%; height: 100%; overflow: hidden; transition: 0.5s; padding-top: 80px;}
	
	
	
	.SideBar .logo{ padding: 30px 0;}
	.SideBar .logo img{ display: block; width: 50%; height: auto; margin: 0 auto;}
	.SideBar .nav{ width: 50%;float: left;}
	.SideBar .nav ul li{ height: auto; line-height: 65px; position: relative; border-bottom: 1px solid #ddd; padding: 0 15px;}
	.SideBar .nav ul li .more{ width: 14px; height: 14px; position: absolute; right: 0; top: 28px; }
	.SideBar .nav ul li .more span:nth-child(1){ top: 50%; transform: translateY(-50%); position: absolute; display: block; width: 100%; height: 2px; background: #666;}
	.SideBar .nav ul li .more span:nth-child(2){ position: absolute; width: 2px; height: 100%; left: 50%; transform: translateX(-50%); background: #666;}
	.SideBar .nav ul li:hover .more{ transform: rotate(90deg);}
	.SideBar .nav ul li:hover .more span:nth-child(1){ display: none;}
	.SideBar .nav ul li a{ font-size: 16px; color: #333;}
	.SideBar .nav ul dl{ padding: 10px; display: none;}
	.SideBar .nav ul dl dd{ line-height: 30px; padding-left: 15px; position: relative; box-sizing: border-box;}
	.SideBar .nav ul dl dd:after{ width: 4px; height: 4px; border-radius:50%; left: 0; transform: translateY(-50%); top: 50%; content: ''; background: #999; display: block; position: absolute;}
	.SideBar .nav ul dl dd a{ font-size: 14px;}
	.SideBar .right{ width: 50%; float: left;}
	.SideBar .nav ul li.TwoClick:after{ background: url(../images/arrow.2png.png) center center no-repeat; width: 65px; height: 65px; position: absolute; right: 0; top: 0; content: ''; background-size:6px auto ;}
	.back{ width: 100%; padding: 0 15px; line-height: 65px; box-sizing: border-box; font-size: 16px; color: #333; border-bottom: 1px solid #ddd;}
	.SideBar .right ul li{ border-bottom: 1px solid #ddd; line-height: 65px; padding: 0 15px; box-sizing: border-box; position: relative;}
	.SideBar .right ul li p{height: 65px; line-height: 65px; font-size: 16px;}
	.SideBar .right ul li dl{ display: none; padding:0 15px;}
	.SideBar .right ul li dl dd{ line-height: 48px;}
	.SideBar .right ul li dl dd img{ display: inline-block; vertical-align: middle; margin-right: 5px;}
	.SideBar .right ul li dl dd a{ font-size: 14px; color: #666;}
	.SideBar .right ul li span{ transition: 0.5s; display:block; position: absolute; right: 0; top: 0; width: 65px; height: 65px;  background: url(../images/arrow.png) center center no-repeat;}
	.SideBar .right ul li.on span{ transform: rotate(180deg);}
	
	.indexContainer .layer1{ width: 100%; padding: 30px 0;}
	.indexContainer .layer1 ul{ overflow: hidden;}
	.indexContainer .layer1 ul li{ margin: 0; float: left; width: 50%;}
	.indexContainer .layer1 p{ font-size: 16px; padding-bottom: 20px;}
	.indexContainer .layer1 h2{ font-size: 12px;}
	.indexContainer .layer1 h2 span{ font-size: 24px;}
	.indexContainer .layer2{ width: 100%; overflow: hidden; padding: 0 15px; box-sizing: border-box; overflow-x: scroll;}
	.indexContainer .layer2 ul{ width: 1440px;}
	.indexContainer .layer2Box .con .icon,
	.indexContainer .layer2Box .con .text{ float: none; width: 100%;}
	.indexContainer .layer2Box .con .icon{ height: auto; min-height: 200px;}
	.indexContainer .layer2Box .con .text{ padding: 20px 0 0 0;}
	.indexContainer .layer2Box .con.con2 .text{ padding: 0 0 20px 0;}
	.indexContainer .layer2Box .con.con2 .icon{ float: none;}
	
	.indexContainer .layer3 .con ul{ height: auto;}
	.indexContainer .layer4 .con .conBox{ width: 90%; margin-right: 20px;}
	.indexContainer .layer4 .con .conBox:nth-child(2n){ margin-right: 20px;}
	.indexContainer .layer4 .con.three .conBox{ width: 100%;}
	.indexContainer .layer5Box ul li{ width: 49%; margin: 0 0 15px 0;}
	.pageContainer .ConBox .icon,
	.pageContainer .ConBox .text{ float: none; width: 100%; padding: 15px 0;}
	.pageContainer .ConBox.ConBox2 .icon{ float: none;}
	.pageContainer .ConBox.ConBox2 .text{ padding: 0 0 15px 0;}
	.pageContainer .title{ padding: 50px 0 40px 0;}
	.pageContainer .title h2{ font-size: 32px; line-height: 1.3;}
	.pageContainer .title p{ padding: 0 15px;}
	.dataContainer .layer1 ul li{ width: 100%; margin: 0 0 15px 0;}
	.dataContainer .layer1 ul.list2 li{ width: 49%; margin:  0 2% 5px 0;}
	.dataContainer .layer1 ul.list2 li:nth-child(2n){ margin-right: 0;}
	.dataContainer .layer1 dl dd{ width: 50%; padding-bottom: 40px;}
	.videoContainer .videoBanner{ height: 50vw; min-height: 220px;}
	.videoCon .Nr .icon,
	.videoCon .Nr .text{ float: none; width: 100%; padding: 0 0 20px 0;}
	.videoCon .Nr .icon{ height: 240px;}
	.videoCon.blue .Nr .icon{ float: none;}
	.videoCon.blue .Nr .text{ padding: 0 0 20px 0;}
	.footerBox .Nr .icon,
	.footerBox .Nr .text{ float: none; width: 100%; padding: 0 0 25px 0;}
	.footerBox .Nr .text{ padding-right: 0;}
	.footerBox .Nr .text ul li input{ max-width: 100%;}
	.banner .bannerBox h2{ font-size: 28px; line-height: 1.3;}
	.banner .bannerBox p{ font-size: 14px; line-height: 1.5;}
	.indexContainer .title h2{ font-size: 36px; line-height: 1.3;}
	.indexContainer .title{ padding: 40px 0;}
	.footer{ width: 100%; overflow: hidden; box-sizing: border-box;}
	.footer .footerBox .footerLeft{ width: 100%;}
	.footer .footerBox{ width: 100%; padding: 0;}
	.footer .footerBox .footerLeft img{ display: block; margin: 20px auto;}
	.footer .footerBox .footerLeft p{ text-align: center;}
	.footer .footerBox .footerRight{ width: 100%;}
	.footer .footerBox .footerRight ul{ width: 100%; float: inherit; text-align: center; padding: 15px 0;}
	.footer .footerBox .footerRight ul li{ float: initial; display: inline-block;}
	.footer .footerBox .footerRight p{ text-align: center;}
	.indexContainer .layer4 .con .conBox .icon{ height: auto;}
	.indexContainer .layer4 .con .conBox .text ul.three li{ width: 30%;}
	.indexContainer .layer4 .con .conBox .text{ min-height: auto;}
	.indexContainer .title p{ font-size: 16px; line-height: 24px; font-weight: 300;}
	.indexContainer .layer2Box .con .text span{ font-size: 16px; padding: 20px 0; line-height: 28px;}
	.indexContainer .layer1 ul li .text{ padding: 15px;}
	.indexContainer .layer1 ul li .text h2{ font-size: 16px; line-height: 28px; height: auto;}
	.indexContainer .layer1 ul li .text p{ font-size: 12px; line-height: 24px;}
	.indexContainer .layer1 .layer1Box{ padding: 0 15px 20px 15px;}
	.aboutContainer{ width: 100%; padding: 0 15px; box-sizing: border-box;}
	.aboutContainer .titleBox{ width: 100%;}
	.aboutContainer .titleBox .titLeft{ width: 100%; text-align: center;}
	.aboutContainer .titleBox .titRight{ width: 100%;}
	.aboutContainer .titleBox .titRight ul li{ width: 25%; font-size: 14px;}
	.aboutContainer .conBox{ width: 100%;}
	.aboutContainer .conBox .text{ width: 100%; padding: 0;}
	.aboutContainer .conBox .icon{ width: 100%; height: auto; margin-top: 20px;}
	.aboutContainer .conBox .icon img{ display: block; width: 100%; height: auto;}
		.aboutContainer .con{ width: 100%; overflow-y: hidden;}
	.aboutContainer .con .conWarp{ width: 100%; overflow-x: scroll;}
	.about2 ul{ width: 1440px;}
	.honor{ width: 100%;}
	.honor ul li .box{ width: 100%;}
	.aboutContainer .title{ height: auto;}
	.about4 .layer{ width: 100%; height: auto;}
	.about4 .layer ul li{ width: 100%;}
	.business ul li .icon{ width: 100%;}
	.business ul li .text{ width: 100%;}
	.cantact{ width: 100%; padding: 15px; box-sizing: border-box;}
	.cantact .icon{ width: 100%; height: auto;}
	.cantact .text{ width: 100%; padding: 15px 0;}
	.cantact .text ul li p{ line-height: 24px;}
	.join .bd{ width: 95%; margin: 0 auto;}
	.join .bd ul li{ padding: 0 40px; font-size: 18px; line-height: 24px;}
	.join .hd ul{ width: 100%;}
	
	.join .hd ul li{ width: 55px; height:55px; margin: 0 10px 10px 10px; }
	.joinBottom .Nr{ width: 100%; height: auto; padding: 0; background: none;}
	.joinBottom .Nr ul li{ width: 100%; padding: 0 15px; margin-bottom: 15px; box-sizing: border-box;}
	.joinBottom .Nr ul li:nth-child(2){ padding: 0 15px;}
	.joinBottom .Nr ul li a{ left: 50%; top: 50%; transform: translate(-50%,-50%);}
	
	.new .layer1{ padding: 15px; box-sizing: border-box; width: 100%;}
	.new .layer1 ul li{ width: 100%; height: auto; padding: 15px; box-sizing: border-box; margin-bottom: 15px;}
	.new .layer1 ul li .icon{ height: auto;}
	.new .layer1 ul li .text h2{ overflow: hidden;}
	.new .layer2{ width: 100%;}
	.new .layer2 .hd{ width: 100%;}
	.new .layer2 .hd ul li { width: 25%; font-size: 14px;}
	.new .layer2 .hd ul li a{ font-size: 14px;}
	.new .layer2 .bd ul li{ width: 100%;}
	.new .layer2 .bd ul li .icon{ width: 100%; height: auto;}
	.new .layer2 .bd ul li .text{ width: 100%; height: auto; padding: 0 15px 15px 15px; box-sizing: border-box;}
	.state_Details .DeTop{ width: 100%; padding: 15px 0;}
	.state_Details .DeTop .Nr .icon{ width: 100%; height: auto;}
	.state_Details .DeTop .Nr .text{ width: 100%; height: auto; padding: 0;}
	.state ul{ width: 100%;}
	.state ul li{ width: 100%; height: auto;}
	.state_list{ padding: 15px 0;}
	.state_list ul{ width: 100%;}
	.state_list ul li{ width: 100%; padding: 0;}
	.state_list ul li .icon{ width:100%; height: auto; position: relative; transform: none; left: auto; top: auto;}
	.state_list ul li .text{ padding: 0;}
	.state_list ul li .text h2{ font-size: 14px;}
	.state_list ul li .text a{ width: 40px; height: 40px;}
	.state_list ul li .text a img{ display: block; width: 100%; height: 100%;}
	.bannerBox{ width: 100%; margin: 0 auto; height: auto; position: relative; overflow: hidden; padding: 15px; box-sizing: border-box;}
	.bannerBox .icon{ width: 100%; height: auto; padding-top: 100%;}
	.banner{ height: auto!important;}
	.bannerBox .text{ width: 100%; padding: 0 15px;}
	
	.bannerBox .text ul li h2{ overflow: hidden;}
	.WorkBox{ width: 100%;}
	.WorkBox ul li{ width: 100%; padding:40px 15px 0 15px; margin-bottom: 45px;}
	.WorkBox ul li .text p{ overflow: hidden;}
	.WorkBox ul li dl dd{ margin: 0 3px 6px 3px;}
	.WorkBox ul li .bt2:after{ display: none;}
	
	.pageContainer .ConBox .tab1{ width: 100%; overflow-x: scroll;}
	.pageContainer .ConBox .tab1 table{ width: 150%;}
	.dataContainer{ padding: 0 15px; box-sizing: border-box;}
	.dataContainer .title h2{ font-size: 24px; margin: 0;}
	.dataContainer .title p{ font-size: 14px; line-height: 24px;}
	.dataContainer .layer1 p{ padding: 15px 0; font-size: 14px; line-height: 24px;}
	.dataContainer .title{ padding: 20px 0;}
	
}

/* 平板竖屏 / 小屏 */
@media(max-width:768px){
	.indexContainer .layer1 ul li{ width: 50%;}
	
	.dataContainer .layer1 dl dd{ width: 50%;}
	.pageContainer .ConBox .list h2{ font-size: 42px; line-height: 1.3;}
}

/* 手机小屏 */
@media(max-width:480px){
	.w1360{ padding: 0 12px;}
	body{ padding-top: calc(56px + env(safe-area-inset-top));}
	.AppTop{ height: 56px;}
	.AppTop .logo{ height: 56px; line-height: 56px;}
	.SideBar{ height: calc(100vh - 56px); top: 56px;}
	.indexContainer .layer1 ul li{ width: 100%;}
	.indexContainer .layer1 .layer1Box .tit{ font-size: 28px; height: auto; line-height: 1.4; padding: 20px 0;}
	.indexContainer .title h2{ font-size: 24px; margin-bottom: 25px;}
	.indexContainer .title p{ font-size: 16px;}
	.banner .bannerBox h2{ font-size: 22px;}
	.banner .bannerBox p{ font-size: 13px; margin-bottom: 20px;}
	.pageContainer .title h2{ font-size: 26px;}
	.pageContainer .ConBox .list h2{ font-size: 32px;}
	.footer .company h2{ font-size: 28px;}
	.footer .company p{ font-size: 16px;}
	.join .bd ul li{ padding: 0 15px; font-size: 16px;}
	.new .layer2 .hd ul li{ width: 50%; font-size: 12px;}
	.aboutContainer .titleBox .titRight ul li{ width: 50%;}
}