@charset "utf-8";
.banner2{ width: 100%; height: 0px; padding-bottom: 29.79%; position: relative; z-index: -1;}
.banner2::before{ content: ''; display: block; width: 100%; height: 126px; background: url(../images/zi-banner_gray.png) no-repeat; background-size: cover; position: absolute; top: 0px;}
.banner2 img{ width: 100%;}
.centerIntro{ width: 49.5%; }
.mode .title.gp-f36{ color: #b48952; line-height: 36px; font-family: FZZhengHeiS-DB-GB;}
.mode .title.gp-f36 a{ color: #b48952; line-height: 36px; font-family: FZZhengHeiS-DB-GB;}
.mode001{ margin-top: -377px;}
/* .mode001{ padding-top: 195px;} */
.mode001 .summary{ color: #121d36; line-height: 30px; margin: 32px 0;}
.mode001 .zhuce a{ display: block; background-color: #fff; color: #3e44d0; padding: 10px 30px; width: 132px; text-align: center; height: 37px; line-height: 17px; box-sizing: border-box; position: relative; z-index: 1;}
.mode002{ margin-top: 108px;}
.rowCont{ margin-top: 54px;}
.slick{ vertical-align: bottom; position: relative;}
.slider-for{ width:46.11%; float: left; box-sizing: content-box; border: 5px solid #f3f7fe; }
.slider-for li{ position: relative;}
.slider-for li a{ display: block;}
.slider-title{ width: 49.23%; float: right; position: absolute; top: 0px; right: 0px;}
.slider-title .title{ line-height: 36px; margin-top: 6px;}
/* .slider-for li .title{ width: 100%; position: absolute; left: calc(100% + 50px); top: 0px;} */
.slider-for .img.gp-img-responsive{ padding-bottom: 56.9672%;}
.slider-nav{ margin-top: 68px; margin-right: -20px; z-index: 9;}
.slider-nav li .title{ display: none;}
.slider-nav li.slick-slide{ box-sizing: border-box;}
.slider-nav li.slick-slide a{ display: block; padding-left: 20px; padding-right: 20px; overflow: hidden;}
.slider-menu{ width: 49.23%; float: right;}
.slider-nav{ width: 52.2%; float: right;}
.slider-nav .img.gp-img-responsive{ padding-bottom: 56.25%;}
.slider-menu{ margin-top: 62px;}
.slider-menu .line{ width: calc(100% - 100px); height: 1px; background-color: #c3d9f8; margin-top: 25px;}
.slider-menu .slick-prev,.slider-menu .slick-next{ width: 50px; height: 50px; background: url(../images/slider_prev.png) no-repeat;}
.slider-menu .slick-next{ background: url(../images/slider_next.png) no-repeat;}
.slider-nav .slick-prev.slick-arrow,.slider-nav .slick-next.slick-arrow,.slider-title .slick-prev.slick-arrow,.slider-title .slick-next.slick-arrow{ display: none !important;}
.rowCont .more{ text-align: center;}
.rowCont .more a{ display: inline-block; padding: 10px 25px; margin: 60px auto; border: 1px solid #c3d9f8; color: #666;}
.rowCont .more a:hover{ color: #BB271B;}

/* mode003 */
.mode003{ background: url(../images/zi-mode003_bg.png) no-repeat; background-position: top; background-size: 100% auto; padding-top: 50px;}
.mode003 .title.gp-f36{ margin-bottom: 50px; text-align: center;}
.mode003 .lf{ width: 6%;}
.mode003 .rt{ width: calc(100% - 6%);}
.mode003 .lf a{ display: block; color: #666; line-height: 28px; margin-bottom: 56px;}
.mode003 .lf .on a{ color: #000;}
.mode003 .rt .box{ display: none;}
.mode003 .rt .box.on{ display: block;}
.mode003 .box{ background-color: rgba(194, 217, 248, .2);}
.mode003 .box ul{ padding: 30px 15px;}
.mode003 .box li{ margin-bottom: 23px;}
.mode003 .box li a{ display: block; padding: 0 15px;}
.mode003 .box .img{ position: relative;}
.mode003 .box .img::before{ content: ''; display: block; width: 40px; height: 40px; background: url(../images/mode003_video_icon.png) no-repeat; position: absolute; z-index: 2; left: 30px; bottom: 30px; transition: all .2s ease;}
.mode003 .rt .box:last-child .img::before{ background: url(../images/mode003_MP3_icon.png) no-repeat;}
.mode003 .box li:hover .img::before{ left: 50%; bottom: 50%; z-index: 2; margin-left: -20px; margin-bottom: -20px;}
.mode003 .box .title{ line-height: 28px; margin-top: 15px; margin-bottom: 3px; color: #121d36;}
.mode003 .box li:hover .title{ color: #BB271B;}
.mode003 .box .date{ line-height: 28px; color: #b48952; padding-left: 22px; position: relative;}
.mode003 .box .date::before{ content: ''; display: block; width: 12px; height: 14px; background: url(../images/zi-date_icon.png) no-repeat; position: absolute; left: 0px; top: 6px;}
.mode003 .rt .img{ padding-bottom: 56.247%;}
.mode003 .rowCont .more a{ margin-top: 7px;}

/* 首页音频列表 */
/* .mp3 .date{ float: right; color: #333; padding-top: 0; padding-bottom: 15px; border-bottom: 1px solid #e5e5e5;}
.mp3 li{ margin-bottom: 30px;}
.mp3 li a{ padding: 0 40px;}
.mp3 li:hover a::before,.textList li:hover a::after{ display: none;}
.mp3 li .title{ padding-left: 27px; position: relative; color: #333; padding-bottom: 15px; border-bottom: 1px solid #e5e5e5; transition: all .3s ease; margin-bottom: 4.5px;}
.mp3 li:hover .title,.textList li:hover .date{ color: #121d36; text-indent: .4em;}
.mp3 li .title::before{ content: ''; display: block; width: 12px; height: 13px; background: url(../images/zi-video-listIcon1.png) no-repeat; background-size: cover; position: absolute; top: 8px; left: 0;}
.mp3 li:hover .title::before{ background: url(../images/zi-video-listIcon2.png) no-repeat;} */

/* mode004 */
.mode004{ padding-top: 80px;}
.mode004 .rowCont{ margin-top: 50px;}
.mode004 .rowCont.on{ display: block;}
.mode004 .rowCont.off{ display: none;}
.mode004 .title.gp-f36{ text-align: center;}
.mode004 .title span{ display: inline-block; color: #999; line-height: 36px; position: relative; padding-left: 50px;}
.mode004 .title span.on{ color: #b48952; line-height: 36px; font-family: FZZhengHeiS-DB-GB; font-size: 3.6rem;}
.mode004 .title span:first-child{ padding-left: 0;}
.mode004 .title span:first-child::before{ display: none;}
.mode004 .title span::before{ content: ''; display: block; width: 1px; height: 24px; background-color: #999; position: absolute; left: 25px; top: 4px;}
.mode004 li{ margin-bottom: 50px;}
.mode004 li a{ display: block; padding-left: 17px; position: relative; overflow: hidden;}
.mode004 li:nth-of-type(odd) a{ border-right: 1px solid #d2d2d2;  padding-right: 30px;}
.mode004 li:nth-of-type(even) a{ padding-left: 47px;}
.mode004 li span{ line-height: 36px; max-height: 108px;}
.mode004 .qustion{ margin-bottom: 2px;}
.mode004 li a::before{ content: ''; display: block; width: 7px; height: 7px; background: url(../images/mode004_icon.png) no-repeat; position: absolute; left: 0px; top: 15px}
.mode004 li:nth-of-type(even) a::before{ left: 30px;}
.mode004 .qustion .lf,.mode004 .answer .lf{ font-weight: bold; color: #3e44d0;}
.mode004 .qustion .rt{ font-weight: bold;}
.mode004 .answer .lf{ color: #4c82fc;}
.mode004 .answer .lf{ width: 6.89%; display: block;}
.mode004 .answer .rt{ width: calc(100% - 6.89%); /* display: block; */}
.mode004 .rowCont .more a{ margin-top: 9px; margin-bottom: 0px;}

/* 自适应 */

@media screen and (max-width:1600px) {
    .mode001{ margin-top: -340px;}
    .slider-nav{ margin-top: 55px;}
}
@media screen and (max-width:1440px) {
    .mode001 .summary{ margin: 15px 0;}
    .mode001{ margin-top: -320px;}
}
@media screen and (max-width:1400px) {
    .mode001{ margin-top: -280px;}
    .rowCont{ margin-top: 40px;}
    .slider-menu,.slider-nav{ margin-top: 48px;}
}
@media screen and (max-width:1240px) {
    .mode001{ margin-top: -250px;}
    .mode001 .summary{ margin: 10px 0; line-height: 24px;}
}
@media screen and (max-width:1100px) {
    .mode001{ margin-top: -190px;}
    .mode001 .zhuce a{
        box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.12);
        -moz-box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.12);/*firefox*/
        -webkit-box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.12);/*webkit*/
    }
}
@media screen and (max-width:1024px) {
    .slider-menu, .slider-nav{ margin-top: 40px;}
}
@media screen and (max-width:996px) {
    .banner2::before{ display: none;}
    /* .mode001{ margin-top: -240px;} */
    .slider-for, .slider-nav{ width: 100%;}
    .slider-nav { margin-left: 0px; margin-right: 0px;}
    .slider-nav .slick-list{ margin-left: -20px;}
    .slider-menu{ width: 60%; margin-top: -15px;}
    .slider-title{ position: relative; float: left; margin-left: 8%;}
    .mode003 .box li{ width: 50%;}
    .gp-avg-sm-3>li{ padding-left: 0px;}
    .rowCont .more a{ margin: 30px;}
    .mode002{ margin-top: 50px;}
}
@media screen and (max-width:768px) {
    .centerIntro { width: 60%;}
}
@media screen and (max-width:540px) {
    .mode001{ margin-top: -50px;}
    .centerIntro{ width: 100%;}
    .slider-nav{ display: none;}
    .slider-menu { margin-top: -25px;}
    .rowCont .more a{ margin: 20px;}
    .mode003 .box li{ width: 100%;}
    .mode003 .box ul{ padding: 30px 15px 10px;}
    .mode004{ padding-top: 50px;}
    .mode004 li:nth-of-type(even) a{ padding: 0 30px;}
    .mode004 li:nth-of-type(even) a::before{ left: 0;}
}
@media screen and (max-width:480px) {
    .mode001{ margin-top: 20px;}
    .mode001 .zhuce a{ margin: 0 auto;}
    .mode004 li{ margin-bottom: 20px;}
}
@media screen and (max-width:414px) {
}
@media screen and (max-width:320px) {
}