.maincolor{color:#8A8A8A;/*文字*/color:#494949;/*重文字*/color:#333/*特重文字*/color：#002971/*主色调*/ color：#DDD;/*边框*/color:#F0F0F0;/*背景*/}

/*关于我们栏目 文字+装饰图
<div class="page_about">
    <div class="img_container"><div class="bg_container"><img src="/hfblen/lib/template/static/css/static/images/company_img.jpg"></div></div>
    <div class="txt_container">
        <div class="into_content">
            <p>国投生物科技投资有限公司（简称“国投生物”）成立于2017年2月28日，作为集团发展生物燃料乙醇等前瞻性战略业务的责任主体和市场主体，主要负责统筹生物能源等生物科技业务的科研、投资和经营管理。2018年，被国务院国资委确定为“双百行动”试点企业。</p>
        </div>
    </div>
</div>
*/
.page_about{position: relative; padding:0 0 0 45%;margin: 2em 0 0;}
.page_about .img_container{ position: absolute; width: 40%; left: 0; bottom:0;top:0;margin: 0;}
/* .page_about .img_container:before{content: '';position: absolute; left:2em; right: -2em; bottom:2em;top:-2em;border:1px solid #002971;} */
.page_about .bg_container{position: absolute; left:0; right: 0; bottom:0;top:0;}
.page_about .chairmanname {max-width: 8em;vertical-align: middle;}
@media screen and (max-width: 767px){
    .page_about{padding: 0;}
    .page_about .img_container{position: relative; width: auto; margin:0 0 2em 0;} 
    .page_about .bg_container{position: relative;}
}
/*数字信息
<div class="page_gdnum">
    <dl>
        <dd><span class="gdnum" num="632">632</span>亿</dd>
        <dt>
            <h3>副标题</h3>
            <p>副标题副标题副标题副标题副标题副标题副标题...</p>
        </dt>
    </dl>
</div>
*/
.page_gdnum{overflow: hidden;position: relative;  margin:4% 12px -4% 0;}
.page_gdnum dl{float: left; width: 25%; padding-right: 12px;position: relative;text-align: center;margin-bottom: 1em;}
.page_gdnum dd{position: absolute; font-size:64px; line-height: 200%; color:#002971;top:0;left: 0;right: 12px;}
.page_gdnum dd .small{font-size: .5em;}
.page_gdnum dt{padding: 128px .5em 1em; border:1px solid #DDD; border-radius: 4px;}
.page_gdnum dt h3{font-size: 24px; line-height: 150%; margin-bottom: .5em; color: #333;}
.page_gdnum dt h4{line-height: 150%; margin-bottom: .5em; color: #333;}
.page_gdnum dt p{font-size: 12px; line-height: 150%; height: 4.5em;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;overflow: hidden;}

.page_gdnum.class2{margin:0 0 2em;border-bottom:1px solid #DDD;}
.page_gdnum.class2 dt{border:none;}
@media screen and (max-width: 1280px){
    .page_gdnum dd{font-size:48px; }
    .page_gdnum dt{padding: 96px .5em 1em;}
}
@media screen and (max-width: 1024px){
    .page_gdnum dd{font-size:32px; }
    .page_gdnum dt{padding: 64px .5em 1em;}
}
@media screen and (max-width: 767px){
    .page_gdnum dl{width: 50%;}
}

.page_about .txt_container .info{position: relative; text-align: center;}
.page_about .txt_container .info dl{display: inline-block; margin-bottom: 1em;}
.page_about .txt_container .info dt{ color: rgb(48, 45, 45); font-size:24px;}
.page_about .txt_container .info dd{font-size:32px; color: #002971; line-height: 300%;}
.page_about .txt_container .info dd span{font-size:32px; vertical-align: baseline; display: inline-block;}
.page_about .txt_container .info .time{text-align: right; color: #DDD; border-top:1px solid #DDD; padding: .5em 0 1em;}
.page_about .txt_container .info dl:first-child{position: absolute; left: 0;top:0;}
.page_about .txt_container .info dl:first-child + dl + dl{position: absolute; right: 0;top:0;}
.page_about .txt_container .into_content h2{ font-size:30px; margin-bottom: 1em;}

.page_about_updown .info{ overflow: hidden; position: relative;padding:0 0 0 60%; margin-bottom: 2em;}
.page_about_updown .info .bg_container{ position: absolute; width: 54%; left: 0; bottom:0;top:0; overflow: hidden;}
.page_about_updown .info .txt_container{position: relative; overflow: hidden;}
.page_about_updown .info .txt_container dl{border-top:1px solid #DDD; position: relative; top:-1px; overflow: hidden;}
.page_about_updown .info .txt_container dt{ float: left; position: relative; top:2.5em; color: #333; font-size:20px;}
.page_about_updown .info .txt_container dd{font-size:32px; color: #002971; line-height: 300%; float: right;}
.page_about_updown .info .txt_container dd span{font-size:32px; vertical-align: baseline; display: inline-block;}
.page_about_updown .info .txt_container .time{text-align: right; color: #DDD;  padding: .5em 0 0;}
@media screen and (max-width: 1280px){
    .page_about .txt_container .info dt{font-size:22px; }
    .page_about .txt_container .info dd{font-size:28px;}
}
@media screen and (max-width: 1024px){
    .page_about .txt_container .info dt{font-size:18px; }
    .page_about .txt_container .info dd{font-size:22px;}
}
@media screen and (max-width: 767px){
    .page_about .txt_container .info dt{font-size:12px;}
    .page_about .txt_container .info dd{font-size:12px;}
    .page_about .txt_container .info .time{font-size:12px;}
    .page_about_updown .info{padding: 0;}
    .page_about_updown .info .bg_container{position:static; margin-bottom: 1em; width: auto;}
    .page_about_updown .info .bg_container img{width: 100%;}
    .page_about_updown .info .txt_container dt{font-size:16px;top:1.25em;}
    .page_about_updown .info .txt_container dd{font-size:20px;}
}

/*团队 左圆形头像 右文字介绍
<div class="teamlist_class1">
    <ul>
        <li>
            <div class="bg_container"><img src="/hfblen/lib/template/static/css/static/images/team_img.jpg"></div>
            <div class="txt_container">
                <h2>主标题</h2>
                <h3>副标题 名称 副标题</h3>
                <p>国投电力控股股份有限公司，是国家开发投资集团有限公司旗下的沪市A股上市公司(股票简称“国投电力”，股票代码“600886”)。自2002年成功上市以来，十几年间实现了令人瞩目的跨越式发展，总资产增长46倍，经营利润增长970倍，成为中国效率最高、效益最好的综合能源公司之一。</p>
            </div>
        </li>
    </ul>
</div>*/
.teamlist_class1 li{ position: relative; padding: 3em 0;}
.teamlist_class1 .bg_container + .txt_container{margin-left: 22.5%;}
.teamlist_class1 .bg_container{width: 18.25%; height: 0; overflow: hidden; padding: 0 0 18.25%; background-color: #DDD; border-radius: 50%; box-shadow: .25em .25em .5em rgba(0,0,0,.3);position: absolute; left: 0; top:3em;}
.teamlist_class1 .bg_container img { width: 100%;}
.teamlist_class1 .txt_container h2{font-size:34px; color: #333; line-height: 187.5%; display: inline-block; margin-right: .25em;}
.teamlist_class1 .txt_container h3{font-size:22px; color: #494949;line-height: 187.5%;display: inline-block;}
.teamlist_class1 .bg_container + .txt_container h3{display: block;}
.teamlist_class1 .txt_container p{border-top: 1px solid #DDD; padding-top: 1em; overflow: hidden;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3; height: 6.625em; text-align: justify;}

.teamlist_class1.bg li{padding: 1em 0; background: #F0F0F0;  margin: 2em 0; border-top:2px solid #002971;}
.teamlist_class1.bg .txt_container{margin:0 2em;}
.teamlist_class1.bg .bg_container + .txt_container{margin:0 2em 0 calc(22.5% + 2em);}
.teamlist_class1.bg .bg_container {left: 2em; top:1em;}
.teamlist_class1.bg .txt_container p {min-height: 6.625em;/*border-top: 1px solid #002971;*/ border: none; display: block; height: auto;}
@media screen and (max-width: 1024px){
    .teamlist_class1 li{ padding: 2em 0;}
    .teamlist_class1 .bg_container{top:2em;}
    .teamlist_class1 .txt_container h2{ font-size:24px;}
    .teamlist_class1 .txt_container h3{font-size:20px;}
    .teamlist_class1 .txt_container p{ height: auto; display: block;}

    .teamlist_class1.bg li{padding: 1em 0;margin: 1em 0;}
    .teamlist_class1.bg .bg_container {top:1em;}
}
@media screen and (max-width: 767px){
    .teamlist_class1 li{padding: 1em 0;}
    .teamlist_class1 .bg_container + .txt_container{margin-left: 42%;}
    .teamlist_class1 .bg_container{width: 35%;padding: 0 0 35%;top:1em;}
    .teamlist_class1 .txt_container h2{ font-size:22px;}
    .teamlist_class1 .txt_container h3{font-size:18px;}

    .teamlist_class1.bg li{padding: 1em 0;}
    .teamlist_class1.bg .txt_container{margin:0 1em;}
    .teamlist_class1.bg .bg_container + .txt_container{margin:0 1em 0 calc(41% + 1em);}
    .teamlist_class1.bg .bg_container{width: 35%;padding: 0 0 35%;top:1em;left: 1em;}
}
@media screen and (max-width: 480px){
    .teamlist_class1 li{padding: 1em 0;}
    .teamlist_class1 .bg_container + .txt_container{margin-left: 0;}
    .teamlist_class1 .bg_container + .txt_container h3{display: inline-block;}
    .teamlist_class1 .bg_container{ position: relative; top:0; width: 50%; padding: 0 0 50%; left: 25%; margin-bottom: .5em;}
    .teamlist_class1 .txt_container h2{ font-size:22px;}
    .teamlist_class1 .txt_container h3{font-size:18px;}

    .teamlist_class1.bg .txt_container{margin:0 1em;}
    .teamlist_class1.bg .bg_container + .txt_container{margin:0 1em;}
    .teamlist_class1.bg .bg_container{top:0; width: 50%; padding: 0 0 50%; left: 25%;}
}

/*团队 头像+姓名+职务卡片 两个一行
<ul class="teamlist_class2">
    <li>
        <div class="card_con">
            <div class="img_container"><div class="bg_container"><img src="/hfblen/lib/template/static/css/static/images/team_img.jpg"></div></div>
            <div class="txt_container">
                <h3>姓名</h3>
                <p>职务</p>
            </div>
        </div>
    </li>
</ul>>*/
.teamlist_class2{list-style-type: none; overflow: hidden; margin: 0 -10px;}
.teamlist_class2 li{float: left; width: 50%; padding: 0 10px 2%;}
.teamlist_class2 .card_con{position: relative;height: 0; overflow: hidden; padding: 25% 0;border-top:1px solid #F0F0F0;background: #F0F0F0;}
.teamlist_class2 .img_container{ width: 36%; height: 0;overflow: hidden;padding: 0 0 36%; transform: translateY(-50%); float: left; margin:0 10% 0 5%;border-radius: 50%; box-shadow: -4px 4px 8px rgba(0,0,0,.3);}
.teamlist_class2 .img_container .bg_container {position: absolute; left: 0; top:0;right: 0;bottom: 0;}
.teamlist_class2 .txt_container{transform: translateY(-50%);}
.teamlist_class2 .txt_container h3{font-weight: bold;font-size: 24px; line-height: 200%;}
.teamlist_class2 li:hover .card_con{border-top:1px solid #002971;}
@media screen and (max-width: 560px){
    .teamlist_class2 li{float: none; width: 100%;}
}

/*团队 姓名+说明
<ul class="teamlist_class3">
    <li>
        <h3>姓名</h3>
        <p>说明</p>
    </li>
</ul>>*/
.teamlist_class3{list-style-type: none; overflow: hidden;}
.teamlist_class3 li{padding:5%; border-top:2px solid #002971; background: #F0F0F0; margin: 0 0 3%;}
.teamlist_class3 h3{font-weight: bold;font-size: 24px; line-height: 200%; margin: -.5em 0 0;}
.teamlist_class3 p{text-align: justify;}


/*企业文化 左文字+右icon 两个一行
<div class="page_brand">
    <ul>
        <li>
            <div class="icon_container"><img src="/hfblen/lib/template/static/css/static/images/brand_icon1.png"></div>
            <div class="txt_container">
                <h3>企业愿景</h3>
                <p>成为全球关键机械摩擦副材料和零部件行业引领者</p>
            </div>
        </li>
    </ul>
</div>*/
.page_brand ul{list-style-type: none; overflow: hidden;}
.page_brand li{float: left; width: 50%; height: 0; overflow: hidden; padding: 136px 5%;border-bottom:1px solid #DDD;}
.page_brand .icon_container{ width: 88px; height: 88px; transform: translateY(-50%); float: right; margin-left: 16px;}
.page_brand .icon_container img {width: 100%;}
.page_brand .txt_container{transform: translateY(-50%);}
.page_brand .txt_container h3{font-weight: bold;font-size: 24px; line-height: 200%; color: #002971;}
.page_brand .txt_container:after{content: ""; background: #002971; width: 32px; height: 4px; display: block; opacity: 0; margin-top: 8px;}
.page_brand li:hover .txt_container:after{opacity: 1;}
@media screen and (max-width: 767px){
    .page_brand li{float: none; width: 100%;padding: 90px 5%;}
}

/*大事记 年份滑动门
<div class="yearcard class2">
    <div class="tab_container">
        <div class="tab">
            <ul>
                <li><span>1994</span></li>
                <li><span>1992</span></li>
            </ul>
        </div>
        <div class="btn_prev">&lt;</div>
        <div class="btn_next">&gt;</div>
    </div>
    <div class="card_container">
        <div class="card_con">
            <div class="year_con">
                <h3>1994</h3>
                <ul>
                    <li>
                        <h4>2月</h4>
                        <p><img src="/hfblen/lib/template/static/css/static/images/history1.jpg"></p>
                        <p>1994年2月4日，时任国务院副总理朱榕基视察嵩屿电厂工地</p>
                    </li>
                    <li>
                        <h4>6月</h4>
                        <p><img src="/hfblen/lib/template/static/css/static/images/history2.jpg"></p>
                        <p>1994年6月23日，时任中共中央总书记江泽民视察嵩屿电厂工地</p>
                    </li>
                </ul>
            </div>
        </div>
        <div class="card_con">
            <div class="year_con">
                <h3>1992</h3>
                
            </div>
        </div>
    </div>
</div>

*/
.yearcard{padding: 2em 0;}
.yearcard .tab_container{position: relative; padding:0 2.5em; height: 5em; margin: 0 0 1em;user-select: none;}
.yearcard .btn_prev,.yearcard .btn_next{position: absolute; top:0; left: 0; width: 1.5em; height: 1.5em; text-align: center; line-height: 150%;font-size: 1.5em; font-family: Arial;cursor: pointer;border:1px solid; color:#002971;border-radius: 50%;}
.yearcard .btn_next{left: auto; right: 0;}
.yearcard .btn_prev:hover,.yearcard .btn_next:hover{color:#333;}
.yearcard .tab{position: relative;overflow: hidden; width: 100%; height: 100%;}
.yearcard .tab:before,.yearcard .tab li:before{content: ""; display: block; position: absolute; left: 0;right: 0;  top:15px;height: 1px;background: #DDD;}
.yearcard .tab ul{list-style-type: none;white-space: nowrap; text-align: center;display: inline;position: relative;vertical-align: top; line-height: 150%;}
.yearcard .tab li{display:inline-block;margin-right:-.33em;position: relative;padding: 31px 0 0; cursor: pointer;min-width: 25%; vertical-align: top;}
.yearcard .tab li span{display: inline-block; width: 126px;}
.yearcard .tab li:after{content:'';position: absolute;left: 50%; top:7px; width: 17px; height: 17px; border-radius: 50%;background: #DDD; margin-left: -8px;}
.yearcard .tab li.current{font-size: 2em; color: #333;}
.yearcard .card_con{position: relative; height: 0; overflow: hidden;max-width: 800px;margin: 0 auto;}
.yearcard .card_con.current{height: auto;}

.yearcard.class2 .btn_prev,.yearcard.class2 .btn_next{color:#8A8A8A;border:none;top:22px;}
.yearcard.class2 .btn_prev:hover,.yearcard.class2 .btn_next:hover{color:#002971;}
.yearcard.class2 .tab ul{display: table; width: 100%;}
.yearcard.class2 .tab li{display: table-cell;margin-right:0;padding: 0 0 2em; line-height: 150%;min-width:0;}
.yearcard.class2 .tab:before,.yearcard.class2 .tab li:before{margin: 24px 0 0;color: #333;}
.yearcard.class2 .tab li.current{font-size: 1em; color:#002971;}
.yearcard.class2 .tab li:after{border-radius:0;border:1px solid #002971;background: #FFF; transform: rotate(45deg);top:34px; width: 13px; height: 13px;}
.yearcard.class2 .tab li.current:after{background: #002971;}
.yearcard.class2 .card_con{max-width: none;}

.yearcard .year_con h3{font-size: 40px; font-weight: bold;color:#002971;line-height: 200%;}
.yearcard .year_con li{position: relative; padding: 0 0 2em 3em;list-style-type: none;}
.yearcard .year_con li:before{content:'';width: 1px; top:2em;left: 1.125em; bottom:0;background: #DDD; display:block; position: absolute;}
.yearcard .year_con li h4{position: absolute; left: 0; top:0;line-height: 1.75em;width: 2.25em; text-align: center;}
.yearcard .year_con li:last-child:before{display: none;}
.yearcard .year_con p{margin-bottom: .5em;text-align: justify; line-height: 175%;}
.yearcard .year_con img{max-width: 100%;}

.yearcard .year_con_class2 h3{ display: none;}
.yearcard .year_con_class2 ul{list-style-type: none;}
.yearcard .year_con_class2 li{position: relative; padding: 12px 0 12px 240px;}
.yearcard .year_con_class2 li:before{content: '';position: absolute;top:31px;  left: 139px; width:95px; height: 1px; background: #DDD;}
.yearcard .year_con_class2 li::after{content: '';position: absolute;top:24px; bottom:-24px; left: 139px; width: 2px; background: #002971;}
.yearcard .year_con_class2 li:last-child::after{display: none;}
.yearcard .year_con_class2 h4{line-height: 250%; color:#FFF;background: #002971;border-radius: .5em; text-align: center;width:114px;position: absolute;left: 0;top:12px; z-index: 5;}
.yearcard .year_con_class2 h4:before{content:'';position: absolute;border:1px solid #002971;background: #002971; transform: rotate(45deg); top:15px;right:-5px; width: 9px; height: 9px;}
.yearcard .year_con_class2 h4:after{content:'';position: absolute;left:132px; top:12px; width: 16px; height: 16px; border-radius: 50%;background: #002971;border:3px solid #DDD}
.yearcard .year_con_class2 p{position: relative;background: #F0F0F0;border-radius: .5em;padding:.5em 1em;line-height: 150%;border:1px solid #DDD; }
.yearcard .year_con_class2 p:before{content:'';position: absolute;border:1px solid #DDD;background: #F0F0F0; transform: rotate(45deg); top:15px;left:-5px; width: 9px; height: 9px;border-top-color: #F0F0F0;border-right-color: #F0F0F0;}
@media screen and (max-width: 767px){
    .yearcard .year_con_class2 li{position: relative; padding: 12px 0 12px 24px;}
    .yearcard .year_con_class2 li:before{display: none;}
    .yearcard .year_con_class2 li::after{left: 7px;}
    .yearcard .year_con_class2 h4{position: relative;left: 0; top:0; margin-bottom: 8px;}
    .yearcard .year_con_class2 h4:before{right: auto;left: -5px;}
    .yearcard .year_con_class2 h4:after{left: -24px;}
    .yearcard .year_con_class2 p:before{left: 52px;top:-5px;transform: rotate(135deg);}
}

/*发展历程 文字+装饰背景
<ul class="history_txtlist">
    <li><h3>2019年</h3><p>开启混合所有制改革试点新模式</p></li>
    <li><h3>2016年</h3><p>获得“国家知识产权优势企业”称号</p></li>
    <li><h3>2015年</h3><p>完成股份制改造，建立了现代企业管理制度</p></li>
</ul>*/
.history_txtlist{list-style-type: none;padding: 0 0 8px;}
.history_txtlist li{height: 92px; margin-bottom: -12px;padding: 12px 0 0 248px; position: relative;}
.history_txtlist li:after{position: absolute;left: 0; top:0;width: 24px; height: 84px; background: url(/hfblen/lib/template/static/images/history_icon.png) no-repeat left top;background-size: 100%;content: '';}
.history_txtlist li:before{position: absolute;left: 0; top:0;width:120px; height:32px; content: '';border-bottom: 1px solid #DDD;}
.history_txtlist li h3{position: absolute; left: 112px;top:12px; width: 112px; text-align: center; line-height: 250%; border-radius:8px;color: #FFF; font-weight: bold; background: #002971;}
.history_txtlist li p{padding: 8px 0 0; line-height: 150%; overflow: hidden;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp:3; text-align: justify;}
@media screen and (max-width: 767px){
    .history_txtlist li{padding: 18px 0 0 112px;}
    .history_txtlist li:before{ width: 40px; height: 26px;}
    .history_txtlist li h3{left: 36px; width: 64px;font-size: 12px;line-height:28px;}
    .history_txtlist li p{padding: 0; font-size: 12px;-webkit-line-clamp:5; line-height:16px;}
}

/*图片页面 如组织机构
<div class="into_content"><p><img src="/hfblen/lib/template/static/css/static/images/organization.png"></p></div>*/

/*文字栏目 标题变色*/
.page_txt .into_content h2,.page_txt .into_content h3,.page_txt .into_content h4{color: #002971; font-weight: lighter;}

/*渐变底文字区域垂直居中压在背景图上
<div class="page_bgimg_txt">
    <div class="bg_container" style="background-image: url(/hfblen/lib/template/static/css/&quot;/hfblen/lib/template/static/css/static/images/business_summary_bg.jpg&quot;);"><img src="/hfblen/lib/template/static/css/static/images/business_summary_bg.jpg"></div>
    <div class="txt_container">
        <p>　　国投融资租赁有限公司（以下简称“国投租赁”）是融实国际在上海自由贸易试验区投资设立的专业从事融资租赁及相关业务的全资子公司，注册资本2.5亿美元。</p>
    </div>
</div>*/
.page_bgimg_txt{position: relative; overflow: hidden; padding: 5.5% 50% 5.5% 0; }
.page_bgimg_txt .bg_container{position: absolute; right: 0; width: 81%; top:0; bottom:0;}
.page_bgimg_txt .txt_container{position: relative; padding: 10%; text-align: justify; background:linear-gradient(to right, rgba(238,238,238,1) 0%, rgba(238,238,238,1) 60%, rgba(238,238,238,0) 100%);}
.page_bgimg_txt .txt_container p{ margin: 1em 0;}
@media screen and (max-width: 767px){
    .page_bgimg_txt{position: relative; overflow: hidden; padding: 5.5% 15% 5.5% 0; }
    .page_bgimg_txt .bg_container{width: 90%;}
    .page_bgimg_txt .txt_container{background:linear-gradient(to right, rgba(238,238,238,1) 0%, rgba(238,238,238,1) 75%, rgba(238,238,238,0) 100%);}
}

/*起始展示三条文字 点击按钮后展开更多
<div class="page_txtlist">
    <ul>
        <li><p></p></li>
        <li><p><img src="/hfblen/lib/template/static/css/static/images/temp.jpg"></p><p></p></li>
        <li><p></p></li>
        <li><p></p></li>
        <li><p></p></li>
    </ul>
    <a class="showmore"></a>
</div>
*/
.page_txtlist ul{list-style: none; margin-top: .8em;}
.page_txtlist ul li{ position: relative; padding: 0 0 2em 2em; display: none;}
.page_txtlist.open ul li{ display: block;}
.page_txtlist ul li:before{content:"◆"; display: block; position: absolute; left: .25em; top:0; color: #002971; transform: scale(1.5);}
.page_txtlist ul li:first-child,.page_txtlist ul li:first-child + li,.page_txtlist ul li:first-child + li + li{display: block;}
.page_txtlist ul li img{max-width: 100%;}
.page_txtlist ul li p + p{margin-top: 1em;}
.page_txtlist .showmore{margin-left: 2em; display: inline-block;}
.page_txtlist.open .showmore { display: none; }
.page_txtlist .showmore:before{content:"?"; color: #002971;transform: rotate(90deg) scale(1.5); display: inline-block; margin-right: .5em;}
.page_txtlist .showmore:after{content: "展开更多";}

/*上icon下文字 一行三个
<ul class="page-iconaddtxt">
    <li>
        <a href="javascript:void(0);" class="iconaddtxt">
            <div class="icon_container"><img src="/hfblen/lib/template/static/css/static/images/InvestorHotline_icon3.png"></div>
            <div class="txt_container">E互动</div>
        </a>
    </li>
</ul>*/
.page-iconaddtxt {list-style: none; margin: 0 -1em; overflow: hidden;}
.page-iconaddtxt li{float: left; width: 33.33%; padding: 1em;}
.page-iconaddtxt .iconaddtxt{ border:1px solid #DDD;padding: 1em 0; text-align: center; display: block;}
.page-iconaddtxt .iconaddtxt .icon_container{ margin: 0 auto; width:6.75em; height: 6.75em; overflow: hidden; margin-bottom: .5em;}
.page-iconaddtxt .iconaddtxt .icon_container img{width: 100%;}
.page-iconaddtxt .iconaddtxt .txt_container{height: 3.75em;}
@media screen and (max-width: 1024px){
    .page-iconaddtxt{margin: 0 -.5em;}
    .page-iconaddtxt li{padding:  .5em;}
}
@media screen and (max-width: 767px){
    .page-iconaddtxt li{float: none; width: 90%; margin: 0 auto;}
    .page-iconaddtxt .iconaddtxt .txt_container{height: auto;}
}

/*企业资质 左图右文
<ul class="photo_txt_list">
    <li>
        <span class="all_container">
            <div class="img_container">
                <div class="bg_container"><img src="/hfblen/lib/template/static/css/static/images/qualification.jpg"></div>
            </div>
            <div class="txt_container">
                <h3>雅砻江水电荣获国家科学技术进步二等奖</h3>
                <p>2019年1月8日上午，2018年度国家科学技术奖励大会在人民大会堂隆重召开，雅砻江水电申报的“300m级特高拱坝安全控制关键技术及工程应用”项目...</p>
            </div>
        </span>
    </li>
</ul>*/
.photo_txt_list{list-style-type: none;}
.photo_txt_list li{border-bottom: 1px solid #DDD;}
.photo_txt_list .all_container{position: relative;display: block; overflow: hidden;padding:3% 5%;}
.photo_txt_list .img_container{position: relative; float: left; width: 24%;overflow: hidden; background: #DDD;}
.photo_txt_list .img_container .bg_container{width: 100%; height: 0; overflow: hidden; padding:0 0 71%; background-size: contain;}
.photo_txt_list .txt_container{position: relative; float: right; width: 62%;}
.photo_txt_list .txt_container h3{color:#333;line-height: 150%;margin-bottom: .5em;text-align: justify;position: relative;}
.photo_txt_list .txt_container h3:before{content:"◆"; display: block; position: absolute; left: -2em; top:0; color: #002971; transform: scale(1.5);}
.photo_txt_list .txt_container p{text-align: justify;line-height: 150%; color:#8A8A8A}
@media screen and (max-width: 767px){
    .photo_txt_list .all_container{padding: 5% 0;}
    .photo_txt_list .img_container{float: none; width: 100%;}
    .photo_txt_list .txt_container{padding: 3% 0 0 2em;float: none; width: 100%;}
}

/*企业荣誉 上图下文 一行三个
<div class="page_honor">
    <ul>
        <li>
            <span class="honor_con">
                <div class="img_container">
                    <div class="bg_container"><img src="/hfblen/lib/template/static/css/static/images/honor.jpg"></div>
                </div>
                <p>荣誉文字荣誉文字荣誉文字荣誉文字荣誉文字荣誉文字荣誉文字荣誉文字</p>
            </span>
        </li>
    </ul>
</div>*/
.page_honor ul{ overflow: hidden; margin: 0 -16px;}
.page_honor ul li{ display: inline-block; margin:0  -.33em 2em 0; padding:  0 16px; width: 33.33%; vertical-align: top;}
.page_honor.col4 ul li{width: 25%;}
.page_honor ul li .img_container{border: 1px solid #DDD; height: 0; overflow: hidden; padding:0 0 93.75%; position: relative;}
.page_honor ul li .bg_container{ position: absolute; left: 0; top:0; bottom:0; right: 0; background-size: contain;transition: transform .5s linear;}
.page_honor ul li:hover .bg_container{transform: scale(1.05);}
.page_honor ul li p{margin: .5em 0 2.5em; line-height: 150%; text-align: justify;}
.page_honor .honor_con .txt_container{padding: 16px 0 8px; text-align: center;}
.page_honor .honor_con h3{overflow: hidden; width: 100%; color:#333; white-space: nowrap; text-overflow: ellipsis;}
.page_honor a.honor_con:hover h3{color:#002971;}
@media screen and (max-width: 1024px){
   .page_honor ul{ overflow: hidden; margin: 0 -8px;}
   .page_honor ul li{padding:  0 8px; width: 50%;} 
   .page_honor.col4 ul li{width: 33.33%;}
}
@media screen and (max-width: 767px){
    .page_honor.col4 ul li{width: 50%;}
}
@media screen and (max-width: 408px){
   .page_honor ul li{width: 100%;}
   .page_honor.col4 ul li{width: 100%;}
}

/*荣誉资质 上图下文 swiper
<div class="honor_swiper honor_s">
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide">
                <div class="honor_con">
                    <div class="img_container">
                        <div class="bg_container"><img src="/hfblen/lib/template/static/css/static/images/honor_s1.jpg"></div>
                    </div>
                    <div class="txt_container">
                        <h3>高新技术企业认证</h3>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
</div>

*/
.honor_swiper{position: relative;padding: 0 20px 2em;}
.honor_swiper .swiper-button-prev,.honor_swiper .swiper-button-next{ left:0; top:50%; width: 30px; height:30px; outline: none; position: absolute; margin-top: -37px; color:#002971; font-size: 30px; line-height: 30px; text-align: left; z-index: 5; cursor: pointer;}
.honor_swiper .swiper-button-prev:after{content: "<";}
.honor_swiper .swiper-button-next:after{content: ">";}
.honor_swiper .swiper-button-next{left: auto; right:0;text-align: right;}
.honor_swiper .honor_con{padding: 0 10px; display: block;}
.honor_swiper .honor_con .img_container{border:1px solid #DDD; background: #FFF; padding: 8px;overflow: hidden;}
.honor_swiper .honor_con .bg_container{height: 0; padding: 0 0 126.67%; overflow: hidden;background-size: contain;transition: transform .5s linear;}
.honor_swiper a.honor_con:hover .bg_container{transform: scale(1.05);}
.honor_swiper .honor_con .txt_container{padding: 16px 0 8px; text-align: center;}
.honor_swiper .honor_con h3{overflow: hidden; width: 100%; color:#333; white-space: nowrap; text-overflow: ellipsis;}
.honor_swiper a.honor_con:hover h3{color:#002971;}
.honor_swiper.honor_h .honor_con .bg_container{padding: 0 0 75%; }
.honor_swiper.productsinto .honor_con .bg_container{padding: 0 0 93.75%; }


/*发展历程 文字+装饰背景
<ul class="honor_txtlist">
    <li><p>开启混合所有制改革试点新模式</p></li>
</ul>*/
.honor_txtlist{list-style-type: none;padding: 0 0 8px;}
.honor_txtlist li{height: 92px; margin-bottom: -12px;padding: 12px 0 0 120px; position: relative;}
.honor_txtlist li:after{position: absolute;left: 0; top:0;width: 24px; height: 84px; background: url(/hfblen/lib/template/static/images/history_icon.png) no-repeat left top;background-size: 100%;content: '';}
.honor_txtlist li:before{position: absolute;left: 0; top:0;width:118px; height:24px; content: '';border-bottom: 1px solid #DDD;}
.honor_txtlist li p{line-height: 150%; overflow: hidden;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp:3; text-align: justify;}
@media screen and (max-width: 767px){
    .honor_txtlist li{padding: 12px 0 0 40px;}
    .honor_txtlist li:before{ width: 40px; height: 20px;}
    .honor_txtlist li p{font-size: 12px;-webkit-line-clamp:5; line-height:161400}
}

/*产品*/
.products-page .threemenu ul{width: 100%;}
.page_productinto {overflow: hidden;}
.page_productinto .product_photo{float: left; width: 47.5%; border:2px solid #DDD; margin: 0 0 2em;}
.page_productinto .product_photo img{width: 100%;}
.page_productinto .product_txt{float: right; width: 47.5%; color:#002971;margin: 0 0 2em;}
.page_productinto .product_txt > h1{font-size: 1.25em; font-weight: bold; line-height: 150%; margin: .5em 0;}
.page_productinto .product_txt > h1 + .state{position: relative; top:-.5em} 
.page_productinto .into_content {clear: both;}
.page_productinto .into_content h2,.page_productinto .into_content h3{font-size: 1.125em; line-height: 175%;color:#002971;margin: .5em 0 .25em;}
.page_productinto .into_content p{margin: .25em 0;}
.page_productinto .into_content table{border-collapse: separate; border-spacing: 2px;border:none; }
.page_productinto .into_content table th{ background: #DDD ; text-align: center; color: #333; font-weight: lighter;border:none;white-space: nowrap;}
.page_productinto .into_content table td{text-align: center; background: #F0F0F0;border:none;white-space: nowrap;}
@media screen and (max-width: 767px){
    .page_productinto .product_photo,.page_productinto .product_txt{float: none; width: 100%;}
}

/*PDF下载栏目
<ul class="pdflist">
    <li>
        <a href="/hfblen/lib/template/static/css/AffairNoticeinto.html"><span class="btn_more">点击查看</span>
            <h3>超越梦想 激情飞扬—中投保公司参加国投2016年运动会并取得佳绩</h3>
        </a>
    </li>
</ul>*/
.pdflist {list-style-type: none;}
.pdflist li{border-bottom: 1px solid #DDD; position: relative;font-size:16px;}
.pdflist li h3{padding: 1em 0em 1em 2em;display: block; text-indent: -1em; line-height: 200%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #333;}
.pdflist li:hover{background: #F0F0F0;}
.pdflist li h3:before{content:"·"; display: inline-block; width: 1em; height: 1em; line-height: 1em;vertical-align: middle; text-indent: 0;transform: scale(2); text-align: center;}
.pdflist li .btn_more{ position: absolute; top:1em; right: 1em; line-height: 200%; color: #494949;}
.pdflist li .btn_more:before{content:""; background:url(/hfblen/lib/template/static/images/icon_download.png) no-repeat center center;background-size: 100%; display: inline-block; width: 1em; height: 1em; margin-right: .5em; vertical-align:middle;}
.pdflist li .btn_more ~ h3{ width:calc( 100% - 6em);}
@media screen and (max-width: 767px){
    .pdflist li h3{padding-left: 1em;}
    .pdflist li:hover{background:none;}
    .pdflist li .btn_more{right: 0;}
    .pdflist li{font-size:14px;}

}

/*图片列表
<ul class="picturelist">
    <li>
        <a href="javascript:void(0);" class="picture_container" data-img="/hfblen/lib/template/static/css/static/images/picture1.jpg">
            <div class="img_container">
                <div class="bg_container"><img src="/hfblen/lib/template/static/css/static/images/picture1.jpg"></div>
            </div>
            <div class="txt_container">
                <h3>首批基层示范党支部</h3>
                <p>文字</p>
            </div>
        </a>
    </li>
</ul>
*/
.picturelist{ list-style-type: none; overflow: hidden; margin: 0 -8px;}
.picturelist li{width: 25%; float: left; padding: 8px; }
.picturelist li:nth-child(4n){margin-right: -8px;}
.picturelist li .img_container{height: 0; overflow: hidden; padding: 0 0 calc(272% / 4.4); position: relative;  transition: box-shadow .5s linear;}
.picturelist li .bg_container{position: absolute; left:0; top:0; right:0; bottom:0; overflow: hidden;transition: transform .5s linear;}
.picturelist li a:hover .img_container{box-shadow: 0 2px 6px rgba(0,0,0,.5);}
.picturelist li a:hover .bg_container{transform: scale(1.05);}
.picturelist li .txt_container{overflow: hidden; padding: 24px 0; position: relative;}
.picturelist li .txt_container h3{white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width:100%; color: #333; text-align: center; line-height:150%; }
.picturelist li a:hover .txt_container h3{color: #002971;}
.picturelist li .txt_container p{overflow: hidden;color: #8A8A8A;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;display: none;}
@media screen and (max-width: 1024px){
    .picturelist li{ width: 33.33%;}
    .picturelist li:nth-child(4n){margin-right: 0;}
    .picturelist li:nth-child(3n){margin-right:-8px;}
}
@media screen and (max-width: 767px){
    .picturelist li{ width: 50%;  }
    .picturelist li:nth-child(3n){margin-right:0;}
    .picturelist li:nth-child(2n){margin-right:-8px;}
    .picturelist li .txt_container{padding: 8px 0;}
}

/*视频列表
<ul class="videolist">
    <li>
        <a href="javascript:void(0);" class="video_container" data-mp4="static/images/video.pm4">
            <div class="img_container">
                <div class="bg_container"><img src="/hfblen/lib/template/static/css/static/images/picture1.jpg"></div>
            </div>
            <div class="txt_container">
                <h3>首批基层示范党支部</h3>
            </div>
        </a>
    </li>
</ul>
*/
.videolist{ list-style-type: none; overflow: hidden; margin: 0 -8px;}
.videolist li{width: 33.33%; float: left; padding: 8px; }
.videolist li:nth-child(3n){margin-right: -8px;}
.videolist li a{display: block; position: relative;}
.videolist li .img_container{height: 0; overflow: hidden; padding: 0 0 calc(272% / 4.4); position: relative;  transition: box-shadow .5s linear;}
.videolist li .img_container:after{content: '';position: absolute;left: 50%; top:50%; transform: translate(-50%,-50%); width: 20%; height: 0; padding: 0 0 20%; background: url(/hfblen/lib/template/static/images/icon_con.png) no-repeat center center; background-size: 100%;}
.videolist li .bg_container{position: absolute; left:0; top:0; right:0; bottom:0; overflow: hidden;transition: transform .5s linear;}
.videolist li a:hover .img_container{box-shadow: 0 2px 6px rgba(0,0,0,.5);}
.videolist li a:hover .bg_container{transform: scale(1.05);}
.videolist li .txt_container{overflow: hidden; padding: 24px 0; position: relative;}
.videolist li .txt_container h3{white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width:100%; color: #333; text-align: center; line-height:150%; }
.videolist li a:hover .txt_container h3{color: #002971;}
.videolist li .txt_container p{overflow: hidden;color: #8A8A8A;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;display: none;}

@media screen and (max-width: 767px){
    .videolist li{ width: 50%;  }
    .videolist li:nth-child(3n){margin-right:0;}
    .videolist li:nth-child(2n){margin-right:-8px;}
    .videolist li .txt_container{padding: 8px 0;}
}


/*新闻栏目
<ul class="newslist">
    <li>
        <a href="javascript:void(0);">
            <div class="img_container"><div class="bg_container"><img src="/hfblen/lib/template/static/css/static/images/newsimg.jpg"></div></div>
            <div class="txt_container">
                <h3>中央第十二巡视组巡视国投党组工作动员会召开</h3>
                <span class="time">2020/02/09</span>
                <p>根据中央关于巡视工作的统一部署，2019年3月26日上午，中央第十二巡视组巡视国家开发投资集团有限公司党组工作动员会召开。会前...</p>
                <span class="form">来源：中国证券报 张玉洁</span>
            </div>
        </a>
    </li>
</ul>*/
.newslist{list-style-type: none;}
.newslist li{border: 1px solid #DDD;margin-bottom: 2%;}
.newslist li a{padding: 2em 1em;display: block;}
.newslist li a:hover{background: #F0F0F0;}
.newslist .img_container{ position: relative; display: inline-block; vertical-align: middle; width: 23%; overflow: hidden; margin-right: -.33em;left: 77%;}
.newslist .img_container .bg_container{width: 100%;  transition: transform .5s linear; position: relative;height: 0;padding: 0 0 calc(163% / 3.22);overflow: hidden;}
.newslist li a:hover .img_container .bg_container{transform: scale(1.05);}
.newslist .img_container + .txt_container{position: relative;display: inline-block; vertical-align: middle; width: 75%; margin: 0 -2% 0 2%; left: -25%;}
.newslist .img_container + .times{display: none;}
.newslist .img_container + .times + .txt_container{display: inline-block; vertical-align: middle; width: 75%; margin: 0 -2% 0 2%;}
.newslist .txt_container h3{/* width: calc(100% - 6em); */width:100%;color:#333;white-space: nowrap; font-size:1.167em; line-height: 175%; overflow: hidden; text-overflow: ellipsis;}
.newslist li a:hover .txt_container h3{color: #002971;}
.newslist li a strong{color: #002971;}
/* .newslist .txt_container:after{content: '→'; display: block; color: #002971;margin-left: .5em; transform: scaleX(2);width: 1em;} 
.newslist .img_container + .txt_container:after{display: none;}
.newslist .img_container + .times + .txt_container:after{display: none;}*/
.newslist .txt_container .time{ display: block; position: relative; width: 6em; text-align: right; color: #8A8A8A; top:-1.875em; margin: 0 0 0 auto;}
.newslist .txt_container .timeb,.newslist .txt_container .hits{ white-space: nowrap; display: inline-block; margin-right: 1em; font-size: 12px;line-height: 150%; color:#8A8A8A;}
.newslist .txt_container .timeb .type,.newslist .txt_container .hits .type{color:#494949;}
.newslist .txt_container p{ overflow: hidden; height: 3.75em;color: #8A8A8A;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;}
.newslist .txt_container .form{ display: block; text-align: right; padding-top: .5em;color: #8A8A8A;}
.newslist .times:first-child{display: inline-block;  border:1px solid #002971; text-align: center;vertical-align: top; color:#002971; overflow: hidden;padding:0 .5em .25em;}
.newslist .times .d{ display: block; line-height: 175%; font-size:32px; margin-bottom: -.25em;}
.newslist .times .m,.newslist .times .y{float: right;}
.newslist .times .y:after{content: "-";}
.newslist .times:first-child + .txt_container{display: inline-block; vertical-align: top; width: calc(98% - 5em); margin: 0 -2% 0 2%;}
.newslist .times:first-child + .txt_container h3{ width: 100%;}
.newslist .times:first-child + .txt_container .time{text-align: left; top: auto; opacity: 0;}
.overseas-column .newslist .txt_container:after{display: none;}
@media screen and (max-width: 1024px){
    .newslist li a{padding: 1em;}
    .newslist .txt_container .time{margin: 0 0 -1.875em auto;}
    .newslist .img_container{width: 33%;left: 67%;}
    .newslist .img_container + .txt_container{ width: 64%; margin: 0 -2% 0 3%; left: -36%;}
}
@media screen and (max-width: 767px){
    .newslist .img_container{width: 43%;vertical-align: top; left: 57%;}
    .newslist .img_container + .txt_container{ width: 53%; margin: 0 -2% 0 4%; left: -47%;}
    .newslist .img_container + .times + .txt_container{ width: 53%; margin: 0 -2% 0 4%;}
    .newslist .txt_container h3 {width: auto; white-space: normal;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2; }
    .newslist .img_container + .txt_container .time{text-align: left;  top: auto; margin: 0;}
    .newslist .img_container + .times + .txt_container .time{text-align: left;  top: auto; margin: 0;}
    .newslist .txt_container:first-child .time{text-align: left;  top: auto; margin: 0;}
    .newslist .img_container + .txt_container p{display:none ;}
    .newslist .img_container + .times + .txt_container p{display:none ;}
    
}
@media screen and (max-width: 580px){
    .newslist li{border:none;}
    .newslist li a{padding: 1em .5em;}
    .newslist .img_container{display: block; width: 100%;  margin-bottom: .5em; left: 0;}
    .newslist .img_container + .txt_container{ width: 100%; margin:0; left: 0;}
    .newslist .img_container + .times + .txt_container{width: 100%; margin:0;}
    .newslist .img_container + .txt_container p{ display: -webkit-box;}
    .newslist .img_container + .times + .txt_container p{display: -webkit-box;}
    .newslist .times:first-child{display: none;}
    .newslist .times:first-child + .txt_container{width: 100%; margin:0;}
    .newslist .times:first-child + .txt_container .time{opacity: 1;margin: 0;}
}

/*新闻栏目样式2
<ul class="newslist_class2">
    <li>
        
            <div class="img_container"><div class="bg_container"><img src="/hfblen/lib/template/static/css/static/images/newslist.jpg"></div></div>
            <div class="txt_container">
                <span class="time"><span class="d">05</span><span class="m">08</span><span class="y">2020</span></span>
                <h3>亚行与中国水环境集团共同助力全球生态安全</h3>
                <p>签约仪式上，亚行负责私营部门和公共—私营部门合作（PPP）的副行长迪瓦卡·古普塔（Diwakar Gupta）表示，水务行业是亚行在中国的重要业务领域之一，中国水环境集团完善的商业模式与专业高效的技术运营实力给亚行留下了深刻印将持续向更多地区推广签约仪式上，亚行负责私营部门和公共—私营部门合作...</p>
            </div>
        
    </li>
</ul>
*/
.newslist_class2{list-style-type: none;}
.newslist_class2 li{margin-bottom: 2%;}
.newslist_class2 li a{display: block;border: 1px solid #DDD; overflow: hidden;}
.newslist_class2 li a:hover{background: #f7f7f7;border: 1px solid #002971;}
.newslist_class2 .txt_container{padding:2em;}
.newslist_class2 .txt_container h3{width:100%;color:#333; min-height: 3.25em; font-size:20px; line-height: 150%; overflow: hidden;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp:2;padding: .25em 0 0;}
.newslist_class2 .txt_container p{ overflow: hidden;color: #8A8A8A; text-align: justify;line-height: 175%;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp:3;}
.newslist_class2 .txt_container h3 strong,.newslist_class2 .txt_container p strong{color: #002971;font-weight: bold;}
.newslist_class2 .txt_container:after{content: '→'; display: block; color: #494949; transform: scaleX(2);width: 1em; margin: 1em 0 0 .5em;} 
.newslist_class2 .txt_container .time{font-size: 12px; color: #333; line-height: 36px;}
.newslist_class2 .txt_container .time .d,.newslist_class2 .txt_container .time .m{font-size: 32px;}
.newslist_class2 .txt_container .time .d:after{content:"/"}
.newslist_class2 .txt_container .time .y{margin-left: .5em;}
.newslist_class2 .img_container{ position: relative; float: right; width: 780px; overflow: hidden;}
.newslist_class2 .img_container .bg_container{width: 100%;  transition: transform .5s linear; position: relative;height: 0;padding: 0 0 56.25%;overflow: hidden;}
.newslist_class2 li a:hover .img_container .bg_container{transform: scale(1.05);}
.newslist_class2 .img_container + .txt_container{width: calc(100% - 780px); margin-right: -1em;padding: 2em 2em 0;}
.newslist_class2 .img_container + .txt_container p{-webkit-line-clamp:10;}
.newslist_class2 .img_container + .txt_container .time{ display: none;}
@media screen and (max-width: 1280px){
    .newslist_class2 .img_container{width:560px;}
    .newslist_class2 .img_container + .txt_container{width: calc(100% - 560px);}
    .newslist_class2 .img_container + .txt_container p{-webkit-line-clamp:6;}
}
@media screen and (max-width: 1024px){
    .newslist_class2 .txt_container{padding:1em;}
    .newslist_class2 .img_container{width:420px;}
    .newslist_class2 .img_container + .txt_container{width: calc(100% - 420px);padding: 1em 2em 0 1em;}
    .newslist_class2 .img_container + .txt_container p{-webkit-line-clamp:3;}
}
@media screen and (max-width: 767px){
    .newslist_class2 li a{border:none !important; border-bottom:1px solid #DDD !important;}
    .newslist_class2 li a:hover{background:none;}
    .newslist_class2 .img_container{display: block; width: 100%;float: none;}
    .newslist_class2 .txt_container{padding: 1em 0;}
    .newslist_class2 .txt_container h3{-webkit-line-clamp:unset;}
    .newslist_class2 .txt_container p{-webkit-line-clamp:3;}
    .newslist_class2 .img_container + .txt_container{ width: 100%; margin:0; padding: 1em 0; }
    .newslist_class2 .img_container + .txt_container p{-webkit-line-clamp:3;}
}


/*党建专题
<ul class="newslist_class3">
    <li>
        <a href="/hfblen/lib/template/static/css/PartySpecialinto.html">
            <div class="all_container">
                <div class="img_container">
                    <div class="bg_container"><img src="/hfblen/lib/template/static/css/static/images/partyimg.jpg"></div>
                </div>
                <div class="txt_container">
                    <h3>国投直属党委加强党员组织关系管理</h3>
                    <p>“入职党员不知道怎么转组织关系”“离职党员组织关系转出回执不到位”“书面组织关系转接不方便”这是党员组织关系管理中三个常见难题。</p>
                </div>
            </div>
        </a>
    </li>
</ul>*/
.newslist_class3{list-style-type: none;}
.newslist_class3 li{margin-bottom:4%;}
.newslist_class3 li a{padding:4%;display: block;background: #FAFAFA;}
.newslist_class3 .all_container{position: relative; height: 290px;}
.newslist_class3 .img_container{position: relative; float: right; width: 500px; height: 290px; box-shadow: 0 8px 16px rgba(0,0,0,.3); overflow: hidden;}
.newslist_class3 .img_container .bg_container{width: 100%;  transition: transform .5s linear; position: absolute; left: 0; top:0; bottom:0;}
.newslist_class3 li a:hover .img_container .bg_container{transform: scale(1.05);}
.newslist_class3 .txt_container{position: relative; height: 100%; left: -4%;margin: 0 500px 0 4%;}
.newslist_class3 li:nth-child(2n) .img_container{float: left;}
.newslist_class3 li:nth-child(2n) .txt_container{left: 4%;margin: 0 4% 0 500px;}
.newslist_class3 .txt_container h3{color:#d6001d;font-size:36px; line-height: 150%;top:-.25em; position: relative;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;overflow: hidden;}
.newslist_class3 li a:hover .txt_container h3{color: #333;}
.newslist_class3 .txt_container p{ overflow: hidden;color: #8A8A8A;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;line-height: 150%;}
.newslist_class3 .txt_container:after{content: '查看详情';  color: #333; position: absolute; left: 0; bottom:.25em;}
.newslist_class3 .txt_container:before{content: '→'; display: block; line-height: 200%; text-align: center; width: 2em; height: 2em; border:1px solid; border-radius: 50%; position: absolute; left: 5em; bottom:0; font-family:simSun; font-weight: bold; color:#8A8A8A;} 
@media screen and (max-width: 1158px){
    .newslist_class3 .all_container{ height: 230px;}
    .newslist_class3 .img_container{ height: 230px; width: 397px;}
    .newslist_class3 .txt_container{left: -4%;margin: 0 397px 0 4%;}
    .newslist_class3 li:nth-child(2n) .txt_container{margin: 0 4% 0 397px;}
    .newslist_class3 .txt_container h3{ font-size: 28px;}
    .newslist_class3 .txt_container p{font-size: 14px;}
}
@media screen and (max-width: 767px){
    .newslist_class3 li{margin:2em 0}
    .newslist_class3 li a{padding:0;}
    .newslist_class3 .all_container{height:auto;}
    .newslist_class3 .img_container{float: none; width:100%; height:0; padding: 0 0 58.2%;}
    .newslist_class3 .txt_container{height: auto; left:0;margin:0; padding: 2em 0 2.5em;}
    .newslist_class3 li:nth-child(2n) .img_container{float: none;}
    .newslist_class3 li:nth-child(2n) .txt_container{left: 0;margin: 0}
    .newslist_class3 .txt_container h3{display: block;-webkit-box-orient: vertical;}
    .newslist_class3 .txt_container p{display: block;}
}

/*文字新闻列表
<ul class="newslist_class4">
    <li>
        <a href="/hfblen/lib/template/static/css/PartyBuildinginto.html">
            <div class="txt_container">
                <h3>盎然七月，奋战高原——公司青海切吉风电项目首台风机吊装完成</h3>
                <p>2020年7月10日10：00，公司青海切吉风电项目首台风机开始吊装，7月12日14:30吊装完成。青海切吉风电项目安装20台金风GW140-2500kW型风电机组，叶轮直径140m，轮毂高度90m。</p>
            </div>
        </a>
    </li>
</ul>
*/
.newslist_class4{ list-style-type: none; overflow: hidden; margin: 0 -20px;}
.newslist_class4 li{width: 50%; float: left; padding: 0 20px 2%; }
.newslist_class4 li:nth-child(2n){margin-right: -8px;}
.newslist_class4 li .txt_container{overflow: hidden; padding:1.5em 1.5em 1.5em 3em; position: relative;background: #f7f7f7; text-align: justify;}
.newslist_class4 li .txt_container::before{content: '?'; color:#002971; position: absolute; left: 1.5em; top:1.5em; line-height: 150%; display: block; transform: scale(.75);}
.newslist_class4 li .txt_container h3{overflow: hidden;  color: #333; line-height:150%;height: 3em;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;margin: 0 0 4px;}
.newslist_class4 li a:hover .txt_container{background: #F0F0F0;}
.newslist_class4 li a:hover .txt_container h3{color: #002971;}
.newslist_class4 li .txt_container p{height:6em;overflow: hidden;color: #8A8A8A;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 4;line-height: 150%;}
@media screen and (max-width: 1024px){
    .newslist_class4{margin: 0 -8px;}
    .newslist_class4 li{padding: 0 8px 2%; }
}
@media screen and (max-width: 767px){
    .newslist_class4 li{ width: 100%;  }
    .newslist_class4 li .txt_container h3,.newslist_class4 li .txt_container p{display: block; height: auto;}
}

.newsinto{overflow: hidden;}
.news_con{float: left; width: 70%;}
.newsinto.onecol .news_con{float: none; width:100%;}
.news_con .into_title{overflow: hidden; text-align: center; padding: 2.5em 0 3.5em;}
.news_con .into_title h1{ font-size:36px; line-height: 125%; margin: .25em; text-align: center; font-weight: bold; color: #494949;}
.news_con .into_title h2{ font-size:28px; line-height: 125%; margin: .25em; text-align: center; font-weight: bold; color: #494949;}
.news_con .into_title .time{ float: left; white-space: nowrap; color: #8A8A8A;  margin-right: 1em; position: relative; top:1em;}
.news_con .into_title .otherinfo{ float: left; white-space: nowrap; color: #8A8A8A;  margin-right: 1em; position: relative; top:1em;}
.news_con .into_title .otherinfo:empty{display: none;}
.news_con .into_title .news-share{ padding-top: .75em;position: relative; top:1em; float: left; font-size:12px !important;}
.news_con .into_title .bshare-custom a {width: 1.5em !important; height: 1.5em !important; margin: 0 .5em;padding:0 !important;display: inline-block !important;}
.news_con .into_title .bshare-custom .bshare-qqmb{ background: url(/hfblen/lib/template/static/images/bbs1.png) no-repeat center center/100% !important;}
.news_con .into_title .bshare-custom .bshare-weixin{ background: url(/hfblen/lib/template/static/images/bbs2.png) no-repeat center center/100% !important;}
.news_con .into_title .bshare-custom .bshare-qzone{ background: url(/hfblen/lib/template/static/images/bbs3.png) no-repeat center center/100% !important;}
.news_con .into_title .bshare-custom .bshare-sinaminiblog{ background: url(/hfblen/lib/template/static/images/bbs4.png) no-repeat center center/100% !important;}
.news_con .newsinfo{padding: 2em 0 2em; text-align: right; position: relative;}
.news_con .newsinfo p{display: inline-block; margin-left: 1em;}
.news_con .newsinfo .goback{ float: left;}
.news_side{float: right; width: 25%; overflow: hidden; padding-top: 2.5em;}
.news_side .recommend{ background: #F0F0F0; border-bottom: .25em; padding:2em  1em;}
.news_side .recommend h2{background: #DDD;padding:0 2em; border-radius: 1em; line-height: 200%; display: inline-block; margin-bottom: 1em; color: #494949;}
.news_side .recommend li{list-style-type:none; padding: 1.5em 0; overflow: hidden;}
.news_side .recommend .txt_container{ padding-left: 1.25em; position: relative;line-height: 125%;}
.news_side .recommend .txt_container:before {content: ""; background: #8A8A8A; width: .25em; height: .25em; top: .5em; left: .25em; border-radius: 50%; position: absolute;}
.news_side .recommend .txt_container h3{display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden; color: #494949; }
.news_side .recommend .txt_container .time{ color: #8A8A8A;}
.news_side .recommend li a:hover .txt_container h3{color: #002971;}
.news_side .recommend .img_container{ float: right; height: 3.75em; width: 7.4em; overflow: hidden; margin-left: 1em; position: relative;}
.news_side .recommend .img_container .bg_container{position: absolute; left:0; top:0; right:0; bottom:0; overflow: hidden;transition: transform .5s linear;}
.news_side .recommend li a:hover .img_container .bg_container{transform: scale(1.05);}
.bsBox{box-sizing: content-box !important;}
@media screen and (max-width: 1280px){
    .news_con{float: none; width: auto;}
    .news_con .into_title h1{ font-size:30px;}
    .news_con .into_title h2{ font-size:22px;}
    .news_side{float: none; width:auto; padding: 2em 5%;}
}
@media screen and (max-width: 1024px){
    .news_con .into_title h1{ font-size:24px;}
    .news_con .into_title h2{ font-size:20px;}
}
@media screen and (max-width: 560px){
    .news_con .into_title h1{ font-size:20px;}
    .news_con .into_title h2{ font-size:16px;}
    .news_con .into_title .bshare-custom a{margin: 0 .125em;}
    .news_side{padding: 0 0 2em;}
    .news_side .recommend .img_container{ float: none; height:0; width:100%; margin-left:0; padding: 0 0 calc(163% / 3.22); margin-bottom: .75em;}
    .news_con .newsinfo .goback{ float: none; position: absolute; left: 0; bottom:0;}
}

/*产品栏目*/
.page_case ul{list-style-type: none; overflow: hidden; margin: 0 -.5em;}
.page_case ul li{ padding: .5em; float: left; width: 25%;}
.page_case ul li a{ display: block; padding: 1em; text-align: center; position: relative; background: #FFF; box-shadow: 0 .125em .5em rgba(0,0,0,.1);}
.page_case ul li .bg_container{border:0;height: 0; overflow: hidden; padding: 0 0 50%; background-size: contain; width: 100%;transition:transform .5s linear;}
.page_case ul li p{position: absolute; left: 0; color: #FFF ; bottom: 0; background: rgba(0,0,0,.5); line-height: 200%; padding: 0 5%; width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0; transition:opacity .5s linear;}
.page_case ul li a:hover .bg_container{ transform: translateY(-1em);}
.page_case ul li a:hover p{opacity: 1;}
@media screen and (max-width: 1280px){
    .page_case ul li{ width: 33.33%;}
}
@media screen and (max-width: 1024px){
    .page_case ul li a {padding: 0;}
    .page_case ul li p{opacity: 1; position: static;}
    .page_case ul li a:hover .bg_container{ transform: translateY(0);}
}
@media screen and (max-width: 767px){
    .page_case ul li{ width: 50%;}
}
@media screen and (max-width: 560px){
    .page_case ul li{ width: 100%;}
}


/*招聘栏目
<div class="recruit_list">
    <div class="recruit_con open">
        <div class="recruit_til">
            <h2>技术专员助理</h2>
            <div class="info">
                <p><span class="type">招聘部门：</span>建筑设计研究院</p>
                <p><span class="type">招聘人数：</span>10人 </p>
            </div>
        </div>
        <div class="into_content">
            <p>1、业务关联-流程/组织结构<br>
                投产专员助理与生产部门紧密合作，属于工厂投产团队。<br>
                其职责是参与投产质量操作系统以及产品开发系统的相关事务。PSG从虚拟装车阶段一直参与到量产开始。</p>
                
        </div>
        <a href="/hfblen/lib/template/static/css/JobApplication.html" class="btn">申请职位</a>
    </div>
    <div class="recruit_con closed">
        <div class="recruit_til">
            <h2>技术专员助理</h2>
            <div class="info">
                <p><span class="type">招聘部门：</span>建筑设计研究院</p>
                <p><span class="type">招聘人数：</span>10人 </p>
            </div>
        </div>
        <div class="into_content">
            <p>1、业务关联-流程/组织结构<br>
                投产专员助理与生产部门紧密合作，属于工厂投产团队。<br>
                其职责是参与投产质量操作系统以及产品开发系统的相关事务。PSG从虚拟装车阶段一直参与到量产开始。</p>
        </div>
        <a href="/hfblen/lib/template/static/css/JobApplication.html" class="btn">申请职位</a>
    </div>
</div>
*/
.recruit_list .recruit_con{ margin-bottom: 2.5em;}
.recruit_list .recruit_con .recruit_til{position: relative; border-bottom: 1px solid #DDD; padding: 0 0 .5em; margin-bottom: 1.5em;}
.recruit_list .recruit_con .recruit_til h2{ color: #002971; font-size:24px; font-weight: bold; line-height: 187.5%; }
.recruit_list .recruit_con .recruit_til p{ display: inline-block; white-space: nowrap; margin-right: 1em;}
.recruit_list .recruit_con .btn{ display: inline-block; padding: .5em 3em; color: #FFF; background: #002971; margin-top: 1.5em;}
.recruit_list .recruit_con.closed{margin-bottom:0;}
.recruit_list .recruit_con.closed .recruit_til{margin-bottom:0; padding-right: 2em; cursor: pointer;}
.recruit_list .recruit_con.closed .recruit_til:after{content:"》";position: absolute;right:.5em; top:50%; line-height: 100%; color: #002971; transform: scale(2,1); margin-top: -.5em; display: block;}
.recruit_list .recruit_con.closed .into_content{display: none;}
.recruit_list .recruit_con.closed .btn{display: none;}
.recruit_list .recruit_con.open .recruit_til{padding-right: 2em;cursor: pointer;border-bottom-style: dotted;}
.recruit_list .recruit_con.open .recruit_til:after{content:"》";position: absolute;right:.5em; top:50%; line-height: 100%; color: #002971;  margin-top: -.5em; display: block;transform: scale(1,2) rotate(90deg);}

/*招聘栏目
<div class="recruit_list_class2">
    <ul>
        <li>
            <h3 class="til">储备干部（10-15人）</h3>
            <div class="into_content">
                <p> 一、岗位要求</p>
                <p> 本科，机械、机电、市场营销类相关专业，作为公司职能管理、生产管理、质量管理、技术研发，营销管理等储备管理人员。</p>
            </div>
        </li>
    </ul>
</div>*/
.recruit_list_class2 li{list-style-type: none; margin: 0 0 2em;}
.recruit_list_class2 h3.til{ font-size: 1.25em; line-height: 200%; color:#002971;}

/*表单
<form class="page_form">
    <div class="form_con routine">
        <h3>职务信息</h3>
        <dl>
            <dt><span class="must">*</span> 应聘职位</dt>
            <dd><select name="postname">
                <option>请选择应聘职位</option>
                <option>技术专员助理</option>
            </select></dd>
        </dl>
    </div>
    <div class="form_con routine">
        <h3>个人信息</h3>
        <dl>
            <dt><span class="must">*</span> 上传照片</dt>
            <dd class="fileimg"><img src="/hfblen/lib/template/static/css/static/images/fileimg.png" id="preview"><input id="file_upload" type="file" name="gr_zp" accept="image/gif,image/jpeg"></dd>
            <dd class="note"><span class="must">*</span> 大小：165px*226px,图片格式为jpg、gif</dd>
            </dl>
            <dl>
            <dt><span class="must">*</span> 姓名</dt>
            <dd><input type="text" name="gr_xm"></dd>
            <dd class="note">（只限中文汉字/英文字母）</dd>
            </dl>
            <dl>
            <dt><span class="must">*</span> 性别</dt>
            <dd><label><input type="radio" name="gr_xb" value="男" checked>男</label> <label><input type="radio" name="gr_xb" value="女">女</label></dd>
            </dl>
            <dl>
            <dt><span class="must">*</span> 出生日期</dt>
            <dd><input type="date" name="gr_csrq"></dd>
            </dl>
            <dl class="col3">
                <dt><span class="must">*</span> 民族</dt>
                <dd><input type="text" name="gr_mz"></dd>
            </dl>
            <dl class="col3">
                <dt><span class="must">*</span> 籍贯</dt>
                <dd><input type="text" name="gr_jg"></dd>
            </dl>
            <dl class="col3">
                <dt><span class="must">*</span> 血型</dt>
                <dd><input type="text" name="gr_xx"></dd>
            </dl>
            <dl class="col3 hh">
                <dt><span class="must">*</span> 政治面貌</dt>
                <dd><input type="text" name="gr_zzmm"></dd>
            </dl>
            <dl class="col3">
                <dt><span class="must">*</span> 英语等级</dt>
                <dd><input type="text" name="gr_yydj"></dd>
            </dl>
            <dl>
                <dt><span class="must">*</span> 身份证号码</dt>
                <dd><input type="text" name="gr_sfz"></dd>
            </dl>
            <dl>
                <dt><span class="must">*</span> 户口所在地</dt>
                <dd><input type="text" name="gr_hkszd"></dd>
            </dl>
            <dl>
                <dt><span class="must">*</span> 目前居住地址</dt>
                <dd><input type="text" name="gr_jzd"></dd>
            </dl>
            <dl>
                <dt><span class="must">*</span> 电子邮箱</dt>
                <dd><input type="text" name="gr_yj"></dd>
            </dl>
            <dl>
                <dt><span class="must">*</span> 移动电话</dt>
                <dd><input type="text" name="gr_dh"></dd>
            </dl>
    </div>
    <div class="form_con">
        <h3>教育信息</h3>
            <table>
                <tr>
                    <th width="430"><span class="must">*</span> 学习时间</th>
                    <th width="290"><span class="must">*</span> 学校</th>
                    <th width="290"><span class="must">*</span> 专业</th>
                    <th width="290"><span class="must">*</span> 学位</th>
                </tr>
                <tr>
                    <td class="times"><strong class="tdtil">第一条信息：</strong><span class="tdtil"><span class="must">*</span> 学习时间</span><input type="month" name="jy_sj11"> 至 <input type="month" name="jy_sj12"></td>
                    <td><span class="tdtil"><span class="must">*</span> 学校</span><input type="text" name="jy_xx1"></td>
                    <td><span class="tdtil"><span class="must">*</span> 专业</span><input type="text" name="jy_zy1"></td>
                    <td><span class="tdtil"><span class="must">*</span> 学位</span><input type="text" name="jy_xw1"></td>
                </tr>
                <tr>
                    <td class="times"><strong class="tdtil">第二条信息：</strong><span class="tdtil"><span class="must">*</span> 学习时间</span><input type="month" name="jy_sj21"> 至 <input type="month" name="jy_sj22"></td>
                    <td><span class="tdtil"><span class="must">*</span> 学校</span><input type="text" name="jy_xx2"></td>
                    <td><span class="tdtil"><span class="must">*</span> 专业</span><input type="text" name="jy_zy2"></td>
                    <td><span class="tdtil"><span class="must">*</span> 学位</span><input type="text" name="jy_xw2"></td>
                </tr>
                <tr>
                    <td class="times"><strong class="tdtil">第三条信息：</strong><span class="tdtil"><span class="must">*</span> 学习时间</span><input type="month" name="jy_sj31"> 至 <input type="month" name="jy_sj32"></td>
                    <td><span class="tdtil"><span class="must">*</span> 学校</span><input type="text" name="jy_xx3"></td>
                    <td><span class="tdtil"><span class="must">*</span> 专业</span><input type="text" name="jy_zy3"></td>
                    <td><span class="tdtil"><span class="must">*</span> 学位</span><input type="text" name="jy_xw3"></td>
                </tr>
            </table>
    </div>
    <div class="form_con">
        <h3>工作/实习经历</h3>
        <dl class="col3 col3_short">
            <dt><span class="must">*</span> 项目名称</dt>
            <dd><input type="text" name="jl_mc1"></dd>
        </dl>
        <dl class="col3 col3_long">
            <dt><span class="must">*</span> 时间</dt>
            <dd class="times"><input type="month" name="jl_sj11"> 至 <input type="month" name="jl_sj12"></dd>
        </dl>
        <dl class="col3 col3_short">
            <dt><span class="must">*</span> 承担岗位</dt>
            <dd><input type="text" name="jl_gw1"></dd>
        </dl>
        <dl>
            <dt><span class="must">*</span> 个人承担内容描述</dt>
            <dd><textarea rows="5" cols="40" name="jl_cdnr1"></textarea></dd>
        </dl>
        <dl class="col3 col3_short">
            <dt><span class="must">*</span> 项目名称</dt>
            <dd><input type="text" name="jl_mc2"></dd>
        </dl>
        <dl class="col3 col3_long">
            <dt><span class="must">*</span> 时间</dt>
            <dd class="times"><input type="month" name="jl_sj21"> 至 <input type="month" name="jl_sj22"></dd>
        </dl>
        <dl class="col3 col3_short">
            <dt><span class="must">*</span> 承担岗位</dt>
            <dd><input type="text" name="jl_gw2"></dd>
        </dl>
        <dl>
            <dt><span class="must">*</span> 个人承担内容描述</dt>
            <dd><textarea rows="5" cols="40" name="jl_cdnr2"></textarea></dd>
        </dl>
    </div>
    <div class="form_con">
        <h3>家庭成员</h3>
        <table>
                <tr>
                    <th width="200"><span class="must">*</span> 姓名</th>
                    <th width="200"><span class="must">*</span> 成员关系</th>
                    <th width="200"><span class="must">*</span> 职务</th>
                    <th width="360"><span class="must">*</span> 工作单位</th>
                </tr>
                <tr>
                    <td><strong class="tdtil">第一位成员：</strong><span class="tdtil"><span class="must">*</span> 姓名</span><input type="text" name="jt_xm1"></td>
                    <td><span class="tdtil"><span class="must">*</span> 成员关系</span><input type="text" name="jt_gx1"></td>
                    <td><span class="tdtil"><span class="must">*</span> 职务</span><input type="text" name="jt_zw1"></td>
                    <td><span class="tdtil"><span class="must">*</span> 工作单位</span><input type="text" name="jt_dw1"></td>
                </tr>
                <tr>
                    <td><strong class="tdtil">第一位成员：</strong><span class="tdtil"><span class="must">*</span> 姓名</span><input type="text" name="jt_xm2"></td>
                    <td><span class="tdtil"><span class="must">*</span> 成员关系</span><input type="text" name="jt_gx2"></td>
                    <td><span class="tdtil"><span class="must">*</span> 职务</span><input type="text" name="jt_zw2"></td>
                    <td><span class="tdtil"><span class="must">*</span> 工作单位</span><input type="text" name="jt_dw2"></td>
                </tr>
                <tr>
                    <td><strong class="tdtil">第一位成员：</strong><span class="tdtil"><span class="must">*</span> 姓名</span><input type="text" name="jt_xm3"></td>
                    <td><span class="tdtil"><span class="must">*</span> 成员关系</span><input type="text" name="jt_gx3"></td>
                    <td><span class="tdtil"><span class="must">*</span> 职务</span><input type="text" name="jt_zw3"></td>
                    <td><span class="tdtil"><span class="must">*</span> 工作单位</span><input type="text" name="jt_dw3"></td>
                </tr>
        </table>
    </div>
    <div class="form_con">
        <h3>资质证书获得情况</h3>
        <dl><dd><textarea rows="5" cols="40" name="zshdqk1"></textarea></dd></dl>
    </div>
    <div class="form_con">
        <h3>资质证书获得情况</h3>
        <dl><dd><textarea rows="5" cols="40" name="zshdqk2"></textarea></dd></dl>
    </div>
    <button type="submit" class="submit">提交</button>
    <button type="reset"" class="reset">重置</button>

</form>
*/
.page_form .form_con{ padding: 2em 3em 2em;}
.page_form .form_con h3{ color: #002971; font-size:24px; line-height:300%; font-weight: bold; border-bottom: 1px solid #DDD; margin: 0 -2em 2em;}
.page_form button.submit{outline: none; font-size:18px; padding: .75em 2.5em; background: #002971; color: #FFF; border:none; margin-right: 1em;margin-left: 4.8A8A8A8em;}
.page_form .routine + button.submit{margin-left: 10.6666em;}
.page_form button.reset{ outline: none; font-size:18px; padding: .75em 2.5em; background: #494949; color: #FFF; border:none; margin-right: 1em;}
.page_form dl{padding: 0 0 1em; width: 960px; max-width: 100%; padding-right: 1em; clear: both; overflow: hidden;}
.page_form dl.col3{width: 320px; max-width: 33.33%; clear: none; float: left;}
.page_form dl.col3_short{width: 264px;max-width: 27.5%;}
.page_form dl.col3_long{width: 408px;max-width: 45%;}
.page_form dt{line-height: 300%;}
.page_form dd{position: relative;}
.page_form .routine dt{width:7.5em; float: left; margin-right: 1.5em; text-align: right;}
.page_form .routine dd{float: left; width: 450px;  line-height: 300%;}
.page_form .routine dl.col3{ width: auto; max-width:none; overflow: visible;}
.page_form .routine dl.col3 dd{width: 125px; margin-right: -2.5em;}
.page_form .routine dl.hh{clear: both;}
.page_form .routine dd.note{width: auto; margin-left: 1em; line-height: 300%;}
.page_form .routine dd.fileimg{width: 165px; height: 226px; overflow: hidden; position: relative;}
.page_form .routine dd.fileimg + dd.note{ clear: left; margin-left: 9em;}
.page_form .routine dd.fileimg img{width: 165px; height: 226px;}
.page_form .must,.page_form div.note{color: #d6001d;}
.page_form table{max-width: 100%; border: none; border-spacing:0; border-collapse: collapse;}
.page_form table td,.page_form table th{ padding: 0 1em 1em 0; border: none; font-weight: lighter; text-align: left;}
.page_form table td .tdtil{display: none;}
.page_form input{ padding: .5em; line-height: 187.5%; color: #333; border:none; outline: none;  background: #F0F0F0; width: 100%; vertical-align: middle;}
.page_form select{ padding: .5em; line-height: 300%; color: #333; border:none; outline: none;  background: #F0F0F0; width: 100%; vertical-align: middle; height: 3em;-webkit-appearance:auto;}
.page_form .times input{width: calc(50% - 1em);}
.page_form .vcode input{width: calc(100% - 7.5em);}
.page_form .vcode .vcodeimg{vertical-align: middle; max-width: 7em; max-height: 3em; margin-left: .5em;}
.page_form textarea{ padding: .5em; line-height: 187.5%; color: #333; border:none; outline: none;  background: #F0F0F0; width: 100%; }
.page_form input[type="radio"]{padding: 0;line-height: normal;background: none; width: 1em; height: 1em;-webkit-appearance:radio; margin-right: .5em;}
.page_form input[type="file"]{padding: 0;background: none; width: auto;-webkit-appearance:auto;}
.page_form .routine dd.fileimg input{ position: absolute; right: 0; top:0; height: 100%; font-size:226px; line-height: 100%; opacity: 0;}
.page_form label{margin-right: 1em;}
@media screen and (max-width: 840px){
    .page_form .form_con{ padding: 2em 0 2em;}
    .page_form .form_con h3{ margin: 0 0 2em;}
    .page_form .routine dl.col3{ width: 33.33%;}
    .page_form .routine dl.col3 dd{width:100%; margin-right: 0;}
    .page_form .routine dt{width:auto; float: none;text-align: left;}
    .page_form .routine dd{float: none; width: auto;}
    .page_form .routine dd.note{margin-left: 0;}
    .page_form .routine dd.fileimg + dd.note{ clear: left; margin-left: 0;}
    .page_form table td,.page_form table th{ padding: 0 .25em 1em 0;}
    .page_form input{ padding: .5em .25em;}
    .page_form button.submit{margin-left: 0;}
    .page_form .routine + button.submit{margin-left: 0;}
}
@media screen and (max-width: 767px){
    .page_form button.submit,.page_form button.reset{padding: .5em 2em;}
    .page_form dl.col3{width: 960px; max-width: 100%; clear: both; float: none;}
    .page_form .routine dl.col3{ float: none; width: auto; max-width:none;}
    .page_form .routine dl.col3 dd{width: auto; margin-right:0;}
    .page_form table,.page_form table tr,.page_form table tbody{ display: block;}
    .page_form table th{display: none;}
    .page_form table td{ display: block; padding: 0 1em 1em 0;}
    .page_form table td .tdtil{ display: block; line-height: 300%;}
    .page_form table td strong.tdtil{ font-weight: bold; color: #002971;}
}
@media screen and (max-width: 374px){
    .page_form .times input{width: 100%;margin-bottom: .25em;}
    .page_form .times input + input{width: calc(100% - 1.5em); margin-bottom: 0;}
}
/*反馈*/
.page_feedback table{ margin-bottom: 2em; width: 100%; border: none;border-top: 1px solid #DDD; border-collapse: collapse;}
.page_feedback th,.page_feedback td{border-bottom:1px solid #DDD; padding: .5em 1em; text-align: left; font-weight: lighter; vertical-align: top;}
.page_feedback th{background: #F0F0F0;}
.page_feedback th.til,.page_feedback td.til{ width: 7em; color: #002971; font-weight: bold;}
@media screen and (max-width: 767px){
    .page_feedback table{ font-size:14px;}
    .page_feedback th,.page_feedback td{padding: .25em .5em;}
    .page_feedback th.til,.page_feedback td.til{width: 6em; }
}
.page_OnlineQ dl{ border-bottom: 1px dashed #002971; padding: 1em 0 2em;}
.page_OnlineQ dt{ padding: 1em 0; color: #002971;}
.page_OnlineQ dd p{ margin: .5em 0; text-align: justify;}

/*联系我们

<div class="page_contactus">
    <div class="txt_container">
        <div class="select_con">
            <select name="address">
                <option  data-search="北京市西城区西直门南小街147号" data-address="北京市西城区西直门南小街147号" data-code="" data-tel="" data-fax="010-66579051" data-ewm="static/images/ewm_zongbu.jpg" data-txt="北京官方微信">国投健康产业投资有限公司</option>
            </select>
        </div>
        
        <p>地址：北京市西城区西直门南小街147号7楼</p>
        <p>邮编：100034</p>
        <p>电话：010-88006457</p>
        <p>传真：010-88006400</p>
        <p class="ewm"></p>
    </div>
    <div class="map">
        <div id="allmap"></div>
    </div>
</div>


<div class="page_contactus">
    <div class="txt_container">
        <h3 data-address="福建省莆田市秀屿区东埔镇塔林村山尾500号">国投云顶湄洲湾电力有限公司</h3>
        <p>地址：福建省莆田市秀屿区东埔镇塔林村山尾500号</p>
        <p>电话：0594-5520721</p>
        <p>邮箱：<a href="mailto:gtydmzwdc@sdic-mzwpc.com">gtydmzwdc@sdic-mzwpc.com</a></p>

        <h3 data-address="北京市西城区西直门南小街147号楼">国投电力控股股份有限公司</h3>
        <p>地址：北京市西城区西直门南小街147号楼11层1108</p>
        <p>电话：010-66579965</p>

    </div>
    <div class="map">
        <div id="allmap"></div>
    </div>
</div>

*/
.page_contactus{padding: 0 0 0 55%;position: relative;}
.page_contactus:before{content: '';position: absolute; left: 0;top:0; width: 35%; height: 2px; background: #002971;}
.page_contactus .txt_container{ width: 55%; padding: 0 5% 0 0; position: absolute; left: 0; top:50%; transform: translateY(-50%);}
.page_contactus .txt_container .page_title{position: relative; padding: 0 0 2em; margin-bottom: 2em; }
.page_contactus .txt_container > h3{ font-size:1.5em; line-height: 150%; color: #333;margin-bottom: .5em; cursor: pointer;}
.page_contactus .txt_container > h3 ~ h3{margin-top: 1em;}
.page_contactus .select_con{padding: 0 0 2em; margin-bottom: 2em;}
.page_contactus .select_con select{line-height: 300%; color: #333; border:1px solid #DDD; outline: none;  background: #F0F0F0; width: 100%; vertical-align: top;-webkit-appearance:auto; height: 3em;}
.page_contactus .txt_container p{margin-bottom: 1em; line-height: 150%;}
.page_contactus .map{position: relative; height: 30em; background:#DDD;}
.page_contactus #allmap{ width: 100%; height: 100%;}
.page_contactus.mapatleft{padding: 0 55% 0 0;}
.page_contactus.mapatleft .txt_container{padding: 0 0 0 5%;left:auto;right: 0;}

.page_contactus.mapatleft .txt_container{padding: 0 2.5% 0 5%; color: #FFF; z-index: 5;}
.page_contactus .txt_container > h3{color: #FFF;}
.page_contactus.mapatleft:after{content:""; position: absolute;top:0; right: 0;;bottom: 0; width: 52.5%; border:1px solid #494949; background: #002971;}
.page_contactus.mapatleft a{color: #FFF;}
.page_contactus.mapatleft a:hover{color: #333;}
.page_contactus .map{height: 20em;border:1px solid #494949;}

@media screen and (max-width: 1024px){
    .page_contactus .txt_container{font-size:12px;}
}

@media screen and (max-width: 767px){
    .page_contactus{padding: 0;}
    .page_contactus:before{display: none;}
    .page_contactus .txt_container{width: auto; padding: 0 0 2em; position: static; transform: none;}
    .page_contactus .txt_container a{display: inline-block;}
    .page_contactus .map{height: 70vh;}

    .page_contactus.mapatleft{padding: 0;}
    .page_contactus.mapatleft:after{display: none;}
    .page_contactus.mapatleft .txt_container{ padding: 1em;border:1px solid #494949; background: #002971;margin:0 0 2em;}
}