﻿#content{
    overflow:hidden;
    padding:90px 8%;
}
    #content #articleList{        
        float:right;
        width:calc(100% - 264px);
        padding-left:80px;
    }
        #content #articleList .group{
            padding:40px 0 50px;
            background:url('../images/about/dashed.png') 0 bottom repeat-x;
        }
        #content #articleList .group:first-child{
            padding-top:0;
        }
        #content #articleList .group:last-child{
            background:no-repeat;
            padding-bottom:0;
        }
            #content #articleList .group a{
	            display:block;
            }
                    #content #articleList .group a h4.title{
                        margin:0 0 10px;
                        font-size:30px;
                    }
                    #content #articleList .group a time{
                        display:block;
                        margin-bottom:20px;
                        color:#939393;
                        font-family:Calibri;
                    }
                    #content #articleList .group a div.info{
                        font-size:0;
                        position:relative;
                    }

                        #content #articleList .group a div.info img{
                            display:inline-block;
                            vertical-align:top;
                            width:340px;
                        }
                        #content #articleList .group a div.info div.text{
                            display:inline-block;
                            vertical-align:top;
		                    width:calc(100% - 340px);
                            padding-left:25px;
                        }

                            #content #articleList .group a div.info div.text .searchText {
                                color: #485894;
                                background-color: #ffffa0;
                            }
                            #content #articleList .group a div.info div.text p {
                                margin: 0;
                                font-size: 18px;
                                line-height: 1.9rem;
                                overflow: hidden;
                                white-space: nowrap;
                                text-overflow: ellipsis;
                                -ms-text-overflow: ellipsis;
                                display: -webkit-box;
                                -webkit-line-clamp: 6;
                                -webkit-box-orient: vertical;
                                white-space: normal;
                                max-height: 150px; /*(=line-height * 幾行)*/
                            }
                            /*#content #articleList .group a div.info div.text p span.dot3{
                                display:inline-block;
                                position:relative;
                            }
                            #content #articleList .group a div.info div.text p span.dot3::after{
                                content:'...';
                                font-weight:bold;
                                position:absolute;
                                bottom:0;
                                right:0;
                                padding:0;
                                background:#fff;
                                color:#575777;
                            }*/
                        #content #articleList .group a div.info span.more{
                            display:block;
                            font-size:18px;
                            background:#666;
                            color:#fff;
                            position:absolute;right:0;bottom:0;
                            padding:12px 16px;
                        }
                        #content #articleList .group a div.info span.more:hover{
                            background:#939393;
                        }
        #content #articleList #pagenav{
            text-align:center;
            margin-top:40px;
            font-size:0;
        }
            #content #articleList #pagenav a{
                display:inline-block;
                padding:8px 10px;
                color:#282828;
                font-family:Calibri;
                font-size:19px;
            }
            #content #articleList #pagenav a.page{
                color:#bbb;
            }
            #content #articleList #pagenav a.page:hover{
                color:#aaa;
            }
            #content #articleList #pagenav a.page.active,
            #content #articleList #pagenav a.page.active:hover{
                color:#282828;
            }
            #content #articleList #pagenav a.fore{
                padding-left:16px;
                background:url('../images/icon_fore.png') left 55% no-repeat;
            }
            #content #articleList #pagenav a.prev{
                padding-left:9px;
                background:url('../images/icon_prev.png') left 55% no-repeat;
            }
            #content #articleList #pagenav a.next{
                padding-right:9px;
                background:url('../images/icon_next.png') right 55% no-repeat;
            }
        
            #content #articleList #pagenav a.last{
                padding-right:16px;
                background:url('../images/icon_last.png') right 55% no-repeat;
            }


@media screen and (max-width:1140px){
    #content #asideMenu{
        border:none;
        padding:0;
        margin-top:120px;
    }
    #content #articleList{
        float:none;
        width:100%;
        padding-left:0;
    }
        #content #articleList .group a div.info img{
		    width:200px;	
	    }
	    #content #articleList .group a div.info div.text{
		    width:calc(100% - 200px);
	    }
            #content #articleList .group a div.info div.text p{
                -webkit-line-clamp:3;
                 max-height:88px;/*75*//*(=line-height * 幾行)*/
            }
}
@media screen and (max-width:450px){
    #content #articleList .group a div.info{
        text-align:right;
    }
        #content #articleList .group a div.info img{
            display:block;
            width:100%;
            margin:0 auto;
        }
        #content #articleList .group a div.info div.text{
            display:block;
            width:100%;
            padding-left:0;
            margin:12px 0;
            text-align:left;
        }
        #content #articleList .group a div.info span.more{
            display:inline-block;
            position:relative;right:auto;bottom:auto;
        }
}
@media screen and (max-width:420px){
    #content{
        padding:60px 6%;
    }
        #content #articleList #pagenav{
            position:relative;
        }
            #content #articleList #pagenav a.fore,
            #content #articleList #pagenav a.prev,
            #content #articleList #pagenav a.next,
            #content #articleList #pagenav a.last{
                position:absolute;bottom:-40px;
            }
            #content #articleList #pagenav a.fore{left:0;}
            #content #articleList #pagenav a.prev{left:57px;}
            #content #articleList #pagenav a.next{right:57px;}
            #content #articleList #pagenav a.last{right:0;}
}