@keyframes loading {
    to {
        -webkit-transform: rotate(360deg)
    }
}

@-webkit-keyframes loading {
    to {
        transform: rotate(360deg)
    }
}

html {
    overflow-y: scroll
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", SimSun, sans-serif;
    color: #666;
    line-height: 1.8;
    background: #ededed;
    -webkit-transition: background-color .5s;
    transition: background-color .5s;
    -webkit-font-smoothing: antialiased
}

*,
:after,
:before {
    margin: 0;
    padding: 0;
    outline: 0;
    border: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box
}

::selection {
    color: #fff;
    background: #a5a5a5
}

::-moz-selection {
    color: #fff;
    background: #a5a5a5
}

.container {
    width: 85%;
    margin: 0 auto;
    position: relative
}

.column {
    float: left;
    padding: 0 15px;
    position: relative
}

.column:first-child {
    padding-left: 0
}

.column:last-child {
    padding-right: 0
}

.column.col-1 {
    width: 8.333%
}

.column.col-2 {
    width: 16.666%
}

.column.col-3 {
    width: 25%
}

.column.col-4 {
    width: 33.333%
}

.column.col-5 {
    width: 41.666%
}

.column.col-6 {
    width: 50%
}

.column.col-7 {
    width: 58.333%
}

.column.col-8 {
    width: 66.666%
}

.column.col-9 {
    width: 75%
}

.column.col-10 {
    width: 83.333%
}

.column.col-11 {
    width: 91.666%
}

.column.col-12 {
    width: 100%
}

.column.offset-by-1 {
    margin-left: 8.333%
}

.column.offset-by-2 {
    margin-left: 16.666%
}

.column.offset-by-3 {
    margin-left: 25%
}

.column.offset-by-4 {
    margin-left: 33.333%
}

.column.offset-by-5 {
    margin-left: 41.666%
}

.column.offset-by-6 {
    margin-left: 50%
}

.column.offset-by-7 {
    margin-left: 58.333%
}

.column.offset-by-8 {
    margin-left: 66.666%
}

.column.offset-by-9 {
    margin-left: 75%
}

.column.offset-by-10 {
    margin-left: 83.333%
}

.column.offset-by-11 {
    margin-left: 91.666%
}

.row,
form,
p {
    margin-bottom: 30px
}

#menu li:last-child,
.row:last-child,
form .row:last-child,
form:last-child,
h1:last-child,
h2:last-child,
h3:last-child,
h4:last-child,
h5:last-child,
h6:last-child,
p:last-child {
    margin-bottom: 0
}

.clearfix::after,
.container::after,
.row::after {
    content: '';
    display: block;
    clear: both
}

a {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent
}

a.link {
    color: #333
}

a.link:hover {
    text-decoration: underline solid #333
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 400;
    font-style: normal;
    color: #111;
    margin-bottom: 15px
}

h1 {
    font-size: 50px
}

h2 {
    font-size: 42px
}

h3 {
    font-size: 36px
}

h4 {
    font-size: 30px
}

h5 {
    font-size: 24px
}

h6 {
    font-size: 18px
}

.headline .title.project-title,
form .row {
    margin-bottom: 30px
}

input[type=email],
input[type=number],
input[type=password],
input[type=search],
input[type=tel],
input[type=text],
input[type=url],
select {
    width: 100%;
    height: 46px;
    line-height: 26px;
    font-family: inherit;
    font-size: inherit;
    padding: 0 15px;
    color: #333;
    background: #fff;
    border-radius: 0;
    -webkit-appearance: none
}

img,
textarea {
    max-width: 100%
}

button,
input[type=button],
input[type=reset],
input[type=submit],
textarea {
    height: 46px;
    font-family: inherit;
    font-size: inherit;
    border-radius: 0;
    -webkit-appearance: none
}

textarea {
    width: 100%;
    line-height: 26px;
    background: #fff;
    min-height: 120px;
    color: #333;
    padding: 15px
}

select {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="9" height="12" viewBox="0 0 9 12"><path fill="#5e6c75" d="M0.722,4.823L-0.01,4.1,4.134-.01,4.866,0.716Zm7.555,0L9.01,4.1,4.866-.01l-0.732.726ZM0.722,7.177L-0.01,7.9,4.134,12.01l0.732-.726Zm7.555,0L9.01,7.9,4.866,12.01l-0.732-.726Z"/></svg>');
    background-repeat: no-repeat;
    background-position: right 1rem center
}

button,
input[type=button],
input[type=reset],
input[type=submit] {
    text-transform: uppercase;
    padding: 0 15px;
    cursor: pointer;
    color: #fff;
    background: #444;
    -webkit-transition: .2s;
    transition: .2s
}

button:hover,
input[type=button]:hover,
input[type=reset]:hover,
input[type=submit]:hover {
    background-color: #2d2d2d
}

#menu li .submenu li a,
label {
    font-family: inherit;
    font-size: 14px
}

label {
    display: block;
    text-transform: uppercase;
    font-weight: 600;
    margin-bottom: 15px;
    cursor: pointer
}

img {
    vertical-align: middle
}

.float-left {
    float: left
}

.float-right {
    float: right
}

#site-loading {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10;
    background: rgba(20, 21, 22, .7);
    -webkit-transition: all .7s cubic-bezier(.7, .3, 0, 1) .3s;
    transition: all .7s cubic-bezier(.7, .3, 0, 1) .3s
}

#site-loading.hide {
    height: 0;
    visibility: hidden
}

#nav-close,
.loader {
    width: 20px;
    height: 20px
}

.loader {
    border-radius: 50%;
    border: 3px solid #fff;
    border-top: 3px solid transparent;
    bottom: 100px;
    left: 50%;
    margin-left: -10px;
    -webkit-animation: loading .7s linear infinite;
    animation: loading .7s linear infinite;
    -webkit-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
    position: absolute
}

#site-loading.hide .loader {
    bottom: -24px;
    visibility: hidden
}

#site-nav {
    width: 35%;
    height: 100%;
    position: fixed;
    padding: 80px;
    top: 0;
    right: -35%;
    z-index: 10;
    background: #fff;
    -webkit-transition: all .5s cubic-bezier(.7, .3, 0, 1);
    transition: all .5s cubic-bezier(.7, .3, 0, 1)
}

#site-nav.nav-open {
    right: 0
}

#nav-close {
    cursor: pointer;
    position: relative
}

#nav-close::after,
#nav-close::before {
    content: '';
    width: 100%;
    height: 2px;
    background: #000;
    position: absolute;
    top: 50%;
    left: 0;
    margin-top: -1px;
    -webkit-transition: transform .2s ease .4s;
    transition: transform .2s ease .4s
}

#site-nav.nav-open #nav-close::before {
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg)
}

#site-nav.nav-open #nav-close::after {
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg)
}

#menu {
    padding: 50px;
    list-style: none;
    text-align: right;
    line-height: 1
}

#menu li {
    margin-bottom: 50px
}

#menu li a,
#menu li span {
    position: relative;
    font-size: 24px;
    color: #444
}

#menu li .submenu {
    list-style: none;
    position: relative;
    line-height: 1.6;
    margin-top: 10px
}

#menu li .submenu li {
    margin-bottom: 0
}

#menu li .submenu li a {
    color: #777
}

#menu li .submenu li a:hover {
    color: #111
}

#site-main {
    max-width: 1200px;
    margin: 50px auto;
    background: #fff
}

#main-overlay {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 9;
    background: rgba(20, 21, 22, .7);
    opacity: 0;
    visibility: hidden;
    -webkit-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out
}

#main-overlay.nav-open {
    opacity: 1;
    visibility: visible
}

#site-header {
    height: 110px
}

#header-logo {
    margin-top: 61px
}

#header-logo .icon-logo {
    font-size: 18px;
    color: #111
}

#burger,
#burger-icon {
    width: 20px;
    height: 14px
}

#burger {
    margin-top: 68px;
    cursor: pointer;
    position: relative
}

#burger-icon {
    position: absolute;
    top: 0;
    right: 0
}

#burger-icon .icon-bar {
    width: 100%;
    height: 2px;
    position: absolute;
    right: 0;
    background: #111
}

#burger-icon .icon-bar.top {
    top: 0
}

#burger-icon .icon-bar.middle {
    top: 6px
}

#burger-icon .icon-bar.bottom {
    bottom: 0;
    width: 70%
}

.headline {
    text-align: center;
    padding: 130px 0
}

.headline-content {
    max-width: 650px;
    margin: 0 auto
}

.headline .title {
    font-size: 30px;
    color: #444;
    margin-bottom: 15px
}

.headline .title:last-child {
    margin-bottom: 0
}

.search-bar {
    padding: 40px 0 50px
}

.search-tab {
    max-width: 470px;
    height: 33px;
    margin: 0 0 20px;
    display: flex;
    align-items: center;
    flex-direction: row;
    justify-content: space-between;
    border-bottom: 1px solid #e9e9e9;
    -webkit-tap-highlight-color: transparent
}

.search-tab span {
    height: 32px;
    padding: 0 8px;
    display: inline-block;
    font-size: 16px;
    line-height: 1;
    opacity: .6;
    color: #444;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    -webkit-transition: all .2s ease-in;
    transition: all .2s ease-in
}

.search-tab span.active,
.search-tab span:hover {
    opacity: 1;
    border-color: #838383
}

.search-form input[type=search] {
    max-width: 470px;
    width: 74%;
    background: #f5f5f5;
    overflow: hidden
}

.search-form input[type=submit] {
    max-width: 130px;
    width: 26%
}

.hero {
    position: relative
}

.entry-image,
.hero-image {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1
}

.works {
    background: #f7f7f7
}

.work-entry {
    overflow: hidden
}

.work-entry .reveal {
    width: 100%;
    height: 100%
}

.work-entry .content,
.work-entry .info {
    position: absolute;
    right: 0;
    left: 0;
    z-index: 1
}

.work-entry .info {
    bottom: 0;
    background: rgba(20, 21, 22, .8);
    opacity: 0;
    -webkit-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
    top: 0
}

.work-entry:hover .info {
    opacity: 1
}

.work-entry .content {
    top: 50%;
    text-align: center;
    padding: 0 50px;
    -webkit-transform: translatey(-50%);
    transform: translatey(-50%)
}

.work-entry .content .title {
    font-family: inherit;
    font-weight: 600;
    color: #fff;
    top: -15px
}

.work-entry .content .cat {
    font-family: inherit;
    font-size: 14px;
    color: rgba(255, 255, 255, .7);
    top: 15px
}

.work-entry .content .cat,
.work-entry .content .title {
    position: relative;
    opacity: 0;
    -webkit-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out
}

.work-entry:hover .content .cat,
.work-entry:hover .content .title {
    top: 0;
    opacity: 1
}

.project-categories span {
    font-family: inherit;
    font-size: 14px;
    color: #b3b3b3;
    margin-right: 15px
}

.project-categories span:last-child,
.social .social-link:last-child {
    margin-right: 0
}

.work-link,
.work-link .tab span {
    -webkit-transition: all .2s ease-in
}

.work-link {
    min-height: 500px;
    font-size: 16px;
    opacity: 0;
    padding: 40px 0 45px;
    transition: all .2s ease-in-out
}

.work-link .container {
    width: 80%
}

.work-link .tab {
    max-width: 780px;
    margin: 0 auto;
    padding-bottom: 19px;
    display: flex;
    align-items: center;
    flex-direction: row;
    justify-content: space-between;
    -webkit-tap-highlight-color: transparent
}

.work-link .tab span {
    padding: 4px 24px;
    display: inline-block;
    color: #555;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    transition: all .2s ease-in
}

.work-link .info a:hover,
.work-link .tab span.active,
.work-link .tab span:hover {
    background: #e5e5e5;
    color: #333
}

#setting-icon {
    margin-left: 40px;
    font-size: 20px;
    color: #333;
    cursor: pointer
}

.work-link .info ul {
    line-height: 32px;
    list-style: none;
    overflow: hidden
}

.work-link .info li {
    width: 12.5%;
    padding: 9px 0;
    float: left;
    display: inline-flex;
    white-space: nowrap;
    justify-content: center;
    overflow: hidden
}

.work-link .info li:first-child {
    color: #999
}

.work-link .info a {
    padding: 0 16px;
    -webkit-transition: all .1s ease-in;
    transition: all .1s ease-in
}

#site-footer {
    text-align: center;
    padding: 100px 0
}

.copy {
    font-size: 14px
}

.social {
    margin-top: 30px
}

.social .social-link {
    margin-right: 30px
}

.social .social-link:hover {
    color: #2d2d2d
}

.grey-section {
    padding: 100px 0;
    background: #f7f7f7
}

.small-title {
    text-transform: uppercase;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 15px
}

.reveal {
    position: relative;
    top: 100px;
    opacity: 0;
    -webkit-transition: all .5s ease;
    transition: all .5s ease
}

.reveal.reveal-in {
    top: 0;
    opacity: 1
}

@media screen and (max-width:1024px) {
    .container {
        width: 90%
    }

    #site-main {
        margin: 0
    }

    iframe {
        width: 100%;
        height: 580px
    }
}

@media screen and (max-width:768px) {
    .container {
        width: 70%
    }

    .column {
        width: 100% !important;
        margin: 0 0 30px !important;
        padding: 0
    }

    .column:last-child {
        margin-bottom: 0
    }

    #site-header {
        height: 90px
    }

    #header-logo {
        margin-top: 36px
    }

    #burger {
        margin-top: 43px
    }

    #site-nav {
        width: 80%;
        right: -80%
    }

    .headline-content {
        max-width: 100%
    }

    .search-bar {
        padding-bottom: 60px
    }

    .search-tab span {
        font-size: 15px
    }

    .work-link {
        padding: 30px 0;
        font-size: 14px
    }

    .work-link .container {
        width: 85%
    }

    .work-link .tab {
        padding-bottom: 9px
    }

    .work-link .tab span {
        padding: 2px 12px
    }

    form .row,
    form .row .column {
        margin-bottom: 15px !important
    }

    form .row .column:last-child,
    form .row:last-child {
        margin-bottom: 0 !important
    }

    iframe {
        width: 100%;
        height: 440px
    }
}

@media screen and (max-width:480px) {
    .container {
        width: 90%
    }

    #site-nav {
        padding: 30px
    }

    #menu {
        padding: 30px 0 0
    }

    #menu li h4 {
        font-size: 26px
    }

    #menu li span {
        font-size: 18px
    }

    iframe {
        width: 100%;
        height: 200px
    }

    #setting-icon {
        margin-left: 0;
        padding-bottom: 6px;
        line-height: 25px
    }

    .work-link .tab span {
        padding: 0 0 4px;
        border-bottom: 2px solid transparent
    }

    .work-link .tab span.active,
    .work-link .tab span:hover {
        background: 0 0;
        border-bottom: 2px solid #838383
    }

    .work-link .info ul {
        padding: 6px 0;
        border-bottom: 1px solid #eaeaea
    }

    .work-link .info ul:last-child {
        border-bottom: none
    }

    .work-link .info li {
        width: 25%;
        padding: 0
    }

    #site-footer {
        padding: 50px 0
    }

    .social .social-link {
        margin-right: 20px
    }
}

@font-face {
  font-family: 'iconfont';  /* project id 1099429 */
  src: url('//at.alicdn.com/t/font_1099429_pmhl7a9jun.eot');
  src: url('//at.alicdn.com/t/font_1099429_pmhl7a9jun.eot?#iefix') format('embedded-opentype'),
  url('//at.alicdn.com/t/font_1099429_pmhl7a9jun.woff2') format('woff2'),
  url('//at.alicdn.com/t/font_1099429_pmhl7a9jun.woff') format('woff'),
  url('//at.alicdn.com/t/font_1099429_pmhl7a9jun.ttf') format('truetype'),
  url('//at.alicdn.com/t/font_1099429_pmhl7a9jun.svg#iconfont') format('svg');
}

[class*=" icon-"]:before,
[class^=icon-]:before {
    font-family: "iconfont";
    font-style: normal;
    font-weight: 400;
    speak: none;
    display: inline-block;
    text-decoration: inherit;
    width: 1em;
    margin-right: .2em;
    text-align: center;
    font-variant: normal;
    text-transform: none;
    line-height: 1em;
    margin-left: .2em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

.icon-logo:before {
    content: '\e70f'
}

.icon-cog:before {
    content: '\e638'
}

.icon-weibo:before {
    content: '\e618';
    font-size: 1.4em;
}

.icon-zhihu:before {
    content: '\e600';
    font-size: 1.4em;
}

.icon-github-circled:before {
    content: '\e601';
    font-size: 1.4em;
}

.icon-home:before {
    content: '\e70f';
    font-size: 1.4em;
}