@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:150px}
#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 70px}
.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;font-weight: 100;white-space:nowrap;justify-content:center;overflow:hidden}
.work-link .info li:first-child{color:#e16b8c;font-weight: 100;}
.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:'fontello';
src:url(../font/fontello.eot?87979415);
src:url(../font/fontello.eot?87979415#iefix) format('embedded-opentype'),
url(../font/fontello.woff2?87979415) format('woff2'),
url(../font/fontello.woff?87979415) format('woff'),
url(../font/fontello.ttf?87979415) format('truetype'),
url(../font/fontello.svg?87979415#fontello) format('svg');
font-weight:400;font-style:normal}*/

[class*=" icon-"]:before,[class^=icon-]:before{font-family:"fontello";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:'\e800'}.icon-cog:before{content:'\e801'}.icon-weibo:before{content:'\e802'}.icon-zhihu:before{content:'\e803'}.icon-github-circled:before{content:'\e804'}.icon-home:before{content:'\e805'}