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

.content {padding-top:0;}
@media screen and (max-width: 767px){
    .content {padding-top: 64px;}
}

/*KV*/
.column_kv{position: relative;}
.column_kv .swiper-slide{width: 100%;}
.column_kv .kv_con {position: relative;height: calc(100vh - 64px);overflow: hidden;}
.column_kv .kv_con:after{position: absolute; left: 0;top:0; width: 100%; content: ''; height: 192px;z-index: 2;background:linear-gradient(to bottom, rgba(255,255,255,.7) 0%, rgba(255,255,255,.5) 30%, rgba(238,238,238,0) 100%);}
.column_kv .bg_container {position: absolute; left: 0; top:0; right: 0; bottom:0; z-index: 1;}
.column_kv .video_container{position: absolute; left: 0; top:0; right: 0; bottom:0;overflow: hidden; z-index: 1;}
.column_kv .video_container video{height: 100%;width: calc(1600vh / 9);margin: 0 (50% - 800vh / 9) ;-o-object-fit: cover;object-fit: cover; background: #000; z-index: 1;}
.column_kv .video_container canvas{position: absolute; height: 100%; width: calc(1600vh / 9); left: 50%; top:50%; transform: translate(-50%,-50%); z-index: 2;}
.column_kv .isAndroid .video_container video{ display: none;}
.column_kv .kvtxt {position: absolute;left:50%; top:50%; width: 75%; color: #333;padding: 10em 0 8em;min-width: 1400px; transform: translate(-50%,-50%);/* background: url(/hfpl/lib/template/static/images/kvtxt_bg.png) no-repeat center center; background-size:contain; */z-index: 5; text-align: center;}
.column_kv .kvtxt h3{ font-size:48px;line-height:150%;font-weight:lighter; text-shadow:0 10px 20px rgba(255, 255, 255,.2);position: relative; z-index: 6;}
.column_kv .kvtxt h4{  font-size:36px; line-height:167%;font-weight: lighter; text-shadow:0 10px 20px rgba(255, 255, 255,.2);position: relative; z-index: 6;}
.column_kv .kvtxt p{font-size:16px;line-height: 250%; font-weight: lighter; text-shadow:0 4px 8px rgba(255, 255, 255,.2);position: relative; z-index: 6;}
.column_kv .kvtxt strong{ font-weight:bold;}
.column_kv .kvtxt span{display:inline-block;}
.column_kv .more{display: inline-block; background: #002971; /*border:1px solid #FFF;*/ color: #FFF; padding: 8px 32px; margin-top: 30px;position: relative; z-index: 6;}
/* .column_kv .swiper-container-horizontal>.swiper-pagination-bullets,.column_kv .swiper-pagination{position: absolute; width:16px; left: auto; bottom:auto;right: 10px;top: 50%;transform: translate3d(0px,-50%,0);}
 .column_kv .swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet,.column_kv .swiper-pagination-switch{ background: none; width: 16px; height: 16px; margin: 2px 0; opacity: 1; position: relative; border: 1px solid transparent;outline: none !important; display: inline-block; border-radius: 50%; cursor: pointer;}
.column_kv .swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet:after,.column_kv .swiper-pagination-switch:after{ content: ""; position: absolute; width: 6px; height: 6px; left: 4px; top:4px; border-radius: 50%; background: #FFF;}
.column_kv .arrow{display: none;}
.column_kv .swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet-active,.column_kv .swiper-active-switch{border-left-color: #FFF;border-bottom-color: #FFF;} */
.column_kv .swiper-container-horizontal>.swiper-pagination-bullets,.column_kv .swiper-pagination{ left: 0; right: 0; position: absolute; bottom:8px; text-align: center; }
.column_kv .swiper-pagination-bullet,.column_kv .swiper-pagination-switch{ display: inline-block; width: 12px; height: 12px; margin: 4px 3px !important; border-radius: 50%; background-color: #FFF; opacity: 1;outline: none;transform: scale(.75); opacity: .7;border:1px solid #333;}
.column_kv .swiper-pagination-bullet-active,.column_kv .swiper-active-switch{background-color: #FFF;transform: scale(1);opacity: 1;}

.column_kv .swiper-button-prev,.column_kv .swiper-button-next{ left:4%; top:50%; width: 30px; height:30px; outline: none; position: absolute; margin-top: -37px; color:#333; font-size: 30px; line-height: 30px; text-align: left; z-index: 5; cursor: pointer;transform: scaleY(2);opacity: .5;}
.column_kv .swiper-button-prev:hover,.column_kv .swiper-button-next:hover{color:#002971;opacity: 1;}
.column_kv .swiper-button-prev:after{content: "<";}
.column_kv .swiper-button-next:after{content: ">";}
.column_kv .swiper-button-next{left: auto; right:4%;text-align: right;}

@media screen and (max-width: 1440px){
    .column_kv .kvtxt{min-width: 0; width: 100%; padding: 10em 20px 8em;}
}

/* @media screen and (max-width: 1280px){
    .column_kv .kvtxt h3{font-size: 36px;}
    .column_kv .kvtxt h4{font-size: 27px;}
    .column_kv .kvtxt p{font-size: 12px;}
    .column_kv .kvtxt br{display: none;}
} */
@media screen and (max-width: 767px){
    /* .column_kv .video_container canvas{height: 100%; width: calc((1600vh - 1024)/ 9);} */
    .column_kv .kvtxt{width: 94%; top:40%; padding: 10em 0 8em;}
    .column_kv .kvtxt h3{font-size: 28px;}
    .column_kv .kvtxt h4{font-size: 21px;}
    .column_kv .kvtxt p{font-size: 12px; line-height:216.67%;}
    .column_kv .kvtxt br{display: block;}
    .column_kv .more{padding: 4px 20px;}
    .column_kv .arrow{display: block; position: absolute; left: 45.5%; bottom:0; z-index: 10; width:9%; height: 0; padding: 9% 0 0; overflow: hidden; cursor: pointer; background: url(/hfpl/lib/template/static/images/arrow.png) no-repeat center center; background-size: 100%; animation: btn_sx 2s linear infinite; margin-bottom: 40px;}
}
@media screen and (min-aspect-ratio:16/9){
    .column_kv .video_container video{width:100%; height: 56.25vw; margin: calc(50vh - 28.125vw) 0;}
	.column_kv .video_container canvas{width:100%; height: 56.25vw;}
}

.content {padding-top: 0;}
.column_kv .kv_con{height: 100vh;}
@media screen and (max-width: 1280px){
    .column_kv .kv_con{height: 100vh;}
}
@keyframes btn_sx {
  0% {
    bottom:0;
    opacity: 1;
  }
  50% {
    bottom:16px;
    opacity: .3;
  }
  100% {
    bottom:0;
    opacity: 1;
  }
}


.btn_more{display:inline-block; width: 10em; line-height: 200%; text-align: center; color:#FFF; background: #002971; border-radius: .25em; border:1px solid #002971}
a:hover .btn_more, .btn_more:hover{background: #494949; color:#FFF;}

/*关于我们 左文字右背景 
<div class="column_about lefttxt_rightimg">
    <div class="indent_content">
        <div class="column_title">
            <h2>关于我们</h2>
            <h3>about us</h3>
        </div>
        <div class="column_content">
            <div class="img_container"><div class="bg_container"><img src="/hfpl/lib/template/static/css/static/images/indexabout.jpg"></div></div>
            <div class="txt_container">
                <p>国家开发投资集团有限公司（简称“国投”）成立于1995年5月5日，是中央直接管理的国有重要骨干企业，是中央企业中唯一的投资控股公司，是首批国有资本投资公司改革试点单位。国投注册资本338亿元，截至2019年末，资产总额约6300亿元，员工约5万...</p>
                <a href="/hfpl/lib/template/static/css/company.html" class="more">查看更多</a>
            </div>
        </div>
    </div>
</div>
*/
.lefttxt_rightimg .column_content{position: relative; padding:0 47.5% 0 0;}
.lefttxt_rightimg .column_content .img_container{ position: absolute; width: 42.5%; right: 0; bottom:0;top:0;margin: 0;}
.lefttxt_rightimg .column_content .bg_container{position: absolute; left:0; right: 0; bottom:0;top:0; }
.lefttxt_rightimg .txt_container{padding: 0 0 2em;min-height: 252px;}
.lefttxt_rightimg .txt_container p{text-align: justify;}
.lefttxt_rightimg .txt_container .more{display: inline-block; border:1px solid #DDD; color: #333; padding: 0 2em; margin-top: 1.875em; transition:color .5s linear,border .5s linear;line-height: 250%;}
.lefttxt_rightimg .txt_container .more:hover{ border-color: #002971;color:#002971;}
@media screen and (max-width: 767px){
    .lefttxt_rightimg .column_content{padding: 0;}
    .lefttxt_rightimg .column_content .img_container{display:none;} 
}
/*关于我们 多个ICON+标题在一行
<div class="iconsInOneLine column_about">
    <div class="indent_content">
        <div class="column_title_class2">
            <h2>关于我们</h2>
        </div>
        <div class="column_content">
            <ul>
                <li>
                    <a href="/hfpl/lib/template/static/css/organization.html" class="con">
                        <div class="icon_container"><img src="/hfpl/lib/template/static/css/static/images/indexabout_icon1.png"></div>
                        <h3>组织架构</h3>
                    </a>
                </li>
                ...
            </ul>	
        </div>
    </div>
</div>*/
.iconsInOneLine{position: relative; padding: 0 0 0;}
.iconsInOneLine .column_content > ul{margin: 0 -10px; overflow: hidden; list-style-type: none; padding: 1px 0 0;} 
.iconsInOneLine .column_content > ul > li{float: left;width: 25%; padding: 0 10px 2em;}
.iconsInOneLine .con{display: block; border:1px solid #DDD; border-radius: 3px;padding: 30% 0 20%; text-align: center;position: relative;}
.iconsInOneLine .con .icon_container img{ width: 25%; filter: grayscale(100%);}
.iconsInOneLine .con h3{line-height: 300%;color:#333;}
.iconsInOneLine .con:after{content:'>';position: absolute; font-size: 1.5em; line-height: 2em; width: 2em; margin: 0 0 -1em -1em; left: 50%; bottom:0; background: #002971; color: #FFF; text-align: center; border-radius: 50%;opacity: 0;}
.iconsInOneLine .con:hover{border:2px solid #002971; margin: -1px;}
.iconsInOneLine .con:hover .icon_container img{filter: grayscale(0);}
.iconsInOneLine .con:hover:after{opacity: 1;}
@media screen and (max-width: 1024px){
    .iconsInOneLine .con:after{font-size: 1.25em;}
}
@media screen and (max-width: 767px){
    .iconsInOneLine .column_content > ul > li{width: 50%;}
    .iconsInOneLine .con:after{font-size: 1em;}
}

/*其他栏目 三栏目一行
<div class="threeInLine column_products">
    <div class="indent_content">
        <div class="column_title_class2">
            <h2>产品中心</h2>
        </div>
        <div class="column_content">
            <ul>
                <li>1</li>
                <li>2</li>
                <li>3</li>
            </ul>
        </div>
    </div>
</div>*/ 
.threeInLine {position: relative; padding: 0 0 4%;}
.threeInLine .column_content > ul{margin: 0 -10px; overflow: hidden; list-style-type: none;} 
.threeInLine .column_content > ul:after{content: ''; display: block; clear: both;}
.threeInLine .column_content > ul > li{float: left;width: 33.33%; padding: 0 10px;}
@media screen and (max-width: 840px){
    .threeInLine .column_content > ul{margin: 0 -6px;}
    .threeInLine .column_content > ul > li{padding: 0 6px; width: 50%;}
    .threeInLine .column_content > ul > li:first-child{width: 100%;padding: 0 6px 2em; }
}
@media screen and (max-width: 640px){
    .threeInLine .column_content > ul > li{width: 100%;padding: 0 6px 2em; }
}

/*产品中心 子栏目
<div class="threeInLine slidedoor column_products">
    <div class="column_content">
        <ul>
            <li>
                <a href="/hfpl/lib/template/static/css/Productinto.html" class="product_con">
                    <div class="img_container"><div class="bg_container"><img src="/hfpl/lib/template/static/css/static/images/products1.jpg"></div></div>
                    <div class="txt_container">
                        <h3>应用范围</h3>
                        <p>铜层合金厚度要求0.2-1.0；钢基层：优轧碳钢或合金钢板</p>
                        <span class="btn_more">查看详情</span>
                    </div>
                </a>
            </li>
        </ul>
    </div>
</div>
*/
.column_products .product_con{display: block;background: #F4F4F4;padding: .5em;position: relative; margin: 0 .5em;}
.column_products .product_con .swiper-slide{width: 100%;}
.column_products .product_con .img_container{overflow: hidden; position: relative; background: #FFF; display: block;}
.column_products .product_con .bg_container{height: 0; overflow: hidden; padding:0 0 93.75%;  background-size: contain;transition: transform .5s linear;}
.column_products .product_con:hover .bg_container{transform: scale(1.05);}
.column_products .product_con .txt_container{padding: .5em; text-align: center; display: block;}
.column_products .product_con .txt_container h3{font-size: 20px; line-height: 200%; color:#333;}
.column_products .product_con .txt_container p{line-height: 150%; overflow: hidden;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp:3; text-align: center; height: 4.5em; color:#888; margin: 0 0 .5em;}
.column_products .product_con:hover .txt_container h3{color:#002971;}
.homeproducts .swiper-pagination{ position: relative;text-align: center;  padding: 1em 0 0; clear: both;}
.homeproducts .swiper-pagination-switch{ display: inline-block; width: 12px; height: 12px; margin: 4px 3px !important; border-radius: 50%; background-color: #FFF; opacity: 1;outline: none;transform: scale(.75); opacity: .7;border:1px solid #333;}
.homeproducts .swiper-visible-switch{background-color: #AAA;opacity: 1;}
.homeproducts .swiper-active-switch{background-color: #002971;transform: scale(1);opacity: 1;}
.column_products .btn_more{margin: 1em auto; display: block; width: 9em;}
/* @media screen and (max-width: 840px){
    .column_products li:first-child .product_con .img_container{display: inline-block; width:calc(50% - 10px); margin: 0 -.33em 0 0; vertical-align: middle;}
    .column_products li:first-child .product_con .txt_container{padding: 0 1em;display: inline-block; width:calc(50% + 10px); margin: 0 -2em 0 0; vertical-align: middle;}
}
@media screen and (max-width: 640px){
    .column_products .product_con .img_container{display: inline-block; width: calc(50% - 10px); margin: 0 -.33em 0 0; vertical-align: middle;}
    .column_products .product_con .txt_container{display: inline-block; width:calc(50% + 10px); margin: 0 -2em 0 0; vertical-align: middle;padding: 0 1em;}
    .column_products .product_con .txt_container .btn_more{display: none;}
} */
/*新闻中心*/ 
.column_news {position: relative; padding: 0 0 4%;}
.column_news .bg_container{position: absolute; left: 0;right: 0;top:0;bottom: 0; background-position: right bottom; background-color: #385890;}
.column_news .column_content{position: relative; padding:1em; background: #FFF; box-shadow: 0 4px 8px rgba(0, 0, 0,.3); overflow: hidden;}
.column_news .column_content ul{list-style: none; overflow: hidden;}
.column_news .column_content li {padding: .25em 0; white-space: nowrap;float: left; width: 49%; margin: 0 2% 0 0;}
.column_news .column_content li:nth-child(2n){margin: 0 -2% 0 0;}
.column_news .column_content li a{display: block;padding: 0 80px 0 12px; position: relative; line-height: 250%;}
.column_news .column_content li h4{overflow: hidden; width: 100%; text-overflow: ellipsis; color: #494949;}
.column_news .column_content li a:hover h4{color:#002971;}
.column_news .column_content li .time{ font-size: 12px; color:#AAA; line-height: 18px; position: absolute; right: 12px; top:50%; margin-top:-9px; }
@media screen and (max-width: 767px){
    .column_news .column_content li{width: 100%;margin: 0 -2% 0 0;}
}

/*子新闻
<div class="subcolumn_news">
    <div class="subtil">
        <a href="/hfpl/lib/template/static/css/PartyBuilding.html"><h3>党建动态</h3></a>
    </div>
    <div class="subcon">
        <ul>
            <li><a href="/hfpl/lib/template/static/css/PartyBuildinginto.html"><h4>再捐3620万元、200吨酒精再捐3620万元、200吨酒精</h4><span class="time">2019-02-14</span></a></li>
            <li><a href="/hfpl/lib/template/static/css/PartyBuildinginto.html"><h4>再捐3620万元、200吨酒精</h4><span class="time">2019-02-14</span></a></li>
            <li><a href="/hfpl/lib/template/static/css/PartyBuildinginto.html"><h4>再捐3620万元、200吨酒精</h4><span class="time">2019-02-14</span></a></li>
        </ul>
    </div>
</div>
*/ 
.subcolumn_news .subtil{position: relative; font-size: 32px; line-height: 250%; padding: 0 0 0 36px;}
.subcolumn_news .subtil a:before{content:'';position: absolute;left: 12px; width: 3px; height: .75em; top:0.9375em; background: #002971;}
.subcolumn_news .subtil h3{color:#494949;}
.subcolumn_news .subtil h3:before{content:'';position: absolute;left: 18px; width: 3px; height: .75em; top:0.9375em; background: #002971;}
.subcolumn_news .subtil:after{content:'';position: absolute;left: 24px; width: 3px; height: .75em; top:0.9375em; background: #002971;}
.subcolumn_news .subtil h3:after{content:'>';position: absolute;right:12px;  top:0em;color:#002971;}
.subcolumn_news .subtil a:hover h3:after{color:#494949;}
.subcolumn_news .subcon ul{list-style-type: none;}
.subcolumn_news .subcon li {padding: .25em 0; white-space: nowrap;}
.subcolumn_news .subcon li a{display: block;background: #F7F7F7; padding: 0 80px 0 12px; position: relative; line-height: 250%;}
.subcolumn_news .subcon li h4{overflow: hidden; width: 100%; text-overflow: ellipsis; color: #494949;}
.subcolumn_news .subcon li h4:before{content:'?';color:#002971;transform: scale(.5); display: inline-block; transform-origin: left center;}
.subcolumn_news .subcon li a:hover h4{color:#002971;}
.subcolumn_news .subcon li .time{ font-size: 12px; color:#AAA; line-height: 18px; position: absolute; right: 12px; top:50%; margin-top:-9px; }
@media screen and (max-width: 1440px){
    .subcolumn_news .subtil{font-size: 28px;}
}
@media screen and (max-width: 1024px){
    .subcolumn_news .subtil{font-size: 24px;}
}
/*企业党建*/ 
.column_partys {position: relative; padding: 0 0 4%;}
/* 子新闻 日期+图片+分类标题导语更多 在一行 
<ul class="subnews_class2">
    <li>
        <a href="/hfpl/lib/template/static/css/PartyNewsinto.html">
            <span class="time"><span class="d">05</span><span class="m">08</span><span class="y">2020</span></span>
            <div class="img_container"><div class="bg_container"><img src="/hfpl/lib/template/static/css/static/images/newslist.jpg"></div></div>
            <div class="txt_container">
                <span class="type">党建动态</span>
                <h3>亚行与中国水环境集团共同助力全球生态安全</h3>
                <p>签约仪式上，亚行负责私营部门和公共—私营部门合作（PPP）的副行长迪瓦卡·古普塔（Diwakar Gupta）表示，水务行业是亚行在中国的重要业务领域之一，中国水环境集团完善的商业模式与专业高效的技术运营实力给亚行留下了深刻印将持续向更多地区推广签约仪式上，亚行负责私营部门和公共—私营部门合作...</p>
                <span class="btn_more">查看详情</span>
            </div>
        </a>
    </li>
</ul>*/
.subnews_class2{border-top:1px solid #DDD;}
.subnews_class2 li{border-bottom:1px solid #DDD;padding: 1em 0;position: relative;}
.subnews_class2 li a{display: block;}
.subnews_class2 .time{ margin: 0 32px; width: 64px; color: #FFF; background: #002971; border-radius: 4px; text-align: center; display:inline-block; vertical-align: top;}
.subnews_class2 .time .d{font-size: 1.5em; line-height: 200%; display: block;}
.subnews_class2 .time .m{font-size: 1em; line-height: 200%; display: block;border-top:1px solid rgba(255, 255, 255,.2);}
.subnews_class2 .time .y{display: none;}
.subnews_class2 .img_container{ overflow: hidden; position: relative; background: #ddd;display: inline-block;border-radius: 4px; vertical-align: middle; margin: 0 32px 0 0; width: 300px;}
.subnews_class2 .bg_container{height: 0; overflow: hidden; padding:0 0 75%;  background-size: contain;transition: transform .5s linear;}
.subnews_class2 a:hover .bg_container{transform: scale(1.05);}
.subnews_class2 .txt_container{ overflow: hidden; position: relative;display: inline-block; vertical-align: middle; width:calc(100% - 492px);}
.subnews_class2 .txt_container .type{font-size: 12px; color: #002971;}
.subnews_class2 .txt_container h3{font-size: 20px; color: #333; line-height: 150%;overflow: hidden;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp:2; text-align: justify;margin: 0 0 .25em;}
.subnews_class2 .txt_container p{margin: 0 0 .5em;overflow: hidden;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp:3; text-align: justify; color:#888}
.subnews_class2 a:hover .txt_container h3{ color:#002971;}
@media screen and (max-width: 1024px){
    .subnews_class2 .time{margin: 0 16px 0 0;}
    .subnews_class2 .img_container{margin: 0 16px 0 0;}
    .subnews_class2 .txt_container{width:calc(100% - 412px);}
}
@media screen and (max-width:767px){
    .subnews_class2 .time{margin: 0; position: absolute; right: 0; top:1em}
    .subnews_class2 .img_container{margin: 0; width: calc(100% - 72px);}
    .subnews_class2 .txt_container{width:100%; padding: 1em 0 0;}
}

/* 带背景双栏目，左栏目白底 右栏目带背景
<div class="column_joinus bgtwocol ">
    <div class="bg_container"><img src="/hfpl/lib/template/static/css/static/images/indexjoinus_bg1.jpg"></div>
    <div class="indent_content">
        <div class="column_title_class2">
            <h2>加入我们</h2>
        </div>
        <div class="column_content">
            <div class="firstcol">
                <div class="info_content">
                    <h3>人才理念</h3>
                    <p>公司始终坚持“以人为本”的用人理念，为广大员工提供人才发挥的最大潜能机会和平台。在公平、公正、公开的原则下，建立科学地、有效的绩效管理机制，为波林人提供广阔的职业发展空间。</p>
                </div>
                <div class="btn_content">
                    <a href="/hfpl/lib/template/static/css/TalentConcept.html" class="btn_more">查看详情</a>
                </div>
            </div>
            <div class="secondcol">
                <div class="bg_container"><img src="/hfpl/lib/template/static/css/static/images/indexjoinus_bg2.jpg"></div>
                <div class="info_content">
                    <h3>招聘信息</h3>
                    <p>岗位一：产品研发工程师（2人）</p>
                </div>
                <div class="btn_content">
                    <a href="/hfpl/lib/template/static/css/JoinUs.html" class="more">查看更多 &gt;</a>
                </div>
            </div>
        </div>
    </div>
</div>
*/
.bgtwocol{position: relative; padding: 0 0 4%;}
.bgtwocol .bg_container{position: absolute; left: 0;right: 0;top:0;bottom: 0; background-position: right bottom; background-color: #385890;}
.bgtwocol .column_content{position: relative; padding: 0 27em 0 0; background: #FFF; box-shadow: 0 4px 8px rgba(0, 0, 0,.3); overflow: hidden;}
.bgtwocol .firstcol{ position: relative; padding:1em 4em 6em;}
.bgtwocol .secondcol{position: absolute; right: 0; top:0; width: 27em; bottom:0;padding:1em 4em 6em;}
.bgtwocol .info_content{position: relative; min-height: 12em;}
.bgtwocol .info_content h3{font-size: 32px; line-height: 300%; color:#494949;}
.bgtwocol .info_content p{line-height: 150%; text-align: justify; }
.bgtwocol .btn_content{position: absolute; height: 4em; left: 0;right: 0;bottom:0; padding: 0 4em; border-top:1px solid #FFF;}
.bgtwocol .secondcol .info_content,.bgtwocol .secondcol .info_content h3{color:#FFF;}
.bgtwocol .secondcol .btn_content:before{content: ''; float: left; width: 2em; height: 4em; background: url(/hfpl/lib/template/static/images/indexjoinus_bg3.png) no-repeat left center; background-size: 100%;}
.bgtwocol .secondcol .btn_content{ text-align: right; line-height: 400%;}
.bgtwocol .secondcol .btn_content .more{color:#FFF; }
@media screen and (max-width: 1024px){
    .bgtwocol .column_content{padding: 0 19em 0 0;}
    .bgtwocol .firstcol{ padding:0em 2em 5em;}
    .bgtwocol .secondcol{width: 19em;padding:0em 2em 5em;}
    .bgtwocol .info_content{min-height: 10.5em;}
    .bgtwocol .info_content h3{font-size: 24px;}
    .bgtwocol .btn_content{padding: 0 2em;}
}
@media screen and (max-width: 767px){
    .bgtwocol .column_content{padding: 0;}
    .bgtwocol .firstcol{ padding:0em 1em 5em;}
    .bgtwocol .secondcol{width: 100%;position: relative;padding:0em 1em 5em; }
    .bgtwocol .secondcol .bg_container{background-size: auto 100%;}
    .bgtwocol .btn_content{padding: 0 1em;}
} 

/*宣传片
<div class="column_video">
    <div class="column_content">
        <div class="video_container" data-mp4="static/images/video.mp4">
            <div class="bg_container"><img src="/hfpl/lib/template/static/css/static/images/indexvideo.jpg"></div>
        </div>
    </div>
</div>*/
.column_video {padding: 0;}
.column_video .video_container{height: 0; overflow: hidden; padding: 0 0 35.52%; position: relative;}
.column_video .video_container .bg_container{position: absolute; left:0; right: 0; bottom:0;top:0;}
.column_video .video_container .bg_container:after{content: '';position: absolute;left:0; right: 0; bottom:0;top:0; background: rgba(0, 0, 0,.2);}
.column_video .video_container .vodeo_slogan{position: absolute;left: 50%; top:50%; white-space: nowrap;display: inline-block; color: #FFF;transform: translate(-50% , -50%); font-size: 20px; line-height: 300%; cursor: pointer;}
.column_video .video_container .vodeo_slogan:before{content: ''; display: block;margin: 0 auto; background:url(/hfpl/lib/template/static/images/indexvideo_icon.png) no-repeat center center; background-size: 100%; width: 3.2em; height: 0; padding: 0 0 3.2em; overflow: hidden;}
@media screen and (max-width: 767px){
    .column_video .video_container{padding: 0 0 48%;}
    .column_video .video_container .vodeo_slogan:before{width: 2.4em; padding: 0 0 2.4em;}
}
@media screen and (max-width: 408px){
    .column_video .video_container{padding: 0 0 56.25%;}
    .column_video .video_container .vodeo_slogan:before{width: 1.5em; padding: 0 0 1.5em;}
}