.maincolor{color:#8a8a8a;/*文字*/color:#494949;/*重文字*/color:#333/*特重文字*/color：#013b96/*主色调*/ color：#ddd;/*边框*/color:#f0f0f0;/*背景*/}

/*关于我们栏目 文字 装饰图
<div class="page_about">
    <div class="img_container"><div class="bg_container"><img ></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 #013b96;} */
.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>
<script>
if ($('.page_gdnum').length > 0) {
    $(".gdnum").html(0); numfloat();
}
</script>*/
.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:#013b96;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: #013b96; 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: #013b96; 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 ></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 #013b96;}
.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 #013b96;*/ 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 ></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 #013b96;}
@media screen and (max-width: 560px){
    .teamlist_class2 li{float: none; width: 100%;}
}

/*团队 上头像 下姓名 职务 两个一行
<ul class="teamlist_class4">
    <li>
        <div class="card_con">
            <div class="img_container"><div class="bg_container"><img ></div></div>
            <div class="txt_container">
                <h3>姓名</h3>
                <p>职务</p>
            </div>
        </div>
    </li>
</ul>*/
.teamlist_class4{list-style-type: none; overflow: hidden; margin: 0 -10px;}
.teamlist_class4 li{float: left; width: 50%; padding: 0 10px 2%;}
.teamlist_class4 .card_con{position: relative;}
.teamlist_class4 .img_container{position: relative; width: 42%; height: 0;overflow: hidden;padding: 0 0 42%; margin:0 auto;border-radius: 50%; box-shadow: 4px 4px 8px rgba(0,0,0,.3);}
.teamlist_class4 .img_container .bg_container {position: absolute; left: 0; top:0;right: 0;bottom: 0;}
.teamlist_class4 .txt_container{ text-align: center; margin: 1em auto 1em; width: 80%;}
.teamlist_class4 .txt_container h3{font-weight: bold;font-size: 24px; line-height: 200%;}
.teamlist_class4 .txt_container p{display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 4; height: 6em; line-height: 150%; overflow: hidden;}
@media screen and (max-width: 767px){
    .teamlist_class4 li{float: none; width: 100%; padding:  0 0 2em;}
    .teamlist_class4 .txt_container p{height: auto; -webkit-line-clamp: unset;}
}

/*团队 姓名 说明
<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 #013b96; 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 ></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: #013b96;}
.page_brand .txt_container:after{content: ""; background: #013b96; 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%;}
}
/*企业文化 带背景 dl 
<ul class="page_brand_class2">
    <li>
        <dl>
            <div class="bg_container"><img ></div>
            <dd>双轮驱动 轻重结合</dd>
            <dt>发展战略</dt>
        </dl>
    </li>
</ul>
*/
.page_brand_class2{ list-style-type: none; margin: 0 -16px;}
.page_brand_class2 li{ display: inline-block; width: 33.33%; margin: 0 -.33em 0 0; vertical-align: top; padding: 0 16px 16px;}
.page_brand_class2 dl{position: relative; height:0; overflow: hidden; padding: 0 0 136%; display: block; color:#fff; text-align: center; }
.page_brand_class2 dl .bg_container{position: absolute; left: 0; right: 0; bottom: 0; top: 0; }
.page_brand_class2 dl .bg_container:after{content: '';position: absolute; left: 0; right: 0; bottom: 0; top: 0; background: #013b96; opacity: .75;}
.page_brand_class2 dd{position: absolute; width: 100%;left: 0; top:15%;}
.page_brand_class2 dt{position: absolute; width: 100%;left: 0; bottom: 15%;}
.page_brand_class2 dt:after {content: ''; position: absolute; width: 2px; height: 3em; top:-3.5em; left: 50%; margin: 0 0 0 -1px; background: #fff;}
@media screen and (max-width: 767px){
    .page_brand_class2{margin: 0 -8px;}
    .page_brand_class2 li{padding: 0 8px 16px; width: 50%;}
    .page_brand_class2 li:first-child{width: 100%;}
    .page_brand_class2 li:first-child dl{padding: 0 0 85%;}
}
@media screen and (max-width: 480px){
    .page_brand_class2 li{ width: 100%;}
    .page_brand_class2 li dl{padding: 0 0 85%;}
}

/*企业文化 带背景 dl 
<ul class="page_brand_class3">
    <div class="con">
        <div class="bg_container"><img ></div>
        <div class="txt_container">
            <div class="txt_con">
                <h3>发展战略</h3>
                <h4>development strategy</h4>
                <p>双轮驱动 轻重结合</p>
            </div>
        </div>
    </div>
</ul>
*/
.page_brand_class3{ list-style-type: none; }
.page_brand_class3 li{ display: inline-block; width: 33.33%; margin: 0 -.33em 0 0; vertical-align: top;}
.page_brand_class3 .con{padding: 53.5% 0 0; position: relative;}
.page_brand_class3 .bg_container{position: absolute; left: 0; top:0; height: 0; padding:0 0 53.5%; width: 100%;}
.page_brand_class3 .txt_container{position: relative; height: 0; padding:26.75% 0; text-align: center; background: #fff; transition:background .5s linear;}
.page_brand_class3 .txt_container:before{content: ""; position: absolute; width: 1em; height: 1em; left: 50%; top:-.5em; margin-left: -.5em; background: #fff; transition:background .5s linear; transform: rotate(45deg);}
.page_brand_class3 .txt_container .txt_con{ position: relative; transform: translatey(-50%); }
.page_brand_class3 .txt_container h3{ color: #333;transition:color .5s linear;line-height: 150%; font-size: 1.25em;}
.page_brand_class3 .txt_container h4{ color:#333; font-size: 1em;transition:color .5s linear;line-height: 150%;}
.page_brand_class3 .txt_container p{font-size: 1.125em;color:#999; transition:color .5s linear;line-height: 150%;}
.page_brand_class3 li:hover .txt_container,.page_brand_class3 li:hover .txt_container:before{ background: #013b96;}
.page_brand_class3 li:hover .txt_container h3,.page_brand_class3 li:hover .txt_container h4,.page_brand_class3 li:hover .txt_container p{color: #fff;}

.page_brand_class3 li:nth-child(2) .con{padding: 0 0 53.5%;}
.page_brand_class3 li:nth-child(2) .bg_container{top:auto; bottom: 0;}
.page_brand_class3 li:nth-child(2) .txt_container:before{top:auto; bottom:-.5em;}
@media screen and (max-width: 767px){
    .page_brand_class3 li{width: 100%;}
    .page_brand_class3 .txt_container h3{font-size: .875em;}
    .page_brand_class3 .txt_container h4{font-size: .625em;line-height: 125%;}
    .page_brand_class3 .txt_container p{font-size: .75em;line-height: 125%;}
    .page_brand_class3 .con{padding: 0 0 0 50%;}
    .page_brand_class3 .bg_container{width: 50%; padding:0; height: auto; bottom:0;}
    .page_brand_class3 li:nth-child(2) .con{padding: 0 50% 0 0;}
    .page_brand_class3 li:nth-child(2) .bg_container{left: auto; right: 0;}
    .page_brand_class3 .txt_container:before{ left: -.5em; top:50%; margin:-.5em 0 0;}
    .page_brand_class3 li:nth-child(2) .txt_container:before{left:auto; right:-.5em; top:50%; bottom:auto;}
}
@media screen and (max-width: 408px){
    .page_brand_class3 .txt_container h4{display: none;}
}

/*大事记 年份滑动门
<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"><</div>
        <div class="btn_next">></div>
    </div>
    <div class="card_container">
        <div class="card_con">
            <div class="year_con">
                <h3>1994</h3>
                <ul>
                    <li>
                        <h4>2月</h4>
                        <p><img ></p>
                        <p>1994年2月4日，时任国务院副总理朱榕基视察嵩屿电厂工地</p>
                    </li>
                    <li>
                        <h4>6月</h4>
                        <p><img ></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>
<script>
if ($('.yearcard').length > 0) {
    var year_l = $('.yearcard .tab li').length, year_c = 0;
    $(window).on("resize", function () {
        if ($(".yearcard .tab ul .current").position().left - $(".yearcard .tab").scrollleft()<0 || $(".yearcard .tab ul .current").position().left   $(".yearcard .tab ul .current").width() - $(".yearcard .tab").scrollleft() > $(".yearcard .tab").width()) {
            $(".yearcard .tab").scrollleft($(".yearcard .tab ul .current").position().left);
        }
    });
    function switchyear(n) {
        $(".yearcard .card_con").eq(n).addclass("current").siblings().removeclass("current");;
        $('.yearcard .tab li').eq(n).addclass("current").siblings().removeclass("current");
        if ($(".yearcard .tab ul .current").position().left - $(".yearcard .tab").scrollleft() < 0 || $(".yearcard .tab ul .current").position().left   $(".yearcard .tab ul .current").width() - $(".yearcard .tab").scrollleft() > $(".yearcard .tab").width()) {
            $(".yearcard .tab").animate({ "scrollleft": $(".yearcard .tab ul .current").position().left},300);
        }
        year_c = n;
    }
    $('.yearcard .tab li').on('click', function () {
        switchyear($(this).index());
    });
    $('.yearcard .btn_next').on('click', function (e) {
        e.preventdefault();
        year_c  ;
        switchyear((year_c >= year_l) ? 0 : year_c);
    })
    $('.yearcard .btn_prev').on('click', function (e) {
        e.preventdefault();
        year_c--;
        switchyear((year_c == -1) ? year_l - 1 : year_c);
    })
    switchyear(0);
}
</script>
*/
.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:#013b96;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:#013b96;}
.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:#013b96;}
.yearcard.class2 .tab li:after{border-radius:0;border:1px solid #013b96;background: #fff; transform: rotate(45deg);top:34px; width: 13px; height: 13px;}
.yearcard.class2 .tab li.current:after{background: #013b96;}
.yearcard.class2 .card_con{max-width: none;}

.yearcard .year_con h3{font-size: 40px; font-weight: bold;color:#013b96;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: #013b96;}
.yearcard .year_con_class2 li:last-child::after{display: none;}
.yearcard .year_con_class2 h4{line-height: 250%; color:#fff;background: #013b96;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 #013b96;background: #013b96; 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: #013b96;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:  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: #013b96;}
.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="page_history_class2">
    <ul>
        <li>
            <h3>2020年1月</h3>
            <p>2020年1月，中国水环境集团2项技术入选生态环境部《国家先进污染防治技术目录(水污染防治领域)》(全国共26项) 。</p>
        </li>
        <li>
            <h3>2020年1月</h3>
            <p>2020年1月，中国水环境集团牵头编制的国内首部下沉式水厂标准《地下式城镇污水处理厂工程技术指南》在全国正式实施。</p>
        </li>
    </ul>
</div>
*/
.page_history_class2 ul{position: relative;; list-style-type: none; text-align: justify;}
.page_history_class2 ul:before{content:""; position: absolute;left: 7.75em; top:1em; width: .1em; bottom:0; background: #013b96;}
.page_history_class2 li{position: relative; padding: 0 0 1.5em 11.5em;}
.page_history_class2 li h3{ position: relative;line-height: 2em; text-align: center; color: #fff; background: #013b96; border-radius: .25em; width: 6.5em;margin: 0 0 -2em -11.5em;}
.page_history_class2 li h3:before{ content: "";background: #013b96;position: absolute; right:-.25em;top:50%;margin:-.125em 0 0 0; height: .5em;width: .5em; display: block; transform: rotate(-45deg);}

.page_history_class2 li:before{content:""; position: absolute;left: 7.75em; top:.95em; width: 3.375em; height: .1em; background: #ddd;}
.page_history_class2 li h3:after{content:""; position: absolute;left: 7.4em; top:.6em; width: .8em; height: .8em; background: #013b96; border-radius: 50%;border:.2em solid #ddd;}
.page_history_class2 li:last-child:after{ position: absolute; left: 7.75em;top:1.4em; bottom:0; width: .5em; background: #fff; content: "";}
.page_history_class2 p{padding: .5em 1em; border:1px solid #ddd; background: #f0f0f0; border-radius: .25em; position: relative;}
.page_history_class2 p:before {content: "";  position: absolute; left: -.5em; top: .5em; width: 1em; height: 1em; background: #f0f0f0; border: 1px solid #f0f0f0; border-top-color: #ddd;  border-left-color: #ddd; transform: rotate(-45deg); }
@media screen and (max-width: 767px){
    .page_history_class2 ul:before{left: 0.35em;}
    .page_history_class2 li{padding: 0 0 1.5em 3em;}
    .page_history_class2 li h3{margin: 0 0 1em 0;}
    .page_history_class2 li h3:before{ left: -.5em; right: auto;}
    .page_history_class2 li h3:after{left: -3em;}
    .page_history_class2 li:before{left: 0;}
    .page_history_class2 p:before{transform: rotate(45deg); left: 2.75em; top:-.5em;}
    .page_history_class2 li:last-child:after{left: 0;}
}

/*图片页面 如组织机构
<div class="into_content"><p><img ></p></div>*/

/*文字栏目 标题变色*/
.page_txt .into_content h2,.page_txt .into_content h3,.page_txt .into_content h4{color: #013b96; font-weight: lighter;}
.page_big .into_content{font-size: 1.25em;} 
@media screen and (max-width: 1024px){
    .page_big .into_content{font-size: 1em;} 
}
/*渐变底文字区域垂直居中压在背景图上
<div class="page_bgimg_txt">
    <div class="bg_container"><img ></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="into_leftphot_righttxt">
    <div class="img_container"><div class="bg_container"><img ></div></div>
    <div class="txt_container">
        <div class="til">
            <h3>官地水力发电厂</h3>
            <p>雅砻江上第一个实施“西电东送”的电站</p>
        </div>
        <p>官地水力发电厂于2009年7月21日筹建，2012年3月开始投产发电。官地水电站是雅砻江上继二滩水电站投产发电14年后第一个投产的电站，是雅砻江上将清洁能源送往华东的第一个电站，是国家电网调度中心在川内第一个直接调度的水电站。其投产也标志着雅砻江公司由单一电站管理进入了多电站群运行管理的新时代。</p>
    </div>
</div>*/
.into_leftphot_righttxt{position: relative;white-space: nowrap;}
.into_leftphot_righttxt .img_container{width: 48.5%; margin-right: -.33em; display: inline-block; vertical-align: middle;overflow: hidden;}
.into_leftphot_righttxt .bg_container{ height: 0; overflow: hidden; position: relative; padding: 0 0 75%;}
.into_leftphot_righttxt .txt_container{width: 51.5%;margin-right: -.33em;display: inline-block; vertical-align: middle;overflow: hidden; background: #f0f0f0; padding: 1em; white-space: normal;}
.into_leftphot_righttxt .txt_container .til{border-bottom: 1px solid #013b96; margin-bottom: .75em; padding: .5em 0;}
.into_leftphot_righttxt .txt_container .til h3{color:#013b96;font-weight: bold;}
.into_leftphot_righttxt .txt_container .til p{color:#333;}
.into_leftphot_righttxt .txt_container p{text-align: justify;}
@media screen and (max-width: 1024px){
    .into_leftphot_righttxt .img_container{display: block; width: 680px; margin: 0 auto;}
    .into_leftphot_righttxt .txt_container{display: block; width: auto; background: none; padding: 1em 0;}
}
@media screen and (max-width: 767px){
    .into_leftphot_righttxt .img_container,.into_leftphot_righttxt .txt_container{display: block; width: auto;}
}
/*内页 全背景富文本
<div class="into_bgtxt">
    <div class="bg_container"><img ></div>
    <div class="into_content">
        <p>　　中国水环境集团是国家开发投资集团旗下专业的水环境服务平台，也是中信产业基金投资的水环境专业公司，是下沉式再生水市场的创新者和领跑者，国内领先的水环境综合治理投资营运服务商。集团自主知识产权的“高品质下沉式再生水系统”遍布19个省市。</p>
        
        <p>　　集团牵头制定生态环境部《地下式城镇污水处理厂工程技术指南》已于2020年1月1日起全国正式实施，牵头国家“十三五”重大水专项“地下污水厂建设模式创新与生态综合体示范”，拥有跨国研究平台中德“水环境与健康联合研究中心”和中荷“水处理技术研究中心”、拥有国家工程实验室“城镇污水深度处理与资源化利用”（污水领域唯一的国家实验室）和国家城市污水处理及资源化工程技术研究中心及院士工作站。2020年1月，集团“生态型下沉式再生水厂集约构建与资源化利用技术”入选生态环保部《国家先进污染防治技术名录》，作为唯一入选的下沉式技术得到国家层面的认可和推荐。</p>
    </div>
</div>*/
.into_bgtxt{background: #013b96; padding: 3em 2em; position: relative;}
.into_bgtxt .bg_container{position: absolute; left: 0; top:0; right: 0; bottom: 0; opacity: .2;}
.into_bgtxt .into_content{color: rgba(255,255,255,.9); position: relative;}
.into_bgtxt .into_content h2,.into_bgtxt .into_content h3, .into_bgtxt .into_content h4{color: #fff;}

/*起始展示三条文字 点击按钮后展开更多
<div class="page_txtlist">
    <ul>
        <li><p></p></li>
        <li><p><img ></p><p></p></li>
        <li><p></p></li>
        <li><p></p></li>
        <li><p></p></li>
    </ul>
    <a class="showmore"></a>
</div>
<script>
if ($(".page_txtlist").length > 0){
    if ($(".page_txtlist li").length < 4) {
        $(".page_txtlist .showmore").hide();
    }
    $(".page_txtlist .showmore").on("click",function () {
        $(".page_txtlist").addclass("open");
    })
}
</script>*/
.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: #013b96; 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: #013b96;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 ></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 ></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: #013b96; 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%;}
}

/*文压图 左右循环
<ul class="photo_txt_class2">
    <li>
        <span class="all_container">
            <div class="img_container">
                <div class="bg_container"><img ></div>
            </div>
            <div class="txt_container">
                <h3>雅砻江水电荣获国家科学技术进步二等奖</h3>
                <p>2019年1月8日上午，2018年度国家科学技术奖励大会在人民大会堂隆重召开，雅砻江水电申报的“300m级特高拱坝安全控制关键技术及工程应用”项目...</p>
            </div>
        </span>
    </li>
</ul>*/
.photo_txt_class2{list-style-type: none;}
.photo_txt_class2 li{margin: 0 0 2em;}
.photo_txt_class2 .all_container{position: relative;display: block; overflow: hidden;}
.photo_txt_class2 .img_container{position: relative; overflow: hidden;width: 960px; max-width:80% ;}
.photo_txt_class2 .bg_container{width: 100%; height: 0; overflow: hidden; padding:0 0 64.6%;transition: transform .5s linear;}
.photo_txt_class2 a:hover .bg_container{transform: scale(1.05);}
.photo_txt_class2 .txt_container{position: absolute; right: 0; width: 675px; max-width: 60%; top:20%; bottom:20%; padding:1.5em 2em 3em;}
.photo_txt_class2 .txt_container::before{content: '';position: absolute;left: 0;right: 0; top: 0; bottom: 0; background: #013b96; opacity: .9;}
.photo_txt_class2 .txt_container h3{color:#fff;line-height: 150%;margin-bottom: .5em;font-size:1.5em;text-align: justify;position: relative;}
.photo_txt_class2 .txt_container p{text-align: justify;line-height: 150%; color:#fff;position: relative;opacity: .8;}
/* .photo_txt_class2 .txt_container:after{content: '';position: absolute;left: 2em; bottom:2em; height: 2px; width: 3em; background: #fff; margin: 0 0 -2px;} */
.photo_txt_class2 li:nth-child(2n) .img_container{margin: 0 0 0 auto;}
.photo_txt_class2 li:nth-child(2n) .txt_container{left: 0; right: auto;}
@media screen and (max-width: 1024px){
    .photo_txt_class2 .img_container{width: 100%; max-width: 100%;}
    .photo_txt_class2 .txt_container{position: relative; margin: -10% auto 0; width: 80%; max-width: 80%; left: auto; right: auto; padding:1.5em 1em 2em; }
    .photo_txt_class2 .txt_container:after{bottom:-1.5em;}
    .photo_txt_class2 .txt_container h3{font-size: 1.25em;}
}


/*企业荣誉 上图下文 一行三个
<div class="page_honor">
    <ul>
        <li>
            <span class="honor_con">
                <div class="img_container">
                    <div class="bg_container"><img ></div>
                </div>
                <p>荣誉文字荣誉文字荣誉文字荣誉文字荣誉文字荣誉文字荣誉文字荣誉文字</p>
            </span>
        </li>
    </ul>
</div>*/
.page_honor ul{ overflow: hidden; margin: 0 -8px;}
.page_honor ul li{ display: inline-block; margin:0  -.33em 1em 0; padding:  0 8px; width: 33.33%; vertical-align: top;}
.page_honor.col4 ul li{width: 25%;}
.page_honor .honor_con{ position: relative; display: block; overflow: hidden; border-radius: .5em;}
.page_honor ul li .img_container{ overflow: hidden; position: relative;border-radius: .5em;}
.page_honor ul li .bg_container{ height: 0; overflow: hidden; padding:0 0 62.5%; position: relative; 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; line-height: 150%; text-align: center;}
.page_honor .honor_con h3{overflow: hidden; width: 100%; color:#333; white-space: nowrap; text-overflow: ellipsis;text-align: center;}
.page_honor a.honor_con:hover h3{color:#013b96;}
.page_honor .honor_con .txt_container{position: absolute;left: 0; right: 0;bottom: 0;opacity: 0; transition: opacity .5s linear; padding: .5em 1em; z-index: 5;}
.page_honor .honor_con .txt_container:before{content: ""; position: absolute; left: 0; top:0; right: 0; bottom: 0; background: #013b96; opacity:.3;}
.page_honor .honor_con:hover .txt_container{opacity: 1;}
.page_honor .honor_con .txt_container h3{color: #fff; position: relative;}
.page_honor a.honor_con:hover .txt_container h3{color: #fff;}

.page_honor .honor_con .txt_container{position: relative;opacity: 1; }
.page_honor .honor_con .txt_container h3{color: #8a8a8a;}
.page_honor .honor_con .txt_container:before{display: none;}
.page_honor a.honor_con:hover .txt_container h3{color: #013b96;}
@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 ></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>
<script>
if ($('.honor_swiper').length > 0) {
    var honor_s = new swiper('.honor_s .swiper-container', {
        loop: true,
        resizereinit : true,
        slidesperview: (w < 1025) ? ((w < 640) ? 1 : 2) : 3,

    });
    $('.honor_s .swiper-button-prev').on('click', function (e) {
        e.preventdefault()
        honor_s.swipeprev()
    })
    $('.honor_s .swiper-button-next').on('click', function (e) {
        e.preventdefault()
        honor_s.swipenext()
    });
    $(window).on("resize", function () {
        if ($(window).width() < 640) {
            if (honor_s.params.slidesperview != 1) {
                honor_s.params.slidesperview = 1;
                honor_s.reinit();
            }
        } else if($(window).width() < 1025) {
            if (honor_s.params.slidesperview != 2) {
                honor_s.params.slidesperview = 2;
                honor_s.reinit();
            }
        } else {
            if (honor_s.params.slidesperview != 3) {
                honor_s.params.slidesperview = 3;
                honor_s.reinit();
            }
        }
    });
}
</script>
*/
.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:#013b96; 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:#013b96;}
.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:  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:#013b96;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:#013b96;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="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; position: relative; top:-1px;}
.pdflist li .btn_more{ position: absolute; top:1em; right: 1em; line-height: 200%; color: #494949;}
/* .pdflist li .btn_more:before{content:""; background:url(/uploads/image/gltsimages/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="cultural_index">
    <li>
        <a href="culturalinto.html" class="cultural_con">
            <div class="img_container"><div class="bg_container"><img ></div></div>
            <div class="txt_container">
                <h3>2019年7月集团组织一起野外骑行活动2019年7月集团组织一起野外骑行活动</h3>
                <p>为增强团队凝聚力和团队融合度,提高团队间熟悉为增强团队凝聚力和团队融合度,提高团队间熟悉...</p>
            </div>
        </a>
    </li>
</ul>*/
.cultural_index{position: relative; overflow: hidden; margin-right: -8px;}
.cultural_index li{float: left;position: relative;padding: 0 8px 8px 0; width: calc(25% - 31px);}
.cultural_index li:nth-child(5n 1){width: calc(50%   62px);}
.cultural_index li:nth-child(5n 3),.cultural_index li:nth-child(5n){margin-right: -8px;}
.cultural_index .cultural_con{display: block;}
.cultural_index .cultural_con .img_container{height: 0; overflow: hidden; padding: 0 0 66.667%; position: relative;}
.cultural_index .cultural_con .bg_container{position: absolute; left:0; top:0; right:0; bottom:0; overflow: hidden;transition: transform .5s linear;}
.cultural_index .cultural_con:hover .bg_container{transform: scale(1.05);}
.cultural_index .cultural_con .txt_container{ padding: .5em 0 .75em; }
.cultural_index .cultural_con .txt_container h3{font-size: 1.25em;white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width:100%; color: #333; line-height:180%; }
.cultural_index .cultural_con:hover .txt_container h3{color: #013b96;}
.cultural_index .cultural_con .txt_container p{white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width:100%; color: #8a8a8a; line-height:150%; }
@media screen and (max-width: 767px){
    .cultural_index li{width: 50%;}
    .cultural_index li:nth-child(5n 1){width: 100%;}
}



/*图片列表  
<ul class="picturelist">
    <li>
        <a href="javascript:void(0);" class="picture_container" data-img="static/images/picture1.jpg">
            <div class="img_container">
                <div class="bg_container"><img ></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%; display: inline-block;  padding: 8px; vertical-align: top; margin: 0 -.33em 0 0; }
.picturelist li .img_container{height: 0; overflow: hidden; padding: 0 0 calc(390% / 3.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: #013b96;}
.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%;}
}
@media screen and (max-width: 767px){
    .picturelist li{ width: 50%;  }
    .picturelist li .txt_container{padding: 8px 0;}
}

.activitieslist {margin: 16px -8px 0;}
.activitieslist li{width: 33.33%;}
.activitieslist li:first-child,.activitieslist li:first-child   li{width: 50%;}
.activitieslist li .img_container{padding: 0 0 62.5%; border-radius: .5em;}
.activitieslist li .txt_container{padding: 16px 0 24px;}
.activitieslist li .txt_container .time{color: #013b96; font-size: 12px; line-height: 200%; display: block;}
.activitieslist li .txt_container h3{text-align: left;}

@media screen and (max-width: 767px){
    .activitieslist li{ width: 100% !important;  }
    .activitieslist li .txt_container{padding: 8px 0 16px;}
}

/*图片列表 一行3个 鼠标放上文字显现 
<ul class="picturelist_class2">
    <li>
        <a href="javascript:void(0);">
            <div class="img_container">
                <div class="bg_container"><img ></div>
            </div>
            <div class="txt_container">
                <h3>首批基层示范党支部</h3>
            </div>
        </a>
    </li>
</ul>*/
.picturelist_class2{ list-style-type: none; overflow: hidden; margin: 0 -8px;}
.picturelist_class2 li{width: 33.33%; float: left; padding: 8px; }
.picturelist_class2 li:nth-child(3n){margin-right: -8px;}
.picturelist_class2.col4 li{width: 25%;}
.picturelist_class2.col4 li:nth-child(3n){margin-right: 0px;}
.picturelist_class2.col4 li:nth-child(4n){margin-right: -8px;}
.picturelist_class2.col2 li{width: 50%;}
.picturelist_class2.col2 li:nth-child(3n){margin-right: 0px;}
.picturelist_class2.col2 li:nth-child(2n){margin-right: -8px;}
.picturelist_class2 li a{display: block; position: relative;}
.picturelist_class2 li .img_container{height: 0; overflow: hidden; padding: 0 0 62.5%; position: relative;border-radius: .5em;}
.picturelist_class2 li .bg_container{position: absolute; left:0; top:0; right:0; bottom:0; overflow: hidden;transition: transform .5s linear;}
.picturelist_class2 li a:hover .bg_container{transform: scale(1.05);}
.picturelist_class2 li .txt_container{overflow: hidden; padding: 0 5%; position: absolute; left: 0; right: 0; bottom:0; background: rgba(0,0,0,.4); opacity: 0;transition: opacity .5s linear;}
.picturelist_class2 li .txt_container .time{color: #013b96; font-size: 12px;}
.picturelist_class2 li .txt_container h3{white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width:100%; color: #fff; line-height:200%; }
.picturelist_class2 li a:hover .txt_container{opacity: 1;}
@media screen and (max-width: 1024px){
    .picturelist_class2.col4 li{width: 33.33%;}
    .picturelist_class2.col4 li:nth-child(4n){margin-right: 0px;}
    .picturelist_class2.col4 li:nth-child(3n){margin-right: -8px;}
    .picturelist_class2 li .txt_container{position: relative; opacity: 1;background: rgba(0,0,0,.7);}
}
@media screen and (max-width: 767px){
    .picturelist_class2 li{ width: 50%;  }
    .picturelist_class2 li:nth-child(3n){margin-right:0;}
    .picturelist_class2 li:nth-child(2n){margin-right:-8px;}
    .picturelist_class2.col4 li{width: 50%;}
    .picturelist_class2.col4 li:nth-child(3n){margin-right: 0px;}
    .picturelist_class2.col4 li:nth-child(2n){margin-right: -8px;}
}

@media screen and (max-width: 408px){
    .picturelist_class2 li{ width: 100%;  }
    .picturelist_class2.col4 li{width: 100%;}
    .picturelist_class2.col2 li{width: 100%;}
}


/*图片列表 一行4个 手机端2个 
<div class="picturelist_class3">
    <ul>
        <li>
            <div class="picture_con">
                <div class="img_container">
                    <div class="bg_container"><img ></div>
                </div>
            </div>
        </li>
    </ul>
</div>*/
.picturelist_class3{ background: #f7f7f7;}
.picturelist_class3 ul{ list-style-type: none; overflow: hidden;/* margin: 0 -16px; */}
.picturelist_class3 li{width: 25%; float: left; padding: 16px; }
.picturelist_class3 li:nth-child(4n){margin-right: -8px;}
.picturelist_class3  .picture_con{display: block; position: relative;}
.picturelist_class3 li .img_container{height: 0; overflow: hidden; padding: 0 0 calc(190% / 2.8); position: relative;  transition: box-shadow .5s linear;}
.picturelist_class3 li .bg_container{position: absolute; left:0; top:0; right:0; bottom:0; overflow: hidden;transition: transform .5s linear;}
.picturelist_class3 li a:hover .img_container{box-shadow: 0 2px 6px rgba(0,0,0,.5);}
.picturelist_class3 li a:hover .bg_container{transform: scale(1.05);}

.picturelist_class3 .otherpicture{text-align: center;}
.picturelist_class3 .otherpicture img {max-width: 100%;}

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

/*视频列表
<ul class="videolist videoicon">
    <li>
        <a href="javascript:void(0);" class="video_container" data-mp4="static/images/video.pm4">
            <div class="img_container">
                <div class="bg_container"><img ></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 66.67%; position: relative; }
.videolist li .bg_container{position: absolute; left:0; top:0; right:0; bottom:0; overflow: hidden;transition: transform .5s linear;}
.videolist li a:hover .bg_container{transform: scale(1.05);}
.videolist li .txt_container{overflow: hidden; padding: .5em 0 .75em; position: relative;}
.videolist li .txt_container h3{white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width:100%; color: #333; text-align: center; line-height:180%;font-size: 1.25em; }
.videolist li a:hover .txt_container h3{color: #013b96;}
.videolist li .txt_container p{overflow: hidden;color: #8a8a8a;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2; line-height: 150%; height: 3em;}


@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;}
}

/* .videoicon a .img_container:after{content: '';position: absolute;left: 50%; top:50%; transleft: 0; top:0; right: 0; bottom:0;  background:#013b96; opacity: 0;}form: translate(-50%,-50%); width: 20%; height: 0; padding: 0 0 20%; background: url(/uploads/image/gltsimages/icon_con.png) no-repeat center center; background-size: 100%;} */

.videoicon a .img_container:after{content: '';position: absolute;left: 0; top:0; right: 0; bottom:0;  background:#013b96; opacity: 0;transition: opacity .5s linear;}
.videoicon a .img_container:before{content: '';position: absolute;left: 0; top:0; right: 0; bottom:0; z-index: 1; background:url(/uploads/image/gltsimages/video_icon.png) no-repeat center center; opacity: .5;transition: opacity .5s linear; background-size: 10%;}
.videoicon a:hover .img_container:after{opacity: .3;}
.videoicon a:hover .img_container:before{opacity: 1;}


/*视频列表 一行两个 在列表页播放
<ul class="videolist_class2">
    <li>
        <span class="con">
            <div class="video_con" data-mp4="static/images/video.mp4" data-poster="static/images/newsimg.jpg"></div>
            <div class="txt_container">
                <h3>亚行与中国水环境集团共同助力全球生态安全</h3>
                <span class="time"><span class="d">05</span><span class="m">08</span><span class="y">2020</span></span>
            </div>
        </span>
    </li>
</ul>
<script> 
if ($(".video_con").length > 0) {
    $(".video_con").each(function (ii) {
        $(this).append('<div class="video_container"><video data-i="'   ii   '" preload="auto" data-mp4")   '" controls="controls" x5-video-player-type="h5" x5-video-player-fullscreen="true" x-webkit-airplay="allow" webkit-playsinline playsinline></video></div> <div class="poster_container" style="background-image: .attr("data-poster")   ');"></div>');
    });
    $(".video_con .poster_container").on("click", function () {
        $(this).addclass("hide").parents(".video_con").find("video")[0].play();
        if ($(this).parents(".page1swiper").length > 0) {
            page1swiper.stopautoplay();
        }
    });
    $('.video_con video').on("play", function () {
        var iii = $(this).attr("data-i");
        $(this).parents(".video_con").find(".poster_container").addclass("hide");
        $('.video_con video').each(function () {
            if (iii != $(this).attr("data-i")) {
                $(this)[0].pause();
            }
        });
    }).on("pause ended", function () {
        $(this).parents(".video_con").find(".poster_container").removeclass("hide");
        if ($(this).parents(".page1swiper").length > 0) {
            page1swiper.swipenext();
            page1swiper.startautoplay();
        }
    });
}
</script>
*/
.videolist_class2{ list-style: none; margin: 0 -8px;}
.videolist_class2 li{ display: inline-block; width: 50%; padding: 0 8px 20px; margin-right: -.33em;}
.videolist_class2 .video_con{height: 0; padding: 0 0 56.25%; overflow: hidden;}
.videolist_class2 .txt_container{padding: 1em 0;}
.videolist_class2 .txt_container h3{line-height: 1.5;font-size: 1.25em;font-weight: bold; height: 3em; overflow: hidden;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2; color: #333;}

.videolist_class2 .txt_container .time{font-size: 10px; color: #333; line-height: 24px;}
.videolist_class2 .txt_container .time .d,.videolist_class2 .txt_container .time .m{font-size: 16px;}
.videolist_class2 .txt_container .time .d:after{content:"/"}
.videolist_class2 .txt_container .time .y{margin-left: .5em;}
.video_con{position: relative;}
.video_con .video_container{position: absolute; left: 0; top:0; height: 100%; width: 100%; overflow: hidden; z-index: 3;}
.video_con .video_container video{ width: 100%; height: 100%;} 
.video_con .poster_container{position: absolute; left: 0; right: 0; bottom:0;top:0; z-index: 5; background:  no-repeat center center; background-size:cover;}
.video_con .poster_container:after {content: ''; width: 6%; height:0; padding: 0 0 6%; position: absolute; left: 50%; top:50%; margin: -3% 0 0 -3%; background: url(/uploads/image/gltsimages/icon_con.png) no-repeat center center; background-size: 100%; cursor: pointer; opacity: .8;}
.video_con .poster_container.hide{ z-index: 1;filter: blur(8px); opacity: .5;}
@media screen and (max-width: 767px){
    .videolist_class2 li{ width: 100%; }
}

/*新闻栏目
<ul class="newslist">
    <li>
        <a href="javascript:void(0);">
            <div class="img_container"><div class="bg_container"><img ></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-bottom: 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 56.25%;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:100%;width: calc(100% - 6em); 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: #013b96;}
.newslist li a strong{color: #013b96;}
/* .newslist .txt_container:after{content: '→'; display: block; color: #013b96;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; line-height: 150%; 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 #013b96; text-align: center;vertical-align: top; color:#013b96; 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>
        <a href="https://www.sdic.com.cn/cn/rmtzx/xwzx/gtyw/webinfo/2020/09/1600499382336196.htm">
            <div class="img_container"><div class="bg_container"><img ></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>
        </a>
    </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 #013b96;}
.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: #013b96;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:8;}
/* .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:4;}
}
@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:2;}
}
@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="partyspecialinto.html">
            <div class="all_container">
                <div class="img_container">
                    <div class="bg_container"><img ></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:5%;}
/* .newslist_class3 li a{padding:4%;display: block;background: #fafafa;} */
.newslist_class3 .all_container{position: relative; min-height: 290px; }
.newslist_class3 .all_container:after{content:''; display: block; clear: both;}
.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%; padding:  0 0 3em;}
.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:#013b96;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 .desc{color: #8a8a8a; line-height: 175%;font-size: 14px;}
.newslist_class3 .txt_container .desc h4{color:#013b96; }
.newslist_class3 .txt_container:after{content: '查看详情';  color: #333; position: absolute; left: 0; bottom:.25em;}
.newslist_class3 .txt_container:before{content: '→'; display: block; line-height: 175%; text-align: center; width: 1.75em; height: 1.75em; border:1px solid; border-radius: 50%; position: absolute; left: 5em; bottom:.125em; font-family:simsun; font-weight: bold; color:#8a8a8a; } 
.newslist_class3 a:hover .txt_container:after{color:#013b96;}
.newslist_class3 a:hover .txt_container:before{color:#013b96;} 
@media screen and (max-width: 1158px){
    .newslist_class3 .all_container{ min-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="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:#013b96; 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: #013b96;}
.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;}
.page_big .into_title h1{ font-size:42px;}
.page_big .into_title h2{ font-size:32px;}
.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: right; 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(/uploads/image/gltsimages/bbs1.png) no-repeat center center/100% !important;}
.news_con .into_title .bshare-custom .bshare-weixin{ background: url(/uploads/image/gltsimages/bbs2.png) no-repeat center center/100% !important;}
.news_con .into_title .bshare-custom .bshare-qzone{ background: url(/uploads/image/gltsimages/bbs3.png) no-repeat center center/100% !important;}
.news_con .into_title .bshare-custom .bshare-sinaminiblog{ background: url(/uploads/image/gltsimages/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: #013b96;}
.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;}
    .page_big .into_title h1{ font-size:36px;}
    .page_big .into_title h2{ font-size:26px;}
    .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;}
    .page_big .into_title h1{ font-size:30px;}
    .page_big .into_title h2{ font-size:24px;}
}
@media screen and (max-width: 560px){
    .news_con .into_title h1{ font-size:20px;}
    .news_con .into_title h2{ font-size:16px;}
    .page_big .into_title h1{ font-size:24px;}
    .page_big .into_title h2{ font-size:20px;}
    .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;}
}

/*logo墙 一行4个 鼠标放上图片上升文字显现 
<div class="page_case">
    <ul>
        <li><a href="javascript:void(0);" target="_blank">
            <div class="bg_container"><img ></div>
            <p>星展测控科技股份有限公司</p>
        </a></li>
    </ul>
</div>*/
.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="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="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:after{content:"》";position: absolute;right:.5em; top:50%;margin-top: -.5em;  color: #013b96; transform: scale(2,1) rotate(0deg);  display: block; opacity: 0;width: 1em; height: 1em;line-height: 100%; text-align: center;  transition: transform .2s linear; }
.recruit_list .recruit_con .recruit_til h2{position: relative; color: #013b96; font-size:24px; font-weight: bold; line-height: 187.5%; }
.recruit_list .recruit_con .recruit_til .info{position: relative;}
.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: #013b96; 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{opacity: 1;}
.recruit_list .recruit_con.closed .into_content{display: none;}
.recruit_list .recruit_con.closed .btn{display: none;}
.recruit_list .recruit_con.open{border-bottom: 1px solid #ddd; padding-bottom: 2em;}
.recruit_list .recruit_con.open .recruit_til{padding-right: 2em;cursor: pointer;border-bottom-style: dotted;}
.recruit_list .recruit_con.open .recruit_til:after{transform: scale(1,2) rotate(90deg); opacity: 1;}

.recruit_list .recruit_con{ margin-bottom: .5em;}
.recruit_list .recruit_con .recruit_til{padding: .5em 0;}
.recruit_list .recruit_con .recruit_til h2{ font-size:20px;  padding-left: 16px;line-height: 150%; }
.recruit_list .recruit_con .recruit_til:before{content: '';position: absolute;background: #013b96; opacity: .2; left: 0; top:0; right: 0; bottom: 0;}
.recruit_list .recruit_con .recruit_til:after{content:"▼";right: 16px;}
.recruit_list .recruit_con.open .recruit_til:after{transform: scale(2,1) rotate(180deg);}
.recruit_list .recruit_con .into_content{margin: 0 16px;}
.recruit_list .recruit_con.closed{margin-bottom:.5em;}
.recruit_list .recruit_con.open{border-bottom: none;}

/*招聘栏目
<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:#013b96;}

/*表单
<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  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: #013b96; 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: #013b96; 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: #013b96;}
}
@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: #013b96; 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 #013b96; padding: 1em 0 2em;}
.page_onlineq dt{ padding: 1em 0; color: #013b96;}
.page_onlineq dd p{ margin: .5em 0; text-align: justify;}

/*联系我们
<script ></script>
<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>
<script>
if ($(".contactus-page").length > 0) {
    // 百度地图api功能
    var map = new bmap.map("allmap");
    var point = new bmap.point(116.331398, 39.897445);
    map.centerandzoom(point, 12);
    map.enablescrollwheelzoom();   //启用滚轮放大缩小，默认禁用
    map.enablecontinuouszoom();    //启用地图惯性拖拽，默认禁用

    function changemap() {
        var _yx = $("select[name='address'] option:selected");
        $(".page_contactus p").eq(0).html("地址："   _yx.attr("data-address"));
        $(".page_contactus p").eq(1).html((_yx.attr("data-code") == "") ? "" : ("邮编："   _yx.attr("data-code")));
        $(".page_contactus p").eq(2).html((_yx.attr("data-tel") == "") ? "" : ("电话："   _yx.attr("data-tel")));
        $(".page_contactus p").eq(3).html((_yx.attr("data-fax") == "") ? "" : ("传真："   _yx.attr("data-fax")));
        $(".page_contactus p").eq(4).html((_yx.attr("data-ewm") == "") ? "" : ("<img src=\""   _yx.attr("data-ewm")   "\"><br>"   _yx.attr("data-txt")));
        // 创建地址解析器实例
        map.clearoverlays();
        var mygeo = new bmap.geocoder();
        // 将地址解析结果显示在地图上,并调整地图视野
        mygeo.getpoint(_yx.attr("data-search"), function (point) {
            if (point) {
                map.centerandzoom(point, 15);
                map.addoverlay(new bmap.marker(point));
            } else {
                alert("您选择地址没有解析到结果!");
            }
        }, "北京市");
    }
    if ($("select[name='address']").length > 0) {
        changemap();
        $("select[name='address']").on("change", function () {
            changemap();
        })
    }
}
</script>

<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>
<script type="text/javascript">
    if ($(".page_contactus").length > 0) {
        var map = new bmap.map("allmap"), address_old="";
        map.enablescrollwheelzoom();
        map.enablecontinuouszoom();
        function changemap(address_new) {
            if (address_old!= address_new) {
                address_old = address_new;
                map.clearoverlays();
                var mygeo = new bmap.geocoder();
                mygeo.getpoint(address_new, function (point) {
                    if (point) {
                        map.centerandzoom(point, 15);
                        map.addoverlay(new bmap.marker(point));
                    } else {
                        alert("您选择地址没有解析到结果!");
                    }
                }, "北京市");
            }
        }
        $(".page_contactus h3").on("click", function () {
            changemap($(this).attr("data-address"));
        }).eq(0).trigger("click");
    }
</script>
*/
.page_contactus{padding: 0 0 0 55%;position: relative;}
.page_contactus:before{content: '';position: absolute; left: 0;top:0; width: 35%; height: 2px; background: #013b96;}
.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: #013b96;}
.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: #013b96;margin:0 0 2em;}
}

/*联系我们2 左文右二维码
<div class="contactus_class2">
    <div class="txt_container">
        <h3>雅砻江流域水电开发有限公司</h3>
        <p>地 址：四川省成都市双林路288号</p>
        <p>邮 编：610051</p>
        <p>总 机：<a href="tel:86-28-82907333">86-28-82907333</a></p>
        <p>传 真：86-28-84311511</p>
        <p>网 址：<a href="http://www.ylhdc.com.cn/">www.ylhdc.com.cn</a></p>
        <p>email：<a href="mailto:ylhdc@ylhdc.com.cn">ylhdc@ylhdc.com.cn</a></p>
    </div>
    <div class="ewm_container">
        <img >
    </div>
</div>*/
.contactus_class2{position: relative; margin: 3em auto; max-width: 800px;}
.contactus_class2 .contactus_class3{display: inline-block; vertical-align: middle; width: calc(100% - 188px);margin-right: -.33em; text-align: left;}
.contactus_class2 .txt_container h3{color:#333;}
.contactus_class2 .ewm_container{display: inline-block; vertical-align: middle; width: 188px; text-align: center;}
.contactus_class2 .ewm_container img{max-width: 100%;}
@media screen and (max-width: 767px){
    .contactus_class2{text-align: center;}
    .contactus_class2 .txt_container{width: auto; max-width: 100%;}
    .contactus_class2 .ewm_container{display: block; margin: 0 auto; width: auto;}

}
/*联系我们3 左右两个地址
*/
.contactus_class3{list-style-type: none; margin: 0 -16px;}
.contactus_class3 li{display: inline-block; width: 50%; margin: 0 -.33em 0 0; vertical-align: top; padding: 0 16px 2em;text-align: center;}
.contactus_class3 li .map{text-align: left; position: relative; height: 0; padding: 0 0 75%; overflow: hidden;}
.contactus_class3 li .map #mapleft,.contactus_class3 li .map #mapright{position: absolute; left: 0; top:0; right: 0; bottom:0; background: #f0f0f0;}
.contactus_class3 .txt_container{display: inline-block;text-align: left; padding: 2em 0;}
.contactus_class3 .txt_container h3{color:#013b96; font-size: 1.25em; line-height: 200%;}
@media screen and (max-width: 767px){
    .contactus_class3 li{width: 100%;}
}


.page_chairman .txt_container{min-height: 16em;}
.page_chairman:after{position: absolute; left: 0; right: 0; top:0; bottom:0; content: "";}