﻿#content {
    padding: 0px 8% 90px 8%;
}
    #content #asideMenu ul.list{
        margin:0;
        padding:0;
        list-style:none;
    }
        #content #asideMenu ul.list li{
            margin-bottom:30px;
        }
        #content #asideMenu ul.list li:last-child{
            margin-bottom:0;
        }
            #content #asideMenu ul.list li a.Level1{
                display:block;
                font-size:25px;
                font-weight:600;
                border-left:4px solid #575777;
                padding-left:10px;
                margin-bottom:10px;
            }
            #content #asideMenu ul.list li a.Level1:hover{
                color:#575777;
            }
                #content #asideMenu ul.list li a.Level1.active {
                    color: #dc2929;
                }

            #content #asideMenu ul.list li div.asideSubMenu{
                /*display:none;*/
                padding-top:5px;
                font-size:0;
            }
            #content #asideMenu ul.list li div.asideSubMenu.active{
                /*display:block;*/
            }
                #content #asideMenu ul.list li div.asideSubMenu a.Level2{
                    display:inline-block;
                    font-size:18px;
                    color:#a7a7a7;
                    background:#fff;
                    border:1px solid #a7a7a7;
                    padding:12px 2%;
                    margin:0 0 1px 1px;
                }


                #content #asideMenu ul.list li div.asideSubMenu a.Level2:first-child{
                    margin-left:0;
                }
                    #content #asideMenu ul.list li div.asideSubMenu a.Level2.active,
                    #content #asideMenu ul.list li div.asideSubMenu a.Level2.active:hover {
                        color: #dc2929;
                        border: 1px solid #dc2929;
                    }
                #content #asideMenu ul.list li div.asideSubMenu a.Level2:hover{
                    color:#888;
                    border:1px solid #888;
                }
    #content #caseList{
        margin-top:90px;
    }
        #content #caseList ul.list{
            margin:0;padding:0;
            list-style:none;
            list-style:none;
            text-align:center;
            font-size:0;
        }
            #content #caseList ul.list li{
                display:inline-block;
                width:31%;
                vertical-align:top;
                margin:15px;
                opacity:1;
            }
                #content #caseList ul.list li a{
                    display:block;
                    max-width:442px;
                    margin:0 auto;
                    position:relative;
                    color:#fff;
                }
                    #content #caseList ul.list li a img{}
                    #content #caseList ul.list li a .cover{
                        opacity:0;
                        position:absolute;left:0;right:0;top:0;bottom:0;
                        background:rgba(87, 87, 119, 0.9);
                        padding:32% 15%;
                        text-align:right;
                        -webkit-transition:0.25s ease-in-out;
                        -moz-transition:0.25s ease-in-out;
                        -o-transition:0.25s ease-in-out;
                        transition:0.25s ease-in-out;
                    } 
                    #content #caseList ul.list.devicePC li a:hover .cover,
                    #content #caseList ul.list.deviceMobile li.aos-animate a .cover{
                        opacity:1;            
                        -webkit-transition:0.25s ease-in-out;
                        -moz-transition:0.25s ease-in-out;
                        -o-transition:0.25s ease-in-out;
                        transition:0.25s ease-in-out;
                    }
                        #content #caseList ul.list li a .cover h4.title{
                            font-size:28px;
                            margin:0;
                            text-align:left;
                            overflow:hidden;
                            white-space:nowrap;
                            text-overflow:ellipsis;
                            display:-webkit-box;
                            -webkit-line-clamp:1;
                            -webkit-box-orient:vertical;
                            white-space:normal;
                            max-height:32px;/*(=line-height * 幾行)*/
                        }
                        #content #caseList ul.list li a .cover p.text{
                            font-size:18px;
                            margin:15px 0;
                            text-align:left;
                            line-height:25px;
                            overflow:hidden;
                            white-space:nowrap;
                            text-overflow:ellipsis;
                            display:-webkit-box;
                            -webkit-line-clamp:2;
                            -webkit-box-orient:vertical;
                            white-space:normal;
                            max-height:50px;/*(=line-height * 幾行)*/
                        }
                        #content #caseList ul.list li a .cover span.more{
                            display:inline-block;
                            font-size:15px;
                            padding:8px 12px;
                            border:0.75px solid #fff;
                            border-radius:3px;
                        }
                        #content #caseList ul.list.devicePC li a .cover span.more:hover{
                            background:rgba(255, 255, 255, 0.1);
                        }
        
        #content #caseList #pagenav{
            text-align:center;
            margin-top:40px;
            font-size:0;
        }
            #content #caseList #pagenav a{
                display:inline-block;
                padding:8px 10px;
                color:#282828;
                font-family:Calibri;
                font-size:19px;
            }
            #content #caseList #pagenav a.page{
                color:#bbb;
            }
            #content #caseList #pagenav a.page:hover{
                color:#aaa;
            }
            #content #caseList #pagenav a.page.active,
            #content #caseList #pagenav a.page.active:hover{
                color:#282828;
            }
            #content #caseList #pagenav a.fore{
                padding-left:16px;
                background:url('../images/icon_fore.png') left 55% no-repeat;
            }
            #content #caseList #pagenav a.prev{
                padding-left:9px;
                background:url('../images/icon_prev.png') left 55% no-repeat;
            }
            #content #caseList #pagenav a.next{
                padding-right:9px;
                background:url('../images/icon_next.png') right 55% no-repeat;
            }
        
            #content #caseList #pagenav a.last{
                padding-right:16px;
                background:url('../images/icon_last.png') right 55% no-repeat;
            }



@media screen and (max-width:1546px){
    #content #caseList ul.list li{
        margin:10px;
    }
}
@media screen and (max-width:1200px){
    #content #caseList ul.list li a .cover{
        padding:31% 15%;
    }
        #content #caseList ul.list li a .cover h4.title{
            font-size:26px;
            max-height:29px;/*(=line-height * 幾行)*/
        }
}
@media screen and (max-width:1100px){
    #content #caseList ul.list li{
        width:47%;
        margin:10px;
    }
}
@media screen and (max-width:820px){
    #content #caseList ul.list li{
        width:46%;
        margin:8px;
    }
        #content #caseList ul.list li a .cover h4.title{
            font-size:25px;
            max-height:28px;/*(=line-height * 幾行)*/
        }
}
@media screen and (max-width:750px){
    #content #caseList ul.list li{
        width:82%;
        margin:0 0 15px 0;
    }
}
@media screen and (max-width:635px){
    #content #caseList ul.list li{
        width:100%;
        margin:0 0 15px 0;
    }
}
@media screen and (max-width:420px){
    #content{
        padding:60px 6%;
    }
        #content #caseList ul.list li a .cover{
            padding:30% 12%;
        }
            #content #caseList ul.list li a .cover h4.title{
                font-size:24px;
                max-height:27px;/*(=line-height * 幾行)*/
            }
        #content #caseList #pagenav{
            position:relative;
        }
            #content #caseList #pagenav a.fore,
            #content #caseList #pagenav a.prev,
            #content #caseList #pagenav a.next,
            #content #caseList #pagenav a.last{
                position:absolute;bottom:-40px;
            }
            #content #caseList #pagenav a.fore{left:0;}
            #content #caseList #pagenav a.prev{left:57px;}
            #content #caseList #pagenav a.next{right:57px;}
            #content #caseList #pagenav a.last{right:0;}
}
@media screen and (max-width:350px){
    #content #caseList ul.list li a .cover{
        padding:28% 12%;
    }
}