wixon_blog/static/css/style.css

    @font-face {
        src: url(/static/font/SourceHanSansK-Medium.woff) format('woff');
        font-family: 'SourceHanSansK';
        font-weight: 600;
    }
    @font-face {
        src: url(/static/font/SourceHanSansK-Regular.woff) format('woff');
        font-family: 'SourceHanSansK';
        font-weight: 400;
    }
    @font-face {
        src: url(/static/font/SourceHanSansK-ExtraLight.woff) format('woff');
        font-family: 'SourceHanSansK';
        font-weight: 100;
    }
    @font-face {
        src: url(/static/font/NanumSquareR.woff) format('woff');
        font-family: 'NanumSquare';
    }

    *{margin:0;padding:0;}
    ol, ul{padding:0;margin:0;}
    li{list-style:none;}
    a:link {
        color: inherit;
        text-decoration: none;
    }

    a:visited {
        color: inherit;
        text-decoration: none;
    }

    a:hover {
        color: inherit;
    }

    ::-webkit-scrollbar {
        width: 10px;
    }

    ::-webkit-scrollbar-track {
        background: #f1f1f1;
    }

    ::-webkit-scrollbar-thumb {
        background: #888;
    }

    ::-webkit-scrollbar-thumb:hover {
        background: #555;
    }

    /* 기본 */
    .wixon__wrap{width:100%;font-family: 'SourceHanSansK', sans-serif;}
    .font__namum{font-family:'NanumSquare', sans-serif !important;}

    /* header */
    header{width:100%;max-width:1920px;margin:0 auto;height:220px;position:relative;}
    .header__inner{
        width:1200px;
        height:219px;
        margin:0 auto;
        display:flex;
        justify-content:space-between;
        position:relative;
        border-bottom:1px solid #e7e6e7;
    }
    h1{margin-top:70px;}
    .nav__div{
        position:fixed;
        right:0;
        background:#fff;
        width:28px;
        height:100%;
        padding:20px 20px 0 20px;
        border-left:1px solid #901438;
        font-size:16px;
        letter-spacing:8.5px;
        font-weight:300;
        color:#901438;
        cursor:default;
        text-align:center;
        z-index: 9;
        -webkit-box-sizing: initial !important;
    }
    .nav__div .nav__title{padding-top:30px;writing-mode:vertical-lr;font-family: 'SourceHanSansK', sans-serif !important    ;}
    .nav__div .uk-icon{cursor:pointer;}

    /* toggle menu */
    .menu__wrap{
        position:fixed;
        right:-440px;
        background:#e7e6e7;
        width:340px;
        height:100%;
        padding:50px 20px;
        z-index:1;
        display:none;
    }
    .menu__box{background:#fff;height:60%;border-radius:20px;}
    .menu__close{position:absolute;top:20px;right:25px;cursor:pointer;}
    .menu__box ul{padding:8% 20%;}
    .menu__box ul li{font-size:20px;text-align:center;padding:30px 0;border-bottom:1px solid #e7e6e7;}
    .menu__box ul li:last-child{border-bottom:none;}

    /* LOGIN */
    .login__section{position:absolute;width:100px;left:50%;top:60%;text-align:center;transform:translateX(-50%);}
    .login__section li{font-size:14px;margin: 10px 0;}
    .login_nav{
        display:none;
        width: 100%;
        background-color: #ffff;
        padding: 20px 50px;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        top: 50px;
    }
    .login__btn{border-bottom:1px solid #ccc;}

    /* main index */
    .container{width:100%;max-width:1920px;margin:85px auto;}
    .content{width:72.12%;margin:0 auto;border-bottom:1px solid #e7e6e7;}
    .content__inner{width:100%;}
    .content__inner::after{content:"";display:block;clear:both;}
    .post__lists0, .post__lists1, .new__div{float:left;}
    .post__lists0, .post__lists1{width:34%;}
    .post__lists0{padding-right:3%;}
    .post__lists1{padding-right:3%;}
    .new__div{width:26%;}
    .post__lists li{width:100%;height:auto;}
    .post__lists li a{display:block;width:100%;height:100%;}
    .lists__img{width:100%;height:auto;max-height:580px;overflow:hidden;}
    .lists__img img{width:100%;}
    .lists__desc{padding-top:25px;}
    .lists__category{
        width:60px;
        font-size:0.7em;
        color:#898989;
        text-align:center;
        border-bottom:1px solid #c9c9c9;
        margin:0 auto;
    }
    .lists__title{
        overflow:hidden;
        text-overflow:ellipsis;
        display:-webkit-box;
        -webkit-line-clamp:2;
        -webkit-box-orient:vertical;
        text-align:center;
        word-break:keep-all;
        padding:0 30px;
        font-size: 1.4em;
        line-height: 1.3;
        margin:13px 0 20px;
        color:#111;
        font-family: 'SourceHanSansK', sans-serif !important;
    }
    .lists__content{
        overflow:hidden;
        text-overflow:ellipsis;
        display:-webkit-box;
        -webkit-line-clamp:3;
        -webkit-box-orient:vertical;
        color:#898989;
        font-size:0.85em;
        padding:0 20px;
        text-align:center;
        word-break:keep-all;
        line-height:1.3;
    }
    .lists__date{text-align:center;font-size:0.8em;margin:20px 0 60px;color:#898989;}
    .lists__date b{color:#111;font-weight:400;}
    .fake__lists{display:none;}

    .new__post__div{width:100%;}
    .new__post__div h2{font-size:1.45em;letter-spacing:-1px;text-indent:10px;margin-bottom:10px;}
    .new__posts{width:100%;}
    .new__posts li{border-top:1px solid #dcdcdc;width:100%;}
    .new__desc{width:100%;}
    .new__category{width:35px;color:#898989;border-bottom:1px solid #c9c9c9;font-size:0.7em;padding-top:12px;}
    .new__title{
        width:100%;
        overflow:hidden;
        text-overflow:ellipsis;
        display:-webkit-box;
        -webkit-line-clamp:3;
        -webkit-box-orient:vertical;
        word-break:keep-all;
        font-size: 0.75em;
        color:#666;
        margin:20px 0 15px;
        font-weight:600;
    }
    .new__date{font-size:0.7em;margin-bottom:30px;color:#898989;}
    .new__date b{color:#111;font-weight:400;}
    .post__lists li:hover, .new__posts li:hover{text-shadow:1px 0px 1px RGBA(0,0,0,0.3);}
    .post__lists li:hover .lists__img{box-shadow:1px 1px 5px RGBA(144,20,68,0.2);}

    /* footer */
    footer{width:100%;height:430px;background-color:#100e11;position:relative;z-index:9999;}
    .footer__inner{
        width:100%;
        max-width:1200px;
        margin:0 auto;
        display:flex;
        justify-content:space-between;
        font-weight:600;
        color:#777;
    }
    .footer__tel{font-size:0.65em;letter-spacing:-0.25px;margin:0;padding-top:175px;}
    footer address{display:block;font-size:0.65em;letter-spacing:-0.25px;margin:3px 0 0;}
    .copywriter{font-size:0.65em;letter-spacing:-0.25px;text-transform:uppercase;margin:20px 0 15px;}
    .footer__logo{padding-top:155px;}
    .slogan{font-size:0.65em;letter-spacing:1px;text-transform:uppercase;margin:15px 0 0;}
    .footer__info ul{display:flex;}
    .footer__info ul li:first-child{padding-top:25px;margin-right:75px;}
    .footer__info ul li:last-child{padding-top:15px;}

    /* post */
    .container__post{margin-bottom:90px;}
    .content__info{width:100%;padding-top:60px;}
    .content__category{font-size:0.7em;text-indent:15px;color:#898989;margin-bottom:5px;}
    .title__div{
        width:100%;height:50px;
        line-height:50px;
        border-top:1px solid #636363;
        border-bottom:1px solid #d2d2d2;
        display:flex;justify-content:space-between;
    }
    .content__title{
        line-height:50px;
        text-indent:13px;
        font-size:1.1em;
        color:#242424;
        font-weight:400;
        margin:0;
        font-family: 'SourceHanSansK', sans-serif !important;
    }
    .content__date{margin:0;font-size:0.75em;padding-right:60px;}
    .content__date span{margin-right:10px;font-size:1.2em;}
    .content__desc{padding:40px 55px;font-size:0.85em;color:#343434;}
    .etc__list{width:100%;}
    .other__list{width:100%;border-top:1px solid #727272;border-bottom:1px solid #727272;}
    .other__list ul{width:100%;}
    .other__list li{width:100%;height:50px;display:flex;justify-content:left;margin:0;position:relative;}
    .other__list__way{text-indent:13px;line-height:50px;margin:0;font-size:0.9em;color:#636363;}
    .other__list__title{
        margin:0;
        width:630px;
        line-height:50px;
        overflow:hidden;
        text-overflow:ellipsis;
        white-space:nowrap;
        padding-left:55px;
        font-size:0.75em;
    }
    .other__list__date{position:absolute;right:25px;top:15px;margin:0;font-size:0.75em;}
    .other__list__date span{margin-right:10px;font-size:1.2em;}
    .btn__area{text-align:right;padding-bottom:145px;}
    .btn__area a{
        display:inline-block;
        width:130px;height:40px;
        line-height:40px;
        margin-top:25px;margin-right:12px;
        text-align:center;
    }
    .btn__area .btn__lists{background-color:#000;color:#fff;}
    .btn__area .btn__delete{border:1px solid #f0506e;color:#f0506e;}
    .btn__area .btn__edit{border:1px solid #4da7ca;color:#4da7ca;}

    /* login */
    .uk-form-stacked{min-width:640px;width:30%;margin:0 auto;}
    .login__btn{width:100%;}