html{
    --font-default:"Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB",
    "Microsoft YaHei", "寰蒋闆呴粦", Arial, "sans-serif";
    --nickname-color:#000;
    --background-reverse:#000;
    --background:#fff;
    --background-translucent:rgba(255, 255, 255, 0.7);
    --sub-background:#f5f5f5;
    --sib-background:#fff;
    --glass-background:rgba(255, 255, 255, 0.65);
    --main:#303133;
    --routine:#606266;
    --title:#333;
    --sib:#f2f6fc;
    --minor:#909399;
    --seat:#c0c4cc;
    --classA:#dcdfe6;
    --classB:#e4e7ed;
    --classC:#ebeef5;
    --classD:#f2f6fc;
    --classE:#dcdcdc;
    --classF:#333;
    --classG:#dcdcdc;
    --classH:#e9f2ff;
    --classI:#5a3713;
    --classJ:#f9e5fb;
    --classK:#e4e7ed;
    --classL:#666;
    --classM:#2d2e37;
    --quote:#50bfff;
    --code:#409eff;
    --code-background:#e8f3ff;
    --overdue-border:#ffbb76;
    --overdue-background:#fffcef;
    --radius-wrap:8px;
    --radius-inner:4px;
    --radius-img:5px;
    --box-shadow:0 0px 10px -5px #949494;
    --text-shadow:0 1px 2px rgba(0, 0, 0, 0.25);
    --shadow-code:#bdbdbd;
    --block-shadow:1px 2px 10px 0 #afafaf;
    --box-shadow-journal:#d8d8d8;
    --box-shadow-toc:inset 20px 0 30px 0 #dadada, 1px 2px 10px 0 #a8a8a8;
    --background-toc:rgba(255, 255, 255, 0.95);
    --box-shadow-tags:2px 2px 3px 0px #c2c0b3;
    --background-tags:#fffaeb;
    --background-tag:#fdfdfd;
    --box-shadow-pager:0 0 3px 0 #cacaca;
    --notice:#fb6c28;
    --background-notice:#fbf5f1;
    --background-journal:#fff;
    --background-journal-block:#f5f5f5;
    --background-journal-gradient:linear-gradient(0deg, #d4d4d4, transparent 80%);
    --shadow-notice:inset 0 0 15px #d1dae8;
    --animation-notice:twinkle 1s ease infinite alternate;
    --theme:#fb6c28;
    --scroll-bar:#c0c4cc;
    --loading-bar:var(--theme);
    --img-max-width:100%;
}
html[data-mode=dark]{
    --nickname-color:#99f;
    --background-reverse:#fff;
    --background:#232323;
    --background-translucent:rgba(35, 35, 35, 0.7);
    --sub-background:#303030;
    --sib-background:#303030;
    --glass-background:rgba(0, 0, 0, 0.65);
    --main:#999;
    --routine:#888;
    --title:#ddd;
    --sib:#3a3a3a;
    --minor:#777;
    --seat:#666;
    --classA:#515253;
    --classB:#454545;
    --classC:#414243;
    --classD:#303030;
    --classE:#585858;
    --classF:#bdbdbd;
    --classG:#303030;
    --classH:#454545;
    --classI:#36312c;
    --classJ:#39243c;
    --classK:#eee;
    --classL:#333;
    --classM:#fff;
    --quote:#276b92;
    --code:#efa141;
    --code-background:#353246;
    --overdue-border:#6f553b;
    --overdue-background:#2b2715;
    --box-shadow:1px 1px 3px 1px #1b1b1b;
    --text-shadow:none;
    --shadow-code:#191919;
    --block-shadow:2px 4px 10px 0 #0a0a0a;
    --box-shadow-journal:rgba(0, 0, 0, 0.2);
    --box-shadow-toc:inset 0 0 30px 0 rgba(253, 253, 253, 0.34), 1px 2px 10px 0 #181818;
    --background-toc:rgba(35, 35, 35, 0.98);
    --box-shadow-tags:2px 2px 3px 0px #111;
    --background-tags:#35353e;
    --background-tag:#2f2f2f;
    --box-shadow-pager:0 0 3px 0 #1b1b1b;
    --notice:#99f;
    --background-notice:#303030;
    --background-journal:#383838;
    --background-journal-block:#232323;
    --background-journal-gradient:linear-gradient(0deg, #151515, transparent 80%);
    --shadow-notice:inset 0 0 15px #4a4c4e;
    --animation-notice:twinkle-night 1s ease infinite alternate
}
.header-wrap{
    z-index:100;
    height:60px;
    line-height:60px;
    background:var(--background);
    border-top:1px solid var(--classC);
    box-shadow:var(--box-shadow);
    /* transform:translate3d(0, -100%, 0); */
}
html, html[data-mode=dark]{
    background:var(--background)
}
a{
    color:#42b983;
}
a:hover, a:active{
    color:#50ce95;
}
::selection{
    background:#5e9f87;
    color:#fff;
}
.app-logo{
    font-size:20px;
}
.app-logo img{
    width:43px;
    position:relative;
    top:-3px;
}
.logo-wrap{
    display:flex;
    justify-content:space-between;
    align-items:center;
}
.nav-list{
    display:flex;
    margin-left:50px;
}
.nav-list li{
    margin:0 20px;
    position:relative;
}
.nav-list li:hover::after{
    opacity:.3;
    transform:scaleX(.7);
}
.nav-list li a{
    color:#666;
    display:inline-block;
    white-space:nowrap;
}
.nav-list li a:hover{
    color:#42b983;
}
.nav-list .item::after{
    opacity:0;
    position:absolute;
    bottom:2px;
    left:6px;
    right:6px;
    content:" ";
    height:3px;
    transform:scaleX(.25);
    background:#42b983;
    border-radius:6px 6px 0 0;
    transition:opacity .5s, transform .5s;
}
.nav-list .item:hover::after{
    opacity:.5;
    left:-6px;
    right:-6px;
    transform:scaleX(.7);
}
.nav-list li.active .item::after{
    opacity:1;
    left:-6px;
    right:-6px;
    transform:scaleX(1);
}
.header-logo{
    display:flex;
    justify-content:space-between;
}
.app-header-search{
    display:flex;
    align-items:center;
}
.app-header-search .input{
    background:#fff;
    width:250px;
    height:34px;
    border:1px solid #c9c5c5;
    padding:0 14px 0 16px;
    color:#333;
    border-radius:17px 0 0 17px;
}
.app-header-search .input:focus::placeholder{
    color:#cecece;
}
.app-header-search .app-search-submit{
    cursor:pointer;
    width:50px;
    height:34px;
    color:#fff;
    border:0;
    background:#0fa8bf;
    border-radius:0 17px 17px 0;
}
.app-container{
    padding-top:20px;
}
.app-container .app-container-inner{
    width:100%;
}
.app-blog-model .app-container-inner{
    width:90%;
}
.app-container-inner{
    display:flex;
    flex-direction:row;
    margin:0 auto;
}
.app-content{
    flex:1;
    margin-right:20px;
    overflow:hidden;
    background:var(--background);
    border-radius:var(--radius-wrap);
    box-shadow:var(--box-shadow);
}
.app-detail-content{
    flex:1;
    margin-right:20px;
    overflow:hidden;
    display: flex;
}
.app-content .app-content-item:first-child{
    min-height:calc(100vh - 200px);
}
.app-content-item{
    width: 100%;
    background:var(--background);
    border-radius:var(--radius-wrap);
    box-shadow:var(--box-shadow);
    margin-bottom:20px;
}
.app-comment-wrap{
    padding:20px;
}
.app-sider{
    width:280px;
}
/* silde */
.banner-wrap{position:relative;height:380px;overflow:hidden;}
.swipe-wrap{
    position:relative;
    width:100%;
    height:100%;
    z-index:1;
    display:flex;
    box-sizing:content-box;
}
.swipe-items{ float:left; position:relative;}
.swipe-items img{width:100%;height:100%;}
.swipe-left, .swipe-right{position:absolute;width:53px;height:53px;top:50%;margin-top:-26px;transition-duration:0.3s;line-height:53px;color:#333;font-size:38px;font-weight:normal;text-align:center;font-family:serif;z-index:333;background:rgba(255, 255, 255, 0.6);opacity:0;transition:all .3s ease-in;}
.banner-wrap:hover .swipe-left, .banner-wrap:hover .swipe-right{opacity:1;}
.swipe-left:hover, .swipe-right:hover{background:rgba(255, 255, 255, 0.8); color:#000;}
.swipe-left{left:0;}
.swipe-right{right:0;}
.swipe-num{position:absolute;bottom:20px;left:50%;margin-left:-15px;z-index:55555;}
.swipe-num a{float:left;width:8px;height:8px;border-radius:5px;background:#cbcbcb;text-indent:-9999px;border:0;margin:0 5px;}
.swipe-num a.active{background:#ff5b00;}
@media screen and (min-width:320px) and (max-width:799px){
    .category-list li{width:95%;margin:0 1% 0.5em;}
    .category-list li i{width:95%;}
    .category-on{width:100%;left:-565px;}
    .category-on b{display:none;}
    .contact-list li{width:95%;margin:0 1% 1em;}
    /*.contact-on{background: none;}*/
}
/*分页样式*/
.pagination{
    display:inline-block;
    padding-left:0;
    margin:20px 0;
    border-radius:4px;
}
.pagination > li{
    display:inline;
}
.pagination > li > a, .pagination > li > span{
    position:relative;
    float:left;
    padding:12px 17px;
    margin-left:-1px;
    line-height:1.42857143;
    color:#666;
    text-decoration:none;
    background-color:#fff;
    border:1px solid #ddd;
}
.pagination > li:first-child > a, .pagination > li:first-child > span{
    margin-left:0;
    border-top-left-radius:4px;
    border-bottom-left-radius:4px;
}
.pagination > li:last-child > a, .pagination > li:last-child > span{
    border-top-right-radius:4px;
    border-bottom-right-radius:4px;
}
.pagination > li > a:hover, .pagination > li > span:hover, .pagination > li > a:focus, .pagination > li > span:focus{
    color:#2a6496;
    background-color:#eee;
    border-color:#ddd;
}
.pagination > .active > a, .pagination > .active > span, .pagination > .active > a:hover, .pagination > .active > span:hover, .pagination > .active > a:focus, .pagination > .active > span:focus{
    z-index:2;
    color:#fff;
    cursor:default;
    background-color:#42b983;
    border-color:#2f9668;
}
.pagination > .disabled > span, .pagination > .disabled > span:hover, .pagination > .disabled > span:focus, .pagination > .disabled > a, .pagination > .disabled > a:hover, .pagination > .disabled > a:focus{
    color:#777;
    cursor:not-allowed;
    background-color:#fff;
    border-color:#ddd;
}
.pagination-lg > li > a, .pagination-lg > li > span{
    padding:10px 16px;
    font-size:18px;
}
.pagination-lg > li:first-child > a, .pagination-lg > li:first-child > span{
    border-top-left-radius:6px;
    border-bottom-left-radius:6px;
}
.pagination-lg > li:last-child > a, .pagination-lg > li:last-child > span{
    border-top-right-radius:6px;
    border-bottom-right-radius:6px;
}
.pagination-sm > li > a, .pagination-sm > li > span{
    padding:5px 10px;
    font-size:12px;
}
.pagination-sm > li:first-child > a, .pagination-sm > li:first-child > span{
    border-top-left-radius:3px;
    border-bottom-left-radius:3px;
}
.pagination-sm > li:last-child > a, .pagination-sm > li:last-child > span{
    border-top-right-radius:3px;
    border-bottom-right-radius:3px;
}
.comment-wrap .verify-img{
    width:120px;
    border:1px solid #ccc;
}
.app-web-page{
    padding-top:15px;
    display:flex;
    justify-content:center;
}
.new-article{
    padding:10px 18px;
}
.new-article-title{
    border-bottom:1px solid var(--classC);
    line-height:45px;
    display:flex;
    justify-content:space-between;
}
.new-article-title h1{
    font-size:22px;
    font-weight:normal;
}
.app-blog-item{
    position:relative;
    width:100%;
    border-bottom:1px solid var(--classC);
    padding:15px 0;
}
.app-blog-item:last-child{
    border-bottom:0;
}
.app-blog-title{
    color:var(--main);
    font-size:18px;
    line-height:24px;
    /* max-height:48px; */
    transition:color .35s;
}
.app-blog-title a{
    font-weight:bold;
    transition:all 0.6s;
    display:inline-block;
}
.app-blog-title .fa{
    margin-right:4px;
    display:none;
}
.app-blog-title a:hover{
    text-indent:20px;
    color:#fb6c28;
}
.app-blog-item .blog-title-info{
    justify-content:space-between;
    color:var(--minor);
    font-size:13px;
}
.app-blog-body{
    padding:15px 0;
}
.title-info-list a{float:left;font-size:12px;margin-left:5px;line-height:13px;color:#aaa;transition-duration:0.3s;}
.title-info-list .fa{margin-right:5px;}
.sider-items{
    position:relative;
    margin-bottom:15px;
    border-radius:var(--radius-wrap);
    box-shadow:var(--box-shadow);
    background:var(--background);
}
.sider-items:last-child{
    margin-bottom:0;
}
.sider-title{
    position:relative;
    display:-webkit-box;
    display:flex;
    align-items:center;
    font-size:16px;
    font-weight:500;
    height:45px;
    line-height:45px;
    padding:0 15px;
    color:var(--classF);
    border-bottom:1px solid var(--classC);
}
.sider-title h1{
    font-weight:normal;
}
.sider-title .fa{
    margin-right:7px;
    font-size:20px;
    color:var(--theme);
    vertical-align:middle;
}
.sider-content{
    padding:10px 20px;
}
.art-list li{
    position:relative;
}
.art-list .link{
}
.art-list li:last-child{
    margin-bottom:5px;
}
.art-list li .fa{
    font-weight:300;
    transition:all 0.3s;
    margin-right:3px;
    color:#42b983;
    font-size:12px;
}
.files-list li .fa, .link-list li .fa{
    margin-right:8px;
    font-size:14px;
}
.art-list li:hover *, .files-list li:hover *, .link-list li:hover *{
    color:var(--theme);
}
.art-list li:hover .fa{
    transform:scale(1.3);
}
.link-list li .fa{
    transition:all 0.3s;
}
.link-list li:hover .fa{
    transform:rotate(-360deg);
}
.art-list .art-num{
    display:none;
}
.link-list{
}
.link-list li{
    line-height:33px;
}
.footer-inner{
    padding:20px 0;
}
.link-content{
    display:flex;
    justify-content:space-between;
}
.link-title{
    line-height:25px;
}
.home-footer{
    margin-top:25px;
    color:var(--minor);
    background:var(--background);
    border-top:1px solid var(--classD);
}
.sider-content .my .avatar{
    margin-bottom:10px;
}
.sider-content .my .avatar img{
    width:60px;
    height:60px;
    border-radius:50%;
}
.sider-content .my{
    text-align:center;
    padding:10px 0 15px;
}
.blog-main{
    padding:10px 20px;
}
.app-blog-detail{
    position:relative;
    padding:30px 35px;
    min-height:calc(100vh - 200px);
    flex: 1;
}
.app-message-title{
    font-size:24px;
    color:var(--classF);
    text-align:center;
    padding-top:20px;
    margin-bottom:15px;
    word-break:break-word;
}
.app-message-title h1{
    font-weight:normal;
}
.require-red{
    color:#f60;
    font-family:serif;
    margin-right:3px;
}
/* comment */
.comment-list-wrap{}
.comment-list li{padding:20px 0 10px;border-bottom:1px dashed #ccc;clear:both;overflow:hidden;zoom:1;}
.comment-list li:hover{border-bottom:1px solid #9ac5e8;}
.comment-list li:last-child{border-bottom:0;}
.comment-headimg{float:left;width:50px;}
.comment-headimg img{border-radius:50%;}
.comment-main{margin-left:60px;margin-top:-6px;}
.comment-user{float:left;}
.comment-name{overflow:hidden;line-height:30px;}
.comment-user h1{float:left;color:#9ac5e8;font-size:14px;}
.comment-revert{float:right;}
.comment-date{margin-left:10px;font-size:12px;color:#888;}
.comment-replay{display:inline-block;overflow:hidden;}
.bot-sign{display:inline-block;margin:2px 0 0 3px;border-width:5px;border-style:solid;border-color:#aaa #fff #fff #fff;}
.comment-content{color:#666;}
.blog-text{vertical-align:middle;}
.blog-btn{width:80%;}
.reply-items{margin-top:10px;padding:15px 0 5px;border-top:1px dashed #ccc;}
.reply-headimg{float:left;width:50px;}
.reply-headimg img{border-radius:50%;}
.reply-main{margin-left:60px;}
.reply-main .comment-user h1{font-size:12px;font-weight:normal;}
.reply-main .comment-content{padding-bottom:0;}
/*.comment-date{float:left;}*/
.commet-name{overflow:hidden;}
.reply-content{font-size:12px;}
.blog-tips-info{margin:5px 0 10px;text-align:center;}
.comment-msg{padding:0 0 0 70px;color:#f60;}
.use-page{padding:20px 0;text-align:center;}
/* msg */
.comment-info-main{
    display:flex;
    justify-content:center;
}
.comment-wrap .input-text, .comment-wrap .blog-text{width:490px;padding:10px;}
.comment-wrap .input-code{width:120px;}
.comment-wrap li{padding:6px 0;}
.comment-userinfo{margin-left:20px;}
.comment-wrap .verify-img{
    width:120px;
    border:1px solid #ccc;
    border-radius:3px;
}
/* about me */
.about-me{padding-top:20px;display:flex;}
.about-title-list li{float:left;}
.about-title-list li a{float:left;height:60px;line-height:60px;font-family:"微软雅黑";background:#e6e6e6;color:#999;font-size:28px;padding:0 60px;}
.about-title-list li a:hover{background:#dcdcdc;color:#666;}
.about-title-list li.on a{background:#fff;color:#8e6955;}
.me-img{margin-right:30px;}
.me-img img{width:400px;border-radius:50%;}
.me-info{font-size:18px;font-family:"微软雅黑";line-height:24px;}
.me-info p{margin-bottom:30px;text-indent:2em;color:#585858;}
.concept-info{padding-top:50px;line-height:30px;font-size:18px;font-family:"微软雅黑";}
.concept-info p{margin-bottom:30px;text-indent:2em;color:#585858;}
.app-message{
    padding:0 20px 20px;
}
.app-bg{
    background:var(--background);
    border-radius:var(--radius-wrap);
    box-shadow:var(--box-shadow);
}
.app-about{
    margin-top:20px;
}
.app-about .about-content{
    padding:10px 60px;
    min-height:calc(100vh - 210px);
}
/* blog detail */
.app-detail-overview{
    display:flex;
    justify-content:space-between;
    align-items:center;
}
.app-detail-title{
    margin-bottom:15px;
}
.app-detail-title h1{
    font-size:24px;
    color:var(--classF);
    text-align:center;
    word-break:break-word;
    text-shadow:var(--text-shadow);
    font-weight:normal;
}
.assist{
    display:flex;
    font-size:14px;
}
.assist i{
    color:var(--classA);
}
.assist > *{
    margin:0 10px 0 0;
    white-space:nowrap;
}
.blog-title-info .fa{
    position:relative;
    top:-1px;
}
.blog-title-info .category a:hover{
    color:var(--theme);
}
.assist .fa{
    margin-right:4px;
    font-size:14px;
    position:relative;
    top:-1px;
}
.assist .date .fa{
    color:orange;
}
.assist .comment .fa{
    color:red;
}
.assist .like .fa{
    color:blue;
}
.assist .views .fa{
    color:green;
}
.assist .words .fa{
    color:orange;
}
.assist .comment b{
    color:red;
}
.assist .like b{
    color:#6b6bbd;
}
.assist .views b{
    color:#6eb26e;
}
.assist .words b{
    color:#bd9456;
}
.app-detail-overview .info{
    display:flex;
}
.space-between{
    display:flex;
    justify-content:space-between;
    align-items:center;
}
.app-detail-overview .avatar{
    width:45px;
    height:45px;
    margin-right:10px;
}
.app-detail-overview .avatar img{
    width:45px;
    height:45px;
    border-radius:50%;
    padding:3px;
    -o-object-fit:cover;
    object-fit:cover;
    background:var(--classC);
    border:1px solid var(--classA);
}
.app-detail-overview .author{
    color:var(--classL);
}
.app-detail-overview .date{
    display:flex;
    align-items:flex-end;
    flex-flow:column;
}
.app-detail-overview .date b{
    font-size:22px;
    color:orange;
}
.app-detail-overview .date i{
    color:var(--classE);
}
.app-detail-body{
    padding:20px 0;
    line-height:25px;
}
.app-detail-body p{
    margin-bottom:15px;
}
.app-detail-body p > img{
    margin:0 auto;
    display:inherit;
}
.app-detail-copyright{
    font-size:12px;
    padding-top:15px;
    margin-top:15px;
    border-top:1px solid #ccc;
    line-height:20px;
    color:var(--minor);
}
.app-detail-copyright .item .fa{
    margin-right:3px;
}
.app-detail-copyright .item:nth-child(1) .fa{
    color:blue;
}
.app-detail-copyright .item:nth-child(2) .fa{
    color:green;
}
.app-detail-copyright .item:nth-child(3) .fa{
    color:orange;
}
.home-loading{
    text-align:center;
}
.loading-more{
    position:relative;
    z-index:1;
    margin:15px auto 50px;
    width:120px;
    height:32px;
    line-height:32px;
    text-align:center;
    border-radius:20px;
    cursor:pointer;
    background:var(--background);
    transition:all 3s;
    box-shadow:var(--box-shadow);
    font-size:12px;
    color:#999;
    display:inline-block;
}
.loading-more:hover{
    background:var(--background-tag);
    top:-3px;
}
.app-writer-waiting{
    text-align:center;
}
.waiting-url{
    display:inline-block;
}
.waiting-url *{
    display:inline-block;
    vertical-align:middle;
}
.waiting-url .fa{
    font-size:18px;
}
/* Media Queries - Small Tablet (from 480px to 799px)*/
@media screen and (min-width:480px) and (max-width:799px){
    .wrap-box{
        width:auto;
    }
}
/* Media Queries - Desktop up from 800px */
@media screen and (min-width:0px) and (max-width:479px){
    .wrap-box,
    .app-container-inner{
        width:auto;
    }
    .header-wrap{
        height:auto;
    }
    .copyright-wrap{
        display:flex;
    }
    .logo-wrap,
    .header-logo,
    .copyright-wrap,
    .link-content{
        flex-flow:column;
        flex-wrap:wrap;
        align-items:center;
    }
    .header-logo{
        padding-top:10px;
    }
    .nav-list{
        margin-left:0;
    }
    .app-header-search{
        padding:20px 0;
    }
    .app-container-inner{
        flex-direction:column;
    }
    .app-content, .app-sider{
        margin:0;
    }
    .app-sider{
        margin-top:15px;
        width:auto;
    }
    .link-content{
        padding:0 15px;
    }
    .app-about .about-content{
        margin:0;
        padding:0 18px;
    }
    .me-img{
        float:none;
        margin-right:0;
        text-align:center;
    }
    .me-img img{
        width:35%;
    }
    .me-info{
        margin-top:20px;
        font-size:16px;
        line-height:1.3;
    }
    .me-info p{
        text-indent:0;
        margin-bottom:20px;
    }
    .comment-head{
        display:none;
    }
    .comment-wrap .input-text, .comment-wrap .blog-text{
        width:95%;
    }
    .comment-wrap .input-code{
        width:56%;
    }
    .blog-btn{
        width:96%;
    }
    .banner-wrap{
        height:200px;
    }
    .app-blog-action,
    .app-detail-overview .avatar,
    .app-detail-overview .author,
    .app-detail-overview .statis .words,
    .app-detail-overview .statis .fa{
        display:none;
    }
    .app-detail-overview .assist > *{
        white-space:nowrap;
    }
    .app-detail-overview{
        align-items:end;
    }
    .app-detail-content{
        margin-right:0;
    }
    .app-detail-title h1{
        font-size:20px;
    }
    .app-detail-overview .date b{
        color:var(--classE);
        font-size:16px;
        margin-right:10px;
    }
    .app-detail-overview .date{
        flex-flow:row;
    }
    .app-container{
        padding-top:0;
    }
    .app-blog-model .app-container-inner{
        width:100% !important;
    }
    .app-blog-detail{
        padding:20px 25px;
    }
    .app-about{
        margin-top:0;
    }
    body .markdown-body ul, body .markdown-body ol{
        padding-left:0;
    }
    .nav-list li{
        margin:0 15px;
    }
    .assist > *{
        margin-right:15px;
    }
    .title-info-list .assist > i,
    .title-info-list .views{
        display:none;
    }
    .about-me{
        display:block;
        padding-top:0;
    }
    .app-writer-body .app-writer-item{
        width:100%;
    }
}