@charset "utf-8";
/* CSS Document */
.banner { height: 422px;}
.banner .con .txt { margin: 0 auto;}
.companyBox { max-width: 1120px; margin: 3.3em auto 0;
 background: #000 url(../imgs/compbg.jpg) 0 center no-repeat;
 background-size:auto 100% ;}
.companyBox .txtb { position: relative; z-index: 1; width: 55%; margin:0 6.2% 0 auto; padding: 3.6em 0;
text-align: right; color: #fff;}
.companyBox .txtb .tit {font-weight: bold; font-size: 2em; line-height: 1.3em; text-transform: uppercase;}
.companyBox .txtb .txt {  margin: 1em 0 0 auto; line-height: 1.7em;}
.companyBox .txtb .btn { margin-top: 0.8em; display: inline-block; color: #fff;
line-height: 1.8em; padding: 0.1em 0 0;font-weight: bold;}
.companyBox .txtb .btn:hover { text-decoration: underline;}
.companyBox .txtb .line { margin: 0.6em 0 0 auto; width: 5.2rem; height: 4px; background-color: #00B263;
}

.quBox { 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;
}
.quBox2 { flex-direction: row-reverse;margin: 0 auto 0;}
.quBox .picb { width: 50%;}
.quBox .pic { width: 100%; height: 100%; 
background: center center no-repeat; background-size:cover;}

.quBox .txtb { width: 50%; padding: 3em 0 1.7em;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
flex-wrap: nowrap;align-items: center; }
.quBox .txtb .con { flex: 1; margin: 0 7% 0 11.7%; text-align: left;}
.quBox2 .txtb .con { margin: 0 11.7% 0 7%; text-align: right;}
.quBox .txtb .tit {font-weight: bold; font-size: 2em; line-height: 1.3em; text-transform: uppercase;}
.quBox .txtb .txt {  margin: 1em 0 0 auto; line-height: 1.7em;}
.quBox .txtb .btn { margin-top: 0.8em; display: inline-block; 
color: #000;font-weight: bold;
line-height: 1.8em; padding: 0.1em 0 0;  }
.quBox .txtb .btn:hover { text-decoration: underline;}
.quBox .txtb .line {  margin: 0.6em auto 0 0; width: 5.2rem; height: 4px; background-color: #00B263;}
.quBox2 .txtb .line {margin: 0.6em 0 0 auto;}

@media only screen and (max-width:828px) {
.banner { height: auto;}
.companyBox { position: relative; z-index: 0;}
.companyBox::after { position: absolute; z-index: -1; left: 0; top: 0; 
width: 100%; height: 100%; content: "";
background:#000;
filter:Alpha(opacity=60);
background: rgba(0, 0, 0, 0.6);}
.companyBox .txtb { width: 82%; margin: 0 auto;}
.companyBox .txtb .tit { font-size: 1.3em;}
.quBox { display: block;}
.quBox .txtb .tit { font-size: 1.3em;}
.quBox .txtb { width: 100%;}
.quBox .picb { width: 100%;}
.quBox .txtb .con { margin: 0 9%;}
.quBox2 .txtb .con { margin: 0 9%;}
.quBox .pic { height: 0; padding-top: 60%; overflow: hidden;}
}