@charset "utf-8";

/*----------------------------------------
				reset
----------------------------------------*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}


*{margin:0; padding:0;}


a:hover,
a:focus{
	text-decoration:none !important;
	color:#b5b5b5 !important;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}


/*----------------------------------------
			   visiual style
----------------------------------------*/

#company .company-visiual{
	clear:both;
	margin-top:60px;
}

@media (max-width:979px){
	#company .company-visiual{
		margin-top:0;
	}
}

#company .company-visiual .span12{
	height:350px;
}

#company .company-visiual .span12 img{
	width:100%;
	height:100%;
}


/*----------------------------------------
			  common style
----------------------------------------*/


#company section .container .span12{
	margin-left:0;
}

#company section .container .span12 h2{
	margin-bottom:40px;
	margin-top:0;
	color:#626161;
}


#company section .container .span12 h2 .bar{
	background:#ccc;
}

#company section .container .span12 h2 .color{
	color:#ccc;
}

@media (max-width:767px){
	#company section .container .span12 h2{
		box-sizing:border-box;
	}
	#company .first p{
		word-break:break-all;
	}
	#company .first p:first-letter{
		font-size: 20px;
		font-weight: bold;
	}
}

/*----------------------------------------
			  first style
----------------------------------------*/
#company .first{
	/*padding:80px 0px;*/
	height:520px;
	margin-top:60px;
	width: 100%;
	background:  url(../images/comp4.jpg) 0 -100px no-repeat;
	background-attachment: fixed;
	clear:both;
}

#company .first .span12{
	padding: 30px; background-color: rgba(255,255,255,0.7);box-sizing:border-box;
}

@media (max-width:979px){

	#company .first{
		margin-top:0;
		background:url(../images/comp3.jpg) 50% 50% no-repeat;
		height: 400px;
		background-size:cover;
	}
}

@media (max-width:767px){
	#company .first{
		padd ing:100px 0 100px;
		height: 300px;

	}

	#company section .container{
		padding:0 10px;
	}
}

@media (max-width:600px){
	#company .first{
		height: 250px;
		backgr ound-size:contain;

	}
}
/*----------------------------------------
			  second style
----------------------------------------*/
#company .second{
	background:rgb(242, 242, 242);
	padding:100px 0;
}

@media (max-width:979px){
	#company .second{
		padding:50px 0;
	}
}

#company .second .container .span12 .years{
	width:37%;
	margin:0;
	float:left;
}

@media (max-width:979px){
	#company .second .container .span12 .years{
		width:100%;
		margin-bottom:30px;
	}
}

#company .second .container .span12 .years li{
	float:left;
	min-width:100px;
	height:40px;
	text-align:center;
	line-height:41px;
	background:#e4e4e4;
	cursor:pointer;
	margin-right:3px;
	margin-bottom:3px;
}

@media (max-width:979px){
	#company .second .container .span12 .years li{
		min-width:90px;
		font-size:13px;
	}
}

#company .second .container .span12 .years li.on{
	background:mediumturquoise;
	color:#fff;
}

#company .second .container .span12 .history{
	width:57%;
	/*padding-left:10px;*/
	box-sizing:border-box;
	float:right;
}

@media (max-width:979px){
	#company .second .container .span12 .history{
		width:100%;
	}
}

#company .second .container .span12 .history ul{
	margin:0;
	width:100%;
	float:left;
}

#company .second .container .span12 .history>ul>li{
	width:100%;
	float:left;
	display:none;
}

#company .second .container .span12 .history>ul>li.in{
	display:block;
}

#company .second .container .span12 .history>ul>li:first-child>p{
	font-size:13px;
	color:#DE5E60;
	margin-bottom:20px;
}

#company .second .container .span12 .history ul li h4{
	margin-top:0;
	margin-bottom:10px;
	color:#333;
}

#company .second .container .span12 .history ul li ul{
	margin-bottom:20px;
}

#company .second .container .span12 .history ul li ul:last-child{
	margin-bottom:0;
}

#company .second .container .span12 .history ul li ul li{
	width:100%;
	margin-bottom:5px;
	font-size:14px;
	float:left;
}

#company .second .container .span12 .history ul li ul li span{
	font-size:16px;
	float:left;
	display:inline-block;
	width:14%;
	line-height:1.6;
	color:#333;
}

@media (max-width:767px){
	#company .second .container .span12 .history ul li ul li span{
		/*width:100%;*/
	}
}

#company .second .container .span12 .history ul li ul li p{
	font-size:16px;
	display:inline;
	float:right;
	width:85%;
	margin-bottom:0;
	line-height:1.5;
	color:#333;
}

@media (max-width:560px){
	#company .second .container .span12 .history ul li ul li p{
		width:80%;
	}
}

@media (max-width:400px){
	#company .second .container .span12 .history ul li ul li p{
		width:75%;
	}
}

/*----------------------------------------
			  third style
----------------------------------------*/
#company .third{
	padding-top:100px;
	margin-bottom:100px;
}

@media (max-width:979px){
	#company .third{
		padding-top:50px;
		margin-bottom:50px;
	}
}

#company .third .container{
	padding-bottom:260px;
}

@media (max-width:1200px){
	#company .third .container{
		padding-bottom:280px;
	}
}

@media (max-width:979px){
	#company .third .container{
		padding-bottom:300px;
	}
}

@media (max-width:743px){
	#company .third .container{
		padding-bottom:30px;
	}
}

.title-page {
	text-align: center;
	margin-bottom: 100px;
}

.title-page .title {
	font-size: 48px;
	margin: 0 0 10px 0
}

.title-page .title-description {
	font-size: 24px;
	font-weight: 200;
	margin: 0;
}

._bar{width: 2px;height: 80px;background-color:#b5b5b5; margin: auto;}
.bar2{height: 80px;}
.bar3{height: 2px;width: 83%;}

.org-b{color:#333; margin: auto;}
.org-b dl dt{
	font-size: 18px;
	font-weight: normal;
}
.org-b dl dd{
	text-align: left;
	font-size: 14px;
}
.org-b1,.org-b2{
	padding-bottom: 10px;
	width: 18%;
	font-size: 22px;
	border-bottom: 2px solid #48d1cc;}

.team-wrap{
	margin: auto;
	position: relative;
	width: 80%;
}

.bar4{width: 2px;height: 80px;position: absolute;left:-1.9%;top: 0;}
.bar5{width: 2px;height: 80px;position: absolute;left: 27%;top: 0;}
.bar6{width: 2px;height: 80px;position: absolute;left: 49.9%;top: 0;}
.bar7{width: 2px;height: 80px;position: absolute;left: 77%; top: 0;}
.bar11{width: 2px;height: 80px;position: absolute;left: 101.7%; top: 0;}

.team-wrap .org-b{width: 14%;}

.team-wrap .org-b dt{border-bottom: 2px solid #48d1cc;padding-bottom: 10px;margin-bottom: 10px;}
.team-wrap .org-b dd{list-style-type: square;}


.org-b3{
	position: absolute;
	top: 90px;
	left: -7%;
}

.org-b4{
	position: absolute;
	top: 90px;
	left: 20%;
}

.org-b5{
	position: absolute;
	top: 90px;
	left: 45%;
}

.org-b6{
	position: absolute;
	top: 90px;
	left: 70%;
}

.org-b8{
	position: absolute;
	top: 90px;
	left: 95%;
}

.lab{
	position: relative;

}

.bar8{
	width:40%;
	border-bottom: 2px dotted #b5b5b5;
	height: 0px;background:none;
	position: absolute;
	right: 0%;top: -110px;
}
.bar9{
	height: 400px;
	border-right: 2px dotted #b5b5b5;
	width: 0px;background:none;
	position: absolute;
	right:0;top: -110px;
}

.bar10{
	width: 18%;
	border-bottom: 2px dotted #b5b5b5;
	height: 0px;background:none;
	position: absolute;
	right: 0%;top: 290px;
}


.org-b7{
	width: 12.5%;
	position: absolute;
	right: 20%;
	top: 260px;
}

.org-b7 dt{border-bottom: 2px solid #48d1cc;padding-bottom: 10px;margin-bottom: 10px;}
.org-b7 dd{list-style-type: square;}

@media all and (max-width: 743px) {
	#organization .row{
		padding-bottom: 0;
	}
	.org-b1, .org-b2{
		width: 40%;
	}

	.bar3{
		width: 2px;
		height: 405px;
	}

	.bar4{
		height: 2px;
		width: 30%;
		left: 20%;
		top: -400px;

	}

	.bar5{
		height: 2px;
		width: 30%;
		left: 50%;
		top: -320px;
	}

	.bar6{
		height: 2px;
		width: 30%;
		left: 20%;
		top: -240px;
	}
	.bar7{
		height: 2px;
		width: 30%;
		left: 50%;
		top: -160px;

	}

	.bar11{
		height: 2px;
		width: 30%;
		left: 20%;
		top: -80px;
	}

	.team-wrap .org-b3{
		width: 40%;
		top: -430px;
		left: -10%;
	}

	.team-wrap .org-b4{
		width: 40%;
		top: -350px;
		left: 70%;
	}

	.team-wrap .org-b5{
		width: 40%;
		top: -270px;
		left: -10%;
	}

	.team-wrap .org-b6{
		width: 40%;
		top: -190px;
		left: 70%;
	}
	.team-wrap .org-b8{
		width: 40%;
		top: -110px;
		left: -10%;
	}



	.bar8{
		width: 40%;
		right: 30%;
		top: 0;
	}

	.bar9{
		display: none;

	}
	.bar10{
		display: none;

	}
	.org-b7{
		width: 40%;
		right: 30%;
		top: 20px;
	}
}

@media all and (max-width: 406px) {
	.team-wrap .org-b4{

		top: -370px;

	}
}


@media all and (max-width: 350px) {
	.team-wrap .org-b5{

		top: -250px;

	}
}