@charset "utf-8";
/* CSS Document */
/*banner*/
.bannerma { position: relative; z-index: 0;
      height: 380px;
      padding: 0 1em;
      background: #000 center center no-repeat;
      background-size: cover;}
.bannerma .bmask { position: absolute; z-index: 0; left: 0; top: 0;
width: 100%; height: 100%; background-color: #000;
filter:alpha(opacity=50);-moz-opacity:.5; opacity:0.5;}
.bannerma .con { position: relative; z-index: 1;
      max-width: 1120px;
      margin: 0 auto;
      height: 100%;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      align-items: center;
     justify-content: space-between  }
.bannerma .con .videob { width: 48%;}
.bannerma .con .videob video { width: 100%; height: auto;}
.bannerma .con .txt { margin-right: 5%; width: 43%; text-align: right;color: #fff;}
.bannerma .con .txt h1 {font-weight: bold; font-size: 28px; line-height: 1.3em; text-transform: uppercase;}
.bannerma .con .txt p { width: 56%; margin: 1em 0 0 auto;line-height: 1.7em;}
.bannerma .con .txt .btn { margin-top: 1em; display: inline-block; cursor: pointer; 
padding: 2px 1.8em 0; line-height: 2.2em; 
background-color: #00B263; font-weight: bold;
transition: all 0.5s;}
.bannerma .con .txt .btn:hover {background-color:#000;  color: #00B263;}
.bannerma .con .txt .btn2 { border: 2px solid #ffffff; margin-top: 1em;
 display: inline-block; cursor: pointer;  color: #fff;
padding: 2px 1.8em 0; line-height: 2.2em; 
 font-weight: bold;
transition: all 0.5s;}
.bannerma .con .txt .btn2:hover {background-color:#fff;  color: #000;}
.bannerma .con .txt .line {  margin: 0.6em 0 0 auto; width: 10.5em; height: 4px; background-color: #00B263;}

.manuBox { position: relative; z-index: 0; 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;}
.manuBox .txtb { width: 50%; padding: 3em 0 2.4em;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
flex-wrap: nowrap;align-items: text; }
.manuBox .txtb .con { flex: 1; margin: 0 7% 0 11.7%; text-align: left;}
.manuBox .txtb .tit {font-weight: bold; font-size: 2em; line-height: 1.3em; text-transform: uppercase;}
.manuBox .txtb .txt {  margin: 1em 0 0 auto; line-height: 1.7em;}
.manuBox .txtb .btn { float: right; margin-top: 0.8em; display: inline-block; 
color: #000;font-weight: bold;
line-height: 1.8em; padding: 0.1em 0 0;  }
.manuBox .txtb .btn:hover { text-decoration: underline;}
.manuBox .txtb .btn2 { margin-top: 1em; display: inline-block; cursor: pointer; 
padding: 2px 1.8em 0; line-height: 2.2em; 
background-color: #00B263; font-weight: bold;
transition: all 0.5s;}
.manuBox .txtb .btn2:hover {background-color:#000;  color: #00B263;}
.manuBox .txtb .line {  margin: 0.6em auto 0 0; width: 5.2rem; height: 4px; background-color: #00B263;}

.manuBox .txtb:nth-child(even) .con { text-align: right;margin: 0 11.7% 0 7%;}
.manuBox .txtb:nth-child(even) .line  { margin: 0.6em 0 0 auto;}
.manuBox .vline { position: absolute; left: 50%; margin-left: -2px; width: 4px; background-color: #f8f8f8;
top: 3em; bottom: 3em;}

.quBoxW { margin-top: 3.3em;}
.quBox { max-width: 1120px; min-height:348px; margin: 0 auto 0; background-color: #fff;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
flex-wrap: nowrap;align-items: stretch; justify-content: space-between;}
.quBox:nth-child(even) {min-height:380px; 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 3em;
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;}
.quBox:nth-child(even) .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;}
.quBox:nth-child(even)  .txtb .line {margin: 0.6em 0 0 auto;}

.quTxtBox { max-width: 1120px;  margin: 3.3em auto 0; background-color: #fff;}
.quTxtBox .con { padding: 3em 5.8%; text-align: left;}
.quTxtBox .tit {font-weight: bold; font-size: 2em; line-height: 1.3em; text-transform: uppercase;}
.quTxtBox .con .line {width: 5.2rem;height: 4px;background-color: #00B263;}
.quTxtBox .txt {  margin: 1em 0 0 auto; line-height: 1.7em;}

.contactBoxW { margin-top: 3.3em;}
@media only screen and (max-width:828px) {
.bannerma {
        padding:3em 0;
        height: auto;
        overflow: hidden;
        position: relative;
        z-index: 0; }
.bannerma .con {
        position: relative;
        width: 82%;
        height: 100%;
        overflow: hidden; display: block;}
.bannerma .con .videob { width: 100%;}
.bannerma .con .txt { width: 100%;}
.bannerma .con .txt h1 { font-size: 1.3em;}
.bannerma .con .txt p { width: 100%;}

.manuBox { display: block;}
.manuBox .txtb { width: 100%;}
.manuBox .txtb .tit { font-size:1.3em ;}
.manuBox .vline { display: none;}
.manuBox .txtb .con { margin: 0 9%;}
.manuBox .txtb:nth-child(even) .con { margin: 0 9%;}

.quBox { display: block;}
.quBox .txtb .tit { font-size: 1.3em;}
.quBox .txtb { width: 100%;}
.quBox .picb { width: 100%;}
.quBox .txtb .con { margin: 0 9%;}
.quBox:nth-child(even) .txtb .con{ margin: 0 9%;}
.quBox .pic { height: 0; padding-top: 60%; overflow: hidden;}

.quTxtBox .con { padding: 3em 9%;}
.quTxtBox .tit { font-size: 1.3em;}
}
@media only screen and (max-width:480px) {
.bannerma .con .txt .btn { font-size: 0.8em;}
}