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

/*关于我们栏目 文字+装饰图
<div class="page_about">
    <div class="img_container"><div class="bg_container"><img src="static/images/company_img.jpg"></div></div>
    <div class="txt_container">
        <div class="into_content">
            <p>国投生物科技投资有限公司（简称“国投生物”）成立于2017年2月28日，作为集团发展生物燃料乙醇等前瞻性战略业务的责任主体和市场主体，主要负责统筹生物能源等生物科技业务的科研、投资和经营管理。2018年，被国务院国资委确定为“双百行动”试点企业。</p>
        </div>
    </div>
</div>
*/
.page_about{position: relative; padding:0 50% 0 0 ;margin: 2em 0 0;}
.page_about .img_container{ position: absolute; width: 40%; right: 0; bottom:0;top:0;margin: 0 2em 0 0;}
.page_about .img_container:before{content: '';position: absolute; left:2em; right: -2em; bottom:2em;top:-2em;border:1px solid #2492d6;}
.page_about .bg_container{position: absolute; left:0; right: 0; bottom:0;top:0;}
@media screen and (max-width: 767px){
    .page_about{padding: 0;}
    .page_about .img_container{position: relative; width: auto; margin:0 2em 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:#2492d6;top:0;left: 0;right: 12px;}
.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 p{font-size: 12px; line-height: 150%; height: 4.5em;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;overflow: hidden;}
@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: #2492d6; 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: #2492d6; 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;}

.page_about .chairmanname {max-width: 8em;vertical-align: middle;}
@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="page_team">
    <ul>
        <li>
            <div class="bg_container"><img src="static/images/team_img.jpg"></div>
            <div class="txt_container">
                <h2>主标题</h2>
                <h3>副标题 名称 副标题</h3>
                <p>国投电力控股股份有限公司，是国家开发投资集团有限公司旗下的沪市A股上市公司(股票简称“国投电力”，股票代码“600886”)。自2002年成功上市以来，十几年间实现了令人瞩目的跨越式发展，总资产增长46倍，经营利润增长970倍，成为中国效率最高、效益最好的综合能源公司之一。</p>
            </div>
        </li>
    </ul>
</div>*/
.page_team li{ position: relative; padding: 3em 0;}
.page_team .bg_container + .txt_container{margin-left: 22.5%;}
.page_team .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;}
.page_team .bg_container img { width: 100%;}
.page_team .txt_container h2{font-size:34px; color: #333; line-height: 187.5%; display: inline-block; margin-right: .25em;}
.page_team .txt_container h3{font-size:22px; color: #494949;line-height: 187.5%;display: inline-block;}
.page_team .bg_container + .txt_container h3{display: block;}
.page_team .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;}

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

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

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

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

/*大事记 年份滑动门
<div class="yearcard">
    <div class="tab_container">
        <div class="tab">
            <ul>
                <li><span>1994</span></li>
                <li><span>1992</span></li>
            </ul>
        </div>
        <div class="btn_prev">&lt;</div>
        <div class="btn_next">&gt;</div>
    </div>
    <div class="card_container">
        <div class="card_con">
            <div class="year_con">
                <h3>1994</h3>
                <ul>
                    <li>
                        <h4>2月</h4>
                        <p><img src="static/images/history1.jpg"></p>
                        <p>1994年2月4日，时任国务院副总理朱榕基视察嵩屿电厂工地</p>
                    </li>
                    <li>
                        <h4>6月</h4>
                        <p><img src="static/images/history2.jpg"></p>
                        <p>1994年6月23日，时任中共中央总书记江泽民视察嵩屿电厂工地</p>
                    </li>
                </ul>
            </div>
        </div>
        <div class="card_con">
            <div class="year_con">
                <h3>1992</h3>
                
            </div>
        </div>
    </div>
</div>
<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; border-radius: 50%;text-align: center; border:1px solid; color:#2492d6;line-height: 150%;font-size: 1.5em; font-family: Arial;cursor: pointer;}
.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 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: 80px;}
.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 .year_con h3{font-size: 40px; font-weight: bold;color:#2492d6;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%;}

/*图片页面 如组织机构
<div class="page_img"><img src="static/images/organization.png"></div>*/
.page_img{ padding: 2em 0; text-align: center;}
.page_img img{max-width: 100%;}

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

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

/*起始展示三条文字 点击按钮后展开更多
<div class="page_txtlist">
    <ul>
        <li><p></p></li>
        <li><p><img src="static/images/temp.jpg"></p><p></p></li>
        <li><p></p></li>
        <li><p></p></li>
        <li><p></p></li>
    </ul>
    <a class="showmore"></a>
</div>
<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: #2492d6; 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: #2492d6;transform: rotate(90deg) scale(1.5); display: inline-block; margin-right: .5em;}
.page_txtlist .showmore:after{content: "展开更多";}

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

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

/*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;}
.pdflist li a{padding: 1.5% 1em 1.5% 2em;display: block; text-indent: -1em;}
.pdflist li a:hover{background: #F0F0F0;}
.pdflist li a:before{content:"·"; display: inline-block; width: 1em; height: 1em; line-height: 100%;vertical-align: middle; text-indent: 0;}

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

/*新闻栏目
<ul class="newslist">
    <li>
        <a href="javascript:void(0);">
            <div class="img_container"><div class="bg_container"><img src="static/images/newsimg.jpg"></div></div>
            <div class="txt_container">
                <h3>中央第十二巡视组巡视国投党组工作动员会召开</h3>
                <span class="time">2020/02/09</span>
                <p>根据中央关于巡视工作的统一部署，2019年3月26日上午，中央第十二巡视组巡视国家开发投资集团有限公司党组工作动员会召开。会前...</p>
                <span class="form">来源：中国证券报 张玉洁</span>
            </div>
        </a>
    </li>
</ul>*/
.newslist{list-style-type: none;}
.newslist li{border-bottom: 1px solid #DDD;}
.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%; height: 0; padding: 0 0 11.5%; overflow: hidden; margin-right: -.33em;}
.newslist .img_container .bg_container{width: 100%;  transition: transform .5s linear; position: absolute; left: 0; top:0; bottom:0;}
.newslist li a:hover .img_container .bg_container{transform: scale(1.05);}
.newslist .img_container + .txt_container{display: inline-block; vertical-align: middle; width: 75%; margin: 0 -2% 0 2%;}
.newslist .img_container + .times{display: none;}
.newslist .img_container + .times + .txt_container{display: inline-block; vertical-align: middle; width: 75%; margin: 0 -2% 0 2%;}
.newslist .txt_container h3{ width: calc(100% - 6em);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: #2492d6;}
.newslist li a strong{color: #2492d6;}
/* .newslist .txt_container:after{content: '→'; display: block; color: #2492d6;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 p{ overflow: hidden; height: 3.75em;color: #8A8A8A;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;}
.newslist .txt_container .form{ display: block; text-align: right; padding-top: .5em;color: #8A8A8A;}
.newslist .times:first-child{display: inline-block;  border:1px solid #2492d6; text-align: center;vertical-align: top; color:#2492d6; 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;}
}
@media screen and (max-width: 767px){
    .newslist .img_container{width: 43%;padding: 0 0 21.6%; vertical-align: top;}
    .newslist .img_container + .txt_container{ width: 53%; margin: 0 -2% 0 4%;}
    .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: 480px){
    .newslist li a{padding: 1em .5em;}
    .newslist .img_container{display: block; width: 100%; padding: 0 0 calc(163% / 3.22); margin-bottom: .5em;}
    .newslist .img_container + .txt_container{ width: 100%; margin:0;}
    .newslist .img_container + .times + .txt_container{width: 100%; margin:0;}
    .newslist .img_container + .txt_container p{display:block ;}
    .newslist .img_container + .times + .txt_container p{display:block ;}
    .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;}
}

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

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


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

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

</form>
*/
.page_form .form_con{ padding: 2em 3em 2em;}
.page_form .form_con h3{ color: #2492d6; 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: #2492d6; 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: #2492d6;}
}
@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: #2492d6; 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 #2492d6; padding: 1em 0 2em;}
.page_OnlineQ dt{ padding: 1em 0; color: #2492d6;}
.page_OnlineQ dd p{ margin: .5em 0; text-align: justify;}

/*联系我们
<script src="https://api.map.baidu.com/api?v=2.0&ak=Le0lCXbPyYPrf8dTbAHa0gMxsyvomZn0"></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>
*/
.page_contactus{padding: 0 40% 0 0;position: relative;}
.page_contactus .txt_container{ width: 40%; padding: 0 0 0 5%; position: absolute; right: 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:24px; line-height: 150%; color: #333;margin-bottom: 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;}
.page_contactus .map{position: relative; height: 30em; background:#DDD;}
.page_contactus #allmap{ width: 100%; height: 100%;}
@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;}
}