@charset "utf-8";
/* 初始化 */
@font-face {
	font-family: 'OpenSansSemibold';
	src: url('../font/open-sans.semibold.ttf')  format('truetype');
}
html,body{ width:100%; margin:0px; padding:0px; height:100%;}
html{ overflow-y:scroll; -webkit-text-size-adjust:none;}
body{ color:#666; font-family:OpenSansSemibold,微软雅黑,宋体; font-size:100%; text-align:center; overflow:visible;}
ul{ list-style:none; padding:0px; margin:0px;}
li{ padding:0px; margin:0px; border:0px;}
img{ border:0px; padding:0px; margin:0px;}
a{ text-decoration:none; color:#666; font-size:14px;}
input,textarea,select,button{ outline:none;}
p{ margin:0; padding:0 0 1em 0; line-height:1.8em;}
form{ padding:0; margin:0;}

/* 常用类 */
.ellipsis{overflow: hidden;white-space: nowrap;-o-text-overflow: ellipsis;text-overflow: ellipsis;}
.inlineBlock{ display: -moz-inline-stack; display: inline-block; vertical-align: top; zoom: 1; *display: inline;}
.opacity{ filter:alpha(opacity=60); -moz-opacity:0.6; -khtml-opacity: 0.6; opacity: 0.6;}
.clearBoth{clear: both;height:0px;overflow:hidden;}
.breakAll{ word-wrap:break-word; word-break:break-all;}

/* 主框架 */
#all{ width:100%; min-height:100%; height:auto!important; height:100%;}
.main{ width:100%; text-align:left; position:relative;}
.loading{ width:100%; height:100%; position:absolute; top:0; left:0; background-image:url(../images/loading.gif); background-repeat:no-repeat; background-position:center center;}
.side{ width:160px; position:fixed; left:40px; top:48px;}
.sideLogo{ width:101px; height:101px; display:block; margin-bottom:27px;}
.sideMenu{ padding-top:4px; width:160px; padding-left:11px;}
.sideMenu .item{ width:100%; padding:4px 0;}
.sideMenu .item a{ color:#bbb; line-height:23px; font-size:15px;}
.sideMenu .item a:hover{ color:#1e1e1e;}
.sideMenu .item a.cur{ color:#1e1e1e;}
.sideMenu .worksCate{ padding-left:10px; width:120px;}
.sideMenu .worksCate ul{ padding-bottom:6px;}
.sideMenu .worksCate li{ width:100%; height:14px; line-height:10px; overflow: hidden;white-space: nowrap;-o-text-overflow: ellipsis;text-overflow: ellipsis;}
.sideMenu .worksCate li a{ color:#bbb; font-size:10px;}
.sideMenu .worksCate li a:hover{ color:#1e1e1e;}
.sideMenu .worksCate li.cur a{ color:#1e1e1e;}
.sideMenu .worksCate li.topic{ color:#1e1e1e; font-size:10px; height:12px; padding-top:5px;}
.sideMenu .worksCate li.topic.gray{ color:#999;}
.sideMenu .hack{ width:100%; height:6px; overflow:hidden;}
.mainRight{ padding-left:216px; width:681px; padding-top:176px;}
.mainRight .topic{ width:100%; font-size:31px; color:#000; padding-bottom:14px; padding-top:3px;}
.mainRight .topic span{ padding-left:1em; color:#bbb; font-size:50%;}
.mainRight .content{ padding:23px 0 40px 0; width:100%; line-height:1.5em; color:#666; font-size:12px;}
.mainRight .content a{ text-decoration:underline;}
.w680{  max-width:681px;}
.about{ padding-left:251px; width:620px;}

/* 顶部 */
#top{ width:100%; height:0; position:relative;}
#logo{ position:absolute; top:0px; left:0; display:block;}
.gray{
display:block;
}

/* 底部 */
#foot{ width:412px; margin:0 auto; line-height:28px; text-align:center; font-size:12px; font-family:微软雅黑; margin-top:260px; position:relative; color:#fff;}
#foot a{ font-weight:normal; font-family:微软雅黑; font-size:12px; padding:0 10px; color:#fff;}
#foot a:hover{ text-decoration:underline;}

/* 页码 */
.pageNum{ width:100%; height:30px; text-align:center; line-height:28px; padding:10px 0;}
.pageNum a{ display: -moz-inline-stack; display: inline-block; vertical-align: top; zoom: 1; *display: inline; width:28px; height:28px; border:1px solid #ccc; color:#ccc; background-color:#fff; margin:0 3px; font-family:Arial; font-size:14px;}
.pageNum a:hover{ border:1px solid #666; color:#fff; background-color:#666;}
.pageNum a.cur{ color:#fff; border:1px solid #333; background-color:#333;}

/* 首页 */
.video-bg{ width:100%; height:100%; position:fixed; top:0; left:0; object-fit:cover; background-size:cover; background-position:center center;}
.homeIn{ position: relative;}
.homeLogoIn{ width:256px; padding-top:226px; padding-bottom:45px; margin:0 auto; position:relative;}
.homeLogoIn img{ width:256px; height:256px; display:block;}
.homeMenu{ width:412px; margin:0 auto; text-align:left; height:56px; position:relative;}
.homeMenu ul{ width:100%; text-align:center;}
.homeMenu li{ margin-right:24px; height:24px; line-height:24px;letter-spacing: 2px; display: -moz-inline-stack; display: inline-block; vertical-align: top; zoom: 1; *display: inline;}
.homeMenu li a{ font-size:16px; color:#FFF;}
.homeMenu li a:hover{ color:#ddd;}

/* works */
.worksList{ width:100%;}
.worksList .item{ width:100%; padding:32px 0 40px 0;}
.worksList .item .title{ width:100%; font-size:100%; color:#000;}
.worksList .item .title span{ color:#ddd; padding-left:1em;}
.worksList .item .content{ width:100%; line-height:1.5em; font-size:12px; color:#666; padding:0.5em 0;}
.worksList .item .content img{ max-width:100%;}
.pageLoader{ position:absolute; top:0; left:0; width:100%; height:100%; background-color:#fff; z-index:10;}

/* loader */
.loader{
  width: 120px;
  height: 120px;
  background-repeat: no-repeat;
  position: fixed;
  left: 50%;
  top: 50%;
  margin-left: -60px;
  margin-top: -60px;
  background-image: url("../images/loader.png?v=3");
  z-index:10;
-webkit-animation: loadAnimation-Animation 1s steps(1, end) infinite;
-moz-animation: loadAnimation-Animation 1s steps(1, end) infinite;
-ms-animation: loadAnimation-Animation 1s steps(1, end) infinite;
-o-animation: loadAnimation-Animation 1s steps(1, end) infinite;
animation: loadAnimation-Animation 1s steps(1, end) infinite;
}
@-webkit-keyframes loadAnimation-Animation {
0% { background-position:-0px -0px;}1% { background-position:-120px -0px;}3% { background-position:-240px -0px;}5% { background-position:-360px -0px;}6% { background-position:-0px -120px;}8% { background-position:-120px -120px;}10% { background-position:-240px -120px;}12% { background-position:-360px -120px;}13% { background-position:-0px -240px;}15% { background-position:-120px -240px;}17% { background-position:-240px -240px;}18% { background-position:-360px -240px;}20% { background-position:-0px -360px;}22% { background-position:-120px -360px;}24% { background-position:-240px -360px;}25% { background-position:-360px -360px;}27% { background-position:-0px -480px;}29% { background-position:-120px -480px;}31% { background-position:-240px -480px;}32% { background-position:-360px -480px;}34% { background-position:-0px -600px;}36% { background-position:-120px -600px;}37% { background-position:-240px -600px;}39% { background-position:-360px -600px;}41% { background-position:-0px -720px;}43% { background-position:-120px -720px;}44% { background-position:-240px -720px;}46% { background-position:-360px -720px;}48% { background-position:-0px -840px;}50% { background-position:-120px -840px;}51% { background-position:-240px -840px;}53% { background-position:-360px -840px;}55% { background-position:-0px -960px;}56% { background-position:-120px -960px;}58% { background-position:-240px -960px;}60% { background-position:-360px -960px;}62% { background-position:-0px -1080px;}63% { background-position:-120px -1080px;}65% { background-position:-240px -1080px;}67% { background-position:-360px -1080px;}68% { background-position:-0px -1200px;}70% { background-position:-120px -1200px;}72% { background-position:-240px -1200px;}74% { background-position:-360px -1200px;}75% { background-position:-0px -1320px;}77% { background-position:-120px -1320px;}79% { background-position:-240px -1320px;}81% { background-position:-360px -1320px;}82% { background-position:-0px -1440px;}84% { background-position:-120px -1440px;}86% { background-position:-240px -1440px;}87% { background-position:-360px -1440px;}89% { background-position:-0px -1560px;}91% { background-position:-120px -1560px;}93% { background-position:-240px -1560px;}94% { background-position:-360px -1560px;}96% { background-position:-0px -1680px;}98% { background-position:-120px -1680px;}100% { background-position:-240px -1680px;}
}
@-moz-keyframes loadAnimation-Animation {
0% { background-position:-0px -0px;}1% { background-position:-120px -0px;}3% { background-position:-240px -0px;}5% { background-position:-360px -0px;}6% { background-position:-0px -120px;}8% { background-position:-120px -120px;}10% { background-position:-240px -120px;}12% { background-position:-360px -120px;}13% { background-position:-0px -240px;}15% { background-position:-120px -240px;}17% { background-position:-240px -240px;}18% { background-position:-360px -240px;}20% { background-position:-0px -360px;}22% { background-position:-120px -360px;}24% { background-position:-240px -360px;}25% { background-position:-360px -360px;}27% { background-position:-0px -480px;}29% { background-position:-120px -480px;}31% { background-position:-240px -480px;}32% { background-position:-360px -480px;}34% { background-position:-0px -600px;}36% { background-position:-120px -600px;}37% { background-position:-240px -600px;}39% { background-position:-360px -600px;}41% { background-position:-0px -720px;}43% { background-position:-120px -720px;}44% { background-position:-240px -720px;}46% { background-position:-360px -720px;}48% { background-position:-0px -840px;}50% { background-position:-120px -840px;}51% { background-position:-240px -840px;}53% { background-position:-360px -840px;}55% { background-position:-0px -960px;}56% { background-position:-120px -960px;}58% { background-position:-240px -960px;}60% { background-position:-360px -960px;}62% { background-position:-0px -1080px;}63% { background-position:-120px -1080px;}65% { background-position:-240px -1080px;}67% { background-position:-360px -1080px;}68% { background-position:-0px -1200px;}70% { background-position:-120px -1200px;}72% { background-position:-240px -1200px;}74% { background-position:-360px -1200px;}75% { background-position:-0px -1320px;}77% { background-position:-120px -1320px;}79% { background-position:-240px -1320px;}81% { background-position:-360px -1320px;}82% { background-position:-0px -1440px;}84% { background-position:-120px -1440px;}86% { background-position:-240px -1440px;}87% { background-position:-360px -1440px;}89% { background-position:-0px -1560px;}91% { background-position:-120px -1560px;}93% { background-position:-240px -1560px;}94% { background-position:-360px -1560px;}96% { background-position:-0px -1680px;}98% { background-position:-120px -1680px;}100% { background-position:-240px -1680px;}
}
@-ms-keyframes loadAnimation-Animation {
0% { background-position:-0px -0px;}1% { background-position:-120px -0px;}3% { background-position:-240px -0px;}5% { background-position:-360px -0px;}6% { background-position:-0px -120px;}8% { background-position:-120px -120px;}10% { background-position:-240px -120px;}12% { background-position:-360px -120px;}13% { background-position:-0px -240px;}15% { background-position:-120px -240px;}17% { background-position:-240px -240px;}18% { background-position:-360px -240px;}20% { background-position:-0px -360px;}22% { background-position:-120px -360px;}24% { background-position:-240px -360px;}25% { background-position:-360px -360px;}27% { background-position:-0px -480px;}29% { background-position:-120px -480px;}31% { background-position:-240px -480px;}32% { background-position:-360px -480px;}34% { background-position:-0px -600px;}36% { background-position:-120px -600px;}37% { background-position:-240px -600px;}39% { background-position:-360px -600px;}41% { background-position:-0px -720px;}43% { background-position:-120px -720px;}44% { background-position:-240px -720px;}46% { background-position:-360px -720px;}48% { background-position:-0px -840px;}50% { background-position:-120px -840px;}51% { background-position:-240px -840px;}53% { background-position:-360px -840px;}55% { background-position:-0px -960px;}56% { background-position:-120px -960px;}58% { background-position:-240px -960px;}60% { background-position:-360px -960px;}62% { background-position:-0px -1080px;}63% { background-position:-120px -1080px;}65% { background-position:-240px -1080px;}67% { background-position:-360px -1080px;}68% { background-position:-0px -1200px;}70% { background-position:-120px -1200px;}72% { background-position:-240px -1200px;}74% { background-position:-360px -1200px;}75% { background-position:-0px -1320px;}77% { background-position:-120px -1320px;}79% { background-position:-240px -1320px;}81% { background-position:-360px -1320px;}82% { background-position:-0px -1440px;}84% { background-position:-120px -1440px;}86% { background-position:-240px -1440px;}87% { background-position:-360px -1440px;}89% { background-position:-0px -1560px;}91% { background-position:-120px -1560px;}93% { background-position:-240px -1560px;}94% { background-position:-360px -1560px;}96% { background-position:-0px -1680px;}98% { background-position:-120px -1680px;}100% { background-position:-240px -1680px;}
}
@-o-keyframes loadAnimation-Animation {
0% { background-position:-0px -0px;}1% { background-position:-120px -0px;}3% { background-position:-240px -0px;}5% { background-position:-360px -0px;}6% { background-position:-0px -120px;}8% { background-position:-120px -120px;}10% { background-position:-240px -120px;}12% { background-position:-360px -120px;}13% { background-position:-0px -240px;}15% { background-position:-120px -240px;}17% { background-position:-240px -240px;}18% { background-position:-360px -240px;}20% { background-position:-0px -360px;}22% { background-position:-120px -360px;}24% { background-position:-240px -360px;}25% { background-position:-360px -360px;}27% { background-position:-0px -480px;}29% { background-position:-120px -480px;}31% { background-position:-240px -480px;}32% { background-position:-360px -480px;}34% { background-position:-0px -600px;}36% { background-position:-120px -600px;}37% { background-position:-240px -600px;}39% { background-position:-360px -600px;}41% { background-position:-0px -720px;}43% { background-position:-120px -720px;}44% { background-position:-240px -720px;}46% { background-position:-360px -720px;}48% { background-position:-0px -840px;}50% { background-position:-120px -840px;}51% { background-position:-240px -840px;}53% { background-position:-360px -840px;}55% { background-position:-0px -960px;}56% { background-position:-120px -960px;}58% { background-position:-240px -960px;}60% { background-position:-360px -960px;}62% { background-position:-0px -1080px;}63% { background-position:-120px -1080px;}65% { background-position:-240px -1080px;}67% { background-position:-360px -1080px;}68% { background-position:-0px -1200px;}70% { background-position:-120px -1200px;}72% { background-position:-240px -1200px;}74% { background-position:-360px -1200px;}75% { background-position:-0px -1320px;}77% { background-position:-120px -1320px;}79% { background-position:-240px -1320px;}81% { background-position:-360px -1320px;}82% { background-position:-0px -1440px;}84% { background-position:-120px -1440px;}86% { background-position:-240px -1440px;}87% { background-position:-360px -1440px;}89% { background-position:-0px -1560px;}91% { background-position:-120px -1560px;}93% { background-position:-240px -1560px;}94% { background-position:-360px -1560px;}96% { background-position:-0px -1680px;}98% { background-position:-120px -1680px;}100% { background-position:-240px -1680px;}
}
@keyframes loadAnimation-Animation {
0% { background-position:-0px -0px;}1% { background-position:-120px -0px;}3% { background-position:-240px -0px;}5% { background-position:-360px -0px;}6% { background-position:-0px -120px;}8% { background-position:-120px -120px;}10% { background-position:-240px -120px;}12% { background-position:-360px -120px;}13% { background-position:-0px -240px;}15% { background-position:-120px -240px;}17% { background-position:-240px -240px;}18% { background-position:-360px -240px;}20% { background-position:-0px -360px;}22% { background-position:-120px -360px;}24% { background-position:-240px -360px;}25% { background-position:-360px -360px;}27% { background-position:-0px -480px;}29% { background-position:-120px -480px;}31% { background-position:-240px -480px;}32% { background-position:-360px -480px;}34% { background-position:-0px -600px;}36% { background-position:-120px -600px;}37% { background-position:-240px -600px;}39% { background-position:-360px -600px;}41% { background-position:-0px -720px;}43% { background-position:-120px -720px;}44% { background-position:-240px -720px;}46% { background-position:-360px -720px;}48% { background-position:-0px -840px;}50% { background-position:-120px -840px;}51% { background-position:-240px -840px;}53% { background-position:-360px -840px;}55% { background-position:-0px -960px;}56% { background-position:-120px -960px;}58% { background-position:-240px -960px;}60% { background-position:-360px -960px;}62% { background-position:-0px -1080px;}63% { background-position:-120px -1080px;}65% { background-position:-240px -1080px;}67% { background-position:-360px -1080px;}68% { background-position:-0px -1200px;}70% { background-position:-120px -1200px;}72% { background-position:-240px -1200px;}74% { background-position:-360px -1200px;}75% { background-position:-0px -1320px;}77% { background-position:-120px -1320px;}79% { background-position:-240px -1320px;}81% { background-position:-360px -1320px;}82% { background-position:-0px -1440px;}84% { background-position:-120px -1440px;}86% { background-position:-240px -1440px;}87% { background-position:-360px -1440px;}89% { background-position:-0px -1560px;}91% { background-position:-120px -1560px;}93% { background-position:-240px -1560px;}94% { background-position:-360px -1560px;}96% { background-position:-0px -1680px;}98% { background-position:-120px -1680px;}100% { background-position:-240px -1680px;}
}