@media (max-width: 768px) {
    .index{padding-top: 98px;}
    .item_mb_5{padding-bottom: 5px !important;}
    .item{width:100%; overflow: hidden; padding:2px; background:#fff; margin-top:28px;}
    .item .header{width:100%; border-bottom:solid 1px #eee;}
    .item .header h2{display: block; height: 35px; float: left; line-height: 24px;}
    .item .header h2 a{color:#000; font-weight:500; font-size:23px;}
    .item .header h2 font{background: url(../images/right.png) no-repeat; padding: 8px; margin-top: 4px; margin-left: 15px; margin-right: 3px; display: block; float: right;}
    .item .header i{width: 37px; height: 30px; display: inline-block; float: left;}
    .item .header i.icon_new{background: url(../images/icon_new.png) no-repeat;}
    .item .header i.icon_templet{background: url(../images/icon_templet.png) no-repeat;}
    .item .header i.icon_php{background: url(../images/icon_php.png) no-repeat;}
    .item .header i.icon_js{background: url(../images/icon_js.png) no-repeat;}
    .item .header i.icon_blog{background: url(../images/icon_blog.png) no-repeat;}
    .item .header i.icon_links{background: url(../images/icon_links.png) no-repeat;}
    .item .header span{line-height: 27px; color: #6d757a; font-size: 14px;}

    .item_mb_5 .header ul li{ max-width: 120px;overflow: hidden;float: left;margin-right: 8px; border: 1px solid #34cce2;border-radius: 13px;padding: 2px 12px; margin-bottom: 5px;}

    .item .body{width: 100%; overflow:hidden; padding-top: 20px;}

    .box_items{width: 45%; float: left; overflow: hidden; margin-right: 10px; margin-bottom: 18px;    border: 1px solid #3333;  padding: 15px 1px;}
    .box_items>a.img{width: 100%; height: 116px; overflow: hidden; display: block;}
    .box_items>a.img img{width: 100%; min-height: 116px;}
    .box_items>a.tit{line-height: 28px; height: 22px; width: 200px; white-space: nowrap; color: #606060; font-size: 13px; text-overflow: ellipsis; overflow: hidden; display: block;}
    .box_items a:hover{color: #ff6700;}
    .box_items>span{color: #999; font-size: 12px; height: 20px; line-height: 25px; width: 214px; display: block;}

    .blog{ overflow: hidden;}
    .blog .body{position: relative; width: 1150px; overflow: hidden;}
    .blog .body #pre{position: absolute; display: none; width: 31px; height: 67px; left: 0px; top: 45px; background-image: url(../images/prenext.png); background-position: 35px 70px;}
    .blog .body #next{position: absolute; display: block; width: 31px; height: 67px; right: 0px; top: 45px; background-image: url(../images/prenext.png); background-position: 0px 70px;}
    .blog .body #pre:hover,.blog .body #next:hover{background-position-y:-2px;}
    .blog .body #marquee_blog{width: 1175px; height: 190px; overflow: hidden; margin-left: -10px;}
    .blog .body ul{width:2350px; height: 200px;}
    .blog .body ul li{width:215px; height:180px; float:left; margin-right:0px; padding: 0px 10px}
    .blog .body ul li a.img{width:215px; height:120px;}
    .blog .body ul li a img{width:215px !important; height:120px !important;}
    .blog .body ul li a.tit{margin-top:5px; white-space:nowrap; color:#606060; font-size:13px; text-overflow:ellipsis; height:25px; overflow:hidden; display:block; line-height:25px;}
    .blog .body ul li a:hover{color: #ff6700;}
    .blog .body ul li span{color: #999; font-size: 12px;}

    .links{height:180px; overflow: hidden; margin-bottom: 30px;}
    .links .body{padding-top: 10px;}
    .links .body a{color: #888; font-size: 13px; margin-right: 20px; line-height: 30px; display: inline-block;}
    .links .body a:hover{color: #ff6700;}


    /*滚动信息*/
    .roll_message{
        width: 100%;
        margin: 0 auto;
    }
    /* scrollDiv */
    .scrollDiv {
        height: 50px;/* 必要元素 */
        line-height: 50px;
        overflow: hidden;/* 必要元素 */
    }
    .scrollDiv li {
        height: 50px;
        width: 46%;
        /*padding-left: 10px;*/
        background-color: #eeeeee;
        margin-bottom: 8px;
    }

    .scrollDiv .left_li{
        float: left;
    }

    .scrollDiv .right_li{
        float: right;
    }


    #s2, #s3 {
        height: 166px;
    }
    .item .roll_message .scrollDiv .img{
        width: 13%;
        float: left;
    }
    .item .roll_message .scrollDiv .content{
        width: 66%;
        float: left;
    }
    .item .roll_message .scrollDiv .content span{
        font-size: 14px;
        float: left;
        overflow: hidden;
        font-weight: bold;
    }
    .item .roll_message .scrollDiv .time{
        width: 20%;
        color: #ff6700;
        float: left;
    }
    .item .roll_message .scrollDiv img{
        height: 22px;
        /*min-height:40px;*/
        width: 22px;
        display: block;
        border-radius: 25px;
        border: none;
        vertical-align: bottom;
        max-width: 100%;
        margin-top: 14px;
        margin-left: 2px;
    }

    /*essay文章*/
    .essay_box{
        width: 48%;
        height: 25px;
        overflow: hidden;
        float: left;
        padding: 6px 3px;
    }


}
@media (min-width: 769px) {
    .index{padding-top: 168px;}
    .navbar {position: relative;min-height:50px; margin-bottom: 20px;border: 1px solid transparent;}
    .navbar:before,
    .navbar:after {display: table;content: " ";}
    .navbar:after {clear: both;}
    .navbar-nav > li > .dropdown-menu {margin-top: 0;border-top-right-radius: 0;border-top-left-radius: 0;}
    .navbar-fixed-bottom .navbar-nav > li > .dropdown-menu {border-bottom-right-radius: 0;border-bottom-left-radius: 0;}
    .navbar-nav.pull-right > li > .dropdown-menu,.navbar-nav > li > .dropdown-menu.pull-right {right: 0;left: auto;}
    .navbar-default { background:#fff;  -webkit-box-shadow:0 0 3px 0px rgba(0,0,0,.2); box-shadow:0 0 3px 0px rgba(0,0,0,.2) }
    .navbar-default .navbar-brand {color: #222;}
    .navbar-default .navbar-brand:hover,
    .navbar-default .navbar-brand:focus {color: #5e5e5e;background-color: transparent;}
    .navbar-default .navbar-text {color: #222;}
    .navbar-default .navbar-nav > li > a {color:#333; font-size:16px; position:relative; }
    .navbar-default .navbar-nav > li > a:hover{color:#ff6700;}
    .navbar-default .navbar-nav > li i{background: url(../images/hot.png) no-repeat; position: absolute; display: block; width: 23px; height: 14px; top: 3px; right: -16px;}
    .navbar-default .navbar-nav > .active > a,
    .navbar-default .navbar-nav > .active > a:hover,
    .navbar-default .navbar-nav > .active > a:focus {color:#ff6700; }
    .navbar-default .navbar-nav > .active > a:after{ content:""; position:absolute; left:50%; margin-left:-3px; bottom:7px; background:#ff6700; width:6px; height:6px; border-radius:50%; }

    .navbar-fixed-top {top: 0; border-width:0px;}
    .navbar-fixed-bottom {bottom: 0;margin-bottom: 0;border-width:0;}
    .navbar-brand {float: left; width:173px; height:42px; background:url(../images/red_logo.png) no-repeat; -webkit-background-size:auto 42px;  background-size:auto 42px; text-indent:-100000px;}
    .navbar-brand:hover,
    .navbar-brand:focus {text-decoration: none;}

    .navbar-fixed-top,.navbar-fixed-bottom {position: fixed;right: 0;left: 0;z-index: 1030;}


    .main{ width:1200px; margin:0 auto; }
    .item_mb_5{padding-bottom: 5px !important;}
    .item{width:1152px; overflow: hidden; padding:24px; background:#fff; margin-top:28px;}
    .item .header{width:100%; height:40px; border-bottom:solid 1px #eee;}
    .item .header h2{display: block; height: 35px; float: left; line-height: 24px;}
    .item .header h2 a{color:#000; font-weight:500; font-size:23px;}
    .item .header h2 font{background: url(../images/right.png) no-repeat; padding: 8px; margin-top: 4px; margin-left: 15px; margin-right: 12px; display: block; float: right;}
    .item .header i{width: 37px; height: 30px; display: inline-block; float: left;}
    .item .header i.icon_new{background: url(../images/icon_new.png) no-repeat;}
    .item .header i.icon_templet{background: url(../images/icon_templet.png) no-repeat;}
    .item .header i.icon_php{background: url(../images/icon_php.png) no-repeat;}
    .item .header i.icon_js{background: url(../images/icon_js.png) no-repeat;}
    .item .header i.icon_blog{background: url(../images/icon_blog.png) no-repeat;}
    .item .header i.icon_links{background: url(../images/icon_links.png) no-repeat;}
    .item .header span{line-height: 27px; margin-left: 20px; color: #6d757a; font-size: 14px;}

    .item .header ul{display:inline-block; margin-top:-8px; margin-left:8px;}
    .item .header ul li{display: inline-block; overflow: hidden;}
    .item .header ul li a{display: inline-block; margin:0 10px; font-size:14px; color:#6d757a; border-bottom: solid 1px #fff; line-height: 42px; overflow: hidden;}
    .item .header ul li a:hover{border-bottom: solid 1px #ff6700; color: #ff6700;}


    .item .body{width: 100%; overflow:hidden; padding-top: 20px;}

    .box_items{width: 208px; float: left; overflow: hidden; margin-right: 20px; margin-bottom: 20px;    border: 1px solid #3333;  padding: 15px 29px;}
    .box_items>a.img{width: 210px; height: 116px; overflow: hidden; display: block;}
    .box_items>a.img img{width: 210px; min-height: 116px;}
    .box_items>a.tit{line-height: 28px; height: 22px; width: 200px; white-space: nowrap; color: #606060; font-size: 13px; text-overflow: ellipsis; overflow: hidden; display: block;}
    .box_items a:hover{color: #ff6700;}
    .box_items>span{color: #999; font-size: 12px; height: 20px; line-height: 25px; width: 214px; display: block;}

    .blog{ overflow: hidden;}
    .blog .body{position: relative; width: 1150px; overflow: hidden;}
    .blog .body #pre{position: absolute; display: none; width: 31px; height: 67px; left: 0px; top: 45px; background-image: url(../images/prenext.png); background-position: 35px 70px;}
    .blog .body #next{position: absolute; display: block; width: 31px; height: 67px; right: 0px; top: 45px; background-image: url(../images/prenext.png); background-position: 0px 70px;}
    .blog .body #pre:hover,.blog .body #next:hover{background-position-y:-2px;}
    .blog .body #marquee_blog{width: 1175px; height: 190px; overflow: hidden; margin-left: -10px;}
    .blog .body ul{width:2350px; height: 200px;}
    .blog .body ul li{width:215px; height:180px; float:left; margin-right:0px; padding: 0px 10px}
    .blog .body ul li a.img{width:215px; height:120px;}
    .blog .body ul li a img{width:215px !important; height:120px !important;}
    .blog .body ul li a.tit{margin-top:5px; white-space:nowrap; color:#606060; font-size:13px; text-overflow:ellipsis; height:25px; overflow:hidden; display:block; line-height:25px;}
    .blog .body ul li a:hover{color: #ff6700;}
    .blog .body ul li span{color: #999; font-size: 12px;}

    .links{height:180px; overflow: hidden; margin-bottom: 30px;}
    .links .body{padding-top: 10px;}
    .links .body a{color: #888; font-size: 13px; margin-right: 20px; line-height: 30px; display: inline-block;}
    .links .body a:hover{color: #ff6700;}

    /*滚动信息*/
    .roll_message{
        width: 1100px;
        margin: 0 auto;
    }
    /* scrollDiv */
    .scrollDiv {
        height: 50px;/* 必要元素 */
        line-height: 50px;
        overflow: hidden;/* 必要元素 */
    }
    .scrollDiv li {
        height: 50px;
        width: 46%;
        /*padding-left: 10px;*/
        background-color: #eeeeee;
        margin-bottom: 8px;
    }

    .scrollDiv .left_li{
        float: left;
    }

    .scrollDiv .right_li{
        float: right;
    }


    #s2, #s3 {
        height: 166px;
    }
    .item .roll_message .scrollDiv .img{
        width: 13%;
        float: left;
    }
    .item .roll_message .scrollDiv .content{
        width: 70%;
        float: left;
    }
    .item .roll_message .scrollDiv .content span{
        font-size: 14px;
        float: left;
        overflow: hidden;
        font-weight: bold;
    }
    .item .roll_message .scrollDiv .time{
        width: 13%;
        color: #ff6700;
        float: left;
    }
    .item .roll_message .scrollDiv img{
        height: 40px;
        width: 40px;
        min-height:40px;
        display: block;
        border-radius: 25px;
        border: none;
        vertical-align: bottom;
        max-width: 100%;
        margin-top: 5px;
        margin-left: 5px;
    }
    .container {width:1200px; }

    /*essay文章*/
    .essay_box{
        width: 20%;
        overflow: hidden;
        float: left;
        height: 25px;
        padding: 6px 2%;
    }
}

@media (min-width: 1200px) {
    .container {width:1200px;   }
}