@charset "utf-8";
/* CSS Document */


#leader{margin: 0 auto; padding: 60px 0;}
#leader>.title{ text-align: center; margin: 0 auto;padding: 50px 0;}
#leader>.title>h3{ font-size: 4rem; font-weight: normal; color: #333; margin: 0 auto;}

#leader>.display{margin: 0 auto; padding: 50px 0;}
#leader>.display .list>ul>li{display: block;float: left; width: 31.33%; margin-bottom: 3%; margin-right:3%; transition: all .35s; }
#leader>.display .list>ul>li:nth-child(3n){ margin-right: 0;}
#leader>.display .list>ul>li>a{display: block;}
#leader>.display .list>ul>li>a .img{ position: relative; overflow: hidden;}
#leader>.display .list>ul>li>a .img:after{position: absolute;z-index: 10; left: 0;bottom: 0;width: 100%;height: 0; background: rgba(0,91,91,.4); content: ''; transition: all .6s;}
#leader>.display .list>ul>li>a .img>img{width: 100%;height: auto; transition: all 1s;}
#leader>.display .list>ul>li>a .box{padding: 20px 5px;}
#leader>.display .list>ul>li>a .box>.tit{ height: 50px; font-size: 1.8rem;color: #333; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;overflow: hidden;transition: all .35s;}
#leader>.display .list>ul>li>a .box>.time{ display: none; background: #f7f7f7; margin-top: 10px; padding: 8px 16px; font-size: 1.4rem; color: #999;}
#leader>.display .list>ul>li>a:hover .tit{color: rgba(0,91,97,1);}
#leader>.display .list>ul>li>a:hover .img>img{transform: scale(1.1);}
#leader>.display .list>ul>li>a:hover .img:after{height: 100%;}

#leader>.view{margin: 0 auto; padding: 150px 0 50px 0;}
#leader>.view .title{text-align: left; font-size: 4rem; color: #333; padding: 20px 0;}
#leader>.view .group{text-align:left; border-bottom: 1px solid #ddd; padding: 30px 0;}
#leader>.view .group>.counts{display: inline-block;float: left; font-size: 1.6rem; color: #666;padding-right: 50px;}
#leader>.view .group>.time{ position: relative; display: inline-block;float: left;font-size: 1.6rem; color: #666; padding: 0 50px;}
#leader>.view .group>.time:after{position: absolute;z-index: 1; left: 0;top: 50%; margin-top: -7px; width: 1px; height: 14px; background: #ccc;content: ''; }
#leader>.view .group>.time:before{position: absolute;z-index: 1; right: 0;top: 50%; margin-top: -7px; width: 1px; height: 14px; background: #ccc;content: ''; }
#leader>.view .group>.share{display: inline-block;float: left; padding-left:50px; box-sizing: border-box; width: 300px;}
#leader>.view .group>.share>.tit{display: block;float: left; font-size: 1.6rem; color: #666;}
#leader>.view .group>.share>.bshare-custom{float: left;}
#leader>.view .group>.share>.bshare-custom a{ margin-left: 20px; padding-left: 0!important; background: none!important; text-decoration: none!important;}
#leader>.view .group>.share>.bshare-custom a.iconfont{font-size: 2rem; color: #999!important; transition: all .35s;}
#leader>.view .group>.share>.bshare-custom a:hover{color: rgba(14,189,201,1)!important;}
#leader>.view .content{ padding: 50px 0;margin: 0 auto;font-size: 1.6rem; color: #333; line-height: 2.8rem;}
#leader>.view .content img{ max-width: 60%;height: auto; vertical-align: middle;}
#leader>.view .content>p{ margin-bottom: 20px;}

#leader>.view .pageurl{ border-top: 1px solid #ddd; padding: 30px 0;}
#leader>.view .pageurl>.url{display: block;width: 70%;}
#leader>.view .pageurl>.url>a{display: block; padding: 6px 0; font-size: 1.4rem; color: #666;}
#leader>.view .pageurl>.url>a>strong{ position: relative; padding-right: 13px;}
#leader>.view .pageurl>.url>a>strong:after{position: absolute;z-index: 1; right: 0;top: 0; width: 10px; height: 100%; content: '：';}
#leader>.view .pageurl>.url>a>span{color: #666; transition: all .35s;}
#leader>.view .pageurl>.url>a>span.no{color: #999!important; text-decoration: none!important;}
#leader>.view .pageurl>.url>a:hover span{color: rgba(0,91,97,1); text-decoration: underline;}
#leader>.view .pageurl>.back{width: 160px; text-align: center;}
#leader>.view .pageurl>.back>a{display: block; padding: 10px 0; font-size: 1.6rem; color: rgba(14,189,201,1); border: 2px solid rgba(14,189,201,1); border-radius: 5px; transition: all .35s;}
#leader>.view .pageurl>.back>a:hover{background: rgba(14,189,201,1); color: #fff;}



@media only screen and (max-width: 1360px) {

    #leader>.display .list>ul>li{width: 48%; margin-right: 0; }
    #leader>.display .list>ul>li:nth-child(even){ float: right;}

}


@media only screen and (max-width: 980px) {

    #leader{padding: 30px 0;}
    #leader>.title{padding: 10px 0;}
    #leader>.title>h3{ font-size: 3.2rem;}
    #leader>.display .list>ul>li>a .box>.tit{font-size: 1.8rem;}


    #leader>.view .title{text-align: center; font-size: 3.2rem;}
    #leader>.view .group{text-align:center;}
    #leader>.view .group>.counts{float: none; padding-right: 30px;}
    #leader>.view .group>.time{float: none; padding: 0 30px;}
    #leader>.view .group>.share{float: none; width: auto; padding-left: 30px;}
}

@media only screen and (max-width: 860px) {

    #leader>.view .content{ font-size: 1.4rem; line-height: 2.4rem;}
    #leader>.view .content img{ max-width: 100%;}

}


@media only screen and (max-width: 640px) {

    #leader>.title>h3{ font-size: 2.8rem;}

    #leader>.display .list>ul>li{width: 100%; float: none; }
    #leader>.display .list>ul>li:nth-child(even){ float: none;}
    #leader>.display .list>ul>li>a .box>.tit{ font-size: 1.6rem; height: auto; -webkit-line-clamp: none;}



    #leader>.view .title{font-size:2.8rem;}
    #leader>.view .group>.counts{ font-size: 1.4rem;}
    #leader>.view .group>.time{font-size: 1.4rem;}
    #leader>.view .group>.share>.tit{font-size: 1.4rem;}
    #leader>.view .group>.share>.bshare-custom a{ margin-left: 10px;}


    #leader>.view .pageurl>.url{float: none; width: 100%;}
    #leader>.view .pageurl>.url>a{display: block; padding: 10px 0; text-align: center; margin-bottom: 5px; font-size: 1.6rem; color: #666; border: 2px solid #ccc; border-radius: 5px; transition: all .35s;}
    #leader>.view .pageurl>.url>a>strong{font-weight: normal; padding-right: 0;}
    #leader>.view .pageurl>.url>a>span{ display: none;}
    #leader>.view .pageurl>.back{width: 100%; float: none;}
    #leader>.view .pageurl>.back>a{background: rgba(14,189,201,1); color: #fff;}


}

@media only screen and (max-width: 520px) {

    #leader>.title>h3{ font-size: 2.4rem;}
    #leader>.display{padding:30px 0;}

    #leader>.view{padding: 80px 0 0 0;}
    #leader>.view .title{font-size:2.2rem;}
    #leader>.view .group{padding: 20px 0;}
    #leader>.view .group>.counts{padding-right: 10px; font-size: 1.2rem;}
    #leader>.view .group>.time{font-size: 1.2rem;padding: 0 10px;}
    #leader>.view .group>.time:before{display: none;}
    #leader>.view .group>.share{display: block; text-align: center; padding:10px 0 0 0;}
    #leader>.view .group>.share>.tit{display: none;float: none;}
    #leader>.view .group>.share>.bshare-custom{display: inline-block;float: none;}


}