.clearfix {
  *zoom:1;
  display:block;
}
.clearfix:after {
  content:".";
  display:block;
  height:0px;
  clear:both;
  visibility:hidden;
}
.text-shadow {
  text-shadow:1px 1px 2px #3d3b3d;
  filter:dropshadow(color=#3d3b3d,offx=1,offy=1);
  filter:none \9;
}
.inline-block {
  display:inline-block;
  *display:inline;
  *zoom:1;
}
.no-record {
  text-align:center;
  margin:100px 0;
  font-size:16px;
}
.empty-li {
  height:0px !important;
  line-height:0px !important;
  width:100% !important;
  border:0 !important;
  padding:0 !important;
  margin:0 !important;
  font-size:0 !important;
}
.outer-center {
  display:inline-block;
  height:100%;
  vertical-align:middle;
}
.middle-wrapper {
  display:inline-block;
  *display:inline;
  *zoom:1;
  width:94%;
  vertical-align:middle;
  height:auto;
}
.clip-text {
  white-space:nowrap;
  text-overflow:ellipsis;
  overflow:hidden;
}
.hide-font {
  white-space:nowrap;
  text-indent:-9999px;
  *text-indent:0;
  *font-size:0;
  *line-height:0;
  *overflow:hidden;
  *text-transform:capitalize;
}
::-webkit-selection {
  background:#bd96d6;
  color:#ffffff;
}
::-moz-selection {
  background:#bd96d6;
  color:#ffffff;
}
::-ms-selection {
  background:#bd96d6;
  color:#ffffff;
}
::-o-selection {
  background:#bd96d6;
  color:#ffffff;
}
::selection {
  background:#bd96d6;
  color:#ffffff;
}
&::-webkit-input-placeholder { color:#a9a9a9; }
&:-moz-placeholder { color:#a9a9a9; }
&:-ms-input-placeholder { color:#a9a9a9; }
::-webkit-input-placeholder { color:#a9a9a9; }
:-moz-placeholder { color:#a9a9a9; }
::-moz-placeholder { color:#a9a9a9; }
:-ms-input-placeholder { color:#a9a9a9; }
.centralize {
  width:900px;
  margin:0 auto;
}
.left { float:left; }
.right { float:right; }
.sym {
  font-family:websym;
  -webkit-text-size-adjust:none;
}
.centralize {
  width:1030px;
  margin:0 auto;
}
#main-bg {
  background:url(../images/index/index-bg.png) no-repeat center top;
  min-width:1030px;
  min-height:750px;
}
.logo {
  text-align:center;
  padding:12px 0 7px;
}
.content { background:url(../images/index/center-repeat.png) repeat-x left top; }
.content .bg {
  background:url(../images/index/center-bg.png) no-repeat center top;
  height:364px;
}
.content .bg ul {
  list-style:none;
  padding-top:53px;
}
.content .bg ul li {
  float:left;
  background:url(../images/index/img-wrapper2.png) no-repeat left top;
  width:183px;
  height:223px;
  padding:7px 8px 16px 7px;
  margin-left:8px;
  position:relative;
}
.content .bg ul li > div {
  position:absolute;
  left:0px;
  top:0px;
  width:183px;
  height:223px;
  margin:7px 8px 16px 7px;
  overflow:hidden;
  background:url(../images/pixel.gif) repeat left top;
}
.content .bg ul li > div:hover .mask, .content .bg ul li > div:active .mask {
  bottom:0px;
  -webkit-transition:all 0.4s;
  -moz-transition:all 0.4s;
  -o-transition:all 0.4s;
  transition:all 0.4s;
}
.content .bg ul li > div .mask {
  position:absolute;
  left:0px;
  bottom:-223px;
  width:183px;
  height:223px;
  background:url(../images/index/img-mask.png) no-repeat left top;
  -webkit-transition:all 0.4s;
  -moz-transition:all 0.4s;
  -o-transition:all 0.4s;
  transition:all 0.4s;
}
.content .bg ul li > div .mask h2 {
  width:154px;
  margin:75px auto 0;
  border-bottom:1px dotted #ffffff;
  text-align:center;
  padding-bottom:6px;
  color:#ffffff;
}
.content .bg ul li > div .mask h5 {
  width:154px;
  margin:100px auto 0;
  text-align:center;
  padding-bottom:6px;
  color:#ffffff;
}
.content .bg ul li > div .mask .lang {
  width:154px;
  margin:20px auto;
  text-align:center;
}
.content .bg ul li > div .mask .lang a { color:#ffffff; }
#footer {
  margin-top:25px;
  text-align:center;
}
#footer #copyright, #footer #copyright a {
  color:#7f7f7f;
  font-size:11px;
  -webkit-text-size-adjust:none;
}