body.bookmarks #globalNav li.bookmarks a {
    color: #fff
 }
 
 body.bookmarks #globalNav li.bookmarks:before,
 body.bookmarks #globalNav li.bookmarks:after {
    -webkit-transform: translateX(0%);
    -ms-transform: translateX(0%);
    transform: translateX(0%)
 }
 
 body.bookmarks #contentsInner {
    padding-top: 40px
 }
 
 body.bookmarks #contentsInner .archiveTtl {
    margin-bottom: 100px;
    font-size: 26px;
    line-height: 1.6
 }
 
 @media screen and (max-width: 900px) {
    body.bookmarks #contentsInner {
       padding-top: 20px !important
    }
 
    body.bookmarks #contentsInner .archiveTtl {
       margin-bottom: 40px;
       font-size: 20px
    }
 }
 
 .articles article .thumb {
    padding-top: 75%
 }
 
 .articles article .detail a,
 .articles article .link a {
    width: 100%;
    height: 100%;
    display: block
 }
 
 html:not(.desktop) .articles article .thumb {
    margin-bottom: 58px;
    overflow: visible
 }
 
 html:not(.desktop) .articles article .thumb .detail,
 html:not(.desktop) .articles article .thumb .link {
    position: absolute;
    bottom: -48px;
    display: block;
    width: calc(50% - 4px);
    height: 40px;
    border: 1px solid #000
 }
 
 html:not(.desktop) .articles article .thumb .detail a,
 html:not(.desktop) .articles article .thumb .link a {
    text-align: center;
    line-height: 40px
 }
 
 html:not(.desktop) .articles article .thumb .detail {
    left: 0
 }
 
 html:not(.desktop) .articles article .thumb .link {
    right: 0
 }
 
 .desktop .articles article .thumb .detail,
 .desktop .articles article .thumb .link {
    position: absolute;
    left: 0;
    top: 0;
    -webkit-transition: all .4s cubic-bezier(0.19, 1, 0.22, 1);
    transition: all .4s cubic-bezier(0.19, 1, 0.22, 1);
    background-color: rgba(0, 0, 0, 0.8);
    width: 100%;
    height: 50%
 }
 
 .desktop .articles article .thumb .detail a,
 .desktop .articles article .thumb .link a {
    color: #fff;
    text-align: center;
    width: 100%;
    height: 100%;
    vertical-align: middle
 }
 
 .desktop .articles article .thumb .detail span,
 .desktop .articles article .thumb .link span {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -40%);
    -ms-transform: translate(-50%, -40%);
    transform: translate(-50%, -40%);
    line-height: 2;
    font-size: 16px
 }
 
 .desktop .articles article .thumb .detail {
    -webkit-transform: translate(-101%);
    -ms-transform: translate(-101%);
    transform: translate(-101%)
 }
 
 .desktop .articles article .thumb .detail a {
    -webkit-transform-origin: right center;
    -ms-transform-origin: right center;
    transform-origin: right center
 }
 
 .desktop .articles article .thumb .link {
    -webkit-transform: translate(101%);
    -ms-transform: translate(101%);
    transform: translate(101%);
    top: 50%
 }
 
 .desktop .articles article .thumb .link a {
    -webkit-transform-origin: left center;
    -ms-transform-origin: left center;
    transform-origin: left center
 }
 
 .desktop .articles article .thumb .detail:hover,
 .desktop .articles article .thumb .link:hover {
    background-color: rgba(0, 0, 0, 0.6)
 }
 
 .desktop .articles article .thumb:hover .detail,
 .desktop .articles article .thumb:hover .link {
    -webkit-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0)
 }
 
 article.main:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden
 }
 
 article.main>header {
    float: right;
    width: calc(44% - 30px)
 }
 
 article.main h1.ttl {
    font-size: 20px;
    line-height: 1.6;
    margin-bottom: 10px
 }
 
 article.main .date {
    font-size: 12px;
    color: #999;
    margin-bottom: 20px
 }
 
 article.main .tags {
    margin-top: 20px;
    width: calc(44% - 30px);
    float: right
 }
 
 article.main .capture {
    width: 56%;
    float: left;
    margin-right: 30px;
    box-shadow: 0 0 0 1px #ddd
 }
 
 article.main .capture img {
    -webkit-transition: opacity .2s linear;
    transition: opacity .2s linear;
    width: 100%;
    display: block;
    opacity: 0
 }
 
 article.main .capture img.loaded {
    opacity: 1
 }
 
 article.main .body p {
    font-size: 12px;
    line-height: 1.6;
    margin-bottom: 10px
 }
 
 @media screen and (min-width: 540px) and (max-width: 900px) {
    article.main>header {
       float: right;
       width: calc(48% - 20px)
    }
 
    article.main .tags {
       width: calc(48% - 20px)
    }
 
    article.main .capture {
       width: 52%;
       margin-right: 20px
    }
 }
 
 @media screen and (max-width: 720px) {
 
    article.main>header,
    article.main .tags {
       float: none;
       width: auto
    }
 
    article.main .capture {
       max-width: 100%;
       width: 100%;
       margin-bottom: 20px
    }
 }
 
 .social {
    margin-top: 120px;
    width: 100%;
    letter-spacing: -.5em;
    text-align: center
 }
 
 .social li:first-child {
    margin-left: 0
 }
 
 .social li {
    overflow: hidden;
    position: relative;
    display: inline-block;
    letter-spacing: normal;
    height: 50px;
    margin: 0 10px;
    position: relative
 }
 
 .social li:before,
 .social li:after {
    -webkit-transition: -webkit-transform .6s cubic-bezier(0.19, 1, 0.22, 1);
    transition: -webkit-transform .6s cubic-bezier(0.19, 1, 0.22, 1);
    transition: transform .6s cubic-bezier(0.19, 1, 0.22, 1);
    transition: transform .6s cubic-bezier(0.19, 1, 0.22, 1), -webkit-transform .6s cubic-bezier(0.19, 1, 0.22, 1);
    background-color: rgba(0, 0, 0, 0.6);
    content: '';
    height: 100%;
    width: 100%
 }
 
 .social li a {
    display: block;
    width: 100%;
    height: 100%;
    -webkit-transition: color .6s cubic-bezier(0.19, 1, 0.22, 1);
    transition: color .6s cubic-bezier(0.19, 1, 0.22, 1);
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 2
 }
 
 .social svg {
    -webkit-transition: fill .6s cubic-bezier(0.19, 1, 0.22, 1);
    transition: fill .6s cubic-bezier(0.19, 1, 0.22, 1);
    fill: #000;
    position: relative;
    z-index: 2
 }
 
 #globalHeader h1 a img {
    text-indent: 120%;
    white-space: nowrap;
    line-height: .1;
    font-size: 30px;
    display: block;
    width: 100%;
    height: 100%;
    z-index: 3
 }