style.css

/*! 
Theme Name: Template
Version: 1.0
Author: Jiangshui
Website: http://yujiangshui.com
E-mail: yujiangshui@gmail.com
*/html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}table{border-collapse:collapse;border-spacing:0}:focus{outline:0}h1,h2,h3,h4,h5,h6{font-weight:normal}.clearfix:before,.section:before,.nav ul:before{content:"";display:table}.clearfix:after,.section:after,.nav ul:after{content:"";display:table;clear:both}input{-webkit-appearance:none;border-radius:0}a{color:#2094c4;text-decoration:none;outline:none}a:hover{color:#3498db}p{padding:0 0 20px}strong{font-weight:bold}body{color:#000;font:normal 14px/1.4 "helvetica neue",tahoma,"hiragino sans gb",stheiti,"wenquanyi micro hei",\5FAE\8F6F\96C5\9ED1,\5B8B\4F53,sans-serif;width:100%;overflow:hidden}.left{float:left}.right{float:right}.section-wrap{position:relative;z-index:2}.section{width:960px;margin:0 auto}.section h1{margin-bottom:40px;font-size:36px}.overlay{background:#ecf0f1;position:absolute;display:none;top:0;left:0;right:0;bottom:0;z-index:2;opacity:1;-webkit-transition:opacity 0.4s ease-in;-moz-transition:opacity 0.4s ease-in;-ms-transition:opacity 0.4s ease-in;-o-transition:opacity 0.4s ease-in;transition:opacity 0.4s ease-in}.loading-process .overlay{display:block}.finish-loading .overlay{opacity:0}.finish-loading .loading-info,.finish-loading .loading-circle{opacity:0}.finish-loading .loading-avatar{border:4px solid #fff}.fade{opacity:0;position:relative;top:10px;-webkit-transition:all 0.2s ease-in;-moz-transition:all 0.2s ease-in;-ms-transition:all 0.2s ease-in;-o-transition:all 0.2s ease-in;transition:all 0.2s ease-in}.fade.fade-in{opacity:1;top:0}.section-header{position:fixed;top:0;left:0;right:0;z-index:20}.finish-loading .nav{opacity:.6}.nav{width:960px;position:absolute;z-index:5}.nav li{float:left;text-align:center;position:relative;width:20%}.nav li a{color:#fff;font-size:30px;display:block;padding:60px 0;width:100%;-webkit-transition:all 0.6s ease-in;-moz-transition:all 0.6s ease-in;-ms-transition:all 0.6s ease-in;-o-transition:all 0.6s ease-in;transition:all 0.6s ease-in}.nav .fade1 a:hover,.nav .fade1.hover a{color:#95a5a6}.nav .fade2 a:hover,.nav .fade2.hover a{color:#2980b9}.nav .fade3 a:hover,.nav .fade3.hover a{color:#c0392b}.nav .fade4 a:hover,.nav .fade4.hover a{color:#27ae60}.nav .back-home{height:1px;-webkit-transition:none;-moz-transition:none;-ms-transition:none;-o-transition:none;transition:none}.nav .back-home a{position:absolute;width:100px;height:100px;left:50%;margin-left:-50px;border-radius:50%;border:4px solid #fff;overflow:hidden;text-indent:-9999px;background:url(images/avatar.jpg);-webkit-background-size:100px 100px;background-size:100px 100px;padding:0 !important;top:30px}.nav .back-home a:hover{border-bottom:4px solid #fff}.nav-bg{background:#000;position:relative;z-index:1;height:80px;margin:0 auto;width:0;-webkit-transition:width 0.6s ease-in;-moz-transition:width 0.6s ease-in;-ms-transition:width 0.6s ease-in;-o-transition:width 0.6s ease-in;transition:width 0.6s ease-in}.shrink .nav li a{padding:20px 0;font-size:24px}.shrink .nav .back-home a{top:0}.shrink .nav-bg{width:100%}.home-bg{position:fixed;top:0;left:0;right:0;bottom:0;z-index:1}.home-bg img{max-width:none}.loading{margin:auto;position:fixed;top:0;left:0;right:0;bottom:0;width:120px;height:120px;z-index:10}.loading-circle{background-color:rgba(0,0,0,0);opacity:.9;border-top:10px solid #27ae60;border-right:10px solid #d35400;border-bottom:10px solid #2980b9;border-left:10px solid #c0392b;border-radius:50%;width:100px;height:100px;margin:0 auto;-webkit-transition:all 0.4s ease-in;-moz-transition:all 0.4s ease-in;-ms-transition:all 0.4s ease-in;-o-transition:all 0.4s ease-in;transition:all 0.4s ease-in;animation:spin 1s infinite linear;-webkit-animation:spin 1s infinite linear;-moz-animation:spin 1s infinite linear;-o-animation:spin 1s infinite linear}@keyframes spin{0%{-webkit-transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg)}}@-moz-keyframes spin{0%{-webkit-transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg)}}@-webkit-keyframes spin{0%{-webkit-transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg)}}@-o-keyframes spin{0%{-webkit-transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg)}}.loading-avatar{width:100px;height:100px;overflow:hidden;position:absolute;top:10px;left:10px;border-radius:50%;-webkit-transition:border-width 0.4s ease-in;-moz-transition:border-width 0.4s ease-in;-ms-transition:border-width 0.4s ease-in;-o-transition:border-width 0.4s ease-in;transition:border-width 0.4s ease-in}.loading-avatar img{width:100px;height:100px;border-radius:50px}.loading-info{position:absolute;top:130%;width:160%;-webkit-transition:opacity 0.4s ease-in;-moz-transition:opacity 0.4s ease-in;-ms-transition:opacity 0.4s ease-in;-o-transition:opacity 0.4s ease-in;transition:opacity 0.4s ease-in}.section-fristpage{text-align:center;color:#fff;font-size:30px}.section-fristpage p{padding-bottom:0}.section-fristpage .fade2{margin-top:60px}.section-fristpage .fade3{margin-top:60px}.scroll-tip{display:block;width:60px;height:60px;border-radius:50%;position:absolute;bottom:-30px;top:auto !important;left:50%;margin-left:-30px;text-indent:-9999px;background:#fff url(images/bg-down-arrow.png) no-repeat 50% 30%}.section-about{background:#fff}.section-about .about-content h1{margin-bottom:30px;font-size:36px}.section-about .about-content p{font-size:20px}.section-about .about-content .left{margin-top:10%;margin-left:10%}.section-about .about-content .my-photo{width:335px;height:540px}.section-about .about-content .right .fade4{top:0;left:20px}.section-about .about-content .right .fade4.fade-in{left:0}.section-about .fade{-webkit-transition:all 0.4s ease-in;-moz-transition:all 0.4s ease-in;-ms-transition:all 0.4s ease-in;-o-transition:all 0.4s ease-in;transition:all 0.4s ease-in}.section-works{background:#27ae60}.works-content h1{text-align:center;color:#fff}.works-content .works-list .fade{top:20px;left:10px;-webkit-transition:all 0.4s ease-in;-moz-transition:all 0.4s ease-in;-ms-transition:all 0.4s ease-in;-o-transition:all 0.4s ease-in;transition:all 0.4s ease-in}.works-content .works-list .fade.fade-in{left:0;top:0}.works-content .works-item{position:relative;width:300px;margin-left:30px;margin-bottom:30px;float:left;overflow:hidden}.works-content .works-item img{-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);-o-transform:scale(1);transform:scale(1);-webkit-transition:all 0.2s ease-in;-moz-transition:all 0.2s ease-in;-ms-transition:all 0.2s ease-in;-o-transition:all 0.2s ease-in;transition:all 0.2s ease-in}.works-content .works-item.first{margin-left:0}.works-content .works-item:hover img{-webkit-transform:scale(1.5);-moz-transform:scale(1.5);-ms-transform:scale(1.5);-o-transform:scale(1.5);transform:scale(1.5)}.works-content .works-item:hover .work-info{top:0}.works-content .works-item .work-info{position:absolute;top:137px;padding:10px;left:0;right:0;height:100%;color:#fff;background:rgba(0,0,0,0.8);-webkit-transition:all 0.2s ease-in;-moz-transition:all 0.2s ease-in;-ms-transition:all 0.2s ease-in;-o-transition:all 0.2s ease-in;transition:all 0.2s ease-in}.works-content .works-item .work-info h2{margin-bottom:20px}.more-link{color:#fff;display:block;padding:10px 20px;width:60px;text-align:center;margin:0 auto;background:#3d3d3d;background:rgba(0,0,0,0.6)}.more-link:hover{color:#fff;background:#3d3d3d;background:rgba(0,0,0,0.4)}.section-skill{background:#2980b9}.skill-content h1{color:#fff}.skill-content ul{color:#fff}.skill-content li{font-size:18px;line-height:2}.skill-content .fade{top:0;left:10px;-webkit-transition:all 0.2s ease-in;-moz-transition:all 0.2s ease-in;-ms-transition:all 0.2s ease-in;-o-transition:all 0.2s ease-in;transition:all 0.2s ease-in}.skill-content .fade.fade-in{left:0}.section-contact{background:#c0392b;color:#dadada}.section-contact a{color:#fff}.section-contact a:hover{color:#dadada}.section-contact .contact-content .left{width:40%}.section-contact .contact-content .right{width:50%}.section-contact .contact-content h1{color:#fff;margin-bottom:30px}.section-contact .contact-content .contact-info{margin-top:20px}.section-contact .contact-content h2{color:#fff;margin-bottom:20px}.section-contact .contact-content .right ul{list-style-type:square;padding-left:30px;margin-bottom:20px;line-height:1.6}.section-contact .contact-ways li{line-height:1.8}.footer{position:absolute;left:0;right:0;bottom:0;height:40px;background:#000;color:#fff}.state-indicator{position:absolute;top:-999em;left:-999em;z-index:1}@media only screen and (-webkit-min-device-pixel-ratio: 2){.state-indicator{z-index:2}.nav .back-home a{background-image:url(images/avatar@2x.jpg)}}@media only screen and (max-width: 1024px){.works-content{margin-top:140px !important}}@media only screen and (max-width: 960px){.nav{width:760px}.section{width:760px}}@media only screen and (max-width: 800px){.section-about .about-content{position:relative}.section-about .about-content .left{float:none;margin:20px 0 0 20px}.section-about .about-content .right{position:absolute;right:10px;top:0}.section-about .about-content .my-photo{width:250px;height:auto}.works-list{width:630px;margin:0 auto}.works-content .works-item:nth-child(2n+1){margin-left:0 !important}.works-content .works-item:nth-child(2n){margin-left:30px !important}.skill-content{width:600px;margin:0 auto}.contact-content{width:600px;margin:0 auto}.section-contact .contact-content h1{text-align:center}}