@charset "utf-8";
/* CSS Document */
html,body {
	margin: 0;
	overflow-x:hidden;
	font-family: GillSans-Light;
	letter-spacing:1px;
}
img {
	border:0;
	-ms-interpolation-mode: bicubic; 
	max-width:100%;
	display:block;
}
a {
  background: transparent;
  text-decoration:none;
}
ul, li {
	list-style:none;
}
@font-face {
	font-family: 'GillSans-Light';
	src: url('../gillsans-light_.eot') format("opentype"); 
	src:url('../gillsans-light_.ttf')  format('truetype');
   }

.david-roll-surface i{
	text-align:center;
	display:block;
	}

.david-roll-surface:nth-child(1),.david-roll-surface:nth-child(2){
    border:1px solid #888888;
}
/*#navbg{
	width:100%;
	height:100%;
	position:fixed;
	left:0;
	top: 0;
	z-index: 998;
	display:none;
	}
#nav{
	-webkit-perspective:1000px;-ms-perspective:1000px;-moz-perspective:1000px;-o-perspective:1000px;
}
#nav-box {
	-webkit-transform-origin: 100% 50%;
	-moz-transform-origin: 100% 50%;
	-ms-transform-origin: 100% 50%;
	-o-transform-origin: 100% 50%;
	transform-origin: 100% 50%;
}

.nav-open {
	-webkit-animation: openY .5s linear both;
	-moz-animation: openY .5s linear both;
	-ms-animation: openY .5s linear both;
	animation: openY .5s linear both;
}
@-webkit-keyframes openY {
0% {
-webkit-transform:perspective(900px) rotateY(-60deg);
}
100% {
-webkit-transform:perspective(900px) rotateY(0deg);
}
}
@-moz-keyframes openY {
0% {
-moz-transform:perspective(900px) rotateY(-60deg);
}
100% {
-moz-transform:perspective(900px) rotateY(0deg);
}
}
@-ms-keyframes openY {
0% {
-ms-transform:perspective(900px) rotateY(-60deg);
}
100% {
-ms-transform:perspective(900px) rotateY(0deg);
}
}
.nav-close {
	-webkit-animation: closeY .5s ease-out both;
	-moz-animation: closeY .5s ease-out both;
	-ms-animation: closeY .5s ease-out both;
}
@-webkit-keyframes closeY {
0% {
-webkit-transform:perspective(900px) rotateY(0deg);
}
100% {
-webkit-transform:perspective(900px) rotateY(-90deg);
}
}
@-moz-keyframes closeY {
0% {
-moz-transform:perspective(600px) rotateY(0deg);
}
100% {
-moz-transform:perspective(600px) rotateY(-90deg);
}
}
@-ms-keyframes closeY {
0% {
-ms-transform:perspective(600px) rotateY(0deg);
}
100% {
-ms-transform:perspective(600px) rotateY(-90deg);
}
}*/
#refer{
	width:100%;
	margin:0 auto;
	height:0;
}
/*.nav-btn{
	background:#fff;
	cursor:pointer;
	z-index:2;
	width:44px;
	height:29px;
	position:absolute;
	left:0;
	background:url(../images/nav-open.png) no-repeat;
	}
.navclick{
	background:url(../images/nav-btn.jpg);
	}

.nav-bigsize{
	margin-top:24px;
	}
#nav{
	width:300px;
	left:0;
	position:fixed;
	top:0;
	z-index: 999;
	background:#222222;
	height:100%;
	}
#close{
	position:absolute;
	top:10px;
	right:0;
	cursor:pointer;
	display:none;
	}
.lpi-logo {
	display: block;
	margin:51px auto;
	cursor: pointer;
	background:url(../images/logo.png) no-repeat;
	width:92px;
	height:34px;
}
.nav-bigsize{
	font-size: 1.125em;
	}
.nav-Smallsize{
	font-size:0.875em;
	}
.nav-share{
	margin:12% 0 0 0;
	color:#555;
	text-align: center;
	}
.nav-share-way{
	width: 140px;
	height: auto;
	padding: 0;
	margin: 0 auto;
	}
.nav-title-border{
	width:48px;
	margin:0 auto;
	border-top:1px solid #454545;
	}
.nav-bigsize{
	text-align:center;
	color:#aaaaaa;
	}
#nav span{
	margin-top:4%;
	display:block;
	width:76px;
	text-align:center;
	}

#nav a{
	display:block;
	text-align:center;
	}
#nav a:hover {
color: #FFF;
}*/
.container {
	overflow:hidden;
	width: 1200px;
	display: block;
	margin: auto;
	position:relative;
	left:0;
	/*padding: 30px 0 0 0;*/
}
.topic {
	width: 1200px;
}
.topic img {
	margin: auto;
	width: 100%;
}
.this {
	padding:20px 0px 0 0px;
	overflow: hidden;
	position:relative;
}
.left {
	width: 363px;
	float: left;
	padding: 20px 20px 0 0;
}
.left_one {
	width: 363px;
	border-bottom: 1px #dddddd solid;
	padding: 0 0 4px 0;
}
.l_title{
	font-size:24px;
	margin:0;
	color:#000;
	line-height: 28px;
	}
.left_two {
	width: 363px;
	border-bottom: 1px #dddddd solid;
}
.left_three {
	width: 363px;
	border-bottom: 1px #dddddd solid;
}
.left_four {
	width: 363px;
	border-bottom: 1px #dddddd solid;
}
.left_five {
	width: 174px;
	height: 42px;
	margin: 15px 0 0 2px;
	cursor: pointer;
	line-height:42px;
	font-size:18px;
}
.left_five a {
	text-decoration: none;
}
#btn-margin{
	margin: 26px 0 0 2px;
	}
.right {
	width: 800px;
	float: right;
	font-size: 0;
}

.right {
	overflow: hidden;
}
.right_one{
	float:left;
	position:relative;
	}
.video{
	position:relative;
	height:0;
	width:100%;
	overflow:hidden;
	padding-bottom: 56.25%;
	margin-bottom: 15px;
	}
.video_button {
	width: 80px;
	height: 80px;
	display: block;
	margin: -265px 0 0 360px;
	float: left;
	position:relative;
}
.video_img {
	float: left;
	position:relative;
}
.dream_video{
	width:800px;
	height:450px;
	float:left;
	margin-top:-450px;
	}
.right_two {
	float: right;
	/*margin: 20px 0 0 0;*/
}
.right_one img, .right_two img {
	/*width: 100%;
	height: 100%;*/
}
.more {
	/*width: 1200px;*/
	border-top: 1px #dddddd solid;
	margin: 30px 0 0 0;
}
.line {
	background: #dddddd;
	width: 76px;
	height: 1px;
	margin: auto;
	margin-top: 10px;
	margin-bottom: 30px;
}
.more_content {
	margin-top: 30px;
	position: relative;
	left:0;
}
.more_left, .more_middle, .more_right {
	float: left;
}
.more_left img, .more_middle img, .more_right img, .right_three img, .right_four img, .right_five img, .right_six img {
	/*width: 100%;
	height: 100%;*/
	display:block;
}
.more_one, .more_two, .more_three, .more_four, .more_five, .more_six, .more_seven, .more_eight, .more_nine {
	margin-bottom: 15px;
	cursor: pointer;
	position:relative;
}
.left_fix {
	position: fixed;
	top:1px;
	padding-left: 20px;
}
.test{position: relative;}



/*.image > div{
	-webkit-backface-visibility: hidden;
	}*/
/*.roll-wrap{
	position:relative;

	}

.roll-surface{
    position: absolute;
   
}
.roll-wrap-big{
	position:relative;
	}

.roll-surface-big{
    position: absolute;
}

.work-link{
	background:#dddddd;
	width:100%;
	opacity:0;
	position: absolute;
	}
.work-name{
	font-weight: bold;
	position:absolute;
	left:8%;
	top: 34%;
	font-size:18px;
	}

.work-summary{
	position:absolute;
	left:8%;
	top: 45%;
	}
.work-image img,.work-image-big img{
	width:100%;
	display:block;
	}	
.work_gt{
	position:absolute;
	left:8%;
	}
.work-big-summary{
	position: absolute;
	top: 45%;
	left: 8%;
	}*/
.clearfix:before,
.clearfix:after {
  display: table;
  content: " ";
}

.clearfix:after {
  clear: both;
}
.r_bgcolor{
	/*background:#eeeeee;*/
	}
/*.r_position{
	margin:20px auto;
	padding: 0 20px;
	}*/
/*.work-big-name {
	position:absolute;
	left:8%;
	font-weight: bold;
}
.work_big_gt {
	margin: 85% 0 0 10%;
}
*/
.bg_color {
	width: 174px;
	height: 43px;
	display: block;
	position: absolute;
	z-index: 0;
	margin-left: 1px;
}
.david-roll-container {
	position: relative;
}
.david-roll-surface{
	position: absolute;
	width: 174px;
	left: 0;
	height: 51px;
	}
.david-roll-wrap:hover .bg_color {
	-webkit-animation: pulse 0.5s;
	-moz-animation: pulse 0.5s;
	-ms-animation: pulse 0.5s;
	transition: opacity 500ms linear;
	background-color: #888888;
}
.david-roll-surface {
	height: 42px;
}
@-webkit-keyframes pulse {
0% {
width:0;
}
100% {
width:100%;
}
}
@-moz-keyframes pulse {
0% {
width:0;
}
100% {
width:100%;
}
}
@-ms-keyframes pulse {
0% {
width:0;
}
100% {
width:100%;
}
}
@keyframes pulse {
0% {
width:0;
}
100% {
width:100%;
}
}
.david-roll-container:hover .david-roll-surface i {
	-moz-transition-property: color;
  -moz-transition-duration: 0.5s;
  -moz-transition-timing-function: ease-out;
  -webkit-transition-property:  color;
  -webkit-transition-duration: 0.5s;
  -o-transition-property:  color;
  -o-transition-duration: 0.5s;
  -ms-transition-property:  color;
  -ms-transition-duration: 0.5s;
  color:white;
}

.ch{
	font-size:12px;
	line-height:22px;
	margin-bottom:20px;
	}
.ch span{
	font-size:16px;
	}	
.en{
	font-size:16px;
	line-height: 22px;
	}
.share{
	width: 54px;
	height: 38px;
	line-height: 56px;
	float: left;
	text-align: left;
	vertical-align:middle;
}
.share_list{vertical-align: middle;}
.nav-share-way li:first-child{
	margin:50px 0 0 34px;
	}
.nav-share-way li{
	width: 70px;
	margin: 24px 0 0 34px;
	}

/*#weibo,#weixin{
	width:38px;
	height:38px;
	display: block;
	margin: 0 auto;
	cursor:pointer;
	}
#weixin{
	background:url(../images/share-weixin1.png) 0 0;
	}
#weixin:hover{
	background:url(../images/share-weixin2.png);
	}	
#weibo{
	background:url(../images/share-weibo1.png) 0 0;
	}
#weibo:hover{
	background:url(../images/share-weibo2.png);
	}	*/
.weixin,.weibo{
	width:20px;
	height:16px;
	display:block;
	margin: 21px auto;
	cursor:pointer;
	}
.weixin{
	background:url(../images/share-sub-weixin-1.png) 0 0 no-repeat;
	}

.weixin:hover{
	background:url(../images/share-sub-weixin-2.png) 0 0 no-repeat;
	}

.weibo{
	background:url(../images/share-sub-weibo-1.png) 0 0 no-repeat;
	}
	
.weibo:hover{
	background:url(../images/share-sub-weibo-2.png) 0 0 no-repeat;
	}			
.en,.ch{
	margin:20px 0 20px 0;
	}
	
.l_p{
	font-size:16px;
	margin: 8px 0 15px;
	}
#ewm{
	width: 160px;
	height: 160px;
	position: absolute;
	top: 85%;
	left: 95%;
	margin-left: -174px;
	z-index: 9999;
	margin-top: -250px;
	background:#fff;
	}

#ewm_img,.code_img{
	position:absolute;
	width:150px;
	height:150px;
	left:5px;
	top:5px;
	}
#ewm em,.wx_ewm em{
	display: block;
	width: 0;
	height: 0;
	border-width: 15px 15px 0 0;
	border-style: solid;
	border-color: #fff transparent transparent #fff;
	margin: 160px 70px 0;
	}
.wx_ewm em{
	border-color: #000 transparent transparent #000;
	}
.wx_ewm{
	width:160px;
	height:160px;
	position:absolute;
	z-index: 9999;
	background:#000;
	}
.share_list{
	position:relative;
	margin:0;
	}
.share_list li{
	float:left;
	margin: 0 10px;
	}
	
.vjs-default-skin .vjs-big-play-button{
	left:46%;
	top:42%;
	}	
/*#example_video_1{
	height:450px;
	}*/

@media (max-width: 1200px) {
	 .this{
		 padding:20px 20px 0 20px;
		 }
	}
@media (min-width: 840px) {
	 
.container {
	width: 100%;
	max-width: 1200px;
	
}
.topic {
	width: 100%;
	max-width: 1200px;
	display: block;
}
.this {
	max-width: 1200px;
	display: block;
	margin: auto;
}
.left {
	width: 30%;
}
.right {
	width: 66.666667%;
}
.imghide1,.imghide2{
	opacity:0;
	z-index:-9999;
	width:31.5%;
	max-width: 390px;
	position: absolute;
	visibility: hidden;
	}
.video_button {
	width: 10%;
	height: auto;
	margin-top: -33.125%;
	margin-left: 45%;
}
.left_one, .left_two, .left_three, .left_four {
	width: 100%;
	max-width: 363px;
	display: block;
	border-bottom: 1px #dddddd solid;
	color: #555;
}

.more {
	/*margin: auto;
	margin-top: 30px;
	width: 100%;
	max-width: 1200px;
	display: block;*/
}
.more_content {
	/*width: 100%;*/
	padding: 0 20px;
	max-width: 1200px;
	margin:0 auto;
}
.more_left, .more_middle, .more_right {
	width: 32.5%;
	height: auto;
}
.more_middle, .more_right {
	margin-left: 1.25%;
}
.more_one, .more_two, .more_three, .more_four, .more_five, .more_six, .more_seven, .more_eight, .more_nine {
	margin-bottom: 3.85%;
}
.min-img{
	display:none;
	}

}
 @media (min-width: 640px) and (max-width: 840px) {
.container {
 width: 100%;
 display: block;
}
.topic {
 width: 100%;
 display: block;
}
.this {
 display: block;
 margin: auto;
 padding:20px 20px 0 20px;
}
.left, .right {
 width: 100%;
 clear: both;
}
.right {
 margin: 30px 0 0 0;
}
.more_content{
	padding:0 20px 0 20px
}
.imghide1,.imghide2{
	opacity:0;
	z-index:-9999;
	width:46.75%;
	position: absolute;
	visibility: hidden;
	}
.video_button {
 width:10%;
 height:auto;
 margin-top: -33.125%;
 margin-left:45%;
}
.left_one, .left_two, .left_three, .left_four {
 width: 100%;
 max-width: 800px;
 display: block;
 border-bottom: 1px #dddddd solid;
}
.more {
 margin: auto;
 margin-top: 30px;
 max-width: 1200px;
 display: block;
}
.more_left, .more_middle {
 width: 48.75%;
 height: auto;
}
.more_right {
 clear: both;
 width: 99.375%;
 height: auto;
}
.more_middle {
 margin-left: 1.875%;
}
.more_three, .more_nine {
 float: right;
 width: 49.06%;
 height: auto;
}
.more_six {
 float: left;
 width: 49.06%;
 height: auto;
}
.more_one, .more_two, .more_four, .more_five, .more_six, .more_seven, .more_eight, .more_nine {
 margin-bottom: 3.85%;
}
.more_three {
 margin-bottom: 1.88%;
}
.min-img{
	display:none;
	}
#example_video_1{
	height:300px;
	}
}
 @media (min-width: 480px) and (max-width: 640px) {

.container {
width:100%;
}
.topic {
 width: 100%;
 max-width: 600px;
 display: block;
}
.this {
padding: 0 20px 0 20px;
 margin: auto;
}
.left, .right {
 width: 440px;
 clear: both;
 margin: 30px auto;
 float:none;
}


.imghide1,.imghide2{
	opacity:0;
	z-index:-9999;
	width:440px;
	position: absolute;
	visibility: hidden;
	}
.left_one, .left_two, .left_three, .left_four {
 width: 100%;
 max-width: 600px;
 display: block;
 border-bottom: 1px #dddddd solid;
}
.more {
 width: 100%;
 max-width: 600px;
 display: block;
 margin: auto;
 margin: 30px 0 0 0;
}
.line {
 margin-bottom: 30px;
}
 .more_left, .more_middle, .more_right {
 float: none;
 margin:0 auto;
}

.more_content {
 width: 440px;
 float:none;
}
.max-img{
	display:none;
	}
#example_video_1{
	height:240px;
	}
.vjs-default-skin .vjs-big-play-button{
	left:42%;
	top:40%;
	}

}
 @media (max-width: 480px) {
.container {
 width: 100%;
}
.topic {
 width: 100%;
 max-width: 440px;
 display: block;
}
.this {
 margin: auto;
}
.left, .right {
 width: 100%;
 clear: both;
}
.left{
	padding: 10px 20px 0 0;
	}
.right {
 margin: 30px 0 0 0;
}
.left_one, .left_two, .left_three, .left_four {
 width: 100%;
 max-width: 440px;
 display: block;
 border-bottom: 1px #dddddd solid;
}
.left_five {
 width: 100%;
 max-width: 150px;
 display: block;
 height: 50px;

}
.more {
 display: block;
 margin: auto;
 margin: 30px 0 0 ;
}
.line {
 margin-bottom: 30px;
}
 .more_left, .more_middle, .more_right {
 float: none;
 margin: 0 10px;
}
.imghide1,.imghide2{
	opacity:0;
	z-index:-9999;
	width:90%;
	margin:0 20px;
	position: absolute;
	visibility: hidden;
	}
.max-img{
	display:none;
	}
#example_video_1{
	height:240px;
	}
.vjs-default-skin .vjs-big-play-button{
	left:42%;
	top:37%;
	}
}


/* ------------ Retina ------------ */ 
@media only screen and (-o-min-device-pixel-ratio: 2/1), /* Opera */ 
       only screen and (min--moz-device-pixel-ratio: 2),        /* Firefox 16 之前 */ 
       only screen and (-webkit-min-device-pixel-ratio: 2),    /* Webkit */ 
       only screen and (min-resolution: 240dpi),                    /* 标准 */ 
       only screen and (min-resolution: 2dppx)                      /* 标准 */ 
    { 
.nav-btn{ 
	background-image:url(../images/nav-open2x.jpg);
	background-size:44px 29px;
	} 
.lpi-logo{
	background-image:url(../images/logo2x.png);
	background-size:92px 34px;
	}
#weixin{
	background-image:url(../images/share-weixin2x1.png);
	background-size:38px 38px;
	}
#weixin:hover{
	background-image:url(../images/share-weixin2x2.png);
	background-size:38px 38px;
	}
#weibo{
	background-image:url(../images/share-weibo2x1.png);
	background-size:38px 38px;
	}
#weibo:hover{
	background-image:url(../images/share-weibo2x2.png);
	background-size:38px 38px;
	}
.weixin{
	background:url(../images/share-sub2x-weixin-1.png) 0 0 no-repeat;
	background-size:20px 16px;
	}
.weixin:hover{
	background:url(../images/share-sub2x-weixin-2.png) 0 0 no-repeat;
	background-size:20px 16px;
	}

.weibo{
	background:url(../images/share-sub2x-weibo-1.png) 0 0 no-repeat;
	background-size:20px 16px;
	}
	
.weibo:hover{
	background:url(../images/share-sub2x-weibo-2.png) 0 0 no-repeat;
	background-size:20px 16px;
	}	
#gotop{
	background:url(../images/top2x.jpg) 0 0 no-repeat;
	background-size:72px 62px;
	}
#gotop:hover{
	background:url(../images/top-hover2x.jpg) 0 0 no-repeat;
	background-size:72px 62px;
	}
}