/**
 * Archive List.
 */

#sec-archives {
    width: 820px;
    margin: 0 auto;
    padding-bottom: 100px;
}

#sec-archives .cat-icon {
    width: 820px;
    margin: 0 auto;
    padding: 0px 0 35px;
}

#sec-archives .coming-soon {
    padding: 140px 0;
    padding-left: 20px;
    letter-spacing: 0.2em;
}

.page-entry #sec-archives .cat-icon {
    border-top: 12px solid #222;
    padding-top: 60px;
}

#sec-archives ul {}

#sec-archives li.first {
    margin-left: 0;
}

#sec-archives li.last {
    margin-right: 0;
}

#sec-archives li {
    float: left;
    width: 250px;
    margin: 0 17px 30px;
}

#sec-archives li .new {
    position: absolute;
}

#sec-archives li .title {
    padding: 10px 0 0;
}

#sec-archives li .desc {
    padding: 10px 0;
}


/**
 * List Thumbs.
 */

.list-thumbs {
    width: 820px;
    margin: 0 auto;
    padding-bottom: 100px;
}

.list-thumbs .cat-icon {
    width: 820px;
    margin: 0 auto;
    padding: 0px 0 35px;
}

.list-thumbs .coming-soon {
    padding: 140px 0;
    padding-left: 20px;
    letter-spacing: 0.2em;
}

.page-entry .list-thumbs .cat-icon {
    border-top: 12px solid #222;
    padding-top: 60px;
}

.list-thumbs li {
    float: left;
    width: 250px;
    margin: 0 17px 30px;
}

.list-thumbs li.n1,
.list-thumbs li.n4,
.list-thumbs li.n7,
.list-thumbs li.n10,
.list-thumbs li.n13,
.list-thumbs li.n16,
.list-thumbs li.n19,
.list-thumbs li.n22,
.list-thumbs li.n25,
.list-thumbs li.n28,
.list-thumbs li.n31,
.list-thumbs li.n34,
.list-thumbs li.n37,
.list-thumbs li.n40,
.list-thumbs li.n43,
.list-thumbs li.n46,
.list-thumbs li.n49,
.list-thumbs li.n52,
.list-thumbs li.n55,
.list-thumbs li.n58 {
    margin-left: 0;
    clear: both;
}

.list-thumbs li.n3,
.list-thumbs li.n6,
.list-thumbs li.n9,
.list-thumbs li.n12,
.list-thumbs li.n15,
.list-thumbs li.n18,
.list-thumbs li.n21,
.list-thumbs li.n24,
.list-thumbs li.n27,
.list-thumbs li.n30,
.list-thumbs li.n33,
.list-thumbs li.n36,
.list-thumbs li.n39,
.list-thumbs li.n42,
.list-thumbs li.n45,
.list-thumbs li.n48,
.list-thumbs li.n51,
.list-thumbs li.n54,
.list-thumbs li.n57,
.list-thumbs li.n60 {
    margin-right: 0;
}

.list-thumbs li .new {
    position: absolute;
}

.list-thumbs li .title {
    padding: 10px 0 0;
}

.list-thumbs li .desc {
    padding: 10px 0;
}

#sec-ranking.list-thumbs li.n1 {
    background: url(../img/numbers/ranking_1.png) no-repeat 0 20px;
    padding-top: 68px;
}

#sec-ranking.list-thumbs li.n2 {
    background: url(../img/numbers/ranking_2.png) no-repeat 0 20px;
    padding-top: 68px;
}

#sec-ranking.list-thumbs li.n3 {
    background: url(../img/numbers/ranking_3.png) no-repeat 0 20px;
    padding-top: 68px;
}

#sec-ranking.list-thumbs li.n4 {
    background: url(../img/numbers/ranking_4.png) no-repeat 0 20px;
    padding-top: 68px;
}

#sec-ranking.list-thumbs li.n5 {
    background: url(../img/numbers/ranking_5.png) no-repeat 0 20px;
    padding-top: 68px;
}

#sec-ranking.list-thumbs li.n6 {
    background: url(../img/numbers/ranking_6.png) no-repeat 0 20px;
    padding-top: 68px;
}


/**
 * Global Side Navigation.
 */

#g-side-nav {
    position: fixed;
    z-index: 99999;
    top: 0;
    left: -80px;
    height: 100%;
}

#g-side-nav .open-btn {
    display: block;
    position: absolute;
    width: 40px;
    height: 40px;
    overflow: hidden;
    top: 40px;
    left: 40px;
}

#g-side-nav.close .open-btn .close {
    display: none;
}

#g-side-nav.open .open-btn .open {
    display: none;
}

#g-side-nav .mask {
    position: absolute;
    overflow: hidden;
    height: 100%;
    width: 40px;
    -webkit-overflow-scrolling: touch;
}

#g-side-nav .main-nav {
    position: relative;
    background: #fff;
    max-width: 120px;
    width: auto;
    height: 100%;
    overflow: hidden;
}

#g-side-nav .content-nav {
    text-align: center;
    position: absolute;
    width: 100%;
    bottom: 45%;
}

#g-side-nav .home {
    display: block;
}

#g-side-nav .home,
#g-side-nav .content-nav li {
    height: 40px;
    width: 100%;
    overflow: hidden;
}

#g-side-nav .home a,
#g-side-nav .content-nav li a {
    text-align: left;
    display: block;
    height: 100%;
    width: 100%;
    background: url(../img//nav/page/sprite_cat_labels.png) 0 0 no-repeat;
}

#g-side-nav .home a {
    background-position: 0 -240px;
}

#g-side-nav .content-nav li.eat a {
    background-position: 0 -40px;
}

#g-side-nav .content-nav li.live a {
    background-position: 0 -80px;
}

#g-side-nav .content-nav li.play a {
    background-position: 0 -120px;
}

#g-side-nav .content-nav li.learn a {
    background-position: 0 -160px;
}

#g-side-nav .content-nav li.about a {
    background-position: 0 -200px;
}

#g-side-nav .links-nav {
    position: absolute;
    bottom: 15px;
    width: 100%;
}

#g-side-nav .links-nav .sns {
    text-align: center;
}

#g-side-nav.open .links-nav .sns {
    width: 100%;
}

#g-side-nav.open .links-nav .sns .label {
    display: block;
}

#g-side-nav.open .links-nav .sns a {
    display: inline;
}

#g-side-nav .links-nav .sns,
#g-side-nav.close .links-nav .sns {
    width: 40px;
}

#g-side-nav .links-nav .sns .label,
#g-side-nav.close .links-nav .sns .label {
    display: none;
}

#g-side-nav .links-nav .sns a,
#g-side-nav.close .links-nav .sns a {
    display: block;
    margin-top: 5px;
}

#g-side-nav .archives-nav {
    position: absolute;
    width: 200px;
    height: 100%;
    top: 0;
    left: 120px;
    overflow: hidden;
    background-color: rgba(0, 0, 0, 0.9);
}

#g-side-nav .archives-nav ul {
    opacity: 0;
}

#g-side-nav .archives-nav {
    overflow-y: auto;
    overflow-x: hidden;
}

#g-side-nav .archives-nav li .box {
    position: relative;
    left: 6px;
    width: 194px;
    height: 120px;
    overflow: hidden;
    display: block;
}

#g-side-nav .archives-nav li .box .new {
    position: absolute;
}

#g-side-nav .archives-nav li .box .title {
    display: block;
    position: absolute;
    z-index: 1;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    width: 100%;
}

#g-side-nav .archives-nav li .box .title span {
    display: block;
    padding: 7px;
}