@charset "UTF-8"; html {font-family: sans-serif;-webkit-text-size-adjust:
 100%;} body { background: #fff; font-family: -apple-system,
 BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, PingFang SC, Noto
 Sans, Noto Sans CJK SC, Microsoft YaHei, 微软雅黑, sans-serif }

/* nav */
.nav-wrapper { position: absolute; z-index: 9; background: rgba(0, 0, 0, .4); height: 120px; width: 100%; }
.nav-wrapper .nav-logo img { padding-top: 20px; }
.nav-wrapper .nav-list { margin-left: 30px; }
.nav-wrapper .nav-list li { display: inline-block; width: 15%; line-height: 120px; text-align: center; }
.nav-wrapper .nav-list li a { font-size: 18px; font-weight: bold; color: #fff; }
.nav-wrapper .search { width: 100%; height: 35px; margin-top: 45px; border-radius: 20px; background-color: #fff5eb; position: relative; }
.nav-wrapper .search .form-control { position: absolute; top: 3px; left: 0; border: 0; background: none; outline: none; border: 0px; height: 30px; padding: 3px 0 3px 15px; color: #999; }
.nav-wrapper .search .search-bt { position: absolute; top: 0; right: 8px; border: 0; width: 30px; height: 30px; background: url(../image/sousuo.png) no-repeat center center; background-size: 100% 100%; margin-top: 3px; }

.list-nav-wrapper { position: relative; background-color: rgba(255,255,255,0.5);}
.list-nav-wrapper .nav-list li a { color: #000; }

/* head-pic */
.head-wrapper { background: rgba(0, 0, 0, .5) url(../image/bg-1.png) no-repeat top center;background-size: cover; overflow: hidden; }
.head-wrapper .head-flgin { margin-top: 270px; margin-bottom: 150px; }
.head-wrapper .head-con { background-color: #fff; padding: 20px; border-top-left-radius: 15px; border-top-right-radius: 15px; }
.head-wrapper .head-con .head-focus { border: 1px solid #ddd; }
.head-wrapper .head-con .head-focus img { width: 100%; }
.head-wrapper .head-con .head-focus h4 { margin: 25px 10px; font-weight: bold; }
.head-wrapper .head-con .head-focus p { margin: 8px 8px 15px 8px; text-indent: 25px; height: 84px; }
.head-wrapper .head-con .head-hot h1 { color: #f59c3c; }
.head-wrapper .head-con .head-hot p { text-indent: 20px; height: 56px; }
.head-wrapper .head-con .media { margin-top: 47px; }
.head-wrapper .head-con .media h4 { margin: 15px 10px; font-weight: bold; }

/* 图文 */
.media { margin-top: 15px; }
.media:first-child { margin-top: 0; }
.media,
.media-body { zoom: 1; overflow: hidden; }
.media-body { width: 10000px; }
.media-object { display: block; }
.media-object.img-thumbnail { max-width: none; }
.media-right,
.media>.pull-right { padding-left: 10px; }
.media-left,
.media>.pull-left { padding-right: 10px; }
.media-left,
.media-right,
.media-body { display: table-cell; vertical-align: top; }
.media-middle { vertical-align: middle; }
.media-bottom { vertical-align: bottom; }
.media-heading { margin-top: 0; margin-bottom: 5px; }
.media-list { padding-left: 0; list-style: none; }

/* volunteer-wrapper */
.volunteer-wrapper,
.video-wrapper { background-color: #fbdcbb; padding-bottom: 60px; }

/* chunk-tit */
.chunk-tit { text-align: center; }
.chunk-tit a { display: inline-block; font-size: 38px; font-weight: bold; color: #f59c3c; height: 160px; line-height: 140px; position: relative; }
.chunk-tit a::before { content: " "; z-index: 9; position: absolute; bottom: 50px; width: 100%; height: 8px; border-radius: 10px; background-color: #f8e9d8; }

/* volunteer-list */
.volunteer-list { height: 335px; }
.volunteer-list .swiper-slide { padding: 4px; border: 1px solid #f59c3c;}
.volunteer-list .swiper-slide img { width: 100%; height: 189px;}
.volunteer-list .swiper-slide h4 { line-height: 48px; text-align: center; font-weight: bold; }
.volunteer-list .swiper-slide p { height: 86px; color: #888; padding: 0 10px 10px 10px;}

.volunteer-con { height: 466px; }
.volunteer-con .swiper-slide h4 { position: absolute; bottom:0; text-align: center; color: #fff; background-color: rgba(0, 0, 0, 0.5); line-height: 48px; font-weight: bold;}
.volunteer-con .swiper-slide img { width: 100%; height: 466px;}

/* Commonweal project */
.commonweal-wrapper { background: url(../image/comm-bg.jpg) no-repeat top center; background-size: cover; padding-bottom: 80px; }
.commonweal-list .commonweal-con { height: 340px; width: 100%; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center;  /*旧版本*/ -moz-box-align: center;  /*旧版本*/ -ms-flex-align: center;  /*混合版本*/ -webkit-align-items: center;  /*新版本*/ align-items: center;  /*新版本*/ background-color: #fff; border-radius: 20px; position: relative; }
.commonweal-list .commonweal-con:before { content: " "; position: absolute; top: 0; left: 0; width: 88%; height: 90%; margin: 15px; padding: 15px; border: 1px solid #ccc; border-radius: 20px; }
.commonweal-list .commonweal-con a { display: inline-block; margin: auto; }

/* video */
.video-list .video-con { position: relative; }
.video-list .video-con::before { content: " "; position: absolute; width: 120px; height: 120px; top: 50%; left: 50%; margin: -60px; background: url(../image/video-btn.png) no-repeat center center; }
.video-list .video-con img { width: 100%; height: 378px; }

/* good-wrapper */
.good-wrapper { background: #e1f9f9; padding-bottom: 60px; }
.good-list .good-con { background-color: #fff; border-radius: 10px; }
.good-list .good-con img { border-top-left-radius: 10px; border-top-right-radius: 10px; height: 147px; }
.good-list .good-con h4 { margin: 30px 8px 5px 8px; text-align: center; font-weight: bold; }
.good-list .good-con p { padding: 15px 10px; }

/* company-wrapper */
.company-wrapper { padding-bottom: 60px; }
.company-con img,
.firm-con img { margin: auto; height: 80px; }

/* foot-wrapper */
.foot-wrapper { background-color: #ddd; padding: 30px 0; }
.info-wrapper { background-color: #c2e1a5; padding: 10px 0; }
.info-wrapper p { color: #fff; }
.foot-wrapper h4 { font-weight: bold; font-size: 18px; padding-bottom: 20px; }
.foot-wrapper .map li { display: inline-block; width: 35%; line-height: 28px; font-size: 14px; }
.foot-wrapper .map li a { color: #999; }
.foot-wrapper .wxgz-info span { width: 100%; display: inline-block; text-align: center; padding-top: 10px; }