/*
-----------------------------------------------
Author: li haiqing (i5wangcom@sina.com)--爱我网工作室（www.i5wang.com）
Version: 2013.7.4
/* 公共布局 background-color:#22262A;
---------------------------------------------- */
body,ul,ol,li,dl,dt,dd,div{ margin:0; padding:0; border:0; font:100 12px/18px "Microsoft YaHei","微软雅黑","宋体","Arial"; color:#333; }
body{ background-color:#2A2A2A;}
ul,ol,li,dl,dt,dd{ list-style:none;}
li{ vertical-align:bottom;}
img{ border:0;}
h1,h2,h3,h4,h5,h6{ margin:0; padding:0;}
.center {text-align:center; }
H4 {
	FONT-SIZE: 14px
}
/*----------去掉后幻灯片造成滚动--------------------------------- */
HTML {
	OVERFLOW-Y: scroll; HEIGHT: 100%; FONT-SIZE: 100%; -webkit-text-size-adjust: 100%;
}
IMG.full {
	WIDTH: 100%; DISPLAY: block
}
/*----------去掉后幻灯片造成滚动--------------------------------- */
/* 链接样式 {命名规则：Link+颜色+具体属性}
----------------------------------------------- */
a:link,a:visited{ color:#333; text-decoration:none; font:100 14px/18px "Microsoft YaHei","微软雅黑","宋体","Arial"; color:#333;}
a:hover,a:active{ color:#f30; text-decoration:underline; font:100 14px/18px "Microsoft YaHei","微软雅黑","宋体","Arial"; color:#333;}
.cls{clear:both;}
.clear {
	clear: both;
	display: block;
	overflow: hidden;
	visibility: hidden;
	width: 0;
	height: 0;
}





.wrapper100{ height:110px; width:100%; background:#000000; position:fixed; top:0; z-index:99999999;}
.wrapper9100{height:9210px; width:100%; background:#FF0000; margin:0px auto;}
#main .mainBanner {
	PADDING-BOTTOM: 20px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 12px
}

IMG.full {
	WIDTH: 100%; DISPLAY: block
}
/*导航-开始 */
#main-nav {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  width: 20%;
  height: 100px;
  font-family: 'quicksandbook';
}

#main-nav #menu {
  display: block;
  position: absolute;
  z-index: 999;
  left: 0;
  top: 0;
  width: 27px;
  height: 20px;
  width: 100px;
  height: 100px;
  cursor: pointer;
}

#main-nav #menu div {
  width: 27px;
  height: 21px;
  position: relative;
  display: block;
  top: 40px;
  left: 40px;
}

#main-nav #menu span, #main-nav #menu span:before, #main-nav #menu span:after {
  cursor: pointer;
  border-radius: 1px;
  height: 5px;
  width: 38px;
  background: #fff;
  position: absolute;
  display: block;
  content: '';
  top: 12px;
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -ms-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}

#main-nav #menu span:before {
  top: -12px;
}

#main-nav #menu span:after {
  bottom: -12px;
}

.no-touch #main-nav #menu:hover span:before {
  -webkit-will-change: -webkit-transform;
  -moz-will-change: -moz-transform;
  will-change: transform;
  -webkit-transform: translate3d(0, -4px, 0);
  -moz-transform: translate3d(0, -4px, 0);
  -ms-transform: translate3d(0, -4px, 0);
  -o-transform: translate3d(0, -4px, 0);
  transform: translate3d(0, -4px, 0);
}

.no-touch #main-nav #menu:hover span:after {
  -webkit-will-change: -webkit-transform;
  -moz-will-change: -moz-transform;
  will-change: transform;
  -webkit-transform: translate3d(0, 4px, 0);
  -moz-transform: translate3d(0, 4px, 0);
  -ms-transform: translate3d(0, 4px, 0);
  -o-transform: translate3d(0, 4px, 0);
  transform: translate3d(0, 4px, 0);
}

#main-nav ul {
  margin: 0;
  padding: 0;
  height: 0;
  float: left;
  overflow: hidden;
  position: fixed;
  top: 110px;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  -webkit-transition-timing-function: cubic-bezier(0.275, 0.585, 0.37, 0.99);
  -moz-transition-timing-function: cubic-bezier(0.275, 0.585, 0.37, 0.99);
  -o-transition-timing-function: cubic-bezier(0.275, 0.585, 0.37, 0.99);
  transition-timing-function: cubic-bezier(0.275, 0.585, 0.37, 0.99);
}

#main-nav ul.active {
  height: 300px;
}

#main-nav ul li {
  position: relative;
  clear: both;
  overflow: hidden;
}

#main-nav ul li a {
  display: block;
  position: relative;
  float: left;
  padding: 9px 24px;
  font-size: 2em;
  color: white;
  color:#FFFFFF; font:13px/16px "Microsoft YaHei","微软雅黑","宋体"; text-decoration:none;
}

#main-nav ul li span {
  height: 50px;
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
}

#main-nav ul li .black {
  z-index: -1;
  background: #2A2B2D;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

#main-nav ul li .white {
  z-index: -2;
  background: white;
}

#main-nav ul a.active, .no-touch #main-nav ul a:hover {
  color: #8c7851;
}

#main-nav ul a.active .black, .no-touch #main-nav ul a:hover .black {
  width: 0%;
}

#logo {
  width: 100%;
  max-width: 1680px;
  position: relative;
  display: block;
  margin: 0 auto;
  z-index: 999;
}
#logo h1 {
  position: absolute;
  left: 25%;
  top: 20px;
  margin: 0;
  width: 20%;
}

#logo h1 a {
  width:100%;
  display: block;
}

#logo h1 a img { width:248px; height:56px; border:0px;}
/*导航-结束 */



/* ###################  >> threeDiv  ################### */
.margin_R_60 { margin-right:60px;}
#threeDiv {
  padding: 0; margin:50px auto 0px auto;
  /* margin-top: 40px; */
  display: block;
  width:1200px;
}
#threeDiv ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
#threeDiv li {
  float: left;
  overflow: hidden;
  display: block;
  width: 360px;
  height:290px;
  position: relative;
  opacity: 1;
  -webkit-transform: translateY(0);
  -moz-transform: translateY(0);
  -ms-transform: translateY(0);
  -o-transform: translateY(0);
  transform: translateY(0);
  -webkit-transition: all .4s ease-in-out;
  -moz-transition: all .4s ease-in-out;
  -ms-transition: all .4s ease-in-out;
  -o-transition: all .4s ease-in-out;
  transition: all .4s ease-in-out;
}

#threeDiv li:hover{ background-color:#FFFFFF;}
#threeDiv .li_01{ background-color:#BE0201;}
#threeDiv .li_02{ background-color:#1D79F6;}
#threeDiv .li_03{ background-color:#F1DE03;}

#threeDiv .threeDiv_nr{margin:30px auto 0px auto;
	width: 260px;
}
#threeDiv .threeDiv_nr h1{
	color:#FFFFFF; font:24px/39px "Microsoft YaHei","微软雅黑","宋体";
}
#threeDiv .threeDiv_nr h2{
	color:#FFFFFF; font:700 24px/39px "Microsoft YaHei","微软雅黑","宋体";
}
#threeDiv .threeDiv_nr p{
	color:#FFFFFF; font:14px/25px "Microsoft YaHei","微软雅黑","宋体";
}
#threeDiv .threeDiv_nr span{
	color:#FFFFFF; font:700 16px/35px "Microsoft YaHei","微软雅黑","宋体";
}
#threeDiv .threeDiv_nr span A {color:#FFFFFF; font:700 16px/35px "Microsoft YaHei","微软雅黑","宋体";}
#threeDiv .threeDiv_nr span A:hover {color:#000000; font:700 16px/35px "Microsoft YaHei","微软雅黑","宋体"; text-decoration:none;}

#threeDiv li:hover h1,#threeDiv li:hover h2,#threeDiv li:hover p,#threeDiv li:hover span A{ color:#000000;}


@media screen and (max-width: 1023px) {
  
  #threeDiv li {
    width: 33.33333%;
  }
}
@media screen and (max-width: 766px) {
  
  #threeDiv li {
    width: 50%;
  }
}
@media screen and (max-width: 420px) {
  
  #threeDiv li {
    width: 100%;
  }
}

/* ****************>> threeDiv**************** */

/* ###################
>> WORKS
################### */
.word-h1-font h5{color:#FFFFFF; font:36px/55px "Microsoft YaHei","微软雅黑","宋体"; margin:0px auto; text-align: center;  padding:60px 0 50px;}

#works {
  padding: 0;
  /* margin-top: 40px; */
  display: block;
}


#works ul {
  list-style: none;
  margin: 0;
  padding: 0;
}


#works li {
  float: left;
  overflow: hidden;
  display: block;
  width: 25%;
  position: relative;
  opacity: 1;
  height: auto;
  -webkit-transform: translateY(0);
  -moz-transform: translateY(0);
  -ms-transform: translateY(0);
  -o-transform: translateY(0);
  transform: translateY(0);
  -webkit-transition: all .4s ease-in-out;
  -moz-transition: all .4s ease-in-out;
  -ms-transition: all .4s ease-in-out;
  -o-transition: all .4s ease-in-out;
  transition: all .4s ease-in-out;
}
@media screen and (max-width: 1023px) {
  
  #works li {
    width: 33.33333%;
  }
}
@media screen and (max-width: 766px) {
  
  #works li {
    width: 50%;
  }
}
@media screen and (max-width: 420px) {
  
  #works li {
    width: 100%;
  }
}


#works #jobs img {
  display: block;
  max-width: 420px;
  width: 100%;
}


#works > h1 {
  font-weight: normal;
  font-size: 5em!important;
  padding:60px 0 50px;
  text-transform: uppercase;
  font-family: "alpineClean";
  letter-spacing: -0.1em;
  line-height: 0.5em;
  color: #000;
  text-align: center;
  margin: 0; 
}

@-moz-document url-prefix() {
  
  #works > h1 {
    line-height: 0.65em;
  }
}


#works h1 > span {
  /* background: url("../images/bg_works_h.jpg") left top no-repeat; */
  background-size: 100%;
}

#works h1 span.a2 {
  letter-spacing: -0.2em;
}







h1 span.a1 {
  font-family: "alpineA1";
  letter-spacing: -0.15em;
}


h1 span.a2 {
  font-family: "alpineA2";
}


h1 span.al1 {
  letter-spacing: -0.15em;
}


#works .head div {
  position: relative;
  width: 100%;
  padding-top: 4.3650%;
  background: url("../images/head_work.png") no-repeat;
  background-size: 100% auto;
}


#works .head div:nth-child(1) {
  background-position: center 0%;
}


#works .head div:nth-child(2) {
  background-position: center 33.333333333%;
}


#works .head div:nth-child(3) {
  background-position: center 66.666666666%;
}


#works .head div:nth-child(4) {
  background-position: center 99.999999999%;
}


#works ul li.hide {
  opacity: 0;
  height: 0;
  -webkit-transform: translateY(100px);
  -moz-transform: translateY(100px);
  -ms-transform: translateY(100px);
  -o-transform: translateY(100px);
  transform: translateY(100px);
  -webkit-transition: opacity 1s ease-out;
  -moz-transition: opacity 1s ease-out;
  -ms-transition: opacity 1s ease-out;
  -o-transition: opacity 1s ease-out;
  transition: opacity 1s ease-out;
}


#works ul li a {
  display: block;
}


#works ul li .thumb {
  position: relative;
  overflow: hidden;
  height:460px;
}


#works ul li .thumb {
  -webkit-transition: all 0.5s cubic-bezier(0.75, 0.25, 0.25, 0.75);
  -moz-transition: all 0.5s cubic-bezier(0.75, 0.25, 0.25, 0.75);
  -ms-transition: all 0.5s cubic-bezier(0.75, 0.25, 0.25, 0.75);
  -o-transition: all 0.5s cubic-bezier(0.75, 0.25, 0.25, 0.75);
  transition: all 0.5s cubic-bezier(0.75, 0.25, 0.25, 0.75);
}


#works ul li .thumb img {
  -webkit-transition: all 0.2s cubic-bezier(0.75, 0.25, 0.25, 0.75);
  -moz-transition: all 0.2s cubic-bezier(0.75, 0.25, 0.25, 0.75);
  -ms-transition: all 0.2s cubic-bezier(0.75, 0.25, 0.25, 0.75);
  -o-transition: all 0.2s cubic-bezier(0.75, 0.25, 0.25, 0.75);
  transition: all 0.2s cubic-bezier(0.75, 0.25, 0.25, 0.75);
}






.no-touch #works ul li a:hover .thumb > img,
#works ul li a.selected .thumb > img {
  position: relative;
  -webkit-transform: scale(1.15);
  -moz-transform: scale(1.15);
  -ms-transform: scale(1.15);
  -o-transform: scale(1.15);
  transform: scale(1.15);
}


.no-touch #works ul li a:hover .thumb:after,
#works ul li a.selected .thumb:after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: url("../images/overlay.png");
  opacity: 0.5;
}




#works ul li .info {
  position: relative;
  overflow: hidden;
  max-height: 230px;
}


#works ul li .info .content {
  padding: 30px 4em;
}


#current-case .info {
  background: #000;
}


#works ul li .info span {
  position: absolute;
  top: 0;
  z-index: -1;
  display: block;
  width: 100%;
  height: 0%;
  background: #000;
  -webkit-transition: all .2s linear;
  -moz-transition: all .2s linear;
  -ms-transition: all .2s linear;
  -o-transition: all .2s linear;
  transition: all .2s linear;
}


#works .loadAnim {
  position: absolute;
  z-index: 1;
  width: 100%;
  top: 50%;
  display: none;
}


#works .square {
  display: block;
  width: 64px;
  height: 64px;
  background-repeat: no-repeat;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -32px;
  margin-top: -77px;
  background-image: url("../images/squareloading.png");
  -webkit-animation: loadAnimation 1s steps(1, end) infinite;
  -moz-animation: loadAnimation 1s steps(1, end) infinite;
  -ms-animation: loadAnimation 1s steps(1, end) infinite;
  -o-animation: loadAnimation 1s steps(1, end) infinite;
  animation: loadAnimation 1s steps(1, end) infinite;
}








.no-touch #video ul li a:hover .info span,
#video ul li a.selected .info span {
  height: 100%;
}


.no-touch #works ul li a:hover .info span,
#works ul li a.selected .info span {
  height: 100%;
}

.info h1,
.info p {
  -webkit-transition: font-size .5s;
}


.info h1 { /*h1字体设置*/
  font-family: "belizioregularitalic", serif;
  font-weight: normal;
  font-size: 2em;
  line-height: 0.75em;
  color: #fff;
  margin: 0 0 2px 0;
  white-space: nowrap;

}


.no-touch #works ul li a:hover .info h1,
#works ul li a.selected .info h1,
#current-case .info h1 {
  color: #907b53;
}
.no-touch #video ul li a:hover .info h1,
#video ul li a.selected .info h1,
#current-case .info h1 {
  color: #907b53;
}


.info h1 + p {  /*P字体设置*/
  font-size: 1.6em;
  color: #F8F9FB;
  margin: 0;
  font-family: Microsoft Yahei;
  font-weight: 100;
  margin-top:20px;
}


.no-touch #works ul li a:hover .info h1 + p,
#works ul li a.selected .info h1 + p,
#current-case .info h1 + p {
  color: #fff;
}.no-touch #video ul li a:hover .info h1 + p,
#video ul li a.selected .info h1 + p,
#current-case .info h1 + p {
  color: #fff;
}


.info p.tag {
  font-size: 1.4em;
  color: #A9ABAA;
  margin: 0;
  margin-top:15px;
  font-family: Microsoft Yahei;
  line-height: 22px;
  height: 88px;
  overflow: hidden;
}


#works ul li a:hover .info p.tag {
  color: #fff; 
}


#works ul li.archived a .circle {
  position: relative;
  border-radius: 50%;
  width: 70%;
  padding-bottom: 70%;
  background: #f5f5f5;
  margin: 60px auto 96px auto;

  -webkit-transition: -webkit-transform .3s;
        -moz-transition: -moz-transform .3s;
          -ms-transition: -ms-transform .3s;
            -o-transition: -o-transform .3s;
                  transition: transform .3s;

}


#works ul li.archived a .rect {
  position: absolute;
  width: 70%;
  padding-bottom: 15%;
  background: black;
  left: 50%;
  top: 50%;
  margin-left: -35%;
  margin-top: -7.5%;
}


#works ul li.archived a .rect:nth-child(2) {
  width: 15%;
  padding-bottom: 70%;
  margin-left: -7.5%;
  margin-top: -35%;
}


.no-touch #works ul li.archived a:hover .circle {
  background: #000;
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  transform: rotate(90deg);
}


.no-touch #works ul li.archived a:hover .rect {
  background: #fff;
}


#works ul li.archived hgroup {
  padding: 0 40px;
}


#works ul li.archived h1 {
  text-transform: uppercase;
  font-family: "alpineClean";
  font-weight: normal;
  font-size: 4.250em;
  letter-spacing: -0.1em;
  line-height: 0.8em;
  color: #000;
  margin-bottom: 0;
}


#works ul li.archived h1 span.a1 {
  font-family: "alpineA1";
  font-weight: normal;
}


#works ul li.archived h1 span.a2 {
  font-family: "alpineA2";
  font-weight: normal;
}


#works ul li.archived p {
  margin: 0;
}


#works ul li.archived p img {
  width: auto;
}


#works ul li.archived h2 {
  font-family: "belizioregularitalic", serif;
  font-weight: normal;
  font-size: 1.563em;
  color: #000;
  margin-top: 0;
  line-height: 0.8em;
  letter-spacing: -0.05em;
}
.work A{text-decoration:none;}
.work A:hover {text-decoration:none;}




/* ###################  >> about-us  ###################  */
#about-us-content {padding: 40px 0px 70px 0px; margin:0; width:100%; background:url(../images/bg3-09.jpg) #FFFFFF no-repeat top center;}
#about-us-content .about-us {padding: 0px; margin:0px auto; width:1000px; text-align:center;}
#about-us-content .about-us .about-us_a{ width:100%; height:53px; text-align:center; background:url(../images/a1.png) no-repeat center center;}
#about-us-content .about-us .about-us_b{ line-height:40px; font-size:12px; color:#999; margin:20px 0px 0px 0px;}
#about-us-content .about-us .about-us_c{ font-size:28px; padding-bottom:20px; color:#333; margin:10px 0px 0px 0px;}
#about-us-content .about-us .about-us_d{ font-size:14px; line-height:26px; color:#333; margin:0px;}
#about-us-content .about-us a{text-decoration:none;}
@media screen and (max-width: 766px) {
  
#about-us-content .about-us {
  padding: 0px; margin:0px auto;
  width:100%;
}
}
@media screen and (max-width: 420px) {
  
#about-us-content .about-us {
  padding: 0px; margin:0px auto;
  width:100%;
}
}

/* ***********  >> about-us  *************************** */



/* ###################  >> Contact-us  ################### */
#Contact-content {padding: 40px 0px; margin:0; width:100%; background-color:#1E1E1E;}
#Contact-content .Contact-us {padding: 0px; margin:0px auto; width:1000px; text-align:center;}
#Contact-content .Contact-us .Contact_a{ width:100%; height:53px; text-align:center; background:url(../images/C.png) no-repeat center center;}
#Contact-content .Contact-us .Contact_b{ line-height:40px; font-size:12px; color:#FFFFFF; margin:20px 0px 0px 0px;}
#Contact-content .Contact-us .Contact_c{ font-size:28px; padding-bottom:20px; color:#FFFFFF; margin:10px 0px 0px 0px;}
#Contact-content .Contact-us .Contact_d{ font-size:14px; line-height:26px; color:#888888; margin:0px;}
#Contact-content .Contact-us a{text-decoration:none;}
@media screen and (max-width: 766px) {
  
#Contact-content .Contact-us {
  padding: 0px; margin:0px auto;
  width:100%;
}
}
@media screen and (max-width: 420px) {
  
#Contact-content .Contact-us {
  padding: 0px; margin:0px auto;
  width:100%;
}
}
/* ***********  >> Contact-us  *************************** */

/* ###############  >> article-one  ################### */
#article-one {padding-top:110px; margin:0; width:100%;}
#article-one .article-content{padding: 0px 0px 50px 0px; margin:0px auto; width:1000px; }
#article-one .article-content h2{ color:#FFFFFF; font:700 22px/35px "Microsoft YaHei","微软雅黑","宋体"; padding:35px 0px 25px 0px;} 
#article-one .article-content p{ color:#CCCBCB; font:14px/28px "Microsoft YaHei","微软雅黑","宋体";  text-align:left;}
#article-one .article-content p a{ color:#CCCBCB; font:14px/28px "Microsoft YaHei","微软雅黑","宋体"; text-decoration:none;}
#article-one .article-content p img{ display:block; padding:10px 0; max-width:500px; height:auto; margin:0 auto;}
/* ***********  >> article-one  *************************** */

/* ###############  >> gequ-content  ################### */
#gequ-content {padding-top:110px; margin:0; width:100%;}
#gequ-content .article-content{padding: 0px 0px 50px 0px; margin:0px auto; width:1000px; }
#gequ-content .article-content h2{ color:#FFFFFF; font:22px/35px "Microsoft YaHei","微软雅黑","宋体"; padding:35px 0px 25px 0px; text-align:center;} 
#gequ-content .article-content div{ color:#CCCBCB; font:14px/28px "Microsoft YaHei","微软雅黑","宋体";  text-align:left;}
#gequ-content .article-content div a{ color:#CCCBCB; font:14px/28px "Microsoft YaHei","微软雅黑","宋体"; text-decoration:none;}
#gequ-content .article-content div img{ display:block; padding:10px 0; max-width:500px; height:auto; margin:0 auto;}

#gequ-content .article-content embed{ display:block; padding:10px 0; width:500px; height:400px; margin:0 auto;}

/* ***********  >> gequ-content  *************************** */

/* ###############  >> video  ################### */
#video {
  padding: 0;
  /* margin-top: 40px; */
  display: block;
}


#video ul {
  list-style: none;
  margin: 0;
  padding: 0;
}


#video li {
  float: left;
  overflow: hidden;
  display: block;
  width: 25%;
  position: relative;
  opacity: 1;
  height: auto;
  -webkit-transform: translateY(0);
  -moz-transform: translateY(0);
  -ms-transform: translateY(0);
  -o-transform: translateY(0);
  transform: translateY(0);
  -webkit-transition: all .4s ease-in-out;
  -moz-transition: all .4s ease-in-out;
  -ms-transition: all .4s ease-in-out;
  -o-transition: all .4s ease-in-out;
  transition: all .4s ease-in-out;
}

@media screen and (max-width: 1023px) {
  
  #video li {
    width: 33.33333%;
  }
}
@media screen and (max-width: 766px) {
  
  #video li {
    width: 50%;
  }
}
@media screen and (max-width: 420px) {
  
  #video li {
    width: 100%;
  }
}


#video #jobs img {
  display: block;
  max-width: 420px;
  width: 100%;
}


#video > h1 { /* 视频标题 */
  font-weight: normal;
  font-size: 4em!important;
  padding:180px 0 50px;
  text-transform: uppercase;
  font-family: "alpineClean";
  letter-spacing: -0.1em;
  line-height: 0.5em;
  color: #FFFFFF;
  text-align: center;
  margin: 0;
}

@-moz-document url-prefix() {
  
  #video > h1 {
    line-height: 0.65em;
  }
}


#video h1 > span {
  /* background: url("../images/bg_works_h.jpg") left top no-repeat; */
  background-size: 100%;
}

#video h1 span.a2 {
  letter-spacing: -0.2em;
}

#video ul li.hide {
  opacity: 0;
  height: 0;
  -webkit-transform: translateY(100px);
  -moz-transform: translateY(100px);
  -ms-transform: translateY(100px);
  -o-transform: translateY(100px);
  transform: translateY(100px);
  -webkit-transition: opacity 1s ease-out;
  -moz-transition: opacity 1s ease-out;
  -ms-transition: opacity 1s ease-out;
  -o-transition: opacity 1s ease-out;
  transition: opacity 1s ease-out;
}


#video ul li a {
  display: block;
}


#video ul li .thumb {
  position: relative;
  overflow: hidden;
  height:460px;
}


#video ul li .thumb {
  -webkit-transition: all 0.5s cubic-bezier(0.75, 0.25, 0.25, 0.75);
  -moz-transition: all 0.5s cubic-bezier(0.75, 0.25, 0.25, 0.75);
  -ms-transition: all 0.5s cubic-bezier(0.75, 0.25, 0.25, 0.75);
  -o-transition: all 0.5s cubic-bezier(0.75, 0.25, 0.25, 0.75);
  transition: all 0.5s cubic-bezier(0.75, 0.25, 0.25, 0.75);
}


#video ul li .thumb img {
  -webkit-transition: all 0.2s cubic-bezier(0.75, 0.25, 0.25, 0.75);
  -moz-transition: all 0.2s cubic-bezier(0.75, 0.25, 0.25, 0.75);
  -ms-transition: all 0.2s cubic-bezier(0.75, 0.25, 0.25, 0.75);
  -o-transition: all 0.2s cubic-bezier(0.75, 0.25, 0.25, 0.75);
  transition: all 0.2s cubic-bezier(0.75, 0.25, 0.25, 0.75);
}



.no-touch #works ul li a:hover .thumb > img,
#works ul li a.selected .thumb > img {
  position: relative;
  -webkit-transform: scale(1.15);
  -moz-transform: scale(1.15);
  -ms-transform: scale(1.15);
  -o-transform: scale(1.15);
  transform: scale(1.15);
}

.no-touch #video ul li a:hover .thumb > img,
#video ul li a.selected .thumb > img {
  position: relative;
  -webkit-transform: scale(1.15);
  -moz-transform: scale(1.15);
  -ms-transform: scale(1.15);
  -o-transform: scale(1.15);
  transform: scale(1.15);
}

.no-touch #works ul li a:hover .thumb:after,
#works ul li a.selected .thumb:after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: url("../images/overlay.png");
  opacity: 0.5;
}


.no-touch #video ul li a:hover .thumb:after,
#video ul li a.selected .thumb:after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: url("../images/v.png") no-repeat center;
  opacity: 0.5;
}


#video ul li .info {
  position: relative;
  overflow: hidden;
  max-height: 230px;
}


#video ul li .info .content {
  padding: 30px 4em;
}


#current-case .info {
  background: #000;
}


#video ul li .info span {
  position: absolute;
  top: 0;
  z-index: -1;
  display: block;
  width: 100%;
  height: 0%;
  background: #000;
  -webkit-transition: all .2s linear;
  -moz-transition: all .2s linear;
  -ms-transition: all .2s linear;
  -o-transition: all .2s linear;
  transition: all .2s linear;
}


#video .loadAnim {
  position: absolute;
  z-index: 1;
  width: 100%;
  top: 50%;
  display: none;
}


#video .square {
  display: block;
  width: 64px;
  height: 64px;
  background-repeat: no-repeat;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -32px;
  margin-top: -77px;
  background-image: url("../images/squareloading.png");
  -webkit-animation: loadAnimation 1s steps(1, end) infinite;
  -moz-animation: loadAnimation 1s steps(1, end) infinite;
  -ms-animation: loadAnimation 1s steps(1, end) infinite;
  -o-animation: loadAnimation 1s steps(1, end) infinite;
  animation: loadAnimation 1s steps(1, end) infinite;
}




.no-touch #video ul li a:hover .info span,
#video ul li a.selected .info span {
  height: 100%;
}

#video ul li a:hover .info p.tag {
  color: #fff;
}


#video ul li.archived a .circle {
  position: relative;
  border-radius: 50%;
  width: 70%;
  padding-bottom: 70%;
  background: #f5f5f5;
  margin: 60px auto 96px auto;

  -webkit-transition: -webkit-transform .3s;
        -moz-transition: -moz-transform .3s;
          -ms-transition: -ms-transform .3s;
            -o-transition: -o-transform .3s;
                  transition: transform .3s;

}


#video ul li.archived a .rect {
  position: absolute;
  width: 70%;
  padding-bottom: 15%;
  background: black;
  left: 50%;
  top: 50%;
  margin-left: -35%;
  margin-top: -7.5%;
}


#video ul li.archived a .rect:nth-child(2) {
  width: 15%;
  padding-bottom: 70%;
  margin-left: -7.5%;
  margin-top: -35%;
}


.no-touch #video ul li.archived a:hover .circle {
  background: #000;
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  transform: rotate(90deg);
}


.no-touch #video ul li.archived a:hover .rect {
  background: #fff;
}


#video ul li.archived hgroup {
  padding: 0 40px;
}


#video ul li.archived h1 {
  text-transform: uppercase;
  font-family: "alpineClean";
  font-weight: normal;
  font-size: 4.250em;
  letter-spacing: -0.1em;
  line-height: 0.8em;
  color: #000;
  margin-bottom: 0;
}


#video ul li.archived h1 span.a1 {
  font-family: "alpineA1";
  font-weight: normal;
}


#video ul li.archived h1 span.a2 {
  font-family: "alpineA2";
  font-weight: normal;
}


#video ul li.archived p {
  margin: 0;
}


#video ul li.archived p img {
  width: auto;
}


#video ul li.archived h2 {
  font-family: "belizioregularitalic", serif;
  font-weight: normal;
  font-size: 1.563em;
  color: #000;
  margin-top: 0;
  line-height: 0.8em;
  letter-spacing: -0.05em;
}

#video A{text-decoration:none;}
#video A:hover {text-decoration:none;}
/* ***********  >> video  *************************** */


/*          ------导航经过显示------                */

.common-header-clearfix:before,.common-header-clearfix:after {
	content:".";
	display:block;
	height:0;
	overflow:hidden
}
.common-header-clearfix:after {
	clear:both
}
.common-header-clearfix {
	zoom:1
}
.pull-left {
	float:left
}
.pull-right {
	float:right
}
.ali-common-header {
	width:100%;
	height:100px; background:url("../dhimg/logo2.jpg") #000000 center 5px no-repeat;
	position:relative;
	z-index:101
}
.ali-common-header-inner {
	min-width:100%;
	margin:0 auto;
	position:relative;  /*          ------------                */
}


.ali-common-header-inner .item {
	height:100px;
}

.ali-common-header-inner .menu {
	width:120px;
	font-size:16px;
	line-height:100px;
	color:#fff;/*          ------------                */
}
.ali-common-header-inner .menu li.top-menu-item {
	cursor:default;
	float:left;
	position:relative;
	z-index:9999;
	-webkit-transition:all .6s ease-in;
	-moz-transition:all .6s ease-in;
	-o-transition:all .6s ease-in;
	transition:all .6s ease-in
}
/*          ------------                */

#sbmenu span{
  cursor: pointer;
  padding:0px 41px 0 41px;
  height: 100px;
  width: 38px;
  position: absolute;
  display: block;
  content: '';
  top: 12px;
  background: url("../dhimg/on1.jpg")  center 20px no-repeat;
}

#sbmenu span:hover{
  cursor: pointer;
  padding:0px 41px 0 41px;
  height: 100px;
  width: 38px;
  position: absolute;
  display: block;
  content: '';
  top: 12px;
  background: url("../dhimg/on2.jpg") center 20px no-repeat;
}



/*          ------------                */

.ali-common-header-inner .menu li.top-menu-item:hover {
	background:#0196bd
}
.ali-common-header-inner .menu li.top-menu-item a.top-menu-item-link:link,.ali-common-header-inner .menu li.top-menu-item a.top-menu-item-link:visited {
	color:#fff;
	text-decoration:none
}

.ali-common-header-inner .menu-dropdown {
	position:absolute;
	top:100px;
	left:0;
	background-color:#2A2B2D;
	color:#FFFFFF;
	overflow:hidden;
	height:0;
	max-width:116px;
	width:116px;
}


.ali-common-header-inner .tpl3-split-line {
	border-bottom:1px solid #f2f2f2;
	margin-bottom:37px;
	width:470px
}


.ali-common-header-inner .module-wrap {
	width:360px;
	margin-right:50px;
	display:inline-block;
	*zoom:1;
	*display:inline;
	vertical-align:top
}
.ali-common-header-inner .dev-inner .module-wrap {
	width:130px;
	margin-right:15px
}
.ali-common-header-inner .aliplus-inner .module-wrap {
	width:160px;
	margin-right:34px
}



.ali-common-header-inner .item-sub-hd .domain-more a:link,.ali-common-header-inner .item-sub-hd .domain-more a:visited {
	color:#09c;
	margin-top:5px
}

.ali-common-header-inner .module-padding {
	padding:0px 0px 0px 0px;
}

.ali-common-header-inner .module-padding li { PADDING-LEFT: 14px; COLOR: #ffffff; font:13px/17px "微软雅黑","宋体"; OVERFLOW: hidden; padding:10px 0px;}
.ali-common-header-inner .module-padding li A {PADDING-LEFT: 30px; TEXT-DECORATION: none; COLOR: #ffffff; font:13px/17px "微软雅黑","宋体"; float:left; }
.ali-common-header-inner .module-padding li A:hover { COLOR: #8c7851; font:13px/17px "微软雅黑","宋体"; TEXT-DECORATION: none;}
.ali-common-header-inner .module-padding li:hover { background-color:#FFFFFF; COLOR: #8c7851; font:13px/17px "微软雅黑","宋体";}

.ali-common-header-inner .module-padding li:hover A{ background-color:#FFFFFF; COLOR: #8c7851; font:13px/17px "微软雅黑","宋体";}

/*          ------------                */