/*博思历史 History container*/
html,body{ width:100%; height:100%; overflow:hidden;}
.container{
	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;
	background:url("../image/ht_bg.jpg") no-repeat center / cover;
}
section.default{
	width: 100%;
	height: 100%;
	position: absolute;
	top:0;
	left:0;
}
section.default .content,.section-wrap .content{
	width: 960px;
	margin:0 auto;
	text-align:center;
	color:#fff;
}
section.default .d_title{
	margin-bottom: 28px;
	font-size: 24px;
	text-align:center;
	font-family: "Microsoft Yahei";
}
section.default img{
	display: inline;
}
section.default .d_desc{
	font-size:15px;
	line-height: 24px;
	margin-top: 24px;
	color:#999999;
}
.section-wrap{display:none;width:1000%;height:100%;overflow:visible;transition:transform 1.2s cubic-bezier(0.86,0,0.03,1);-webkit-transition:-webkit-transform 1.5s cubic-bezier(0.86,0,0.03,1);}
.section-wrap .section{position:relative; float:left;width:10%; height:100%; background-position:center center; background-repeat:no-repeat;}
.section-wrap .section .title{width:100%;position:absolute;top:10%;color:#fff;font-size:2.4em;text-align:center;}
.section-wrap .section .title p{ padding:0 4%;opacity:0}
.put-section-0{ transform:translateX(0);-webkit-transform:translateX(0);}
.put-section-1{ transform:translateX(-10%);-webkit-transform:translateX(-10%);}
.put-section-2{ transform:translateX(-20%);-webkit-transform:translateX(-20%);}
.put-section-3{ transform:translateX(-30%);-webkit-transform:translateX(-30%);}
.put-section-4{ transform:translateX(-40%);-webkit-transform:translateX(-40%);}
.put-section-5{ transform:translateX(-50%);-webkit-transform:translateX(-50%);}
.put-section-6{ transform:translateX(-60%);-webkit-transform:translateX(-60%);}
.put-section-7{ transform:translateX(-70%);-webkit-transform:translateX(-70%);}
.section-wrap .section .h_date{
	font-size:24px;
	line-height: 50px;
	letter-spacing: 0.2em;
	opacity:0;
	transform:translateY(-80px);
	-webkit-transform:translateY(-80px;);
}

.section .a_date,.default .a_title{
	animation:h_date 0.8s;
	animation-fill-mode:forwards;
	-webkit-animation:h_date 0.8s;
	-webkit-animation-fill-mode:forwards;
}
@keyframes h_date{
	0%{
		opacity: .1;
		transform:translateY(-80px);
		-webkit-transform:translateY(-80px);
	}
	100%{
		opacity: 1;
		transform:translateY(0);
		-webkit-transform:translateY(0);
	}
}

@-webkit-keyframes h_date{
	0%{
		opacity: .1;
		transform:translateY(-80px);
		-webkit-transform:translateY(-80px);
	}
	100%{
		opacity: 1;
		transform:translateY(0);
		-webkit-transform:translateY(0);
	}
}

.section-wrap .section .h_title{
	opacity: 0;
	margin:28px 0;
	font-size:36px;
	line-height: 24px;

}
.section .a_title{
	animation:h_title 1.2s;
	animation-fill-mode:forwards;
	animation-delay:0.5s;
	-webkit-animation:h_title 1.2s;
	-webkit-animation-fill-mode:forwards;
	-webkit-animation-delay:0.5s;
}

@keyframes h_title{
	%0{
		opacity: 0;
	}
	100%{
		opacity: 1;
	}
}

@-webkit-keyframes h_title{
	%0{
		opacity: 0;
	}
	100%{
		opacity: 1;
	}
}

.section-wrap .section .h_desc{
	font-size: 15px;
	line-height: 24px;
	color:#999;
	padding:0 260px;
	box-sizing:border-box;
	margin-bottom: 30px;
	opacity: 0;
}
/*desc-animation*/
.default .d_desc{
	animation:h_desc 1.2s;
	animation-fill-mode:forwards;
	animation-delay:0.8s;
	-webkit-animation:h_desc 1.2s;
	-webkit-animation-fill-mode:forwards;
	-webkit-animation-delay:0.8s;
	opacity: 0;
}
.section .a_desc{
	animation:h_desc 1.2s;
	animation-fill-mode:forwards;
	animation-delay:0.8s;
	-webkit-animation:h_desc 1.2s;
	-webkit-animation-fill-mode:forwards;
	-webkit-animation-delay:0.8s;

}
.section .stitle{
	opacity: 0;
}
.section .a_stitle{
	animation:h_desc 1.2s;
	animation-fill-mode:forwards;
	animation-delay:1s;
	-webkit-animation:h_desc 1.2s;
	-webkit-animation-fill-mode:forwards;
	-webkit-animation-delay:1s;
}
@keyframes h_desc{
	%0{
		opacity: 0;
	}
	100%{
		opacity: 1;
	}
}

@-webkit-keyframes h_desc{
	%0{
		opacity: 0;
	}
	100%{
		opacity: 1;
	}
}

/*img-animation*/

.default img{
	transform:translateY(30px);
	-webkit-transform:translateY(30px);
	opacity: 0;
	animation:h_img .5s;
	-webkit-animation:h_img .5s;
	animation-delay:.5s;
	-webkit-animaiton-delay:.5s;
	animation-fill-mode:forwards;
	-webkit-animation-fill-mode:forwards;
}

.section img{
	transform:translateY(80px);
	-webkit-transform:translateY(80px);
	opacity: 0;
}
.section .a_img img{
	animation:h_img .5s;
	-webkit-animation:h_img .5s;
	animation-delay:1s;
	-webkit-animaiton-delay:1s;
	animation-fill-mode:forwards;
	-webkit-animation-fill-mode:forwards;
}

@keyframes h_img{
	0%{
		opacity: .1;
		transform:translateY(80px);
		-webkit-transform:translateY(80px);
	}
	100%{
		opacity: 1;
		transform:translateY(0);
		-webkit-transform:translateY(0);
	}
}

@-webkit-keyframes h_img{
	0%{
		opacity: .1;
		transform:translateY(80px);
		-webkit-transform:translateY(80px);
	}
	100%{
		opacity: 1;
		transform:translateY(0);
		-webkit-transform:translateY(0);
	}
}

.section-1 .imgBox img{
	display: inline;
	margin-right:30px;
	vertical-align: middle;
}

.section-2 .imgBox img{
	display: inline;
	margin-right:30px;
	vertical-align: middle;
	margin-top:16px;
}

.section-3 .imgBox img{
	display: inline;
	margin-right:30px;
	vertical-align: middle;
	margin-top:16px;
}

.section-4 .imgBox img{
	display: inline;
	margin-right:30px;
	vertical-align: middle;
	margin-top:16px;
}
.section-wrap .section-4 p.h_desc{
	padding:0 100px;
}
.section-5 .imgBox div{
	margin:0 30px;
	display: inline-block;
	color:#999;
}
.section-5 .imgBox span{
	display: inline-block;
	font-size:13px;
	margin-top:8px;
}

.section-6 .imgBox img{
	display: inline;
	margin-right:30px;
	vertical-align: middle;
	margin-top:16px;
}

.section-7 .imgBox img{
	display: inline;
	margin-right:30px;
	vertical-align: middle;
	margin-top:16px;
}

.section-wrap .section-7 p.h_desc{
	padding:0 50px;
}
.section-wrap .section-5 p.h_desc{
	padding:0 100px;
}
.section-8 .imgBox img{
	display: inline;
	margin-right:30px;
	vertical-align: middle;
	margin-top:16px;
}
.section-wrap .section-8 p.h_desc{
	padding:0 50px;
	margin-bottom: 10px;
}
#historynav {
    width: 100%;
    height: 165px;
    min-width: 1024px;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 50;
    border: none;
}
.navcurve1,.navcurve2 {
    width: 100%;
    height: 105px;
    position: absolute;
    left: 0;
    top: 0;
    filter: alpha(opacity=40);
    opacity: .4;
}
#hnavul li {
    font-size: 12px;
    color: #999;
    line-height: 14px;
    font-family: Arial;
    width: 36px;
    height: 89px;
    margin-left: -18px;
    position: absolute;
    opacity: 0;
}
#hnavli01 {
    left: 7.692%;
    top: -30px;
}
#hnavul li i {
    border: 1px solid #fff;
}

#hnavul li{
	animation: myfirst 1s;
	-moz-animation: myfirst 1s;	/* Firefox */
	-webkit-animation: myfirst 1s;	/* Safari 和 Chrome */
	-o-animation: myfirst 1s;
	animation-delay:1s;
	-webkit-animation-delay:1s;
}

#hnavul li:nth-of-type(1){
	animation-delay:0.55s;
-webkit-animation-delay:0.55s; /* Safari 和 Chrome */
}

#hnavul li:nth-of-type(2){
	animation-delay:0.6s;
-webkit-animation-delay:0.6s; /* Safari 和 Chrome */
}

#hnavul li:nth-of-type(3){
	animation-delay:0.65s;
-webkit-animation-delay:0.65s; /* Safari 和 Chrome */
}

#hnavul li:nth-of-type(4){
	animation-delay:0.7s;
-webkit-animation-delay:0.7s; /* Safari 和 Chrome */
}

#hnavul li:nth-of-type(5){
	animation-delay:0.75s;
-webkit-animation-delay:0.75s; /* Safari 和 Chrome */
}

#hnavul li:nth-of-type(6){
	animation-delay:0.8s;
-webkit-animation-delay:0.8s; /* Safari 和 Chrome */
}

#hnavul li:nth-of-type(7){
	animation-delay:0.85s;
-webkit-animation-delay:0.85s; /* Safari 和 Chrome */
}

#hnavul li:nth-of-type(8){
	animation-delay:0.90s;
-webkit-animation-delay:0.90s; /* Safari 和 Chrome */
}

#hnavul li:nth-of-type(9){
	animation-delay:0.95s;
-webkit-animation-delay:0.95s; /* Safari 和 Chrome */
}

#hnavul li:nth-of-type(10){
	animation-delay:1s;
-webkit-animation-delay:1s; /* Safari 和 Chrome */
}

#hnavul li:nth-of-type(11){
	animation-delay:1.05s;
-webkit-animation-delay:1.05s; /* Safari 和 Chrome */
}

@keyframes myfirst{
	0%{
		transform: translateY(-80px);
	-ms-transform: translateY(-80px);		/* IE 9 */
	-webkit-transform: translateY(-80px);	/* Safari and Chrome */
	-o-transform: translateY(-80px);		/* Opera */
	-moz-transform: translateY(-80px);	
	}

	60%{
		transform: translateY(40px);
	-ms-transform: translateY(40px);		/* IE 9 */
	-webkit-transform: translateY(40px);	/* Safari and Chrome */
	-o-transform: translateY(40px);		/* Opera */
	-moz-transform: translateY(40px);	
	}
	100%{
		transform: translateY(0);
	-ms-transform: translateY(0);		/* IE 9 */
	-webkit-transform: translateY(0);	/* Safari and Chrome */
	-o-transform: translateY(0);		/* Opera */
	-moz-transform: translateY(0);	
	}
}
@webkit-keyframes myfirst{
	0%{
		transform: translateY(-80px);
	-ms-transform: translateY(-80px);		/* IE 9 */
	-webkit-transform: translateY(-80px);	/* Safari and Chrome */
	-o-transform: translateY(-80px);		/* Opera */
	-moz-transform: translateY(-80px);	
	}

	60%{
		transform: translateY(40px);
	-ms-transform: translateY(40px);		/* IE 9 */
	-webkit-transform: translateY(40px);	/* Safari and Chrome */
	-o-transform: translateY(40px);		/* Opera */
	-moz-transform: translateY(40px);	
	}
	100%{
		transform: translateY(0);
	-ms-transform: translateY(0);		/* IE 9 */
	-webkit-transform: translateY(0);	/* Safari and Chrome */
	-o-transform: translateY(0);		/* Opera */
	-moz-transform: translateY(0);	
	}
}


#hnavul li i {
    width: 8px;
    height: 8px;
    border: 1px solid #ccc;
    display: block;
    position: absolute;
    bottom: 26px;
    left: 13px;
    transition: all .3s ease-in-out 0s;
    -moz-transition: all .3s ease-in-out 0s;
    -webkit-transition: all .3s ease-in-out 0s;
    -o-transition: all .3s ease-in-out 0s;
    transform: rotate(150deg);
    -ms-transform: rotate(150deg);
    -webkit-transform: rotate(150deg);
    -o-transform: rotate(150deg);
    -moz-transform: rotate(150deg);
}
#hnavul .navpoint:hover i, #hnavul li.on i {
    border: 1px solid #376e37;
    background: #376e37;
    transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
}
#hnavul .navpoint:hover span, #hnavul li.on span{
	font-weight:700;
}
/*.redbg #hnavul .navpoint:hover i, .redbg #hnavul li.on i {
    border: 1px solid #fff;
    background: #fff;
}*/
#hnavul li span{
	position: absolute;
	width:60px;
	bottom:-5px;
	left:-5px;
	font-size:14px;
	cursor:pointer;
}
#hnavli02 {
    left: 15.384%;
    top: -11px;
}
#hnavli03 {
 left:23.077%;
 top:-1px
}
#hnavli04 {
 left:30.769%;
 top:-3px
}
#hnavli05 {
 left:38.461%;
 top:-17px
}
#hnavli06 {
 left:46.153%;
 top:-28px
}
#hnavli07 {
 left:53.846%;
 top:-28px
}
#hnavli08 {
 left:61.538%;
 top:-22px
}
#hnavli09 {
 left:69.231%;
 top:-15px
}
#hnavli10 {
 left:76.923%;
 top:-9px
}
#hnavli11 {
 left:84.615%;
 top:-6px
}
#hnavli12 {
 left:92.307%;
 top:-8px
}