html {
    font-size: 12px;
    color: #666;
}
body {
    width: 100%;
    font-size: 1em;
    font-family: Microsoft YaHei,STHeiti STXihei,Microsoft JhengHei,Helvetica,Tohoma,Arial;
    margin: 0px;
    padding:0px;
}
@font-face {
  font-family: 'FontAwesome';
  src: url('../fonts/fontawesome-webfont.eot?v=4.7.0');
  src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'), url('../fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}

*{
    margin:0;
    padding:0;
    text-decoration:none;
    list-style:none;
    font-size:14px;
    font-family:"微软雅黑";
    color: #3f3f3f;
}
.headerwrap{
    width: 100%;
    position: fixed;
    z-index:50;
    background: #fff;
    border-bottom: 1px solid #f0f0f0;
}
 .clear{clear:both;}
.header,.content,.footer,.banner,.contentWrap{margin:0 auto;margin-top:0px;}  
/*通用样式*/
 /*手机*/
@media screen and (max-width:100%){
   .header,.content,.footer,.banner,.contentWrap{width:100%;}
}

/*PC*/
@media screen and (min-width:1080px){
    .header,.content,.footer,.banner,.contentWrap{max-width:1080px;}
}


.header {
    background: #fff;
    padding-top: 15px;
}
.bottomp{
    width: 100%;
    height: 50px;
    border-top: 0px solid #f1f1f1;
    color: #fff;
    clear: both;
    margin-top: 50px;
    text-align: center;
    padding: 20px 0px 10px 0px;
    font-size: 16px;
    font-weight: 450;
    background:#2a3338;
}

#logo{
    width: 15%;
    font-size: 20px;
    font-weight: 1200;
    line-height:50px;
    padding-left: 1%;
    float: left;
    letter-spacing:5px 
}
#menus{
    width:35%;
    line-height: 50px;
    margin-left: 10%;
    float: right;
}
#menu{
    float: left;
    width: 100px;
    font-size: 16px;
    font-weight: 450
}
.wrap{
    width: 100%;
    position:absolute;
    top: 65px;
     z-index: 1;
}
.contentbanner{
    height:420px;
    background-repeat: no-repeat; 
    background-image: url(../imgs/Homepage_Companion.jpg); 
    background-size: cover; 
    background-position: center bottom; 
    width: 100%; 
    opacity: 1; 
    visibility: inherit; 
}
.banner-left{
    float: left;
    width: 50%;
    border: 0px solid red;
    padding: 130px 0px 0px 20px;
    color: #fff;
    font-size: 40px;
    font-weight: 300;
    line-height: 40px;
}
.banner-left p{
    font-size: 45px;
    line-height: 22px;
    font-weight: 700;
    color: #fff;
    padding: 40px 0px 30px 0px;
}
.banner-left span{
    font-size: 25px;
    font-weight: 300;
    color: #fff;
}
.banner-right{
    float: right;
    width: 30%;
    border: 1px solid #ccc;
    margin:100px 20px 0px 5%;
    background: #fff;
    opacity:0.9;
    border-radius:5px;
}
.logintitle{
    width: 100%;
    background: #fff;
    padding:8px 0px 5px 0px;
    border-bottom: 1px solid #ccc;
    text-align: center;
    font-weight:600;
    border-radius:5px 5px 0px 0px ;
}
.contentWrap{
    border: 0px solid red;
    position: relative;
}
.contentT{
    width: 100%;
    padding: 35px 0px 20px 0px;
    text-align: center;
    font-size: 33px;
    font-weight: 400;
}
.contentT span{
    color: #006c89;
    font-size: 35px;
    font-weight: 700;
    font-family: "Helvetica";
}
.contentitem{
    width: 30%;
    float: left;
}
.contentitem2{
    width: 25%;
    float: left;
}
.marginleft{
    margin-left: 5%
}
.margintop100{
    margin-top: 100px;
}
.contentitemimg{
    width: 100%;
    text-align: center;
    float: left;
}
.contentitemimg img{
    width: 100%;
}
.contentitemtitle{
    width: 100%;
    padding: 0px 0px 10px 0px;
    text-align: center;
    font-size: 25px;
    font-weight: 700;
    color: #006c89;
}
.contentitemP{
    width: 100%;
    font-size: 18px;
    padding: 5px 0px 0px 5px;
    text-align: center;
    line-height: 32px;
    color:  #8d8d8d
}
.whylove{
    float: left;
    height:720px;
    background-repeat: no-repeat; 
    background-image: url(../imgs/whylove.jpg); 
    background-size: cover; 
    background-position: center bottom; 
    width: 100%; 
    opacity: 1; 
    visibility: inherit;
    margin-top: 30px;
}
.whylovetitle{
    width: 100%;
    padding: 140px 0px 0px 0px;
    color: #fff;
    text-align: center;
    font-size: 38px;
    font-weight: 300!important;
    color: #ffffff;
}
.whylovetitle span{
     font-size: 47px;
    font-weight: 700!important;
    color: #ffffff;
}
.whyloveicon{
    width: 100%;
    border: 0px solid red;
    font-size: 48px;
    text-align: center;
}
.fa {
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.fa-check:before {
  content: "\f00c";
}
.fa-check-square-o:before {
  content: "\f046";
}
.fa-check-circle:before {
  content: "\f058";
}
.fa-check-circle-o:before {
  content: "\f05d";
}
.iconcolor{
    color: #fce52e;;
}
.whyloveitemtitle{
    width: 100%;
    padding: 10px 0px 10px 0px;
    text-align: center;
    font-size: 25px;
    font-weight: 700;
    color: #fff;
}
.whyloveitemP{
    width: 100%;
    font-size: 18px;
    padding: 5px 0px 0px 5px;
    text-align: center;
    line-height: 32px;
    color:  #fff;
    font-weight: 400;
}


.aboutbanner{
    height:500px;
    background-repeat: no-repeat; 
    background-image: url(../imgs/aboutbg.jpg); 
    background-size: cover; 
    background-position: center bottom; 
    width: 100%; 
    opacity: 1; 
    visibility: inherit; 
}
.aboutbannercontent{
    float: left;
    width: 80%;
    border: 0px solid red;
    padding: 130px 0px 0px 20px;
    color: #fff;
    font-size: 35px;
    font-weight: 300;
    line-height: 40px;
}
.aboutbannercontent span{
    font-size: 25px;
    font-weight: 300;
    color: #fff;
}
.aboutbannercontent p{
    font-size: 45px;
    line-height: 22px;
    font-weight: 700;
    color: #fff;
    padding: 40px 0px 30px 0px;
}