@charset "utf-8";
.pBox { margin-top: 11px; }
.pBox .con {display: flex; justify-content: space-between; align-items: stretch;}
.pBox .side { width: 21.3%;	border:4px solid #bfbfbf; background-color: #222; color: #fff;
text-align: left;
}
.pBox .side .title_s { margin-top: 0.4em;}
.pBox .side a { color: #fff;}
.pBox .side a:hover { color: #aaa;}
.pBox .side .cons { padding: 3% 10%;}
.pBox .side .list { line-height: 2.2;}
.pBox .proBox { width: 77%;
}
.pBox .proBox .list { padding: 4.5% 0; background-color: #fff;
}
.pBox .proBox .list ul { display: flex; 
    flex-wrap: wrap; align-items: stretch; justify-content: flex-start;}
.pBox .proBox .list li { position: relative; z-index: 0; 
 width: 33.3%; }
.pBox .proBox .list li::after { display: block; content: "";
 position: absolute; top: 0; bottom: 0; right: 0;
  width: 1px; height: 100%; background-color: #eee;}
.pBox .proBox .list li:nth-child(3n)::after { display: none;}
.pBox .proBox .list .lib { display: block; cursor: pointer; padding: 15.2% 15.2% 0;
}
.pBox .proBox .list li:nth-child(1) .lib,
.pBox .proBox .list li:nth-child(2) .lib,
.pBox .proBox .list li:nth-child(3) .lib{ padding-top: 0;}
.pBox .proBox .list .pic { position: relative; z-index: 0; width: 100%; padding-top: 75.5%;
}
.pBox .proBox .list .pic img { position: absolute; top: 0; left: 0;
 width: 100%; height: 100%; object-fit:contain;}
.pBox .proBox .list .txt { margin-top: 0.9em; line-height: 1.8; text-align: left;
}
.pBox .proBox .list .name {  color: #222;
}
.pBox .proBox .list .num { color: #888;
}
@media only screen and (max-width:828px) {
	.pBox .con { display: block;}
	.pBox .side { width: auto;}
	.pBox .proBox { margin-top: 2em; width: auto;}
	.pBox .proBox .list li { width: 50%;}
	.pBox .proBox .list li:nth-child(3) .lib{ padding-top: 15.2%;}
	.pBox .proBox .list li:nth-child(2n)::after { display: none;}
	.pBox .proBox .list li:nth-child(3n)::after { display: block;}
}

/*应用*/
.appBox {}
.appBox .list {}
.appBox .list ul { display: flex; 
    flex-wrap: wrap; align-items: stretch; justify-content: flex-start;}
.appBox .list li { width: 48.8%; margin-top: 2.4%; margin-right: 2.4%;
 align-items: stretch; justify-content: flex-start; flex-direction: column;}
.appBox .list li:nth-child(2n) { margin-right: 0;}
.appBox .list li:nth-child(1) { margin-top:0}
.appBox .list li:nth-child(2) { margin-top:0}
.appBox .list li .lib {border: 2px solid #626262; height:100%;
display: flex;  flex-direction: column; 
align-items: stretch; justify-content:space-between; flex: 1; overflow: hidden;
}
.appBox .list li .lib .lic {padding:0 4%;display: flex;  
align-items: stretch; justify-content:space-between; flex: 1; overflow: hidden; }
.appBox .list .pic { margin-top: 4%; margin-bottom: 4%;   position: relative; z-index: 0; width: 36%; padding-top: 36%;
}
.appBox .list .pic img { position: absolute; top: 0; left: 0;
 width: 100%; height: 100%; object-fit:cover;}
.appBox .list .txt { margin-top: 4%; margin-bottom: 4%;  width: 59%; text-align: left; color: #000;}

@media only screen and (max-width:828px) {
.appBox .list li { width: 100%; margin-right: 0;}
.appBox .list li:nth-child(1) { margin-top:2.4%}
.appBox .list li:nth-child(2) { margin-top:2.4%}
}

.appDetailBox .title { line-height: 1.8; font-weight: normal; color: #bc1831; text-align: left;}
.appDetailBox .content {line-height: 1.8;  text-align: left;}
.appDetailBox .picList {}
.appDetailBox .picList ul { display: flex; 
    flex-wrap: wrap; align-items: stretch; justify-content: flex-start;}
.appDetailBox .picList li { width: 50%; 
 align-items: stretch; justify-content: flex-start; flex-direction: column;}
.appDetailBox .picList li .lib { margin: 9px 8% 0;}
.appDetailBox .picList .pic {   position: relative; z-index: 0; 
width: 100%; padding-top: 66.6%;
}
.appDetailBox .picList .pic img { position: absolute; top: 0; left: 0;
 width: 100%; height: 100%; object-fit:cover;}
 
.respBox {}
.respBox .content {line-height: 1.8;  text-align: left;}
.respBox .content::after { content: ""; display: block; clear: both;}
.respBox .content .pic { float: left; width: 50%; height: auto; margin-right: 1.7%; }
@media only screen and (max-width:828px) {
	.respBox .content .pic { float: none; width:100%;  height: auto;  margin-right: 1.7%; }
}

/*产品详情*/
.proDetailBox {
	
}
.proDetailBox .con { display: flex;
	 align-items: flex-start; justify-content: space-between;
}
.proDetailBox .picBox {  width: 48%;}
.proDetailBox .txt { width: 44%; text-align: left;}
.proDetailBox .txt .name { font-weight: normal;}
.proDetailBox .txt .param { margin-top:0.9em;}
.proDetailBox .txt .param::after { content: ""; display: block; clear: both;}
.proDetailBox .txt .param .txtP{ display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: stretch;}
.proDetailBox .txt .param dl { line-height: 1.5; padding: 0.8em 0 0.7em; float: left; width: 50%; }
.proDetailBox .txt .param dl dt { float: left; width: 4em;}
.proDetailBox .txt .param dl dd { margin-right: 1em; margin-left: 4em; word-wrap: break-word;}
.proDetailBox .txt .intro { margin-top: 1.5em; color: #666;}

.proDetailBox .picBox {}

.proDetailBox .picBox .picD { position: relative; z-index: 0; 
width: 100%; padding-top: 66.65%;}
.proDetailBox .picBox .picD img { position: absolute; top: 0; left: 0;
 width: 100%; height: 100%; object-fit:contain;}
.proDetailBox .picBox .picS { margin-top: 6%;}
.proDetailBox .picBox .picS ul { display: flex; justify-content: flex-start;
align-items: stretch;}
.proDetailBox .picBox .picS li { cursor: pointer; position: relative; z-index: 0; width: 24%; padding-top:16%;}
.proDetailBox .picBox .picS li img { position: absolute; top: 0; left: 0;
 width: 100%; height: 100%; object-fit: contain;}
 
 @media only screen and (max-width:828px) {
	 .proDetailBox .con { display: block;}
	 .proDetailBox .picBox {  width: 100%;}
	 .proDetailBox .txt{ margin-top: 3em; width: 100%;}
 }
 
 .newDetailBox { margin: 0 1em; padding-top: 2em;}
 .newDetailBox .title { font-size: 2em ; font-weight: bold;}
 .newDetailBox .about { margin-top: 0.5em; color: #999;}
 .newDetailBox .content { line-height: 1.8; text-align: left;
  border-top:1px solid #ccc ; border-bottom:1px solid #ccc ; margin-top: 1em; padding: 0.8em 0;}
 .newDetailBox .content img{ max-width: 100%; height: auto;}
.newDetailBox .pageTurn { color: #666; line-height: 1.5; margin-top: 1.2em; display: flex;
 justify-content: space-between; align-items: flex-start;}
.newDetailBox .pageTurn .prev { margin-right: 2em; text-align: left; height: 1.5em; overflow: hidden;}
.newDetailBox .pageTurn .next { text-align: right; height: 1.5em; overflow: hidden;}
.newDetailBox .pageTurn a { color: #666;}
.newDetailBox .pageTurn a:hover { color: #1b1c20;}

 @media only screen and (max-width:828px) {
	.newDetailBox .pageTurn { display: block;}
	.newDetailBox .pageTurn .next { text-align: left; margin-top: 0.5em;}
 }