@charset "utf-8";
/* CSS Document */
/* 超小屏幕（小于576px）布局容器的宽度为100% */
@media screen and (max-width:575px){
    .container{
        width:100%;
    }
    .overanimation{
        transition-duration:0.5s;
        -webkit-transition-duration:0.5s;/* Safari */
    }
    header{
        width:100%;
        height:auto;
        background-color:var(--lightBackgroundColor);
        background-size:auto 100%;
        margin:0 auto;
        padding:0;
        overflow:hidden;
    }
    /*global*/
    .wrapper{
        border-radius:5px;
        background:var(--wrapperColor);
        margin:0 auto;
        padding:0;
    }
    .topnav{
        width:100%;
        height:5rem;
        line-height:3rem;
        font-size:1.6rem;
        color:var(--topnavColor);
        background:var(--titleBackgroundColor);
        margin:0;
        padding:1rem;
    }
    .topnav-left,.topnav-right{
        margin:0;
        padding:0;
    }
    ul.topnav-left li:nth-child(1),ul.topnav-left li:nth-child(2){
        display:none;
    }
    ul.topnav-left li.mobile-menu{
        width:3rem;
        height:3rem;
        background:url('../img/icon_mobile_menu_light.png') left center no-repeat;
        background-size:3rem 3rem;
        display:inline-block;
    }
    ul.topnav-left li.dark{
        background:url('../img/icon_mobile_menu_dark.png') left center no-repeat;
        background-size:3rem 3rem;
    }
    ul.topnav-left li.mobile-layout-color{
        width:3rem;
        height:3rem;
    }
    ul.topnav-left li.mobile-layout-color span.lightToDark{
        width:3rem;
        height:3rem;
        background:url(../img/light.png) center center no-repeat;
        background-size:2rem 2rem;
        display:block;
        cursor:pointer;
    }
    ul.topnav-left li.mobile-layout-color span.darkToLight{
        width:3rem;
        height:3rem;
        background:url(../img/dark.png) center center no-repeat;
        background-size:2rem 2rem;
        display:block;
        cursor:pointer;
    }
    .topnav li a{
        width:auto;
        height:3rem;
        line-height:3rem;
        font-size:1.6rem;
        color:var(--topnavColor);
    }
    .topnav li a:hover{
        color:var(--darkTitleColor);
        transition-duration: 1s;
        -webkit-transition-duration: 1s; /* Safari */
    }
    .topnav-right .dropdown-menu a{
        color:var(--blackColor);
    }
    .topnav-right .dropdown-menu a:hover{
        color:var(--darkTitleColor);
    }
    .logo{
        width:auto;
        height:7rem;
        text-align:center;
        display:block;
        margin:0 auto;
        padding:1rem 0;
        overflow:hidden;
    }
    .logo img{
        width:auto;
        height:5rem;
    }
    .site-info{
        width:100%;
        height:auto;
        display:block;
        margin:0 auto;
        padding:10px 0;
        overflow:hidden;
    }
    .site-name{
        width:100%;
        height:auto;
        line-height:100%;
        text-align:center;
        display:block;
        margin:0 auto 5px;
    }
    .site-name a{
        font-size:24px;
        color:#ffffff;
        font-family:'poppins';
        text-align:center;
        font-weight:bold;
        background:linear-gradient(-90deg,deeppink,var(--blueColor));
        -webkit-background-clip:text;
        color:transparent;
    }
    .site-intro{
        width:100%;
        height:auto;
        line-height:100%;
        font-size:14px;
        color:var(--navColor);
        font-weight:bold;
        font-family:'lato';
        text-align:center;
        margin-bottom:0;
    }
    .header-search{
        width:80%;
        height:auto;
        display:block;
        margin:0 auto;
        padding:0 0 2rem;
    }
    .header-search-container{
        width:100%;
        height:auto;
    }
    .header-search-container .keywords{
        width:calc(100% - 60px);
        height:4.5rem;
        line-height:4.5rem;
        font-size:1.6rem;
        color:var(--lightColor);
        text-align:left;
        border-radius:5px 0 0 5px;
        border:1px solid var(--searchColor);
        border-right:none;
        background:var(--deepColor);
        padding:0 0 0 5px;
    }
    .header-search-container .btn-header-search{
        width:60px;
        height:4.5rem;
        line-height:4.5rem;
        font-size:1.6rem;
        color:rgba(214,214,215,1);
        text-align:center;
        border-radius:0 5px 5px 0;
        border:1px solid var(--searchColor);
        border-left:none;
        background:var(--redColor) url(../img/search.png) center center no-repeat;
        background-size:2rem 2rem;
        cursor:pointer;
        margin:0;
        padding:0;
    }
    .header-search ul.hotwords{
        width:100%;
        height:auto;
        line-height:2.5rem;
        font-size:1.6rem;
        color:rgba(251,251,251,1);
        overflow:hidden;
        margin:1rem 0 0;
        padding:0;
    }
    .header-search ul.hotwords li{
        margin:0;
        padding:0;
    }
    .header-search ul.hotwords li.hotwords-title{
        width:auto;
        height:2.5rem;
        line-height:2.5rem;
        font-size:1.6rem;
        color:rgba(251,251,251,1);
        padding-left:2.2rem;
        background:url(../img/hotwords.png) center left no-repeat;
        background-size:2rem 2rem;
        display:inline-block;
    }
    .header-search .hotwords li a{
        width:auto;
        height:2.5rem;
        line-height:2.5rem;
        font-size:1.6rem;
        color:rgba(251,251,251,1);
        display:inline-block;
    }
    .header-search .hotwords li a:hover{
        color:var(--blueColor,#236ddb);
        transition-duration: 1s;
        -webkit-transition-duration: 1s; /* Safari */
    }
    nav#nav{
        width:100%;
        height:100%;
        background:var(--navBackgroundColor);
        margin:0;
        padding:0;
        overflow-x:hidden;
        overflow-y:scroll;
        display:none;
        position:fixed;
        top:0;
        left:0;
        right:0;
        bottom:0;
        z-index:10000000000;
    }
    nav ul{
        width:100%;
        height:auto;
        margin:0;
        padding:6rem 2rem 2rem;
    }
    nav ul li{
        width:100%;
        height:auto;
        margin:0;
        padding:0 2rem;
    }
    nav ul li a{
        width:100%;
        height:5rem;
        line-height:5rem;
        font-size:3rem;
        color:var(--navColor);
        font-weight:bold;
        text-align:left;
        background:none;
        margin:0;
        padding:0 0 0 38px;
        display:block;
    }
    nav ul li a sup{
        font-size:2rem;
        color:var(--pinkColor);
        font-weight:normal;
        background:none;
    }
    nav ul li a:hover,nav ul li a.current{
        color:var(--navColor);
        background:var(--pinkColor);
        transition-duration: 1s;
        -webkit-transition-duration: 1s; /* Safari */
    }
    nav ul li a:hover sup,nav ul li a.current sup{
        color:var(--navColor);
        transition-duration: 1s;
        -webkit-transition-duration: 1s; /* Safari */
    }
        @keyframes rotate{
        from{
            transform:rotate(0deg)
        }
        to{
            transform:rotate(360deg)
        }
    }
    nav#nav .layout-color{
        width:5rem;
        height:5rem;
        position:fixed;
        top:5px;
        left:5px;
        z-index:100000000002;
        display:none;
    }
    nav#nav .layout-color-click{
        animation:rotate 0.5s linear 0s 1;
    }
    nav#nav span.lightToDark{
        width:5rem;
        height:5rem;
        background:url(../img/light.png) center center no-repeat;
        background-size:2rem 2rem;
        display:block;
        cursor:pointer;
    }
    nav#nav span.darkToLight{
        width:5rem;
        height:5rem;
        background:url(../img/dark.png) center center no-repeat;
        background-size:2rem 2rem;
        display:block;
        cursor:pointer;
    }
    .subnav{
        width:100%;
        height:auto;
        text-align:left;
        background:var(--navBackgroundColor);
    }
    nav ul li:hover .subnav{
        display:block;
    }
    .subnav a{
        width:100%;
        height:5rem;
        line-height:5rem;
        font-size:3rem;
        color:var(--navColor);
        font-weight:bold;
        text-align:left;
        background:none;
        padding:0 2rem 0 7rem;
        display:block;
    }
    .subnav a sup{
        color:var(--pinkColor);
        font-size:2rem;
    }
    .subnav a:hover,.subnav a.current{
        color:var(--navColor);
        background:var(--pinkColor);
        transition-duration: 1s;
        -webkit-transition-duration: 1s; /* Safari */
    }
    .subnav a:hover sup,.subnav a.current sup{
        color:var(--navColor);
        transition-duration: 1s;
        -webkit-transition-duration: 1s; /* Safari */
    }
    nav#nav .mobile-menu-close{
        width:5rem;
        height:5rem;
        font-size:5rem;
        color:var(--titleColor);
        position:fixed;
        top:5px;
        right:5px;
        z-index:100000000001;
        display:none;
    }
    .breadcrumb{
        width:100%;
        height:auto;
        line-height:2.5rem;
        font-size:1.4rem;
        color:var(--lightColor);
        border-radius:0;
        background:var(--backgroundColor);
        margin:5px auto 0;
        padding:10px;
        overflow:hidden;
    }
    .breadcrumb a{
        color:var(--subTitleColor);
    }
    .breadcrumb a:hover{
        color:var(--blueColor,#236ddb);
    }
    main.homepage-main-body,main.subpage-main-body{
        height:auto;
        margin:0px auto 0;
        padding:0;
    }
    .subpage-left{
    	height:auto;
    	margin:0;
    	padding:0;
    }
    .main-left{
    	height:auto;
    	margin:0;
    	padding:0;
    }
    .top-blog{
    	width:100%;
    	height:auto;
    	background:var(--backgroundColor);
    	margin:0 0 5px;
    	padding:0;
    }
    .top3-blog{
    	/*width:569px;*/
    	height:auto;
    	margin:0;
    	padding:0;
    	position:relative;
    	overflow:hidden;
    }
    .top3-item{
    	width:100%;
    	height:auto;
    	overflow:hidden;
    }
    .top3-item h5{
        font-size:20px;
        font-weight:bold;
    }
    .top3-item p{
        font-size:14px;
    }
    .top3-item img{
    	width:100%;
    	height:auto;
    	overflow:hidden;
    }
    .top4-blog{
    	/*width:262px;*/
    	height:auto;
    	margin:0;
    	padding:0;
    }
    .top4-item{
    	width:100%;
    	height:72px;
    	margin-bottom:4px;
    	padding:0;
    	background:var(--backgroundColor);
    	position:relative;
    	overflow:hidden;
    }
    .top4-item:nth-child(4){
    	margin-bottom:0;
    }
    .top4-blog img{
    	width:auto;
    	height:100%;
    	position:absolute;
        top:50%;
        left:50%;
        -webkit-transform:translate(-50%,-50%);
    	-ms-transform:translate(-50%,-50%);
    	transform:translate(-50%,-50%);
    }
    .top4-blog a:hover img{
    	width:auto;
    	height:120%;
    	transition-duration: 1s;
        -webkit-transition-duration: 1s; /* Safari */
    }
    .top4-item p{
    	width:100%;
    	height:auto;
    	min-height:40px;
    	line-height:40px;
    	font-size:20px;
    	color:#fff;
    	font-weight:bold;
    	text-align:center;
    	margin:-20px 0 0;
    	padding:0 5%;
    	position:absolute;
        top:50%;
    	left:0;
    	right:0;
    	z-index:99999999;
    }
    ul.subpage-blog-list{
        width:100%;
        height:auto;
        list-style:none;
        display:flex;
        flex-wrap:wrap;
        margin:0;
    }
    ul.subpage-blog-list li{
        width:100%;
        height:auto;
        list-style:none;
        background:var(--backgroundColor);
        margin-right:0;
        margin-bottom:4px;
        padding:10px;
        overflow:hidden;
    }
    ul.subpage-blog-list li h3{
        width:100%;
        height:3rem;
        line-height:3rem;
        margin-bottom:10px;
        padding:0;
        overflow:hidden;
    }
    ul.subpage-blog-list li h3 a{
        width:100%;
        height:3rem;
        line-height:3rem;
        font-size:1.6rem;
        color:var(--titleColor);
        font-weight:bold;
        display:inline-block;
    }
    ul.subpage-blog-list li h3 a sup{
        font-size:1.2rem;
        color:var(--redColor);
        margin-left:3px;
    }
    ul.subpage-blog-list li h3 a:hover,.main-left ul.subpage-blog-list li h3 a:hover sup{
        color:var(--blueColor,#236ddb);
        transition-duration: 1s;
        -webkit-transition-duration: 1s; /* Safari */
    }
    ul.subpage-blog-list li .blog-info{
        width:100%;
        height:4.5rem;
        line-height:2rem;
        font-size:1.2rem;
        color:var(--lightColor);
        border-bottom:1px solid var(--borderColor);
        margin-bottom:10px;
        padding-bottom:5px;
    }
    ul.subpage-blog-list li .blog-info .avatar{
        width:20px;
        height:40px;
    }
    ul.subpage-blog-list li .blog-info .avatar img{
        width:20px;
        height:20px;
        border-radius:50%;
        margin:10px 0 0;
    }
    ul.subpage-blog-list li .blog-info-right{
        width:calc(100% - 25px);
        height:40px;
        margin-left:5px;
    }
    ul.subpage-blog-list li .blog-info-right .username{
        width:100%;
        font-style:normal;
        display:block;
    }
    ul.subpage-blog-list li .blog-info-right .username a{
        width:auto;
        height:auto;
        line-height:140%;
        font-size:12px;
        color:var(--lightColor);
    }
    ul.subpage-blog-list li .blog-info-right .username a:hover{
        color:var(--blueColor,#236ddb);
    }
    ul.subpage-blog-list li .blog-info-right .readtimes{
        font-style:normal;
    }
    ul.subpage-blog-list li .blog-info-right .readtimes a{
        line-height:140%;
        font-size:12px;
        color:var(--lightColor);
    }
    ul.subpage-blog-list li .blog-info-right .readtimes a:hover{
        color:var(--blueColor,#236ddb);
    }
    ul.subpage-blog-list li .blog-info-right .postedtime{
        background:none;
        padding-left:0;
        display:inline-block;
        float:right;
    }
    ul.subpage-blog-list li .blog-thumbnail{
        width:100%;
        height:132.75px;
        margin-bottom:10px;
        background:none;
        /*display: flex;*/ /* 设置容器为flex布局 */
        /*justify-content: center;*/ /* 水平居中对齐子项目 */
        /*align-items: center;*/ /* 垂直居中对齐子项目 */
        display: grid;  /*设置容器为Grid布局 */
        place-items: center;  /*同时水平和垂直居中对齐子项目 */
        overflow:hidden;
        position:relative;
    }
    ul.subpage-blog-list li .blog-thumbnail img{
        width:100%;
        height:auto;
        min-height:100%;
        position:absolute;
        top:50%;
        left:50%;
        -webkit-transform:translate(-50%,-50%);
    	-ms-transform:translate(-50%,-50%);
    	transform:translate(-50%,-50%);
    }
    ul.subpage-blog-list li .blog-thumbnail a:hover img{
        width:120%;
        height:auto;
        min-height:120%;
        transition-duration: 1s;
        -webkit-transition-duration: 1s; /* Safari */
    }
    ul.subpage-blog-list li .blog-thumbnail mark{
        width:100%;
        height:42px;
        background:url('../img/bg_index_mark_light.png') no-repeat;
        background-size:100% 100%;
        padding:15px 0 0;
        position:absolute;
        top:auto;
        left:0;
        right:0;
        bottom:0;
        z-index:2;
    }
    ul.subpage-blog-list li .blog-thumbnail mark.dark{
        background:url('../img/bg_index_mark_dark.png') no-repeat;
        background-size:100% 100%;
    }
    ul.subpage-blog-list li .blog-thumbnail mark a{
        width:auto;
        height:auto;
        font-size:20px;
        color:var(--redColor);
        font-weight:bold;
        display:block;
    }
    ul.subpage-blog-list li .blog-thumbnail mark em,ul.subpage-blog-list li .blog-thumbnail mark i{
        width:auto;
        height:auto;
        font-size:14px;
        color:var(--darkTitleColor);
        font-weight:normal;
        font-style:normal;
        display:inline-block;
        margin-left:5px;
    }
    .blog-thumbnail mark{
        width:auto;
        height:auto;
        background:var(--redColor);
        position:absolute;
        top:5px;
        left:5px;
        z-index:2;
    }
    .blog-thumbnail mark a{
        width:auto;
        height:auto;
        font-size:12px;
        color:#fff;
        display:block;
    }
    ul.subpage-blog-list li .blog-content{
        width:100%;
        height:6rem;
        line-height:3rem;
        font-size:1.6rem;
        color:var(--subTitleColor);
        margin-bottom:10px;
        overflow:hidden;
    }
    ul.subpage-blog-list li .blog-content span.needPassword{
        color:rgba(255,0,0,1);
    }
    ul.subpage-blog-list li .readmore{
        width:100%;
        height:auto;
    }
    ul.subpage-blog-list li .readmore a{
        width:auto;
        height:3.2rem;
        line-height:3rem;
        font-size:1.6rem;
        color:var(--lightColor);
        text-align:center;
        border:1px solid var(--borderColor);
        border-radius:5px;
        background:url('../img/readmore.png') 5px center no-repeat;
        background-size:2rem 2rem;
        padding:0 5px 0 2.8rem;
        display:inline-block;
    }
    ul.subpage-blog-list li .readmore a:hover{
        color:#fff;
        background:var(--blueColor) url('../img/readmore_hover.png') 5px center no-repeat;
        background-size:18px 18px;
        border:1px solid var(--blueColor);
        transition-duration: 1s;
        -webkit-transition-duration: 1s; /* Safari */
    }
    .homepage-container{
        width:100%;
        height:auto;
        border-bottom:3px solid red;
        background-color:var(--backgroundColor);
        margin-bottom:5px;
        padding-top:15px;
    }
    .category-list{
        width:calc(100% - 20px);
        height:4rem;
        border-bottom:0.5rem solid green;
        margin:0 10px;
        padding:0;
    }
    .category-tab{
        width:auto;
        height:3.5rem;
        display:inline-block;
    }
    .category-tab a{
        width:auto;
        height:3.5rem;
        line-height:3.5rem;
        font-size:1.8rem;
        color:var(--titleColor);
        font-weight:bold;
        background:none;
        padding:0 15px;
        display:block;
    }
    .category-tab.current{
        width:auto;
        height:3.5rem;
        display:inline-block;
    }
    .category-tab.current a{
        width:auto;
        height:3.5rem;
        line-height:3.5rem;
        font-size:1.8rem;
        color:#f4f4f4;
        background:green;
        padding:0 15px;
        display:block;
    }
    .category-tab a:hover{
        color:#f4f4f4;
        background:green;
        padding:0 5px;
        display:block;
    }
    .category-hot{
        width:100%;
        height:auto;
        list-style:none;
        padding:10px;
        overflow:hidden;
    }
    .category-hot h3{
        width:100%;
        height:auto;
        line-height:3rem;
        margin-bottom:10px;
        padding:0;
        overflow:hidden;
    }
    .category-hot h3 a{
        width:100%;
        height:auto;
        line-height:3rem;
        font-size:2rem;
        color:var(--titleColor);
        font-weight:bold;
        display:inline-block;
    }
    .category-hot h3 a sup{
        font-size:12px;
        color:var(--redColor);
        margin-left:3px;
    }
    .category-hot h3 a:hover,.category-hot h3 a:hover sup{
        color:var(--blueColor,#236ddb);
        transition-duration: 1s;
        -webkit-transition-duration: 1s; /* Safari */
    }
    .category-hot .blog-info{
        width:100%;
        height:51px;
        line-height:20px;
        font-size:12px;
        color:var(--lightColor);
        border-bottom:1px solid var(--borderColor);
        margin-bottom:10px;
        padding-bottom:10px;
    }
    .category-hot .avatar{
        width:40px;
        height:40px;
    }
    .category-hot .avatar img{
        width:40px;
        height:40px;
        border-radius:50%;
    }
    .category-hot .blog-info-right{
        width:calc(100% - 50px);
        height:40px;
        margin-left:10px;
    }
    .category-hot .username{
        width:100%;
        font-style:normal;
        display:block;
    }
    .category-hot .username a{
        width:auto;
        height:auto;
        line-height:140%;
        font-size:12px;
        color:var(--lightColor);
    }
    .category-hot .username a i{
        color:var(--greenColor);
        margin-right:3px;
    }
    .category-hot .username a:hover{
        color:var(--blueColor,#236ddb);
    }
    .category-hot .readtimes{
        font-style:normal;
    }
    .category-hot .readtimes a{
        line-height:140%;
        font-size:12px;
        color:var(--lightColor);
    }
    .category-hot .readtimes a:hover{
        color:var(--blueColor,#236ddb);
    }
    .category-hot .postedtime{
        background:url('../img/icon_date.png') left center no-repeat;
        background-size:14px 14px;
        padding-left:17px;
        display:inline-block;
        float:right;
    }
    .category-hot .blog-thumbnail{
        width:100%;
        height:184px;
        margin-bottom:10px;
        background:none;
        /*display: flex;*/ /* 设置容器为flex布局 */
        /*justify-content: center;*/ /* 水平居中对齐子项目 */
        /*align-items: center;*/ /* 垂直居中对齐子项目 */
        display: grid;  /*设置容器为Grid布局 */
        place-items: center;  /*同时水平和垂直居中对齐子项目 */
        overflow:hidden;
        position:relative;
    }
    .category-hot .blog-thumbnail img{
        width:100%;
        height:auto;
        min-height:100%;
        position:absolute;
        top:50%;
        left:50%;
        -webkit-transform:translate(-50%,-50%);
    	-ms-transform:translate(-50%,-50%);
    	transform:translate(-50%,-50%);
    }
    .category-hot .blog-thumbnail a:hover img{
        width:120%;
        height:auto;
        min-height:120%;
        transition-duration: 1s;
        -webkit-transition-duration: 1s; /* Safari */
    }
    .category-hot .blog-thumbnail mark{
        width:100%;
        height:42px;
        background:url('../img/bg_index_mark_light.png') no-repeat;
        background-size:100% 100%;
        padding:15px 0 0;
        position:absolute;
        top:auto;
        left:0;
        right:0;
        bottom:0;
        z-index:2;
    }
    .category-hot .blog-thumbnail mark.dark{
        background:url('../img/bg_index_mark_dark.png') no-repeat;
        background-size:100% 100%;
    }
    .category-hot .blog-thumbnail mark a{
        width:auto;
        height:auto;
        font-size:2rem;
        color:var(--redColor);
        font-weight:bold;
        display:block;
    }
    .category-hot .blog-thumbnail mark em,.category-hot .blog-thumbnail mark i{
        width:auto;
        height:auto;
        font-size:1.4rem;
        color:var(--darkTitleColor);
        font-weight:normal;
        font-style:normal;
        display:inline-block;
        margin-left:5px;
    }
    .category-hot .blog-content{
        width:100%;
        height:auto;
        line-height:2.5rem;
        font-size:1.6rem;
        color:var(--subTitleColor);
        margin-bottom:10px;
        overflow:hidden;
    }
    .category-hot .blog-content span.needPassword{
        color:rgba(255,0,0,1);
    }
    .category-hot .readmore{
        width:100%;
        height:auto;
    }
    .category-hot .readmore a{
        width:auto;
        height:30px;
        line-height:28px;
        font-size:14px;
        color:var(--lightColor);
        text-align:center;
        border:1px solid var(--borderColor);
        border-radius:5px;
        background:url('../img/readmore.png') 5px center no-repeat;
        background-size:18px 18px;
        padding:0 5px 0 28px;
        display:inline-block;
    }
    .category-hot .readmore a:hover{
        color:#fff;
        background:var(--blueColor) url('../img/readmore_hover.png') 5px center no-repeat;
        background-size:18px 18px;
        border:1px solid var(--blueColor);
        transition-duration: 1s;
        -webkit-transition-duration: 1s; /* Safari */
    }
    .category-blog-list{
        width:100%;
        height:auto;
        list-style:none;
        padding:10px;
        overflow:hidden;
    }
    .category-blog-list .blog-item{
        width:100%;
        height:auto;
        /*background:rgba(47,47,48,1);*/
        overflow:hidden;
        display:inline-block;
        margin-bottom:5px;
        padding-bottom:11px;
        border-bottom:1px solid var(--borderColor);
    }
    .category-blog-list .blog-item:nth-child(5){
        height:90px;
        margin-bottom:0;
        padding-bottom:0;
        border:none;
        border-bottom-width:0;
    }
    .category-blog-list .blog-item-right{
        width:calc(100% - 170px);
        height:auto;
    }
    .category-blog-list .blog-item-right h3{
        width:100%;
        height:25px;
        line-height:25px;
        margin-bottom:5px;
        padding:0;
        overflow:hidden;
    }
    .category-blog-list .blog-item-right h3 a{
        width:100%;
        height:25px;
        line-height:25px;
        font-size:16px;
        color:var(--titleColor);
        font-weight:bold;
        display:inline-block;
    }
    .category-blog-list .blog-item-right h3 a sup{
        font-size:12px;
        color:var(--redColor);
        margin-left:3px;
    }
    .category-blog-list .blog-item-right h3 a:hover,.category-hot .blog-item-right h3 a:hover sup{
        color:var(--blueColor,#236ddb);
        transition-duration: 1s;
        -webkit-transition-duration: 1s; /* Safari */
    }
    .category-blog-list .blog-item-right .blog-info{
        width:100%;
        height:15px;
        line-height:15px;
        font-size:12px;
        color:var(--lightColor);
    }
    .category-blog-list .blog-item-right .avatar{
        width:15px;
        height:15px;
    }
    .category-blog-list .blog-item-right .avatar img{
        width:15px;
        height:15px;
        border-radius:50%;
    }
    .category-blog-list .blog-item-right .blog-info-right{
        width:calc(100% - 20px);
        height:15px;
        margin-left:5px;
    }
    .category-blog-list .blog-item-right .blog-info-right .username{
        width:auto;
        font-style:normal;
        display:inline-block;
    }
    .category-blog-list .blog-item-right .blog-info-right .username a{
        width:auto;
        height:auto;
        line-height:15px;
        font-size:12px;
        color:var(--lightColor);
    }
    .category-blog-list .blog-item-right .blog-info-right .username a:hover{
        color:var(--blueColor,#236ddb);
    }
    .category-blog-list .blog-item-right .blog-info-right .readtimes{
        font-style:normal;
    }
    .category-blog-list .blog-item-right .blog-info-right .readtimes a{
        line-height:15px;
        font-size:12px;
        color:var(--lightColor);
    }
    .category-blog-list .blog-item-right .blog-info-right .readtimes a:hover{
        color:var(--blueColor,#236ddb);
    }
    .category-blog-list .blog-item-right .blog-info-right .postedtime{
        background:url('../img/icon_date.png') left center no-repeat;
        background-size:14px 14px;
        padding-left:17px;
        display:none;
    }
    .category-blog-list .blog-item .blog-thumbnail{
        width:160px;
        height:90px;
        background:none;
        /*display: flex;*/ /* 设置容器为flex布局 */
        /*justify-content: center;*/ /* 水平居中对齐子项目 */
        /*align-items: center;*/ /* 垂直居中对齐子项目 */
        display: grid;  /*设置容器为Grid布局 */
        place-items: center;  /*同时水平和垂直居中对齐子项目 */
        overflow:hidden;
        position:relative;
        display:inline-block;
        float:left;
    }
    .category-blog-list .blog-item .blog-thumbnail img{
        width:100%;
        height:auto;
        min-height:100%;
        position:absolute;
        top:50%;
        left:50%;
        -webkit-transform:translate(-50%,-50%);
    	-ms-transform:translate(-50%,-50%);
    	transform:translate(-50%,-50%);
    }
    .category-blog-list .blog-item .blog-thumbnail a:hover img{
        width:120%;
        height:auto;
        min-height:120%;
        transition-duration: 1s;
        -webkit-transition-duration: 1s; /* Safari */
    }
    .category-blog-list .blog-item .blog-thumbnail mark{
        width:auto;
        height:auto;
        position:absolute;
        top:0;
        left:5px;
        z-index:2;
    }
    .category-blog-list .blog-item-right .blog-content{
        width:100%;
        height:40px;
        line-height:20px;
        font-size:12px;
        color:var(--subTitleColor);
        margin-bottom:5px;
        overflow:hidden;
    }
    .category-blog-list .blog-item-right .blog-content span.needPassword{
        color:rgba(255,0,0,1);
    }
    .pages{
        width:100%;
        height:auto;
        font-size:1.6rem;
        color:var(--titleColor);
        text-align:center;
        background:var(--backgroundColor);
        margin-bottom:5px;
        padding:10px;
    }
    .pages a{
        font-size:1.6rem;
        color:var(--titleColor);
    }
    .pages a:hover{
        color:var(--blueColor,#236ddb);
    }
    aside.sidebar{
    	height:auto;
    	margin:0;
    	padding:0;
    }
    aside ul{
    	width:100%;
    	height:auto;
    	margin:0;
    	padding:0;
    }
    aside ul li{
    	width:100%;
    	height:auto;
    	background:var(--lightBackgroundColor);
    	display:block;
    	margin-bottom:5px;
    	padding:0;
    }
    aside ul li.side-banner{
        background:none;
        padding-left:55px;
    }
    aside ul li.side-banner img{
    	width:100%;
    	height:auto;
    	display:block;
    	padding:0;
    }
    aside ul li.side-banner p{
    	width:100%;
    	height:30px;
    	line-height:30px;
    	font-size:20px;
    	color:#fff;
    	text-align:center;
    	padding:0 10px 0 55px;
        top:50%;
        left:50%;
        -webkit-transform:translate(-50%,-50%);
    	-ms-transform:translate(-50%,-50%);
    	transform:translate(-50%,-50%);
    }
    .side-banner-border{
    	width:30px;
    	height:90%;
    	border:10px solid var(--borderColor);
    	border-right:none;
        /*background:var(--navBackgroundColor);*/
        top:5%;
        bottom:5%;
        left:0;
        z-index:2;
    }
    .side-banner-redblock{
    	width:50px;
    	height:calc(90% - 20px);
        background:var(--blueColor);
        top:calc(5% + 10px);
        bottom:calc(5% + 10px);
        left:10px;
        z-index:2;
    }
    aside ul li h4{
    	width:100%;
    	height:5rem;
    	line-height:5rem;
    	font-size:1.8rem;
    	color:var(--topnavColor);
    	font-weight:bold;
    	background:var(--titleBackgroundColor);
    	display:block;
    	margin:0;
    	padding:0 5%;
    }
    aside ul li h4 span{
    	width:auto;
    	height:5rem;
    	line-height:5rem;
    	color:var(--topnavColor);
    	font-weight:bold;
    	background:url(../img/index_side_title_light.png) left center no-repeat;
    	background-size:2rem 2rem;
    	display:inline-block;
    	padding:0 0 0 18px;
    }
    aside.sidebar ul li h4 span.dark{
    	background:url(../img/index_side_title_dark.png) left center no-repeat;
    	background-size:2rem 2rem;
    }
    aside ul li h4 small{
        font-size:1.2rem;
    	color:var(--darkTitleColor);
    	font-weight:bold;
    	display:inline-block;
    	margin:0 0 0 5px;
    	padding:0;
    }
    ul.side-article-list{
        margin:0;
        padding:1rem;
    }
    ul.side-article-list li.side-article-item{
        border-bottom:1px solid var(--borderColor);
        background:none;
        margin:0 0 5px;
        padding:0 0 5px;
    }
    ul.side-article-list li.side-article-item a{
        line-height:3rem;
        font-size:1.6rem;
        color:var(--subTitleColor);
        display:block;
    }
    em.indexSideArticleSort{
        width:2rem;
        height:1.6rem;
        line-height:1.6rem;
        font-size:1.2rem;
        color:rgba(220,220,220,1);
        font-style:normal;
        text-align:center;
        border-radius:4px;
        display:inline-block;
        margin:2px 5px 2px 0;
    }
    em.indexSideArticleSort1{
        background:rgba(190,75,102,1);
    }
    em.indexSideArticleSort2{
        background:rgba(210,113,90,1);
    }
    em.indexSideArticleSort3{
        background:rgba(214,144,89,1);
    }
    em.indexSideArticleSort4{
        background:rgba(222,167,94,1);
    }
    em.indexSideArticleSort5{
        background:rgba(228,195,119,1);
    }
    em.indexSideArticleSort6,em.indexSideArticleSort7,em.indexSideArticleSort8{
        color:#959596;
        background:rgba(255,255,255,0.8);
    }
    ul.side-article-list li.side-article-item a:hover{
        color:var(--blueColor,#236ddb);
    }
    ul.side-article-list li.side-article-item time{
        line-height:140%;
        font-size:12px;
        color:var(--lightColor,#a1a1a1);
        font-style:normal;
        display:block;
        margin-top:5px;
    }
    ul.side-comment-list{
        margin:0;
        padding:1rem;
    }
    ul.side-comment-list li.side-comment-item{
        border-bottom:1px solid var(--borderColor);
        background:none;
        margin:0 0 5px;
        padding:0 0 5px;
    }
    ul.side-comment-list li.side-comment-item a{
        line-height:2.5rem;
        font-size:1.6rem;
        color:var(--subTitleColor);
    }
    ul.side-comment-list li.side-comment-item a u.commentContent{
        line-height:140%;
        font-size:1.6rem;
        color:var(--blueColor,#236ddb);
        font-style:normal;
        TEXT-DECORATION-LINE:underline;/*文本装饰线*/
        TEXT-DECORATION-STYLE:wavy;/*文本装饰线样式*/
        TEXT-DECORATION-COLOR:red;/*文本装饰线颜色*/
        
    }
    ul.side-comment-list li.side-comment-item a:hover,ul.side-comment-list li.side-comment-item a:hover u.commentContent{
        color:var(--blueColor,#236ddb);
        transition-duration: 1s;
        -webkit-transition-duration: 1s; /* Safari */
    }
    ul.side-link-list{
        margin:0;
        padding:1rem;
    }
    ul.side-link-list li{
        width:auto;
    }
    ul.side-link-list li a{
        height:3rem;
        line-height:3rem;
        font-size:1.6rem;
        color:var(--subTitleColor);
        background:url('../img/icon_link.png') -8px center no-repeat;
        background-size:25px 25px;
        display:inline-block;
        margin-right:15px;
        margin-bottom:3px;
        padding:0 0 0 18px;
    }
    ul.side-link-list li a:hover{
        color:var(--blueColor);
    }
    ul.side-tag-list{
        margin:0;
        padding:1rem;
    }
    ul.side-tag-list li{
        width:auto;
    }
    ul.side-tag-list li a{
        height:3rem;
        line-height:3rem;
        font-size:1.6rem;
        color:var(--subTitleColor);
        border:1px solid var(--borderColor);
        display:inline-block;
        margin-right:1rem;
        margin-bottom:3px;
        padding:0 3px;
    }
    ul.side-tag-list li a:hover{
        color:rgba(220,220,220,1);
        background:var(--subTitleColor);
    }
    footer{
        width:100%;
        height:auto;
        background:var(--lightBackgroundColor);
        margin:0 auto;
        padding:10px;
    }
    footer p{
        width:100%;
        height:auto;
        line-height:180%;
        font-size:1.6rem;
        color:var(--subTitleColor);
        text-align:center;
        margin:0;
        padding:0;
    }
    footer p a{
        color:var(--subTitleColor);
    }
    footer p a:hover{
        color:var(--blueColor,#236ddb);
    }
    .backToTop{
        display:none;
        width:0;
        height:0;
        background:var(--redColor) url('../img/backtotop.png') center center no-repeat;
        background-size:30px 30px;
        position:fixed;
        right:0;
        bottom:0;
        cursor:pointer;
        overflow:hidden;
    }
}
/* 小屏幕（大于等于576px）布局容器的宽度为540px */
@media screen and (min-width:576px){
    .containner{
        width:540px;
    }
    .overanimation{
        transition-duration:0.5s;
        -webkit-transition-duration:0.5s;/* Safari */
    }
    header{
        width:100%;
        height:auto;
        background-color:var(--lightBackgroundColor);
        background-size:auto 100%;
        margin:0 auto;
        padding:0;
        overflow:hidden;
    }
    /*global*/
    .wrapper{
        border-radius:5px;
        background:var(--wrapperColor);
        margin:0 auto;
        padding:10px;
    }
    .topnav{
        width:100%;
        height:45px;
        line-height:25px;
        font-size:14px;
        color:var(--topnavColor);
        background:var(--titleBackgroundColor);
        margin:0;
        padding:10px 20px;
    }
    .topnav-left,.topnav-right{
        margin:0;
        padding:0;
    }
    ul.topnav-left li:nth-child(1),ul.topnav-left li:nth-child(2){
        display:inline-block;
    }
    h1#clock{
        line-height:25px;
        font-size:14px;
        margin:0;
    }
    h1#clock span{
        line-height:25px;
        display:inline-block;
    }
    ul.topnav-left li.mobile-menu{
        display:none;
    }
    ul.topnav-left li.mobile-layout-color{
        display:none;
    }
    .topnav li a{
        width:auto;
        height:25px;
        line-height:25px;
        font-size:14px;
        color:var(--topnavColor);
    }
    .topnav li a:hover{
        color:var(--darkTitleColor);
        transition-duration: 1s;
        -webkit-transition-duration: 1s; /* Safari */
    }
    .topnav-right .dropdown-menu a{
        color:var(--blackColor);
    }
    .topnav-right .dropdown-menu a:hover{
        color:var(--darkTitleColor);
    }
    .logo{
        width:auto;
        height:118px;
        text-align:center;
        display:block;
        margin:0 auto;
        padding:20px 0;
        overflow:hidden;
    }
    .logo img{
        width:auto;
        height:78px;
    }
    .site-info{
        width:100%;
        height:auto;
        display:block;
        margin:0 auto;
        padding:10px 0;
        overflow:hidden;
    }
    .site-name{
        width:100%;
        height:auto;
        line-height:100%;
        text-align:center;
        display:block;
        margin:0 auto 5px;
    }
    .site-name a{
        font-size:24px;
        color:#ffffff;
        font-family:'poppins';
        text-align:center;
        font-weight:bold;
        background:linear-gradient(-90deg,deeppink,var(--blueColor));
        -webkit-background-clip:text;
        color:transparent;
    }
    .site-intro{
        width:100%;
        height:auto;
        line-height:100%;
        font-size:14px;
        color:var(--navColor);
        font-weight:bold;
        font-family:'lato';
        text-align:center;
        margin-bottom:0;
    }
    .header-search{
        width:50%;
        height:auto;
        display:block;
        margin:0 auto;
        padding:0 0 20px;
    }
    .header-search-container{
        width:100%;
        height:auto;
    }
    .header-search-container .keywords{
        width:calc(100% - 60px);
        height:45px;
        line-height:45px;
        font-size:14px;
        color:var(--lightColor);
        text-align:left;
        border-radius:5px 0 0 5px;
        border:1px solid var(--searchColor);
        border-right:none;
        background:var(--deepColor);
        padding:0 0 0 5px;
    }
    .header-search-container .btn-header-search{
        width:60px;
        height:45px;
        line-height:45px;
        font-size:14px;
        color:rgba(214,214,215,1);
        text-align:center;
        border-radius:0 5px 5px 0;
        border:1px solid var(--searchColor);
        border-left:none;
        background:var(--redColor) url(../img/search.png) center center no-repeat;
        background-size:20px 20px;
        cursor:pointer;
        margin:0;
        padding:0;
    }
    .header-search ul.hotwords{
        width:100%;
        height:auto;
        line-height:25px;
        font-size:14px;
        color:rgba(255,0,0,1);
        overflow:hidden;
        margin:10px 0 0;
        padding:0;
    }
    .header-search ul.hotwords li{
        margin:0;
        padding:0;
    }
    .header-search ul.hotwords li.hotwords-title{
        width:auto;
        height:25px;
        line-height:25px;
        font-size:14px;
        color:var(--navColor);
        padding-left:27px;
        background:url(../img/hotwords.svg) left center no-repeat;
        background-size:25px 25px;
        display:inline-block;
    }
    .header-search .hotwords li a{
        width:auto;
        height:25px;
        line-height:25px;
        font-size:14px;
        color:var(--navColor);
        display:inline-block;
    }
    .header-search .hotwords li a:hover{
        color:var(--blueColor,#236ddb);
        transition-duration: 1s;
        -webkit-transition-duration: 1s; /* Safari */
    }
    nav#nav{
        width:100%;
        height:40px;
        background:var(--navBackgroundColor);
        margin:0;
        padding:0;
        display:block;
        position:static;
    }
    nav ul{
        width:calc(100% - 60px);
        height:40px;
        margin:0 auto;
        position:relative;
    }
    nav ul li{
        width:auto;
        height:40px;
        position:relative;
    }
    nav ul li a{
        width:auto;
        height:40px;
        line-height:40px;
        font-size:14px;
        color:var(--navColor);
        font-weight:bold;
        text-align:center;
        background:none;
        padding:0 20px 0 38px;
        display:block;
    }
    nav ul li a sup{
        font-size:12px;
        color:var(--pinkColor);
        font-weight:normal;
        background:none;
        display:none;
    }
    nav ul li a:hover,nav ul li a.current{
        color:var(--navColor);
        background:var(--pinkColor);
        transition-duration: 1s;
        -webkit-transition-duration: 1s; /* Safari */
    }
    nav ul li a:hover sup,nav ul li a.current sup{
        color:var(--navColor);
        transition-duration: 1s;
        -webkit-transition-duration: 1s; /* Safari */
    }
    @keyframes rotate{
        from{
            transform:rotate(0deg)
        }
        to{
            transform:rotate(360deg)
        }
    }
    nav#nav .layout-color{
        width:20px;
        height:40px;
        margin-right:20px;
        position:static;
        top:auto;
        left:auto;
        z-index:auto;
        display:block;
    }
    nav#nav .layout-color-click{
        animation:rotate 0.5s linear 0s 1;
    }
    nav#nav span.lightToDark{
        width:20px;
        height:40px;
        background:url(../img/light.png) center center no-repeat;
        background-size:20px 20px;
        display:block;
        cursor:pointer;
    }
    nav#nav span.darkToLight{
        width:20px;
        height:40px;
        background:url(../img/dark.png) center center no-repeat;
        background-size:20px 20px;
        display:block;
        cursor:pointer;
    }
    .subnav{
        width:auto;
        height:auto;
        text-align:left;
        background:var(--navBackgroundColor);
        display:none;
        position:absolute;
        top:40px;
        left:0;
        right:0;
        z-index:999999999999;
    }
    nav ul li:hover .subnav{
        display:block;
    }
    .subnav a{
        width:auto;
        height:30px;
        line-height:30px;
        font-size:14px;
        color:var(--navColor);
        font-weight:bold;
        text-align:left;
        background:none;
        padding:0 15px;
        display:block;
    }
    .subnav a sup{
        color:var(--pinkColor);
        font-size:12px;
    }
    .subnav a:hover,.subnav a.current{
        color:var(--navColor);
        background:var(--pinkColor);
        transition-duration: 1s;
        -webkit-transition-duration: 1s; /* Safari */
    }
    .subnav a:hover sup,.subnav a.current sup{
        color:var(--navColor);
        transition-duration: 1s;
        -webkit-transition-duration: 1s; /* Safari */
    }
    nav#nav .mobile-menu-close{
        display:none;
    }
    .breadcrumb{
        width:100%;
        height:36px;
        line-height:26px;
        font-size:12px;
        color:var(--lightColor);
        border-radius:0;
        background:var(--backgroundColor);
        margin:5px auto 0;
        padding:5px 15px;
        overflow:hidden;
    }
    .breadcrumb a{
        color:var(--subTitleColor);
    }
    .breadcrumb a:hover{
        color:var(--blueColor,#236ddb);
    }
    main.homepage-main-body,main.subpage-main-body{
        height:auto;
        margin:5px auto 0;
        padding:0;
    }
    .subpage-left{
    	height:auto;
    	margin:0;
    	padding:0;
    }
    .main-left{
    	height:auto;
    	margin:0;
    	padding:0;
    }
    .top-blog{
    	width:100%;
    	height:300px;
    	background:var(--backgroundColor);
    	margin:0 0 5px;
    	padding:0;
    }
    .top3-blog{
    	/*width:569px;*/
    	height:300px;
    	margin:0;
    	padding:0;
    	position:relative;
    	overflow:hidden;
    }
    .top3-item{
    	width:100%;
    	height:300px;
    	overflow:hidden;
    }
    .top3-item h5{
        font-size:20px;
        color:#444;
        font-weight:bold;
        background:rgba(255,255,255,0.6);
        border-radius:10px;
        padding:10px 4px;
    }
    .top3-item p{
        font-size:14px;
        color:#444;
        background:rgba(255,255,255,0.6);
        border-radius:10px;
        padding:4px;
    }
    .top3-item img{
    	width:auto;
    	height:300px;
    	overflow:hidden;
    }
    .top4-blog{
    	/*width:262px;*/
    	height:auto;
    	margin:0;
    	padding:0;
    }
    .top4-item{
    	width:100%;
    	height:72px;
    	margin-bottom:4px;
    	padding:0;
    	background:var(--backgroundColor);
    	position:relative;
    	overflow:hidden;
    }
    .top4-item:nth-child(4){
    	margin-bottom:0;
    }
    .top4-blog img{
    	width:auto;
    	height:100%;
    	position:absolute;
        top:50%;
        left:50%;
        -webkit-transform:translate(-50%,-50%);
    	-ms-transform:translate(-50%,-50%);
    	transform:translate(-50%,-50%);
    }
    .top4-blog a:hover img{
    	width:auto;
    	height:120%;
    	transition-duration: 1s;
        -webkit-transition-duration: 1s; /* Safari */
    }
    .top4-item p{
    	min-width:60%;
        max-width:90%;
        height:40px;
    	line-height:40px;
    	font-size:14px;
    	color:#444;
    	font-weight:bold;
    	text-align:center;
    	background:rgba(255,255,255,0.6);
    	border-radius:10px;
    	padding:0 5%;
    	overflow:hidden;
    	position:absolute;
        top:50%;
        left:50%;
        -webkit-transform:translate(-50%,-50%);
    	-ms-transform:translate(-50%,-50%);
    	transform:translate(-50%,-50%);
    	z-index:99999999;
    }
    ul.subpage-blog-list{
        width:100%;
        height:auto;
        list-style:none;
        display:flex;
        flex-wrap:wrap;
        margin:0;
    }
    ul.subpage-blog-list li{
        width:100%;
        height:auto;
        list-style:none;
        background:var(--backgroundColor);
        margin-right:0;
        margin-bottom:4px;
        padding:20px;
        overflow:hidden;
    }
    ul.subpage-blog-list li h3{
        width:100%;
        height:25px;
        line-height:25px;
        margin-bottom:10px;
        padding:0;
        overflow:hidden;
    }
    ul.subpage-blog-list li h3 a{
        width:100%;
        height:25px;
        line-height:25px;
        font-size:16px;
        color:var(--titleColor);
        font-weight:bold;
        display:inline-block;
    }
    ul.subpage-blog-list li h3 a sup{
        font-size:12px;
        color:var(--redColor);
        margin-left:3px;
    }
    ul.subpage-blog-list li h3 a:hover,.main-left ul.subpage-blog-list li h3 a:hover sup{
        color:var(--blueColor,#236ddb);
        transition-duration: 1s;
        -webkit-transition-duration: 1s; /* Safari */
    }
    ul.subpage-blog-list li .blog-info{
        width:100%;
        height:45px;
        line-height:20px;
        font-size:12px;
        color:var(--lightColor);
        border-bottom:1px solid var(--borderColor);
        margin-bottom:10px;
        padding-bottom:5px;
    }
    ul.subpage-blog-list li .blog-info .avatar{
        width:20px;
        height:40px;
    }
    ul.subpage-blog-list li .blog-info .avatar img{
        width:20px;
        height:20px;
        border-radius:50%;
        margin:10px 0 0;
    }
    ul.subpage-blog-list li .blog-info-right{
        width:calc(100% - 25px);
        height:40px;
        margin-left:5px;
    }
    ul.subpage-blog-list li .blog-info-right .username{
        width:100%;
        font-style:normal;
        display:block;
    }
    ul.subpage-blog-list li .blog-info-right .username a{
        width:auto;
        height:auto;
        line-height:140%;
        font-size:12px;
        color:var(--lightColor);
    }
    ul.subpage-blog-list li .blog-info-right .username a:hover{
        color:var(--blueColor,#236ddb);
    }
    ul.subpage-blog-list li .blog-info-right .readtimes{
        font-style:normal;
    }
    ul.subpage-blog-list li .blog-info-right .readtimes a{
        line-height:140%;
        font-size:12px;
        color:var(--lightColor);
    }
    ul.subpage-blog-list li .blog-info-right .readtimes a:hover{
        color:var(--blueColor,#236ddb);
    }
    ul.subpage-blog-list li .blog-info-right .postedtime{
        background:none;
        padding-left:0;
        display:inline-block;
        float:right;
    }
    ul.subpage-blog-list li .blog-thumbnail{
        width:100%;
        height:132.75px;
        margin-bottom:10px;
        background:none;
        /*display: flex;*/ /* 设置容器为flex布局 */
        /*justify-content: center;*/ /* 水平居中对齐子项目 */
        /*align-items: center;*/ /* 垂直居中对齐子项目 */
        display: grid;  /*设置容器为Grid布局 */
        place-items: center;  /*同时水平和垂直居中对齐子项目 */
        overflow:hidden;
        position:relative;
    }
    ul.subpage-blog-list li .blog-thumbnail img{
        width:100%;
        height:auto;
        min-height:100%;
        position:absolute;
        top:50%;
        left:50%;
        -webkit-transform:translate(-50%,-50%);
    	-ms-transform:translate(-50%,-50%);
    	transform:translate(-50%,-50%);
    }
    ul.subpage-blog-list li .blog-thumbnail a:hover img{
        width:120%;
        height:auto;
        min-height:120%;
        transition-duration: 1s;
        -webkit-transition-duration: 1s; /* Safari */
    }
    ul.subpage-blog-list li .blog-thumbnail mark{
        width:100%;
        height:42px;
        background:url('../img/bg_index_mark_light.png') no-repeat;
        background-size:100% 100%;
        padding:15px 0 0;
        position:absolute;
        top:auto;
        left:0;
        right:0;
        bottom:0;
        z-index:2;
    }
    ul.subpage-blog-list li .blog-thumbnail mark.dark{
        background:url('../img/bg_index_mark_dark.png') no-repeat;
        background-size:100% 100%;
    }
    ul.subpage-blog-list li .blog-thumbnail mark a{
        width:auto;
        height:auto;
        font-size:20px;
        color:var(--redColor);
        font-weight:bold;
        display:block;
    }
    ul.subpage-blog-list li .blog-thumbnail mark em,ul.subpage-blog-list li .blog-thumbnail mark i{
        width:auto;
        height:auto;
        font-size:14px;
        color:var(--darkTitleColor);
        font-weight:normal;
        font-style:normal;
        display:inline-block;
        margin-left:5px;
    }
    .blog-thumbnail mark{
        width:auto;
        height:auto;
        background:var(--redColor);
        position:absolute;
        top:5px;
        left:5px;
        z-index:2;
    }
    .blog-thumbnail mark a{
        width:auto;
        height:auto;
        font-size:12px;
        color:#fff;
        display:block;
    }
    ul.subpage-blog-list li .blog-content{
        width:100%;
        height:50px;
        line-height:25px;
        font-size:14px;
        color:var(--subTitleColor);
        margin-bottom:10px;
        overflow:hidden;
    }
    ul.subpage-blog-list li .blog-content span.needPassword{
        color:rgba(255,0,0,1);
    }
    ul.subpage-blog-list li .readmore{
        width:100%;
        height:auto;
    }
    ul.subpage-blog-list li .readmore a{
        width:auto;
        height:30px;
        line-height:28px;
        font-size:14px;
        color:var(--lightColor);
        text-align:center;
        border:1px solid var(--borderColor);
        border-radius:5px;
        background:url('../img/readmore.png') 5px center no-repeat;
        background-size:18px 18px;
        padding:0 5px 0 28px;
        display:inline-block;
    }
    ul.subpage-blog-list li .readmore a:hover{
        color:#fff;
        background:var(--blueColor) url('../img/readmore_hover.png') 5px center no-repeat;
        background-size:18px 18px;
        border:1px solid var(--blueColor);
        transition-duration: 1s;
        -webkit-transition-duration: 1s; /* Safari */
    }
    .homepage-container{
        width:100%;
        height:auto;
        border-bottom:7px solid var(--redColor);
        background-color:var(--backgroundColor);
        margin-bottom:5px;
        padding-top:20px;
    }
    .category-list{
        width:calc(100% - 40px);
        height:35px;
        border-bottom:5px solid green;
        margin:0 20px;
        padding:0;
    }
    .category-tab{
        width:auto;
        height:30px;
        display:inline-block;
    }
    .category-tab a{
        width:auto;
        height:30px;
        line-height:30px;
        font-size:16px;
        color:var(--titleColor);
        background:none;
        padding:0 15px;
        display:block;
    }
    .category-tab.current{
        width:auto;
        height:30px;
        display:inline-block;
    }
    .category-tab.current a{
        width:auto;
        height:30px;
        line-height:30px;
        font-size:16px;
        color:#f4f4f4;
        background:green;
        padding:0 15px;
        display:block;
    }
    .category-tab a:hover{
        color:#f4f4f4;
        background:green;
        padding:0 15px;
        display:block;
    }
    .category-hot{
        width:100%;
        height:auto;
        list-style:none;
        padding:20px 20px 20px 20px;
        overflow:hidden;
    }
    .category-hot h3{
        width:100%;
        height:25px;
        line-height:25px;
        margin-bottom:10px;
        padding:0;
        overflow:hidden;
    }
    .category-hot h3 a{
        width:100%;
        height:25px;
        line-height:25px;
        font-size:16px;
        color:var(--titleColor);
        font-weight:bold;
        display:inline-block;
    }
    .category-hot h3 a sup{
        font-size:12px;
        color:var(--redColor);
        margin-left:3px;
    }
    .category-hot h3 a:hover,.category-hot h3 a:hover sup{
        color:var(--blueColor,#236ddb);
        transition-duration: 1s;
        -webkit-transition-duration: 1s; /* Safari */
    }
    .category-hot .blog-info{
        width:100%;
        height:51px;
        line-height:20px;
        font-size:12px;
        color:var(--lightColor);
        border-bottom:1px solid var(--borderColor);
        margin-bottom:10px;
        padding-bottom:10px;
    }
    .category-hot .avatar{
        width:40px;
        height:40px;
    }
    .category-hot .avatar img{
        width:40px;
        height:40px;
        border-radius:50%;
    }
    .category-hot .blog-info-right{
        width:calc(100% - 50px);
        height:40px;
        margin-left:10px;
    }
    .category-hot .username{
        width:100%;
        font-style:normal;
        display:block;
    }
    .category-hot .username a{
        width:auto;
        height:auto;
        line-height:140%;
        font-size:12px;
        color:var(--lightColor);
    }
    .category-hot .username a i{
        color:var(--greenColor);
        margin-right:3px;
    }
    .category-hot .username a:hover{
        color:var(--blueColor,#236ddb);
    }
    .category-hot .readtimes{
        font-style:normal;
    }
    .category-hot .readtimes a{
        line-height:140%;
        font-size:12px;
        color:var(--lightColor);
    }
    .category-hot .readtimes a:hover{
        color:var(--blueColor,#236ddb);
    }
    .category-hot .postedtime{
        background:url('../img/icon_date.png') left center no-repeat;
        background-size:14px 14px;
        padding-left:17px;
        display:inline-block;
        float:right;
    }
    .category-hot .blog-thumbnail{
        width:100%;
        height:184px;
        margin-bottom:10px;
        background:none;
        /*display: flex;*/ /* 设置容器为flex布局 */
        /*justify-content: center;*/ /* 水平居中对齐子项目 */
        /*align-items: center;*/ /* 垂直居中对齐子项目 */
        display: grid;  /*设置容器为Grid布局 */
        place-items: center;  /*同时水平和垂直居中对齐子项目 */
        overflow:hidden;
        position:relative;
    }
    .category-hot .blog-thumbnail img{
        width:100%;
        height:auto;
        min-height:100%;
        position:absolute;
        top:50%;
        left:50%;
        -webkit-transform:translate(-50%,-50%);
    	-ms-transform:translate(-50%,-50%);
    	transform:translate(-50%,-50%);
    }
    .category-hot .blog-thumbnail a:hover img{
        width:120%;
        height:auto;
        min-height:120%;
        transition-duration: 1s;
        -webkit-transition-duration: 1s; /* Safari */
    }
    .category-hot .blog-thumbnail mark{
        width:100%;
        height:42px;
        background:url('../img/bg_index_mark_light.png') no-repeat;
        background-size:100% 100%;
        padding:15px 0 0;
        position:absolute;
        top:auto;
        left:0;
        right:0;
        bottom:0;
        z-index:2;
    }
    .category-hot .blog-thumbnail mark.dark{
        background:url('../img/bg_index_mark_dark.png') no-repeat;
        background-size:100% 100%;
    }
    .category-hot .blog-thumbnail mark a{
        width:auto;
        height:auto;
        font-size:20px;
        color:var(--redColor);
        font-weight:bold;
        display:block;
    }
    .category-hot .blog-thumbnail mark em,.category-hot .blog-thumbnail mark i{
        width:auto;
        height:auto;
        font-size:14px;
        color:var(--darkTitleColor);
        font-weight:normal;
        font-style:normal;
        display:inline-block;
        margin-left:5px;
    }
    .category-hot .blog-content{
        width:100%;
        height:auto;
        line-height:25px;
        font-size:14px;
        color:var(--subTitleColor);
        margin-bottom:10px;
        overflow:hidden;
    }
    .category-hot .blog-content span.needPassword{
        color:rgba(255,0,0,1);
    }
    .category-hot .readmore{
        width:100%;
        height:auto;
    }
    .category-hot .readmore a{
        width:auto;
        height:30px;
        line-height:28px;
        font-size:14px;
        color:var(--lightColor);
        text-align:center;
        border:1px solid var(--borderColor);
        border-radius:5px;
        background:url('../img/readmore.png') 5px center no-repeat;
        background-size:18px 18px;
        padding:0 5px 0 28px;
        display:inline-block;
    }
    .category-hot .readmore a:hover{
        color:#fff;
        background:var(--blueColor) url('../img/readmore_hover.png') 5px center no-repeat;
        background-size:18px 18px;
        border:1px solid var(--blueColor);
        transition-duration: 1s;
        -webkit-transition-duration: 1s; /* Safari */
    }
    .category-blog-list{
        width:100%;
        height:auto;
        list-style:none;
        padding:0 20px 20px 20px;
        overflow:hidden;
    }
    .category-blog-list .blog-item{
        width:100%;
        height:auto;
        /*background:rgba(47,47,48,1);*/
        overflow:hidden;
        display:inline-block;
        margin-bottom:5px;
        padding-bottom:11px;
        border-bottom:1px solid var(--borderColor);
    }
    .category-blog-list .blog-item:nth-child(5){
        height:90px;
        margin-bottom:0;
        padding-bottom:0;
        border:none;
        border-bottom-width:0;
    }
    .category-blog-list .blog-item-right{
        width:calc(100% - 170px);
        height:auto;
    }
    .category-blog-list .blog-item-right h3{
        width:100%;
        height:25px;
        line-height:25px;
        margin-bottom:5px;
        padding:0;
        overflow:hidden;
    }
    .category-blog-list .blog-item-right h3 a{
        width:100%;
        height:25px;
        line-height:25px;
        font-size:16px;
        color:var(--titleColor);
        font-weight:bold;
        display:inline-block;
    }
    .category-blog-list .blog-item-right h3 a sup{
        font-size:12px;
        color:var(--redColor);
        margin-left:3px;
    }
    .category-blog-list .blog-item-right h3 a:hover,.category-hot .blog-item-right h3 a:hover sup{
        color:var(--blueColor,#236ddb);
        transition-duration: 1s;
        -webkit-transition-duration: 1s; /* Safari */
    }
    .category-blog-list .blog-item-right .blog-info{
        width:100%;
        height:15px;
        line-height:15px;
        font-size:12px;
        color:var(--lightColor);
    }
    .category-blog-list .blog-item-right .avatar{
        width:15px;
        height:15px;
    }
    .category-blog-list .blog-item-right .avatar img{
        width:15px;
        height:15px;
        border-radius:50%;
    }
    .category-blog-list .blog-item-right .blog-info-right{
        width:calc(100% - 20px);
        height:15px;
        margin-left:5px;
    }
    .category-blog-list .blog-item-right .blog-info-right .username{
        width:auto;
        font-style:normal;
        display:inline-block;
    }
    .category-blog-list .blog-item-right .blog-info-right .username a{
        width:auto;
        height:auto;
        line-height:15px;
        font-size:12px;
        color:var(--lightColor);
    }
    .category-blog-list .blog-item-right .blog-info-right .username a:hover{
        color:var(--blueColor,#236ddb);
    }
    .category-blog-list .blog-item-right .blog-info-right .readtimes{
        font-style:normal;
    }
    .category-blog-list .blog-item-right .blog-info-right .readtimes a{
        line-height:15px;
        font-size:12px;
        color:var(--lightColor);
    }
    .category-blog-list .blog-item-right .blog-info-right .readtimes a:hover{
        color:var(--blueColor,#236ddb);
    }
    .category-blog-list .blog-item-right .blog-info-right .postedtime{
        background:url('../img/icon_date.png') left center no-repeat;
        background-size:14px 14px;
        padding-left:17px;
        display:inline-block;
    }
    .category-blog-list .blog-item .blog-thumbnail{
        width:160px;
        height:90px;
        background:none;
        /*display: flex;*/ /* 设置容器为flex布局 */
        /*justify-content: center;*/ /* 水平居中对齐子项目 */
        /*align-items: center;*/ /* 垂直居中对齐子项目 */
        display: grid;  /*设置容器为Grid布局 */
        place-items: center;  /*同时水平和垂直居中对齐子项目 */
        overflow:hidden;
        position:relative;
        display:inline-block;
        float:left;
    }
    .category-blog-list .blog-item .blog-thumbnail img{
        width:100%;
        height:auto;
        min-height:100%;
        position:absolute;
        top:50%;
        left:50%;
        -webkit-transform:translate(-50%,-50%);
    	-ms-transform:translate(-50%,-50%);
    	transform:translate(-50%,-50%);
    }
    .category-blog-list .blog-item .blog-thumbnail a:hover img{
        width:120%;
        height:auto;
        min-height:120%;
        transition-duration: 1s;
        -webkit-transition-duration: 1s; /* Safari */
    }
    .category-blog-list .blog-item .blog-thumbnail mark{
        width:auto;
        height:auto;
        position:absolute;
        top:0;
        left:5px;
        z-index:2;
    }
    .category-blog-list .blog-item-right .blog-content{
        width:100%;
        height:40px;
        line-height:20px;
        font-size:12px;
        color:var(--subTitleColor);
        margin-bottom:5px;
        overflow:hidden;
    }
    .category-blog-list .blog-item-right .blog-content span.needPassword{
        color:rgba(255,0,0,1);
    }
    .pages{
        width:calc(100% - 4px);
        height:auto;
        font-size:14px;
        color:var(--titleColor);
        text-align:center;
        background:var(--backgroundColor);
        margin-bottom:5px;
        padding:10px 0;
    }
    .pages a{
        font-size:14px;
        color:var(--titleColor);
    }
    .pages a:hover{
        color:var(--blueColor,#236ddb);
    }
    aside.sidebar{
    	height:auto;
    	margin:0;
    	padding:0;
    }
    aside ul{
    	width:100%;
    	height:auto;
    	margin:0;
    	padding:0;
    }
    aside ul li{
    	width:100%;
    	height:auto;
    	background:var(--lightBackgroundColor);
    	display:block;
    	margin-bottom:5px;
    	padding:0;
    }
    aside > ul > li{
    	border-bottom:7px solid var(--blueColor);
    }
    aside > ul > li:last-child{
    	border-bottom:none;
    }
    aside ul li.side-banner{
        background:none;
        padding:0;
    }
    aside ul li.side-banner img{
    	width:100%;
    	height:auto;
    	display:block;
    	padding:0;
    }
    aside ul li.side-banner p{
    	width:auto;
    	height:30px;
    	line-height:30px;
    	font-size:16px;
    	color:#fff;
    	text-align:center;
    	border-radius:5px 0 0 0;
    	background:var(--blueColor);
    	margin:0;
    	padding:0 10px;
        bottom:0;
        right:0;
    }
    .side-banner-border{
    	width:30px;
    	height:90%;
    	border:10px solid var(--redColor);
    	border-right:none;
        /*background:var(--navBackgroundColor);*/
        top:5%;
        bottom:5%;
        left:0;
        z-index:2;
    }
    .side-banner-redblock{
    	width:50px;
    	height:calc(90% - 20px);
        background:var(--blackColor);
        top:calc(5% + 10px);
        bottom:calc(5% + 10px);
        left:10px;
        z-index:2;
    }
    aside ul li h4{
    	width:100%;
    	height:45px;
    	line-height:45px;
    	font-size:16px;
    	color:var(--topnavColor);
    	font-weight:bold;
    	background:var(--titleBackgroundColor);
    	display:block;
    	margin:0;
    	padding:0 5%;
    }
    aside ul li h4 span{
    	width:auto;
    	height:45px;
    	line-height:45px;
    	color:var(--topnavColor);
    	font-weight:bold;
    	background:url(../img/index_side_title_light.png) left center no-repeat;
    	background-size:20px 20px;
    	display:inline-block;
    	padding:0 0 0 23px;
    }
    aside.sidebar ul li h4 span.dark{
    	background:url(../img/index_side_title_dark.png) left center no-repeat;
    	background-size:20px 20px;
    }
    aside ul li h4 small{
        font-size:12px;
    	color:var(--darkTitleColor);
    	font-weight:bold;
    	display:inline-block;
    	margin:0 0 0 5px;
    	padding:0;
    }
    .side-user-info{
        margin:0;
        padding:10px 5%;
    }
    .side-user-info .avatar{
        width:145px;
        height:100px;
        margin:0 auto;
        position:relative;
    }
    .side-user-info .user-border{
        width:30px;
        height:80%;
        border:10px solid var(--redColor);
        border-right:none;
        position:absolute;
        left:0;
        top:10%;
        bottom:10%;
    }
    /*.user-topline{
        width:30px;
        height:10px;
        background:var(--redColor);
        position:absolute;
        left:0;
        top:10px;
    }
    .user-bottomline{
        width:30px;
        height:10px;
        background:var(--redColor);
        position:absolute;
        left:0;
        bottom:10px;
    }*/
    .side-user-info .user-blackblock{
        width:40px;
        height:calc(80% - 20px);
        background:var(--blackColor);
        position:absolute;
        left:10px;
        top:calc(10% + 10px);
        bottom:calc(10% + 10px);
        z-index:3;
    }
    .side-user-info .avatar img{
        width:100px;
        height:100px;
        border-radius:30px 0 30px 0;
        display:block;
        position:absolute;
        left:45px;
        top:0;
        bottom:0;
        z-index:2;
    }
    .side-user-info h3{
        width:100%;
        height:auto;
        line-height:140%;
        font-size:25px;
        color:var(--titleColor);
        font-weight:bold;
        font-family:'Comic Sans MS';
        text-align:center;
        margin:0;
        overflow:hidden;
    }
    .side-user-info .user-intro{
        width:100%;
        height:auto;
        line-height:140%;
        font-size:14px;
        color:var(--subTitleColor);
        text-align:center;
        padding:20px 0 0;
        overflow:hidden;
    }
    .side-user-info .user-intro p{
        width:100%;
        height:auto;
        line-height:140%;
        font-size:14px;
        color:var(--subTitleColor);
        margin:0;
        padding:0 0 10px;
        overflow:hidden;
    }
    ul.side-article-list{
        margin:0;
        padding:10px 5%;
    }
    ul.side-article-list li.side-article-item{
        border-bottom:1px solid var(--borderColor);
        background:none;
        margin:0 0 5px;
        padding:0 0 5px;
    }
    ul.side-article-list li.side-article-item a{
        line-height:20px;
        font-size:14px;
        color:var(--subTitleColor);
        display:block;
    }
    em.indexSideArticleSort{
        width:20px;
        height:16px;
        line-height:16px;
        font-size:12px;
        color:rgba(220,220,220,1);
        font-style:normal;
        text-align:center;
        border-radius:4px;
        display:inline-block;
        margin:2px 5px 2px 0;
    }
    em.indexSideArticleSort1{
        background:rgba(190,75,102,1);
    }
    em.indexSideArticleSort2{
        background:rgba(210,113,90,1);
    }
    em.indexSideArticleSort3{
        background:rgba(214,144,89,1);
    }
    em.indexSideArticleSort4{
        background:rgba(222,167,94,1);
    }
    em.indexSideArticleSort5{
        background:rgba(228,195,119,1);
    }
    em.indexSideArticleSort6,em.indexSideArticleSort7,em.indexSideArticleSort8{
        color:#959596;
        background:rgba(255,255,255,0.8);
    }
    ul.side-article-list li.side-article-item a:hover{
        color:var(--blueColor,#236ddb);
    }
    ul.side-article-list li.side-article-item time{
        line-height:140%;
        font-size:12px;
        color:var(--lightColor,#a1a1a1);
        font-style:normal;
        display:block;
        margin-top:5px;
    }
    ul.side-comment-list{
        margin:0;
        padding:10px 5%;
    }
    ul.side-comment-list li.side-comment-item{
        border-bottom:1px solid var(--borderColor);
        background:none;
        margin:0 0 5px;
        padding:0 0 5px;
    }
    ul.side-comment-list li.side-comment-item a{
        line-height:140%;
        font-size:14px;
        color:var(--subTitleColor);
        word-break:break-all;
        word-wrap:break-word;
    }
    ul.side-comment-list li.side-comment-item a u.commentContent{
        line-height:140%;
        font-size:14px;
        color:var(--blueColor,#236ddb);
        font-style:normal;
        TEXT-DECORATION-LINE:underline;/*文本装饰线*/
        TEXT-DECORATION-STYLE:wavy;/*文本装饰线样式*/
        TEXT-DECORATION-COLOR:red;/*文本装饰线颜色*/
        
    }
    ul.side-comment-list li.side-comment-item a:hover,ul.side-comment-list li.side-comment-item a:hover u.commentContent{
        color:var(--blueColor,#236ddb);
        transition-duration: 1s;
        -webkit-transition-duration: 1s; /* Safari */
    }
    ul.side-link-list{
        margin:0;
        padding:10px 5%;
    }
    ul.side-link-list li{
        width:auto;
    }
    ul.side-link-list li a{
        height:25px;
        line-height:25px;
        font-size:14px;
        color:var(--subTitleColor);
        background:url('../img/icon_link.png') -8px center no-repeat;
        background-size:25px 25px;
        display:inline-block;
        margin-right:15px;
        margin-bottom:3px;
        padding:0 0 0 18px;
    }
    ul.side-link-list li a:hover{
        color:var(--blueColor);
        transition-duration: 1s;
        -webkit-transition-duration: 1s; /* Safari */
    }
    ul.side-tag-list{
        margin:0;
        padding:10px 5%;
    }
    ul.side-tag-list li{
        width:auto;
    }
    ul.side-tag-list li a{
        height:25px;
        line-height:25px;
        font-size:14px;
        color:var(--subTitleColor);
        border:1px solid var(--borderColor);
        display:inline-block;
        margin-right:15px;
        margin-bottom:3px;
        padding:0 3px;
    }
    ul.side-tag-list li a:hover{
        color:rgba(220,220,220,1);
        background:var(--subTitleColor);
    }
    .sidebar-more{
        width:100%;
        height:40px;
    }
    .sidebar-more a{
        width:100%;
        height:40px;
        line-height:40px;
        font-size:16px;
        color:#fff;
        text-align:center;
        background:var(--blueColor);
        display:block;
    }
    .sidebar-more a:hover{
        background:var(--pinkColor);
    }
    footer{
        width:100%;
        height:auto;
        background:var(--lightBackgroundColor);
        margin:0 auto;
        padding:20px;
    }
    footer p{
        width:100%;
        height:auto;
        line-height:180%;
        font-size:14px;
        color:var(--subTitleColor);
        text-align:center;
        margin:0;
        padding:0;
    }
    footer p a{
        color:var(--subTitleColor);
    }
    footer p a:hover{
        color:var(--blueColor,#236ddb);
    }
    .backToTop{
        display:none;
        width:0;
        height:0;
        line-height:50px;
        background:var(--redColor) url('../img/backtotop.png') center center no-repeat;
        background-size:30px 30px;
        position:fixed;
        right:0;
        bottom:0;
        cursor:pointer;
        overflow:hidden;
    }
}
/* 中等屏幕（大于等于768px）布局容器的宽度为720px */
@media screen and (min-width:768px){
    body{
        background-size:auto 100%;
    }
    header{
        background-size:100% auto;
    }
    .containner{
        width:720px;
    }
    ul.topnav-left li:nth-child(1),ul.topnav-left li:nth-child(2),ul.topnav-left li:nth-child(3),ul.topnav-left li:nth-child(4){
        display:inline-block;
    }
    nav ul li a sup{
        display:inline-block;
    }
    .site-info{
        padding:50px 0 20px;
    }
    .site-name{
        margin:0 auto 10px;
    }
    .site-name a{
        font-size:36px;
    }
    .main-left{
    	padding:0 5px 0 0;
    }
    .top3-blog{
    	padding:0 4px 0 0;
    }
    aside ul li.side-banner{
        display:block;
    }
    ul.subpage-blog-list li{
        width:calc(50% - 4px);
        margin-right:4px;
    }
    .backToTop{
        width:50px;
        height:50px;
        right:50px;
        bottom:50px;
    }
}
/* 大屏幕（大于等于992px）布局容器的宽度为960px */
@media screen and (min-width:992px){
    .containner{
        width:960px;
    }
    ul.subpage-blog-list li .blog-info-right .postedtime{
        background:url('../img/icon_date.png') center left no-repeat;
        background-size:14px 14px;
        padding-left:17px;
    }
}
/* 超大屏幕（大于等于1200px）布局容器的宽度为1140px */
@media screen and (min-width:1200px){
    body{
        background-size:100% auto;
    }
    .containner{
        width:1140px;
    }
    .top3-item img{
    	width:100%;
    }
    .top4-blog img{
    	width:100%;
    }
    .category-hot{
        width:368px;
    }
    .category-hot h3{
        height:50px;
    }
    .category-hot h3 a{
        height:50px;
    }
    .category-hot .blog-info-right{
        width:278px;
    }
    .category-hot .blog-content{
        height:150px;
        margin-bottom:43px;
    }
    .category-blog-list{
        width:465px;
        padding:20px 20px 20px 0;
    }
    .category-blog-list .blog-item-right{
        width:277px;
    }
    .category-blog-list .blog-item-right .blog-info-right{
        width:257px;
    }
    ul.subpage-blog-list li{
        width:276px;
    }
    ul.subpage-blog-list li .blog-info-right{
        width:211px;
    }
}