@charset "utf-8";
/* reset */
html{-ms-text-size-adjust:none;-webkit-text-size-adjust:none;text-size-adjust:none;}
body,h1,h2,h3,h4,blockquote,p,dl,dt,dd,ul,ol,li,th,td,form,fieldset,legend,button,input,select,textarea{margin:0;padding:0}
body,button,input,select,textarea{font:1rem/2 "Segoe UI","Lucida Grande",Helvetica,Arial,"Microsoft YaHei",FreeSans,Arimo,"Droid Sans","wenquanyi micro hei","Hiragino Sans GB","Hiragino Sans GB W3",FontAwesome,sans-serif; vertical-align:baseline; color:#333; outline:none;}
button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer;}
button[disabled],input[disabled]{cursor:default;}
input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0;}
input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;}
input[type="search"]::-webkit-search-decoration{-webkit-appearance:none;}
@media screen and(-webkit-min-device-pixel-ratio:0){
    input{line-height:normal!important;}
}
select[size],select[multiple],select[size][multiple]{border:1px solid #AAA;padding:0;}
article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block;}
audio,canvas,video,progress{display:inline-block;}
button,input,select,textarea,h1,h2,h3,h4{font-size:100%;}
b,strong{font-weight:bold;}
em,i{font-style:normal;}
ol,ul{list-style:none;list-style-position:outside;}
table{border-collapse:collapse;border-spacing:0;}
img,fieldset{border:0;vertical-align:top;}
a,a:hover,a:visited{color:#333;text-decoration:none;outline:none;}

@media (min-width:768px){ /*>=768的设备*/ }
@media (min-width:992px){ /*>=992的设备*/ }
@media (min-width:1200px){ /*>=1200的设备*/ }
@media (max-width:1199px){ /*<=1199的设备*/ }
@media (max-width:991px){ /*<=991的设备*/ }
@media (max-width:767px){ /*<=768的设备*/ }

/* header */
.header{ position:fixed; top:0; left:0; z-index:100; background:#fff}
.header .logo{ overflow:hidden; float:left;}
.header .nav ul li a{ color:#999;}
.header .nav ul li .cur, .header .nav  ul li a:hover{ color:#000;}
@media (min-width:992px){
    .header{ width:18%;}
    .header .logo{ padding-bottom:40%; margin:40px 15% 0; width:70%; height:0; background:url(../images/logo.png) left center no-repeat; background-size:70%;}
    .header .toggle, .header .nav .close{ display:none;}
    .header .nav{ margin-left:15%; float:left;}
    .header .nav ul li{ font-size:14px;}
}
@media (max-width:991px){
    .header{ width:100%; height:80px;}
    .header .logo{ margin:15px 5%; width:35%; height:50px; background:url(../images/logo_s.png) center center no-repeat; background-size:100%;}
    .header .toggle{ display:block; width:50px; margin:15px 5%; height:50px; float:right; background:url(../images/icon_toggle.jpeg) center center no-repeat; background-size:50%;}
    .header .nav{ display:none;}
    .header .nav{ position:absolute; width:100%; background:#fff;}
    .header .nav .close{ position:absolute; top:30px; right:30px; display:block; width:40px; height:40px; background:url(../images/icon_close.jpeg) center center no-repeat; background-size:50%;}
    .header .nav ul{ width:100%; margin-top:100px; text-align:center;}
    .header .nav ul li{ font-size:1.8rem; margin-bottom:5px;}
}

/* main */
.main img{ width:100%;}
@media (min-width:992px) {
    .main{ padding:40px 0 0 18%; font-size:14px;}
}
@media (max-width:991px) {
    .main{ padding:150px 5% 5%;}
}
/* works */
.main .works a{ position:relative; height:0; overflow:hidden; float:left; background-position:center center; background-size:100%;}
.main .works span{ display:none; position:absolute; bottom:0; left:0; padding:0 5%; width:90%; height:38px; line-height:38px; color:#FFF; background:#000; opacity:.7; overflow:hidden; text-overflow:ellipsis; /*-webkit-text-overflow:ellipsis;*/ white-space:nowrap;}
@media (min-width:992px) {
    .main .works a{ padding-bottom:20%; width:30%; margin:0 1.4% 2.8%;}
}
@media (max-width:991px) {
    .main .works a{ padding-bottom:60%; margin-bottom:5%; width:100%;}
}
/* about */
.main .about .content{ word-wrap:break-word;}
@media (min-width:992px) {
    .main .about .img{ width:42%; position:fixed; left:17%; bottom:0; background:#000;}
    .main .about .img img{ width:100%;}
    .main .about .content{ width:40%; float:right; margin-right:40px;}
}
@media (max-width:991px) {
    .main .about .img, .main .about .content{ width:100%; overflow:hidden;}
    .main .about .content{ margin-top:30px;}
}
/* article */
.main .article h1{ margin-bottom:80px; text-align:right; color:#999; font-weight:normal; font-size:16px;}
@media (min-width:992px) {
    .main .article{ padding:0 40px 0 16%;}
    .main .article .content img{ margin-bottom:30px;}
}
@media (max-width:991px) {
    .main .article h1{ margin-bottom:40px;}
    .main .article .content img{ margin-bottom:3%;}
}
/* awards */
.awards .items h2{ width:30%; float:left; font-weight:normal;}
.awards .items .content{ width:70%; float:left;}
.awards .items .content ul{ margin-bottom:40px;}
.awards .items .content ul li:nth-child(2n){ color:#999;}
@media (min-width:992px) {
    .awards .items{ margin-left:25%;}
    .awards .items h2{ width:15%;}
    .awards .items .content{ width:85%;}
}
@media (max-width:991px) {
}
/* contact */
.contact .content ul{ margin-bottom:30px; line-height:1.6rem;}
@media (min-width:992px) {
    .contact .img{ width:42%; position:fixed; left:17%; bottom:0;}
    .contact .content{ width:40%; float:right; margin-right:40px;}
}
@media (max-width:991px) {
}