#containter {
    position:relative;
    background-color:#f2f2f2
}

.top-menu {
    position: relative;
    width: 100%;
    margin: 0 auto;
    color: #666;
    border-bottom: 1px solid #CCC;
    text-align: center;
    line-height: 70px;
    background-color: white;
    z-index: 7;
    cursor: pointer;
    font-size: 22px;
}

.menu-icon {
    padding:0 10px 0 0;
    color: #999;
    display:inline-block;
}

.search-text {
    display: none;
    overflow: hidden;
}

/*全部分類 - 選單+搜尋 */
.menu-list {
    display:none;
    position: absolute;
    width: 100%;
    top: -500px;
    /*background-color: white;*/
    z-index: 0;
    box-sizing: border-box;
}
.list-show {

}

.list-hidden {

}
.menu-search {
    position: relative;
    height: 60px;
    padding: 8px;
    line-height: 60px;
    border-bottom: 1px solid #e4e4e4;
    cursor: pointer;
    z-index: 0;
    color: #666666;
    background-color: #FFFFFF;
}

    .search_inputOutter:before {
        position: absolute;
        font-family: FontAwesome;
        top: 8px;
        left: 30px;
        font-size:120%;
        content: "\f002";
        color: #ABABAB;
    }


    .menu-search .search_input {
        border: 0px;
        outline: none;
        color: #009bdf;
        background-color: #E8E8E8;
        margin-left: 10px;
        padding-left: 22px;
        font-size: 120%;
        height: 100%;
        width: 93%;
    }
    .menu-list-item {
        position: relative;
        height: 80px;
        font-size:130%;
        line-height: 80px;
        border-bottom: 1px solid #e4e4e4;
        padding-left: 38px;
        cursor: pointer;
        z-index: 0;
        color: #777;
        background-color: #FFFFFF;
    }
        .menu-list-item i {
            position: absolute;
            right: 25px;
            top: 25px;
            display: inline-block;
            width: 20px;
            height: 20px;
            font-size:120%;
        }

.article-list {
    background: #f2f2f2;
    padding-bottom: 45px;
    width: 88%;
    margin: 0 auto;
    padding: 20px 12px 20px 12px;
    box-sizing: border-box;
}
    .article-list .article-item {
        margin-bottom: 20px;
        padding: 1.5em;
        background: #fff;
        border: 1px solid #ddd;
        border-radius: 9px;
        overflow: hidden;
        position:relative;
        min-height:190px;
    }
    .article-list .article-item-horiz{
         cursor: pointer;
    }
    .article-list .article-item-horiz .article-item-image-box{
        display: inline-block;
        width:30%;
        vertical-align: top;
    }
        .article-list .article-item-horiz .article-item-image {
            position:absolute;
        }

    .article-list .article-item-image {
        margin: 8px 0;
        max-height: 190px;
        overflow: hidden;
        margin-right: 1em;
    }
        .article-list .article-item-horiz .article-item-image .fileNameImg{
            display: block;
            width: 150px;
            height: 150px;
            background-size: cover !important;
            background-position-x:50% !important;
            border-radius:50%;
        }
        .article-list .article-item-horiz .article-item-image time{
            display:block;
            text-align:center;
            margin-top:10px;
            font-size:120%;
            color:#2b9ee5;
        }

    .article-list .article-item-horiz .article-item-content {
        padding-left:180px;
    }
    .article-list .article-item h3 a {
        text-decoration: none;
        color: #333;
        font-size: 210%;
        font-weight:bold;
    }
    .article-list .article-item-summary {
        font-size: 18px;
        color: #666;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 4;
        -webkit-box-orient: vertical;
        line-height:1.5em;
    }

.article-item-title {
    margin-bottom:.5em;
    margin:10px 0 20px 0;
}
    .article-item-title.descriptionNull{
        margin-top:50px;
    }
.article-item-time{
    font-size: 160%;
}


/*-------------------------------------------
@media
-------------------------------------------*/
/* i pad*/
@media screen and (max-device-width:768px){
        /*.article-list .article-item-horiz .article-item-image {
            width: 180px;
            height: 180px;
        }
    .article-list .article-item-horiz .article-item-content {
        width: 64%;
        padding-left:30px;
    }*/
}
/* i6 Plus - landscape */
@media screen and (max-device-width:736px){
    .article-item-title{
        margin:0 0 10px 0;
    }
}
/* i6 - landscape */
@media screen and (max-device-width:667px){
}
/* S5 - landscape */
@media screen and (max-device-width:640px){
    
}
/* i5 - landscape */
@media screen and (max-device-width:568px){
        .article-list .article-item-horiz .article-item-image .fileNameImg{
            width: 120px;
            height: 120px;
        }
        .article-list .article-item-horiz .article-item-content{
            padding-left:142px;
        }
        .article-list .article-item h3 a{font-size:180%;}
        .article-item-time{font-size:130%;}
}
/* i6 Plus */
@media screen and (max-device-width:414px){
    .article-list{
        width:98%;
    }
    .article-list .article-item{
        padding:15px;
        min-height:140px;
    }
        .article-list .article-item-horiz .article-item-image .fileNameImg{
            width:100px;
            height:100px;
        }
    .article-list .article-item-horiz .article-item-content {
        padding-left:120px;
    }
        .article-list .article-item-title{
            margin-bottom:5px;
        }
        .article-list .article-item-title.descriptionNull{
            margin-top:15px;
        }
        .article-list .article-item-summary{
            line-height:1.4em;
        }
        .article-list .article-item h3 a{font-size:160%;}
        .article-item-time{font-size:110%;}
}
/* i6 */
@media screen and (max-device-width:375px){
        .article-list .article-item-horiz .article-item-image .fileNameImg{
            width:90px;
            height:90px;
        }
    .article-list .article-item-horiz .article-item-content {
        padding-left:110px;
    }
}
/* i5 */
@media screen and (max-device-width:320px){
    .article-list .article-item-horiz .article-item-image .fileNameImg{
        width:80px;
        height:80px;
    }
    .article-list .article-item-horiz .article-item-content{
        padding-left:100px;
    }
        .article-list .article-item-summary{
            font-size:125%;
        }
}