body{width: 100%; height: 100%;}
*{padding: 0; margin: 0; list-style-type: none; text-decoration: none; box-sizing: border-box; font-family:"Arial","Microsoft YaHei",微软雅黑,"MicrosoftJhengHei",华文细黑,STHeiti,MingLiu;}
a,span,p,a:hover {cursor: default; text-decoration: none; outline: none;}
ul,li{list-style: none;}
input , textarea , button {outline: none; padding: 5px; resize: none;}


/***** 【全局共用的】 *****/

/* Btn */
.btnStir a{ transition: all 0.43s ease 0s; }
.btnStir a:hover{transform: rotateX(360deg);}
.btnCommon{height: 44px;line-height: normal; font-size: 18px;  text-align: center; color: white; border: none; border-radius: 2px; display: block; background: rgb(30,110,210);}
.btnCommon:hover{background: rgb(40,140,250);}

/* 文本域 */
input , textarea {font-size: 18px; border: 1px solid rgba(150,150,150,0.5); border-radius: 3px; outline: none; padding: 5px; }
input {height: 44px;}
input::-webkit-input-placeholder , textarea::-webkit-input-placeholder { color:rgba(100,100,100,0.5); font-size:18px;  }
input:focus,textarea:focus{border:1px solid rgb(40,140,250);}

.linkimg:hover img{-webkit-transform: scale(1.2); -moz-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1);  -webkit-transition: -webkit-transform .3s ease; -moz-transition: -moz-transform .3s ease; -ms-transition: -ms-transform .3s ease; transition: transform .3s ease;}

/* banner */
.banner{width: 100%;}
.banner img{ width: 100%; max-height: 100%;}

/* siteBar */
.siteBar{width: 100%;}
.siteBar>div {width: 100%; max-width: 1200px; height: 68px; display:flex; justify-content:space-between; align-items: center; margin: auto;}
.siteBar>div div{display: flex;}
.siteBar span {width: 24px; height: 24px; margin-left:20px ; display:block; }
.siteBar p {margin-left:20px}
.icon_siteHome { background: url(../images/icon_siteHome.png) center no-repeat; cursor: pointer; }
.icon_lowerLevel { background: url(../images/icon_lowerLevel.png) center no-repeat;}


/* List Pagination ，分页器 */
.Pagination {  width: 100%; max-width: 1200px; margin: auto; display: flex; justify-content:flex-end;  }
.Pagination li a { width: 40px; height: 40px; line-height: 40px; font-size: 14px; color: #666; text-align: center; align-items: center; margin-left:10px; border:1px solid #e6e6e6; background: white; display: block;}
.Pagination li a:hover,.Pagination li .active { color: white; background: rgb(40,140,250); cursor: pointer;}

.wrapBg2 {background: #eef0f3; overflow: hidden;}


/*****  【【正文】】  *****/








/***** 【首页】  *****/



/*  ADimg Banner轮播图  */
#fade { width: 100%; max-height: 630px; margin: 0 auto; position: relative; }
.now-left , .now-right { width: 10%; height:auto; position: absolute;  opacity: 0; cursor:pointer; }
#fade:hover .now-left, #fade:hover .now-right { opacity: 0.5;}
.now-left { top: 35%; right: 1%; }
.now-right { top: 35%; left: 1%; }
.ul_dian_Box{ width: auto; height: 30px; position: absolute; bottom: 20px; left: 50%; background: rgba(0,0,0,0);}
.ul_dian {position: relative; bottom: 5%; left:-50%; }
.ul_dian li {width: 10px; height: 10px; margin: 10px; float: left;display: inline-flex; border-radius: 50%;  background: rgba(250,250,250,0.5); opacity: 0.5; }
.ul_dian li:hover{opacity: 1;}

/*Home Abouct , 首页关于我们*/
.wrapBg{background: -webkit-linear-gradient(top,rgb(230,243,250) 20%,rgba(238,240,243)); overflow: hidden;}
.About{max-width: 1200px;  margin-bottom: 2%; display: flex; justify-content:space-between; overflow: hidden; }
.About > div:nth-child(1){width:48%; padding: 2% 6%; display: flex; flex-flow: column; justify-content: space-between;  background: white;}
.About > div:nth-child(2){width: 52%; text-align: right; }
.About > div:nth-child(2) img{height: 100%; }
.About > div { height: 380px; background: white; float: left; overflow: hidden;}
.About > div > div { height: 33%; display: flex; align-items: center; }
.About > div > div h2 {font-size: 22px; font-weight: normal;  color:rgb(50,50,50,50);}
.About > div > div span { font-size: 18px; color: rgb(220,220,220);  }
.About > div p { width: auto; line-height: 32px; font-size: 14px; color:rgb(50,50,50,50);text-align: justify; padding: 15px 0; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden;}
.About > div a { width: 160px; line-height: 44px;}


/* Home Product , 首页的产品表*/
.Product {max-width: 1200px; height: auto; margin:50px auto; overflow: hidden;}
.ProductNav  {width:100%; padding:30px 0; margin: auto; display: flex; justify-content: space-between; align-items: center; overflow: hidden; }
.ProductNav > div {width: 12%; height: 100%; text-align: left; }
.ProductNav > div p {font-size: 22px; font-weight: normal; color:rgb(50,50,50,50);}
.ProductNav > div span { font-size: 18px; color: rgb(200,200,200); }
.ProductNav .NavText {max-width: 88%; text-align:right; display: flex; justify-content: flex-end; }
.ProductNav .NavText li{height: auto; margin: auto 5px; display:inline-flex; }
.ProductNav .NavText li a{width: auto; font-size:16px; color: rgb(50,50,50); margin: auto; cursor: pointer; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden;}
.ProductNav .NavText li a:hover{font-weight: bold; color:rgb(40,140,250); }

.ProductNav .AllProduct a {display: block; color:rgb(40,140,250)!important; text-decoration: underline; cursor: pointer; }
.ProductList {width: 100%; display: grid; -webkit-box-pack: justify; justify-content: space-between; grid-template-columns: repeat(auto-fill,33%);}
.ProductList .active li {display: block;}
.ProductItems {width: 100%; margin-bottom: 2%; border: 2px solid transparent; overflow: hidden; }
.ProductItems .ProductimgBox { width: 100%; text-align: center;  background: white; border-bottom: 1px solid rgb(230,235,240); display: flex;justify-content: center; overflow: hidden;}
.ProductItems .ProductimgBox:hover {background: white;}
.ProductItems .ProductimgBox img{ max-width: 100%;width: 80%;}
.ProductItems .ProductTitle { width: 100%; height: auto; text-align: left; padding:6% 3%; border-bottom: 1px solid  rgb(230,235,240); background: white; display: flex; justify-content: space-between; }
.ProductItems .ProductTitle p {width: 100%;  font-size: 16px; line-height: 24px; color: rgb(115,115,115);   text-align: justify; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;}
.ProductItems .ProductTitle div:nth-child(1) {width:80% ; overflow: hidden;}
.ProductItems .ProductTitle div:nth-child(2) {width: 15%; display: flex; min-width: 20px;}
.ProductItems .ProductTitle span {  color: rgb(200,200,200); margin: auto; }
.ProductItems .ProductTitle a  { font-size: 12px;  line-height: 16px; color: rgb(200,200,200); }
.ProductItems .ProductTitle a:hover ,.ProductItems:hover  p {color: rgb(40,140,250);}
.ProductItems:hover{border: 2px solid rgba(80,140,230,0.2);}

/*NeedLink*/
.NeedLink {width: 100%; height: 328px; color: white; font-weight: lighter;  margin: auto; text-align: center; background: url(../images/insetImg_02.jpg) center no-repeat; overflow: hidden; }
.NeedLink > div {  height: 100%; display: flex; flex-flow: column; align-items: center; justify-content: center; }
.NeedLink > div span{ font-size: 26px; line-height: 44px;  }
.NeedLink > div p{ font-size: 28px; line-height: 96px; letter-spacing: 5px;  }
.NeedLink > div a{width: 260px; line-height: 44px; }


/* HomeNews,首页的新闻中心*/
.News {max-width: 1200px; margin: auto; text-align: center; padding-top: 30px; overflow: hidden; }
.NewsNav {width: 100%; padding: 20px 0; margin: auto; display: inline-flex; justify-content: space-between;}
.NewsNav > div { text-align: left; }
.NewsNav > div p {font-size: 22px; font-weight: normal;  color:rgb(50,50,50,50);}
.NewsNav > div span {font-size: 18px;  color:rgb(200,200,200); }
.News .NavText {display: flex;}
.News .NavText .AllNews {display: flex;}
.News .NavText .AllNews a {width:auto;margin: auto; display: block; color:rgb(150,150,150); text-decoration: underline; cursor: pointer; }
.News .NavText .AllNews a:hover ,.NavText .AllNews a:active {font-weight: bold; color:rgb(40,140,250); }  
.NewsWarp {width: 100%; padding: 15px 0; margin: auto; display: flex; justify-content: space-between; overflow: hidden;}
.NewsShow {width: 54%;    }
.NewsShow li > div {width: 100%; height: 90px;  margin: auto; display: inline-flex; justify-content: space-between; background: rgb(242,243,245);}
.NewsShow li > span { font-size: 0; display: block; overflow: hidden; }
.NewsShow li > span img {height: 100%;}
.NewsShow .NewsTime {width: 14%; min-width: 48px; text-align: center; padding: 15px 5px; margin: auto;}
.NewsShow .NewsTime span {font-size: 16px; color: rgb(50,50,50); font-weight: bold; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;}
.NewsShow .NewsTime p {font-size: 14px; color: rgb(150,150,150); margin: auto; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;}
.NewsShow .NewsTitle {width: 84%; margin: auto; text-align: left; padding: 10px 5px; overflow: hidden; }
.NewsShow .NewsTitle span {width: auto; font-size: 16px; color: rgb(50,50,50); font-weight: bold;  white-space: nowrap; text-overflow: ellipsis; overflow: hidden; display: block;}
.NewsShow .NewsTitle p {font-size: 14px; color: rgb(150,150,150); margin: auto;  white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
.NewsList  {width: 45%;  }
.NewsList .NewsItems {width: 100%; height: 90px; margin-bottom: 27px; border: 2px solid transparent; display: inline-flex; justify-content: space-between; background: rgb(242,243,245); }
.NewsList .NewsItems:hover {border: 2px solid rgba(80,140,230,0.2);}
.NewsList .NewsItems .NewsTime { width: 14%; min-width: 48px; text-align: center; padding: 15px 5px;  margin: auto; overflow: hidden;}
.NewsList .NewsItems .NewsTime span {font-size: 16px; color: rgb(50,50,50); font-weight: bold; display: block;}
.NewsList .NewsItems .NewsTime p {font-size: 14px; color: rgb(150,150,150); white-space: nowrap; text-overflow: ellipsis; overflow: hidden;}
.NewsList .NewsItems .NewsTitle {width:84%; margin: auto; text-align: left; padding: 10px 5px; overflow: hidden; }
.NewsList .NewsItems .NewsTitle span {font-size: 16px; color: rgb(50,50,50); white-space: nowrap; text-overflow: ellipsis; overflow: hidden; display: block;}
.NewsList .NewsItems .NewsTitle p {font-size: 14px; color: rgb(150,150,150); white-space: nowrap; text-overflow: ellipsis; overflow: hidden;}

/*首页代理品牌*/
.Agent {width: 100%; margin: auto; text-align: center; padding: 50px 0 30px; background: rgb(242,243,245); display: flex; flex-flow: column; justify-content: center; overflow: hidden;}
.AgentWrap { max-width: 1200px;width: 100%; height: 200px; display: flex; margin: auto; align-items: center; justify-content: space-between;}
.AgentWrap > div {text-align: left;  padding: 10px 0;  }
.AgentWrap > div p {font-size: 20px; color: rgb(50,50,50); line-height: 20px;}
.AgentWrap > div span { font-size: 18px; color: rgb(200,200,200); display: block; }
.AgentWrap .BrandLogo {width:76.6%; display: flex; justify-content: space-between;}
.AgentWrap .BrandLogo span {width: 33.2%; height: 140px; font-size: 0; background: white; text-align: center; vertical-align: middle; display: inline-flex; justify-content: center;}
.AgentWrap .BrandLogo span img {  margin: auto; max-width: 100%;}
.GuestBookWrap {max-width: 1200px; height: 260px; display: flex; margin: auto; align-items: center; justify-content: space-between;}
.GuestBookWrap .OursInfo {width: 23%; height: 170px; line-height: 26px; padding-right: 10px; display: flex; flex-flow: column; text-align: left; justify-content: space-between;}
.GuestBookWrap .OursInfo span {font-size: 18px; font-weight: bold; }
.GuestBookWrap .OursInfo p {font-size: 14px; color: rgb(150,150,150); }
.GuestBookWrap .GuestBook {width:76.6%; height: 170px; display: flex; justify-content: space-between; }
.GuestBookWrap .GuestBook .GuestInfo {width: 48.5%; height: 170px; display: flex; flex-flow: column; text-align: left; justify-content: space-between;}
.GuestBookWrap .GuestBook .MessageCont {width:50%; display: flex; flex-flow: column; justify-content: space-between;}
.GuestBookWrap .GuestBook .MessageCont textarea {width: 100%; height: 110px;}
.GuestBookWrap .GuestBook .MessageCont button {width: 100%;}


/***** 【 Product，产品中心 & 产品应用】 *****/

/* TabBar */
.TabbarBox {display: flex; justify-content: space-between;}
.TabbarProduct {width: 65.6%; max-width: 1200px; height: 60px; margin: 0px 0px 40px 0; padding:10px 20px;  display: flex; align-items: center; background: white;}
.TabbarProduct span {display: block; width: 1px; height: 14px; margin: 0 2% 0 0; background: rgba(200,200,200,1); }
.TabbarProduct li {margin-right: 3%;}
.TabbarProduct li a {color: #666; font-size: 16px; margin: auto; cursor: pointer; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;}
.TabbarProduct li a:hover, .TabbarProduct .active a {color: rgb(80,140,230); font-weight: bold; font-size: 16px;}

.search {width: 31.8%; height: 60px; padding: 10px 15px; margin: 0px 0px 40px 0; display: flex; justify-content: flex-end; background:white;}
.search input { width: 100%; align-items: center; border:none;}
.search .icon_Search{width: 40PX; height: 40PX; line-height: 40px; margin: auto 0; margin-left: 1%; display: block; color: rgb(120,120,120); background: url(../images/icon_Search.png) center no-repeat; cursor: pointer;}


/* 【 TabBarPDetails，产品详情】 */
.TabbarPDetails { width: 100%; max-width: 1200px; margin: auto; margin-bottom: 30px; display: flex; align-items: center; justify-content: space-between;}
.TabbarPDetails li {width: 32%; display:flex; align-items: center; padding: 0px 2%; background: white; border: 2px solid white; position: relative;}
.TabbarPDetails li div { width: 28%; height: 80px;  margin-right: 10px; display: flex; overflow: hidden; box-sizing: border-box; }
.TabbarPDetails li div img { height: 90%; margin: auto;}
.TabbarPDetails li a {color: #666; font-size: 16px;}
.TabbarPDetails li a:hover + .active a {color: rgb(80,140,230); font-weight: bold; font-size: 16px;}
.TabbarPDetails .active { border: 2px solid rgb(40,140,230);  }
.TabbarPDetails .active::before {content: ''; width: 0; height: 0; border: 15px solid; position: absolute; bottom: -30px; left:46%; border-color: rgb(80,140,230) transparent transparent;}
.TabbarPDetails .active::after {content: ''; width: 0; height: 0; border: 15px solid; position: absolute; bottom: -27px; left:46%; border-color: white transparent transparent;}
.TabbarPDetails .active a {font-weight: bold; color: rgb(80,140,230);}

/* 【PDetalilsList，产品中心】 */
.PDetalisList table {width: 100%; max-width: 1200px; margin: 20px auto; border-collapse: collapse; display: inline-table;}
.PDetalisList th { color: white; background: rgb(40,140,230);}
.PDetalisList tr {height: 50px;}
.PDetalisList td { text-align: center; padding: 2px 1.5%; text-overflow: ellipsis; -webkit-box-orient: vertical; white-space: nowrap; -webkit-line-clamp: 1; overflow: hidden;}
.PDetalisList td:nth-child(1){font-weight: bold; text-align: left;}
.PDetalisList tr:nth-child(odd){background:rgba(255,255,255,0.1) ;}
.PDetalisList tr:nth-child(even){background:rgba(255,255,255,1) ;}
.PDetalisList td a {cursor: pointer;}

/* 【 ProductUse，产品应用】 */
.ProductUse {max-width: 1200px; height: auto; text-align: center; margin:50px auto; overflow: hidden;}
.ProductUseList {width: 100%; display: grid; -webkit-box-pack: justify; justify-content: space-between; grid-template-columns: repeat(auto-fill,33%);}
.ProductUseItems {width: 100%; margin-bottom: 2%; border: 2px solid transparent; overflow: hidden; }
.ProductUseItems .ProductimgBox { width: 100%; max-height: 214px;   background: white; border-bottom: 1px solid rgb(230,235,240); display: flex; justify-content: center; overflow: hidden; }
.ProductUseItems .ProductimgBox:hover {background: white;}
.ProductUseItems .ProductimgBox img{max-height: 100%;;}
.ProductUseItems .ProductUseTitle { width: 100%; height:auto; text-align: center; padding:15px; border-bottom: 1px solid  rgb(230,235,240); background: white;  }
.ProductUseItems .ProductUseTitle p { font-size: 16px; line-height: 24px; color: rgb(115,115,115);  white-space: nowrap; text-overflow: ellipsis; overflow: hidden;}
.ProductUseItems .ProductUseTitle div:nth-child(2) {display: flex;}
.ProductUseItems .ProductUseTitle span {  color: rgb(200,200,200); margin: auto; }
.ProductUseItems .ProductUseTitle a  { font-size: 12px;  line-height: 16px; color: rgb(200,200,200); }
.ProductUseItems .ProductUseTitle p:hover ,.ProductUseItems:hover  p {color: rgb(40,140,250);}
.ProductUseItems:hover {border: 2px solid rgba(80,140,230,0.2);}



/***** 【 News, 新闻资讯 】 *****/


/* TabBar */
.Tabbar{width: 100%; max-width: 1200px; height: 60px; padding:10px 30px; margin: auto; display: flex; align-items: center; background: white;}
.Tabbar li {margin: 0 3% 0 0;}
.Tabbar li a {color: #666; font-size: 16px;}
.Tabbar span {display: block; width: 1px; height: 14px; margin: 0 3% 0 0; background: rgba(200,200,200,1); }
.Tabbar li a:hover,.Tabbar .active a {color: rgb(80,140,230); font-weight: bold; font-size: 16px;}


/* newsList */
.newsList { width: 100%;text-align: center; padding: 50px 0; display: flex; flex-direction: column; overflow: hidden; background: rgb(240,241,242);}
.newsListBox {width: 100%; max-width: 1200px; padding: 20px 0; margin: 20px auto; display: flex; flex-direction: column;}
.newsListBox li { padding: 2% 3%; margin-bottom: 3%; display: flex; justify-content: space-between; align-items:flex-start; border: 2px solid white; background:white; overflow: hidden; box-sizing: border-box; }
.newsListBox li:hover{border: 2px solid rgba(80,140,230,0.3);}
.newsListBox li:hover h4 {font-weight:bold !important; color: rgb(80,140,230);}
.newsListBox li > div{ display: flex; overflow: hidden;}
.newsListBox li div:nth-child(2) {width: 65%}
.newsListBox li div:nth-child(1) { width:33%; }
.newsListBox li div:nth-child(1) img{min-width: 100%; max-height: 100%; height: 100%; margin: auto;  }
.newsListBox li div:nth-child(2) div:nth-child(1) { width: 80%; text-align: left; padding: 0 2%; overflow: hidden;}
.newsListBox li div:nth-child(2) div:nth-child(1) h4 { font-size: 18px; font-weight: normal; margin-bottom: 3%; text-overflow: ellipsis; -webkit-box-orient: vertical; text-align: justify; display: -webkit-box; -webkit-line-clamp: 1; overflow: hidden; }
.newsListBox li div:nth-child(2) div:nth-child(1) p { font-size: 14px; color: #999; text-align: justify; text-overflow: ellipsis; -webkit-box-orient: vertical; display: -webkit-box; -webkit-line-clamp: 4; overflow: hidden}
.newsListBox li div:nth-child(2) div:nth-child(2) { width: 20%; min-width: 80px; font-weight: normal; color: #999; text-align: right; }
.newsListBox li div:nth-child(2) div:nth-child(2) h3 {font-size: 26px; font-weight: normal;}
.newsListBox li div:nth-child(2) div:nth-child(2) h5 {font-size: 14px; font-weight: normal;}


/* newsActicle*/
.newsArticle {width: 100%;  text-align: center; padding: 5% 0; display: flex; overflow: hidden; background: rgb(240,241,242);}
.newsArticle p {font-size: 14px; color:#333; text-align: left;}
.newsArticle article {width: 100%; max-width: 1200px; margin: 20px auto; display: flex; flex-direction: column; }
.newsArticle article div:nth-child(2) { width: 100%; max-width: 1200px; display: flex; justify-content: space-between;}

.newsArticleHeader{ height: 130px; text-align: left;}
.newsArticleHeader h2 {font-size: 28px; height: 60px; line-height: 60px; margin: auto 0; }
.newsArticleHeader p {height: 50px; line-height: 50px; color:#666; }

.newsArticleText {width: 70%;  overflow:hidden;}
.newsForeword { padding: 5px 20px; background: white;}
.newsArticleText p { line-height: 28px; text-indent: 2em; text-align: justify; margin: 20px auto;   }
.newsArticleText span img {max-width: 100%;}

.newsArticle aside {width: 26%; overflow: hidden;}
.newsArticle aside > div { margin-bottom: 20px; display: flex; justify-content: space-between; align-items: center; }
.newsArticle aside span {width: 30%; height: 1px; background: rgba(150,150,150,0.2);}
.newsArticle aside h4 {font-weight: normal;}
.newsArticle aside ul li { background: white; margin-bottom: 10px;}
.newsArticle aside ul li div{ max-height:180px; overflow: hidden;}
.newsArticle aside ul li img {height: 100%; margin: auto;  }
.newsArticle aside ul li p {padding: 5px 5px 10px;}
.newsArticle aside ul li:hover {background: #e8e8e8;}
.newsArticle aside ul li:hover p{color: rgb(80,140,230);}






/***** 【 Abouct, 关于我们 】  *****/

/* AbouctUS */
.AboutUs{ width: 100%;text-align: center; padding: 50px 0; display: flex; flex-direction: column; overflow: hidden; background: rgb(240,241,242);}
.Tabbar{width: 100%; max-width: 1200px; height: 60px; padding:10px 30px; margin: auto; display: flex; align-items: center; background: white;}
.Tabbar li {margin-right: 5%;}
.Tabbar li a {color: #666; font-size: 16px;}
.Tabbar li a:hover,.Tabbar .active a {color: rgb(80,140,230); font-weight: bold; font-size: 16px;}

.AboutConten {width: 100%; max-width: 1200px; padding: 5%; margin: 20px auto; display: flex; flex-direction: column; background: white;}

.AboutConten li div p{ line-height: 28px; font-size: 14px; text-indent: 2em;margin: 20px auto; text-align: justify;  }
.AboutConten li div:nth-child(1) {text-align: left;}
.AboutConten li div:nth-child(2) {margin: 50px auto; display: flex; justify-content: space-between; overflow: hidden;}
.AboutConten li div:nth-child(2) span {width: 33.33%;}
.AboutConten li div:nth-child(2) img {width: 100%;}
.AboutConten li{display: none;}
.AboutConten .active  {display: block;}



/***** 【 contactUS ,  联系我们 】  *****/

/* contactUs */
.contactUs{ width: 100%;  text-align: center; padding: 50px 0; display: flex; overflow: hidden; background: rgb(240,241,242);}
.contactUsBox {width: 100%; max-width: 1200px; padding: 3%; margin: auto; display: flex; flex-direction: column; background: white;}
.contactUsBox ul {width: 100%; display: flex; justify-content: center;}
.contactUsBox div:nth-child(1) ul li {width: 30%; padding: 20px;}
.contactUsBox ul li span {width:60px; height: 60px;  margin: 10px auto; display: block; border-radius: 50%;}
.contactUsBox div:nth-child(1) ul li p {font-size: 14px; line-height: 22px;}
.contactUsBox div:nth-child(1) ul li h4 { color: #666;}
.contactUsBox ul li .icon_address {background: rgb(80,140,230) url(../images/icon_address.png) center no-repeat;}
.contactUsBox ul li .icon_phoneNum {background: rgb(80,140,230) url(../images/icon_phoneNum.png) center no-repeat;}
.contactUsBox ul li .icon_MobilePNunm {background: rgb(80,140,230) url(../images/icon_MobilePNunm.png) center no-repeat;}
.contactUsBox  form  { padding: 20px 0;}
.contactUsBox  form  h4 {width: 100%; height: 44px; line-height: 44px; font-size: 18px; text-align: left;}
.contactUsBox  form  ul {justify-content:space-between;}
.contactUsBox  form  ul li{width: 32%; }
.contactUsBox  form  ul li input{width: 100%; height: 40px; margin: 10px 0 ;}
.contactUsBox  form  textarea{width: 100%; height: 100px; margin: 10px 0;}
.contactUsBox  form  button {width: 380px; margin: 10px 0;}

#navMap{width: 100%; height: 650px; }
#windowMap { font-size: 16px; font-weight: bold; line-height: 1.5em; background: #fff; padding: 5px 15px; }





@media  screen and  (max-width: 1024px) {  

/* 主要页面容器 */
.Header, .Footer, .wrapBg, .wrapBg2,  .siteBar,
.NeedLink , .News , .Agent 
{padding: 0 15px;}

/* 首页 */
.ProductNav > div { width: 14%;}
.AllProduct {width: 40px;}

/* 新闻 */
.newsList{padding: 50px 15px;}
aside { display: none;}
.newsArticleHeader h2 {width: 90%; margin:10px auto; font-size: 24px; line-height: 34px;}
.newsArticleHeader,.newsArticleHeader p {text-align: center; margin-bottom: 3%;}
.newsArticleText {width: 90%; margin: auto;}

/* 产品 */

.ProductNav .NavText{ width: 70%; display: grid; justify-content: space-between; grid-template-columns: repeat(auto-fill,33%);}
.ProductNav .NavText li{width: 100%; margin: 1% 5px;}


}



@media screen and  (max-width: 992px) {

/* 主要页面容器 */
.Header, .Footer, .wrapBg, .wrapBg2,  .siteBar,
.NeedLink , .News , .Agent 
{padding: 0 10px;}

 /* 首页 */

.AgentWrap .BrandLogo { width: 75%;}
.GuestBookWrap .OursInfo {width: 25%;}
.GuestBookWrap .GuestBook { width: 75%;}

    
}
/* max-width: 960px; */
/*****【 End (min-width: 992px) 】 *****/



@media screen and  (max-width: 768px) {



/*** 首页 ***/

.About > div:nth-child(1) {width: 60%;}

/* Product */
.ProductNav { padding: 20px 0; display: flex; flex-direction: column;     }
.ProductNav > div { width: 100%; text-align: center; padding: 15px 0; order: 1;}
.ProductNav .NavText {width: 100%; max-width: 100%; padding: 15px 0; border-width: 1px 0; border-style: solid; border-color: rgba(200,200,200,0.5); display: grid; justify-content: space-between; grid-template-columns: repeat(auto-fill,33%); order: 3;}
.ProductNav .NavText li {width: 100%;  margin: 2% auto;}
.ProductNav .NavText li a { text-align: center;}
.ProductNav .AllProduct { width: auto; text-align: center; margin: 2%; order: 2;}
.NeedLink { height:200px; padding: 20px;}
.NeedLink div { justify-content: space-around;}
.NeedLink > div span {line-height:inherit; font-size: 20px;}
.NeedLink > div p { line-height:inherit;letter-spacing:normal;}

/* News */
.News {padding: 10px;}
.NewsWarp {display: block; padding: 0; }
.NewsShow {width: 100%; margin-bottom: 10px; }
.NewsShow li > span img { width: 100%; height: auto;}
.NewsList { width: 100%; }
.NewsList .NewsItems { height: auto; margin-bottom: 10px;}
.NewsList .NewsItems .NewsTime p , .NewsList .NewsItems .NewsTitle p {margin:auto 0;}

/* Agent */
.Agent { padding: 30px 10px;}
.AgentWrap {height: auto; flex-direction: column;}
.AgentWrap > div { text-align: center;}
.AgentWrap > div a{ display: flex;}
.AgentWrap .BrandLogo { width: 100%;}
.AgentWrap .BrandLogo span { height: 80px; }
.AgentWrap .BrandLogo span img {height: 50%;}
.GuestBookWrap{height: auto; flex-direction: column; padding: 20px 0;}
.GuestBookWrap .OursInfo {width: 100%; height: auto; flex-direction: column; text-align: center;}
.GuestBookWrap .GuestBook .GuestInfo input { height: auto; line-height: 24px;}
.GuestBookWrap .GuestBook {width: 100%; height: auto; justify-content: center; flex-direction: column;}
.GuestBookWrap .GuestBook .GuestInfo {width: 100%; justify-content: space-evenly; }
.GuestBookWrap .GuestBook .MessageCont {width: 100%; display: block;}

/*** 新闻 ***/
.newsListBox li div:nth-child(1) div { width: 100%; }
/* .newsListBox li div:nth-child(2) div:nth-child(1) { width: 40%; } */
.newsList{padding: 30px 10px;}

/*** 产品 ***/
.TabbarBox{flex-flow: column;}
.TabbarProduct,.TabbarBox .search{ width: 100%; margin: 0px 0px 10px 0;}


}




@media screen and  (max-width: 576px) {


input,.btnCommon{height: auto; line-height: 32px;  font-size: 16px;}

.Pagination li a { margin-left: 5px;}

.ul_dian { bottom: -60%;}



/*** 首页  ***/

.Product { margin: 20px auto;}
.About {display: block; margin-bottom: 20px;}
.About > div {height: auto;}
.About > div:nth-child(1) {width: 100%; padding: 6% 5%; text-align: center; }
.About > div:nth-child(2) {width: 100%; display: none; }
.About > div > div {margin: auto;}
.About > div p {line-height: 24px;}
.NeedLink { height: 160px;}
.About > div a, .NeedLink > div span ,.NeedLink > div p  {font-size: 20px; line-height: 32px;}

.GuestBookWrap .OursInfo { width: 100%;}

/* 产品 */
.ProductList ,.ProductUseList{grid-template-columns: repeat(auto-fill,50%);}
.ProductUseItems .ProductUseTitle {height: auto; padding: 10px;}
.ProductNav .NavText {grid-template-columns: repeat(auto-fill,50%);}

/* 新闻 */
.newsListBox li > div:nth-child(1){width: 100%; height: 160px; display:flex; flex-flow: column;  }
.newsListBox li > div:nth-child(1) img {width: 100%; }
.newsListBox li {flex-flow: column;}
.newsListBox li > div:nth-child(2){width: 100%; padding: 3% 0;}
.newsArticleHeader h2 { font-size: 18px; line-height: 28px;}
.newsArticle p {line-height: 24px;}


/* 关于我们 */
.AboutConten li > div:nth-child(2) { flex-flow:column ;}
.AboutConten li > div:nth-child(2) span { width: 100%;}

/*** 联系我们 ***/
.contactUsBox form button { width: 100%; height: auto;}
.contactUsBox div:nth-child(1) ul li {width: 30%; padding: 1%;}
.contactUsBox div:nth-child(1) ul li:nth-child(1) {width: 45%;}
.GuestBookWrap .OursInfo p {width: 100%;}
.contactUsBox div:nth-child(1) ul li p {font-size: 12px; line-height: 16px;}


}