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

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

.whyBoxW { position: relative; z-index: 0; margin-top: 3.3em;}
.whyBoxW .whybg {position: absolute; z-index: -1;  top: 0; left: 0; width: 100%; height: 74%;
background: #000 url(../imgs/why_bg.jpg) center bottom no-repeat; background-size:cover;}
.whyBoxW .whybg::before {content: ""; position: absolute; z-index: -1; top: 0; left: 0; width: 100%; height: 100%;
 background-color: #000;filter:alpha(opacity=60);-moz-opacity:.6; opacity:0.6;}
.whyBox { max-width: 1120px; margin: 0 auto 0; padding-top: 3.3em;
   }
.whyBox .tit {  color: #fff; font-weight: bold; font-size: 2em; line-height: 1.3em; text-transform: uppercase;}
.whyBox .line {  margin: 0.6em auto 0; width: 5.2rem; height: 4px; 
background-color: #00B263;}
.whyBox .list { margin-top: 2.4em; }
.whyBox .list ul {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
flex-wrap: nowrap;
align-items: stretch; justify-content: space-around;}
.whyBox .list ul li { width: 23%; margin: 0 1%; padding: 0.8em 0 0; background-color: #fff;
 -moz-box-shadow: 0 0.2em 0.5em rgba(0, 0, 0, .2);
 -webkit-box-shadow: 0 0.2em 0.5em rgba(0, 0, 0, .2);
 box-shadow: 0 0.2em 0.5em rgba(0, 0, 0, .2);}
.whyBox .list .name { padding: 0 0.5em; font-weight: bold; font-size: 1.3em; height: 2.6em; line-height: 1.3em;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
flex-wrap: nowrap; align-items: center; justify-content: center;
}
.whyBox .list .txt { text-align: left; padding: 1em 1.4em; }
.whyBox .pic { margin-top: 0.5em; width: 100%; padding-top: 59%; height: 0; overflow: hidden;
background: center center no-repeat; background-size:cover;}

.manuBox { max-width: 1120px; margin: 3.3em auto 0;
display: -ms-flexbox;
display: -webkit-flex;
display: flex; flex-direction: row-reverse;
flex-wrap: nowrap;align-items: center; justify-content: space-between;}
.manuBox .picb { width: 42.2%;}
.manuBox .pic { width: 100%; padding-top: 66.8%; height: 0; overflow: hidden;
background: center center no-repeat; background-size:cover;}
.manuBox .txtb { width: 57.8%; padding: 0;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
flex-wrap: nowrap;align-items: center; }
.manuBox .txtb .con { flex: 1; margin: 0 8% 0 13.8%; text-align: right;}
.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 { cursor: pointer; 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 .line {  margin: 0.6em 0 0 auto; width: 5.2rem; height: 4px; background-color: #00B263;}

.bestBoxW { margin-top: 3.3em; background-color: #fff; padding: 3.6em 1em 5.4em;}
.bestBox {max-width: 1120px; margin: 0 auto;}
.bestBox .tit {font-weight: bold; font-size: 2em; line-height: 1.3em; 
text-transform: uppercase; text-align: left;}
.bestBox .line {  margin: 0.6em auto 0 0; width: 5.2rem; height: 4px;
 background-color: #00B263;}
 
.faqBoxW { margin-top: 4em; padding: 0 1em;}
.faqBox {max-width: 1120px; margin: 0 auto;}
.faqBox .tit {font-weight: bold; font-size: 2em; line-height: 1.3em; 
 text-transform: uppercase; text-align: left;}
.faqBox .line {  margin: 0.6em auto 0 0; width: 5.2rem; height: 4px;
  background-color: #00B263;}

.faqBox .list {border-top: 1px solid #ddd; text-align: left;}
.faqBox .list li { border-bottom: 1px solid #ddd;}
.faqBox .list .ftit { position: relative; z-index: 0; padding: 1.3em 1em 1.2em; padding-left: 2em; 
cursor: pointer; color: #999;  line-height: 1.4em; font-size: 16px;}
.faqBox .list .ftit::before { content: ""; position: absolute; left: 0; top: 1.35em;
background:url(../imgs/plus.png) center center no-repeat; background-size:contain ;
 width: 17px; height: 17px;}
.faqBox .list .ftit.show::before {background-image:url(../imgs/sub.png);}
.faqBox .list .fcon { display: none; padding-left: 2.2em; margin-bottom: 1.8em; line-height: 1.8em;}


@media only screen and (max-width:828px) {
.doBox { display: block;}
.doBox .txtb .tit { font-size: 1.3em;}
.doBox .txtb { width: 100%;}
.doBox .picb { margin-top: 2.4em; width: 100%;}
.doBox .txtb .con { margin: 0 9%;}

.manuBox { display: block;}
.manuBox .txtb .tit { font-size: 1.3em;}
.manuBox .txtb { width: 100%;}
.manuBox .picb { margin-top: 2.4em; width: 100%;}
.manuBox .txtb .con { margin: 0 9%;}
 
.proBox .list li { width:50%}

.bestBoxW { padding:3.3em 9%;}
.bestBox .tit { font-size: 1.3em;}
.bestBox .list { margin-top: 1em; margin-left: -5%;margin-right: -5%;}

.faqBoxW { margin-top: 3.3em; padding-left: 9%; padding-right: 9%;}
.faqBox .tit { font-size: 1.3em;}

.whyBox { padding-bottom: 3.3em;}
.whyBox .tit { font-size: 1.3em; margin: 0 1em;}
.whyBox .list { margin-top: 1em;}
.whyBox .list ul {flex-wrap: wrap; margin-left: 5%; margin-right: 5%;}
.whyBox .list ul li { width:48%; margin: 1em auto 0;}
.whyBox .list .name { font-size: 1.2em;}
.whyBox .list .txt { font-size: 1em; line-height: 1.7em;padding: 1em 1em;}
.whyBoxW .whybg { height: 100%;}
}
@media only screen and (max-width:480px) {
.whyBox .list ul li{ width: 100%; }
}