@charset "utf-8";
/* CSS Document */

.procBoxW { padding: 0 1em;}
.procBox { max-width: 1120px;
      margin: 0 auto;}
.procBox .list ul { margin: 0 -1.2%;
	  display: -ms-flexbox;
	  display: -webkit-flex;
	  display: flex;
	  flex-wrap: wrap; align-items:stretch; justify-content: space-around;}
.procBox .list li {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
flex-wrap: wrap; align-items:stretch;
width: 33.3%;
margin-top: 2em;}
.procBox .list li:nth-child(4) { width: 50%;}
.procBox .list li:nth-child(5) { width: 50%;}
.procBox .list .lib { position: relative; z-index: 0; margin: 0 3.6%; 
padding-bottom: 1.1em;
display: block; background-color: #fff; overflow: hidden;}
.procBox .list li:nth-child(4) .lib { margin: 0 2.4%;}
.procBox .list li:nth-child(5) .lib { margin: 0 2.4%;}
.procBox .list .pic {
      display: block;
      width: 100%;
      padding-top: 63%;
      height: 0;
      overflow: hidden;
      background: center center no-repeat;
      background-size: cover;}
.procBox .list li:nth-child(4) .pic {padding-top: 41%;}
.procBox .list li:nth-child(5) .pic {padding-top: 41%;}
.procBox .list .name { font-size: 18px;text-align: left; font-weight: bold;
 margin: 1.2rem 1.6rem 0;
line-height: 1.3em; }
.procBox .list .name a { color: #000;
position: relative; z-index: 0; 
transition: all 0.5s; right:0;}
.procBox .list .name a:hover {  right: -2px;}
.procBox .list .txt { font-size: 15px; text-align: left;
 margin: 0.4rem 1.6rem 0;
line-height: 1.3em; }
.procBox .list .txt .item {padding: 0.3em 0 0.3em;}
.procBox .list .txt .item a {display: inline-block; color: #414141;
position: relative; z-index: 0; 
transition: all 0.5s; right:0; padding-left: 1em;
background:  0 0.1em no-repeat; background-size:0.8em auto;}
.procBox .list .txt .item a:hover {  right: -2px; background-image: url(../imgs/arrow2.png);}

.downBox { max-width: 1120px; margin: 3.3em auto 0; background-color: #000; color: #fff;}
.downBox .con { padding: 2.3em 1.7em 2.3em 2.3em;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
flex-wrap: nowrap;
justify-content: space-between; align-items: center;}
.downBox .txtb { text-align: left;}
.downBox .t1 {font-size: 18px; line-height: 1.6em;}
.downBox .t2 { font-size: 20px; font-weight: bold;line-height: 1.6em;}
.downBox .btnDown { display: inline-block; padding: 0 1.6em; background-color: #00B263;
 color: #000;
 font-size: 20px; line-height: 2.2em; transition: all 0.5s;}
.downBox .btnDown:hover {background-color:#000;  color: #00B263;}

.seBox { max-width: 1120px; margin: 3.3em auto 0; background-color: #fff;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
flex-wrap: nowrap;align-items: stretch; justify-content: space-between;
}
.seBox2 { flex-direction: row-reverse;}
.seBox .picb { width: 28.7%;}
.seBox .pic { width: 100%; height: 100%; 
background: center center no-repeat; background-size:cover;}
.seBox .txtb { width: 71.3%; padding: 3em 0 1.7em;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
flex-wrap: nowrap;align-items: center; }
.seBox .txtb .con { flex: 1; margin: 0 8.8%; text-align: left;}
.seBox2 .txtb .con { margin: 0 8.8%; text-align: right;}
.seBox .txtb .tit {font-weight: bold; font-size: 2em; line-height: 1.3em; text-transform: uppercase;}
.seBox .txtb .txt {  margin: 1em 0 0 auto; line-height: 1.7em;}
.seBox .txtb .btn { margin-top: 0.8em; display: inline-block; 
color: #000;font-weight: bold;
line-height: 1.8em; padding: 0.1em 0 0;  }
.seBox .txtb .btn:hover { text-decoration: underline;}
.seBox .txtb .line {  margin: 0.6em auto 0 0; width: 5.2rem; height: 4px; background-color: #00B263;}
.seBox2 .txtb .line {margin: 0.6em 0 0 auto;}


.appBoxW { padding: 0 1em;}
.appBox {
      max-width: 1120px;
      margin: 0 auto;
}
.appBox .list ul { margin: 0 -1.2%;
	  display: -ms-flexbox;
	  display: -webkit-flex;
	  display: flex;
	  flex-wrap: wrap; align-items:stretch; justify-content: space-around;
}
.appBox .list li {
      width: 33.3%;
      margin-top: 2em;
}
.appBox .list .lib { position: relative; z-index: 0; margin: 0 4.8%; padding: 1em; 
display: block; background-color: #fff; overflow: hidden;cursor: pointer;
}
.appBox .list .cur .lib {
 -moz-box-shadow: 0 0 0.5em rgba(0, 0, 0, .3);
 -webkit-box-shadow: 0 0 0.5em rgba(0, 0, 0, .3);
 box-shadow: 0 0 0.5em rgba(0, 0, 0, .3);
}
.appBox .list .pic {
      display: block;
      width: 100%;
      padding-top: 66.6%;
      height: 0;
      overflow: hidden;
      background: center center no-repeat;
      background-size: cover;}
.appBox .list .name { font-size: 1rem;text-transform: uppercase;
      display: block;
      margin: 1em auto 0;
	  height: 2.6em; overflow: hidden;
      line-height: 1.3em; 
}
.appBox .list .name::after { content: ""; display: inline-block; margin-left: 0.7em; width: 1em; height: 1em;
 background:url(../imgs/arrow.png)  0 center no-repeat; background-size:1em auto; position: relative; z-index: 0; top: 0.1em;}
 
.appBox .list .sub { display: none;}

.appBox .list .pMask { overflow: hidden; position: absolute; top: 100%; left: 0; right: 0;
padding: 0 1.3em;height: 100%; text-align: left;
transition: all 0.3s;
background:#000;
filter:Alpha(opacity=70);
background: rgba(0, 0, 0, 0.7)
}
.appBox .list .pMaskc { display: block; padding: 1.6em 0 0;}
.appBox .list .lib:hover .pMask {top: 0;}
.appBox .list .pMask .name2 { display: block; font-weight: bold; white-space:nowrap;
text-overflow:ellipsis; white-space:nowrap; *white-space:nowrap;
text-transform: uppercase; 
line-height: 1.2em; height: 1.2em; overflow: hidden; color: #00B263;}
.appBox .list .pMask p { margin-top: 0.9em; overflow: hidden; color: #fff;
 line-height: 1.35em;
height:8.1em ;
text-overflow:ellipsis;
display:-webkit-box; 
-webkit-box-orient:vertical;
-webkit-line-clamp:6; }
.appBox .list .pMask .btn { margin-top: 0.8em; display: inline-block;  color: #fff;
line-height: 1.8em; padding: 0.1em 0 0; transition: all 0.5s; font-weight: bold;}
.appBox .list .pMask .btn:hover { text-decoration: underline;}
.appBox .list .line { margin: 1.1em auto 0; height: 4px; width: 32%; 
background-color: #00B263;}
.appBox .list .pMask .line { margin: 0.4em auto 0 0;}

.appBox .lists { display: none; overflow: hidden; padding: 2em 2em 1em;}
.appBox .lists ul {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
flex-wrap: wrap;
}
.appBox .lists li { padding-top: 1em; width: 20%; overflow: hidden; text-align: left;} 
.appBox .lists li .txt { position: relative; z-index: 0; padding: 0 1em 0 1em; line-height: 1.3em;}
.appBox .lists li .txt a {position: relative; z-index: 0; transition: all 0.5s; right:0; 
padding-left: 1.2em; display: block; color: #000;
background:  0 0 no-repeat; background-size:1em auto;}
.appBox .lists li .txt a:hover {  right: -2px;
	background-image: url(../imgs/arrow2.png) ;}

@media only screen and (max-width:828px) {
.procBox .list li { width: 50%; }
.procBox .list li:nth-child(5) { width: 100%; }
.procBox .list li:nth-child(5) .lib {margin: 0 3.6%; }

.downBox .con { display: block;}
.downBox .btnDown { margin-top: 1em;}

.seBox { display: block;}
.seBox .txtb .tit { font-size: 1.3em;}
.seBox .txtb { width: 100%;}
.seBox .picb { width: 100%;}
.seBox .txtb .con { margin: 0 9%;}
.seBox2 .txtb .con { margin: 0 9%;}
.seBox .pic { height: 0; padding-top: 60%; overflow: hidden;}

.appBox .list ul {  margin: 0;  }
.appBox .list .lib { margin: 0 2%; padding: 0.5em;}
.appBox .lists li { width: 50%;}	
.appBox .lists { padding: 1em;}
}


@media only screen and (max-width:500px) {
.procBox .list li { width: 100%; }
.procBox .list li:nth-child(4) { width: 100%; }
.procBox .list li:nth-child(4) .lib {margin: 0 3.6%; }

/* .appBox .list li {width: 100%;} */
}
@media only screen and (max-width:420px) {
.appBox .lists { font-size: 0.75em;}
/* .appBox .lists li { width: 100%;}	 */
.appBox .list .name { font-size: 0.75em;}
}
@media only screen and (max-width:320px) {
.appBox .list .lib { padding: 0.2em;}
}