@charset "utf-8";
#description,
#post {margin: 150px auto; padding: 0 20px;}
/* list */
#list {margin: 100px auto; padding: 0 20px;}
#list .wrap .list {list-style: none;}
#list .wrap .list>li {border-bottom: 1px solid #031F47; margin-bottom: 40px;}
#list .wrap .list li a .head {display: flex;}
#list .wrap .list li a .head time {font-size: 16px; margin-right: 50px;}
.cat ul {list-style: none; display: flex;}
.cat ul li {background-color: #031F47; border-radius: 99px; line-height: 2; min-width: 100px; text-align: center; font-size: 16px; color: #fff;}
.cat ul li.tech-memo {background-color: #077CAA;}
#list .wrap .list li a .body h4 {font-size: 20px; margin: 0; padding: 0; line-height: 3;}
#list .wrap .list li a .body h4::before {display: none;}
@media screen and (max-width:768px) {
    #list .wrap .list li a .head time {font-size: 14px;}
    #list .wrap .list li a .head .cat ul {margin-left: 30px;}
    #list .wrap .list li a .head .cat ul li {min-width: 80px; font-size: 14px;}

}
/* paginate */
#paginate {margin-bottom: 100px; padding: 0 20px;}
#paginate .wrap ul {list-style: none; display: flex; align-items: center; justify-content: center;}
#paginate .wrap ul li {padding-right: 10px;}
#paginate .wrap ul li:last-child {padding-right: 0;}
#paginate .wrap ul li span {width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; background-color: #031F47; color: #fff; border-radius: 99px;}
#paginate .wrap ul li .dots {background-color: transparent; color: #222;}
#paginate .wrap ul li a {width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; background-color: #dcdcdc; color: #fff; border-radius: 99px;}
#paginate .wrap ul li a:hover {background-color: #222;}
#paginate .wrap ul li .prev,
#paginate .wrap ul li .next {background-color: transparent; width: auto; height: auto; color: #031F47;}
#paginate .wrap ul li .prev:hover,
#paginate .wrap ul li .next:hover {background-color: transparent;}
/* single */
#post .wrap .head>h2 {font-size: 30px; border-bottom: 2px solid #031F47; line-height: 2.5;}
#post .wrap .head .box {margin: 15px auto 0; display: flex; justify-content: space-between;}
#post .wrap .content {margin: 50px auto 0;}
#post .wrap .content h1 {font-size: 30px; border-bottom: 2px solid #031F47; line-height: 2.5; margin: 50px auto;}
#post .wrap .content h2 {font-size: 24px; border-bottom: 1px solid #031F47; line-height: 2.5; margin: 50px auto;}
#post .wrap .content h3 {font-size: 22px; margin: 50px auto;}
#post .wrap .content h4 {font-size: 20px; margin: 50px auto;}
#post .wrap .content h5 {font-size: 18px; margin: 50px auto;}
#post .wrap .content p,
#post .wrap .content ul,
#post .wrap .content ol {margin-bottom: 30px;}
#post .wrap .content li {margin-bottom: 10px;}
#post .wrap .content img {width: auto;}
#post .wrap .content .col-2 {display: flex; flex-wrap: wrap; margin-bottom: 30px;}
#post .wrap .content .col-2 .col {width: 50%;}
#post .wrap .content .col-2 .col:nth-child(odd) {padding-right: 10px;}
#post .wrap .content .col-2 .col:nth-child(even) {padding-left: 10px;}
#post .wrap .content .aligncenter {text-align: center; margin: 0 auto;}
#post .wrap .content .alignleft {text-align: left; margin: 0 auto 0 0;}
#post .wrap .content .alignright {text-align: right; margin: 0 0 0 auto;}
#post .wrap .content .alignnone {text-align: none;}
@media screen and (max-width:768px) {
    #post .wrap .content .col-2 {display: block;}
    #post .wrap .content .col-2 .col {width: 100%;}
    #post .wrap .content .col-2 .col:nth-child(odd),
    #post .wrap .content .col-2 .col:nth-child(even) {padding: 0; margin-top: 20px;}
}