@charset "utf-8";

#knowledge{ margin: 0 auto;}

#knowledge>.display{margin: 100px auto;}
#knowledge>.display .lists{ margin: 0 auto;}
#knowledge>.display .lists>ul{margin: 0 auto;}
#knowledge>.display .lists>ul>li{display: block;float: left;width:48%; margin-bottom: 3%; background: #fff; position: relative; box-sizing: border-box;padding: 30px; transition: all .35s; }
#knowledge>.display .lists>ul>li:after{position: absolute;z-index: 10; right: 50px; top: 50%; transform: translateY(-50%); font-family: iconfont; font-size: 2rem; color: #ccc; opacity: 0; content: '\e65f';transition: all .35s;}
#knowledge>.display .lists>ul>li:nth-child(even){float: right;}
#knowledge>.display .lists>ul>li>a:before, #knowledge>.display .lists>ul>li>a:after { content: ""; display: table; }
#knowledge>.display .lists>ul>li>a:after { clear: both; }
#knowledge>.display .lists>ul>li>a { zoom: 1; }
#knowledge>.display .lists>ul>li:nth-child(3n){margin-right: 0;}
#knowledge>.display .lists>ul>li .ico{ text-align: left; width: 60px; line-height: 80px; float: left; overflow: hidden;}
#knowledge>.display .lists>ul>li .ico>i{font-size: 3.6rem; color: #d70d19;transition: all .35s;}
#knowledge>.display .lists>ul>li .box{ position: relative; width: 76%; float: left; padding: 20px;box-sizing: border-box;}
#knowledge>.display .lists>ul>li .box>.title{font-size:1.8rem; font-weight: bold; color: #333;  transition: all .35s; margin-bottom: 15px;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2; overflow: hidden;}
#knowledge>.display .lists>ul>li .box>.intro{ margin: 5px auto; font-size: 1.4rem; line-height: 2rem; color: #999; display: -webkit-box; -webkit-box-orient: vertical;  -webkit-line-clamp:2;  overflow: hidden; transition: all .35s;}
#knowledge>.display .lists>ul>li .box>.time{ position: relative; font-size: 1.4rem; color: #666;}
#knowledge>.display .lists>ul>li:hover{box-shadow: 4px 3px 20px rgba(0,0,0,.1);}
#knowledge>.display .lists>ul>li:hover:after{opacity: 1; right: 40px;}
#knowledge>.display .lists>ul>li:hover .box>.title{ color: #d70d19;}


#knowledge>.view{ position: relative; margin:0 auto; width: 90%;}
#knowledge>.view>.title{ text-align: left;font-size: 3.6rem; font-weight:700;color: #333; border-bottom: 1px solid #ddd; padding: 50px 30px 10px 0; }
#knowledge>.view>.close{ position: absolute;z-index: 43;right: 0;top: 30px; transition: all .5s;}
#knowledge>.view>.close>i{font-size: 3.6rem; font-weight: 700; color:#d70d19; cursor: pointer;}
#knowledge>.view>.close:hover{transform:rotate(180deg);}
#knowledge>.view>.content{ position: relative; margin:40px auto 0 auto; overflow-y: auto;text-align: left; font-size: 1.6rem; line-height: 2.4rem; color: #666; width: 100%;padding: 5px 0; box-sizing: border-box;}
#knowledge>.view>.content::-webkit-scrollbar {width:5px;height: 1px;}
#knowledge>.view>.content::-webkit-scrollbar-thumb {background:#666;}
#knowledge>.view>.content::-webkit-scrollbar-track { box-shadow: 0 0 0 rgba(255,255,255,1); border-radius: 10px;background: none;}
#knowledge>.view>.content>p{padding: 5px 0;}
#knowledge>.view>.content table{border: 1px solid #ddd;box-sizing: border-box; width: 100%;}
#knowledge>.view>.content table td{padding: 10px; font-size: 1.4rem; border-bottom: 1px solid #ddd;border-right: 1px solid #ddd;}
#knowledge>.view>.content img{max-width: 100%;height: auto;}


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

    #knowledge>.display .lists>ul>li .box{ width: 80%;}
    #knowledge>.display .lists>ul>li .box>.tit{font-size:1.8rem;}



}

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

    #knowledge>.view>.title>.tit{font-size: 3rem;}

}


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

    #knowledge>.display .lists>ul>li .box{ width: 75%;}

}


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





}

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

    #knowledge>.display .lists>ul>li{float: none; width: 100%;}
    #knowledge>.display .lists>ul>li:nth-child(even){float: none;}
    #knowledge>.display .lists>ul>li .box{width: 86%;}
    #knowledge>.display .lists>ul>li .box>.tit{font-size:1.6rem;}

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


}


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

    #knowledge>.display{margin: 0 auto;padding: 30px 0;}
    #knowledge>.display .lists>ul>li .box{width: 80%;}

    #knowledge>.view>.title>.tit{font-size: 2rem;}
    #knowledge>.view>.close>i{font-size: 3.2rem; }


}


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

    #knowledge>.display .lists>ul>li .ico{float: none; width: 100%;}
    #knowledge>.display .lists>ul>li .ico>i{font-size: 4rem;}
    #knowledge>.display .lists>ul>li .box { width: 100%; float: none; padding:  0; }
    #knowledge>.display .lists>ul>li .box>.txt{ font-size: 1.3rem; }


}