Difference between revisions of "Team:BIT-China/css/page/homeTemp1020"

Revision as of 00:40, 20 October 2016 (view source) Yida (Talk | contribs) (Created page with " @import url(http://cdn.bootcss.com/font-awesome/4.6.3/css/font-awesome.min.css); →‎***********************************: @font-face { font-family: 'Roboto'; font-st...")		Latest revision as of 13:54, 13 November 2016 (view source) Yida (Talk | contribs)
(8 intermediate revisions by the same user not shown)
Line 1:		Line 1:
	@import url(http://cdn.bootcss.com/font-awesome/4.6.3/css/font-awesome.min.css);		@import url(http://cdn.bootcss.com/font-awesome/4.6.3/css/font-awesome.min.css);
−
−	/*************************************/
−
−	@font-face {
−	font-family: 'Roboto';
−	font-style: normal;
−	font-weight: 100;
−	src: local('Roboto Thin'), local('Roboto-Thin'),
−	url(http://fonts.gstatic.com/s/roboto/v15/vzIUHo9z-oJ4WgkpPOtg13YhjbSpvc47ee6xR_80Hnw.woff) format('woff');
−	}
−
−	.page-title{
−	font-family: 'Roboto',san-serif;
−	font-size: 50px;color: white;
−	display: block;
−	height: 200px;
−	line-height: 200px;
−	background: rgba(20,41,60,0.7);
−	position:absolute;text-align: center;left: 0;
−	}
	.circle_img_2s{		.circle_img_2s{
Line 42:		Line 22:
	transform: scale(1.5);		transform: scale(1.5);
	}		}
−	}
−
−	.top-title{
−	font-size:48px;
−	font-weight: bold;
−	color:#141d3d;
−	}
−
−	.panel-title a{
−	display:block;
−	padding:20px 20px 20px 20px;
−	color:#FFF !important;
−	font-size:18px;
−	font-weight:500;
−	}
−
−	.accordion-light .panel-title a{
−	display:block;
−	padding:20px 20px 20px 20px;
−	color:#666 !important;
−	font-size:18px;
−	font-weight:500;
	}		}
	/**************************************************/		/**************************************************/
−		+	/*部分小样式*/
	.home-nav-wrapper{		.home-nav-wrapper{
	padding: 10px 0 30px 0;		padding: 10px 0 30px 0;
Line 88:		Line 46:
	text-decoration: underline;		text-decoration: underline;
	text-align: center;		text-align: center;
−	font-weight:bold;overflow:visible;	+	font-weight:bold;overflow:visible;
−	}	+
−		+
−	/************************************************************************/	+
−		+
−		+
−	/*---------------------------------*/	+
−	/* 23. COUNTER STYLES              */	+
−	/*---------------------------------*/	+
−		+
−	.bg-overlay-dark {	+
−	background: rgba(51,51,51,0.8);	+
−	}	+
−	.bg-overlay {	+
−	overflow: hidden;	+
−	height: 100%;	+
−	z-index: 2;	+
−	padding: 70px 0;	+
−	}	+
−		+
−	.text-white-center{	+
−	color:#FFF !important;	+
−	text-align:center !important;	+
−	}	+
−		+
−	.counter-wrapper{	+
−	margin:10px auto 10px auto;	+
−	width:200px;	+
−	height:200px;	+
−	border-radius:100px;	+
−	-moz-border-radius: 100px;	+
−	-webkit-border-radius: 100px;	+
−	border:6px solid #EEE;	+
−	color:#EEE;	+
−	font-size:45px;	+
−	text-align:center;	+
−	line-height:190px;	+
−	}	+
−		+
−	.counter-wrapper-gray{	+
−	border:3px solid #666;	+
−	color:#666 !important;	+
−	}	+
−		+
−	.counter-wrapper-green{	+
−	border:4px solid #68C3A3;	+
−	}	+
−		+
−	.counter-wrapper-green-2{	+
−	border:4px solid #68C3A3;	+
−	color:#666;	+
−	}	+
−		+
−	.counter-wrapper-red{	+
−	border:4px solid #eb5d68 ;	+
−	}	+
−		+
−	.counter-wrapper-blue{	+
−	border:4px solid #3498DB ;	+
−	}	+
−		+
−	.counter-wrapper-bg-dark{	+
−	background-color:#666;	+
−	}	+
−		+
−	.counter-wrapper-bg-green{	+
−	background-color:#68C3A3;	+
−	color:#FFF;	+
−	}	+
−		+
−	.counter-wrapper-bg-blue{	+
−	background-color:#3498DB;	+
−	color:#FFF;	+
−	}	+
−		+
−	.counter-wrapper-bg-red{	+
−	background-color:#eb5d68;	+
−	color:#FFF;	+
−	}	+
−		+
−	.counter-header{	+
−	margin-bottom:50px;	+
−	}	+
−		+
−	.counter-text-white{	+
−	font-family: 'Raleway', sans-serif;	+
−	text-align:center;	+
−	color:#EEE;	+
−	padding:0 40px 0 40px;	+
−	}	+
−		+
−	.counter-text-2{	+
−	text-align:center;	+
−	padding:0 40px 0 40px;	+
−	}	+
−		+
−		+
−	/*---------------------------------------------*/	+
−	/* 30. CONTACT PAGE & CONTACT FOOTER STYLES    */	+
−	/*---------------------------------------------*/	+
−		+
−	.contact, .contact2, .contact3{	+
−	background-color:#FFF;	+
−	border:1px solid #E5E5E5;	+
−	padding:20px 15px;	+
−	margin-left:auto;	+
−	margin-right:auto;	+
−	}	+
−		+
−	.contact-header-bg{	+
−	background-color:#666;	+
−	color:#FFF;	+
−	padding:8px 15px 8px 15px;	+
−	display:inline-block;	+
−	font-size:16px;	+
−	margin:0 0 10px 0;	+
−	}	+
−		+
−	.contact hr, .contact2 hr, .contact3 hr{	+
−	margin-top:10px;	+
−	}	+
−		+
−	.contact h4, .contact2 h4, .contact3 h4{	+
−	margin-top:20px;	+
−	}	+
−		+
−	.contact-map-area{	+
−	width:100%;	+
−	margin-bottom:20px;	+
−	overflow:hidden;	+
−	height:250px;	+
−	border:1px solid #E5E5E5;	+
−	}	+
−		+
−	.contact-map-area2, .contact-map-area3{	+
−	width:100%;	+
−	margin-bottom:20px;	+
−	overflow:hidden;	+
−	height:350px;	+
−	border:1px solid #E5E5E5;	+
−	}	+
−		+
−	.contact-info ul{	+
−	margin:20px 0 0 0;	+
−	padding:0;	+
−	}	+
−		+
−	.contact-info ul li{	+
−	list-style:none;	+
−	margin-bottom:15px;	+
−	}	+
−		+
−	.contact-info ul li i{	+
−	margin-right:20px;	+
−	font-size:18px;	+
−	color:#666;	+
−	}	+
−		+
−	.contact-form-area{	+
−	background-color:#F5F5F5;	+
−	padding:45px 10px;	+
−	border:1px solid #DDD;	+
−	}	+
−		+
−	.contact-form-area2, .contact-form-area3{	+
−	background-color:#F5F5F5;	+
−	padding:20px 10px;	+
−	border:1px solid #DDD;	+
−	}	+
−		+
−	.contact-form3{	+
−	margin-top:40px;	+
−	}	+
−		+
−	.contact-onepage-light{	+
−	background-color:#F7F7F7 !important;	+
−	}	+
−		+
−	.contact-onepage-light h3{	+
−	color:#3f444a !important;	+
−	}	+
−		+
−	.contact-onepage-light p, .contact-onepage-light a{	+
−	color:#5c6873 !important;	+
−	}	+
−		+
−	.contact-onepage p, .contact-onepage li, .contact-onepage a{	+
−	color:#888 !important;	+
−	font-size:16px;	+
−	}	+
−		+
−	.contact-onepage{	+
−	padding:80px 0 !important;	+
−	}	+
−		+
−	.contact-onepage i{	+
−	color:#AAA !important;	+
−	}	+
−		+
−	.contact-one-page-form-area button{	+
−	margin-top:20px;	+
−	}	+
−		+
−	.contact-one-page-form-area input, .contact-one-page-form-area textarea{	+
−	background-color:#333;	+
−	border:1px solid #444;	+
−	color:#DDD;	+
−	}	+
−		+
−	.onepage-footer{	+
−	padding:40px 0 25px 0;	+
−	background-color:#282828;	+
−	}	+
−		+
−	.onepage-footer p{	+
−	color:#777;	+
−	}	+
−		+
−	.op-contact-social{	+
−	float:right;	+
−	}	+
−		+
−	.op-contact-social li{	+
−	display:inline-block;	+
−	list-style:none;	+
−	padding:10px;	+
−	background-color:#333;	+
−	margin-left:10px;	+
−	width:40px;	+
−	height:40px;	+
−	text-align:center;	+
−	-moz-transition: all 0.3s;	+
−	-webkit-transition: all 0.3s;	+
−	-ms-transition: all 0.3s;	+
−	-o-transition: all 0.3s;	+
−	}	+
−		+
−	.op-contact-social li:hover{	+
−	background-color:#555;	+
−	}	+
−		+
−	.op-contact-social li a{	+
−	font-size:18px;	+
−	color:#666;	+
−	-moz-transition: all 0.3s;	+
−	-webkit-transition: all 0.3s;	+
−	-ms-transition: all 0.3s;	+
−	-o-transition: all 0.3s;	+
−	}	+
−		+
−	.op-contact-social li:hover a{	+
−	color:#FFF;	+
−	}	+
−		+
−	.btn1-md{	+
−	font-size:14px;	+
−	padding:6px 20px;	+
−	line-height:25px;	+
−	}	+
−	.btn1-default, .btn1-blue, .btn1-red, .btn1-orange, .btn1-dark, .btn1-white{	+
−	font-size:14px;	+
−	color:#FFF;	+
−	text-align:center;	+
−	padding:5px 20px;	+
−	border:none;	+
−	margin:5px 0 5px 0;	+
−	-moz-transition: all 0.3s;	+
−	-webkit-transition: all 0.3s;	+
−	-ms-transition: all 0.3s;	+
−	-o-transition: all 0.3s;	+
−	line-height:25px;	+
−	border-radius:2px;	+
−	}	+
−		+
−	.contact-page{	+
−	padding-top: 20px;	+
−	/*padding-bottom: 20px;*/	+
	}		}
Line 373:		Line 55:
	***/		***/
	.header {		.header {
−
	/*box-shadow: 0 5px 7px #CA01F9;*/		/*box-shadow: 0 5px 7px #CA01F9;*/
	box-shadow: 0 5px 7px #620053;		box-shadow: 0 5px 7px #620053;
Line 381:		Line 62:
	/*z-index: 999;*/		/*z-index: 999;*/
	position: relative;		position: relative;
−	-webkit-transition: all ease-in-out 0.2s;
−	-moz-transition: all ease-in-out 0.2s;
−	-ms-transition: all ease-in-out 0.2s;
−	-o-transition: all ease-in-out 0.2s;
−	transition: all ease-in-out 0.2s;
	}		}
		+	/*滚动出来的菜单*/
	.roll-nav{		.roll-nav{
	z-index: 3;		z-index: 3;
Line 396:		Line 73:
	margin-top: -10px;		margin-top: -10px;
−	-webkit-transition: all ease-in-out 0.2s;	+	-webkit-transition: transform ease-in-out 0.2s;
−	-moz-transition: all ease-in-out 0.2s;	+	-moz-transition: transform ease-in-out 0.2s;
−	-ms-transition: all ease-in-out 0.2s;	+	-ms-transition: transform ease-in-out 0.2s;
−	-o-transition: all ease-in-out 0.2s;	+	-o-transition: transform ease-in-out 0.2s;
−	transition: all ease-in-out 0.2s;	+	transition: transform ease-in-out 0.2s;
	-webkit-box-shadow: -4px 3px 0px 0px rgba(0, 0, 0, 0.2);		-webkit-box-shadow: -4px 3px 0px 0px rgba(0, 0, 0, 0.2);
Line 406:		Line 83:
	box-shadow: -4px 3px 0px 0px rgba(0, 0, 0, 0.2);		box-shadow: -4px 3px 0px 0px rgba(0, 0, 0, 0.2);
	}		}
−		+	/*滚动隐藏*/
	.roll-nav-hide{		.roll-nav-hide{
	-webkit-transform: translateY(-500px);		-webkit-transform: translateY(-500px);
Line 415:		Line 92:
	}		}
−		+	/*导航栏padding*/
	.home-img{		.home-img{
	padding-left: 200px;padding-right: 200px;		padding-left: 200px;padding-right: 200px;
Line 421:		Line 98:
	@media screen and (max-width:1024px){		@media screen and (max-width:1024px){
−
	.home-img{		.home-img{
	padding-left: 100px;padding-right: 100px;		padding-left: 100px;padding-right: 100px;
Line 448:		Line 124:
	padding:0 10px;		padding:0 10px;
	/*box-shadow: 5px 0 rgba(216,209,183, 0.2);*/		/*box-shadow: 5px 0 rgba(216,209,183, 0.2);*/
−	}
−
−	.header-navigation > ul > li:last-child{
−	box-shadow: none;
	}		}
Line 481:		Line 153:
	}		}
		+	/*滚动下来导航的菜单*/
	.roll-nav #site-logo-img{		.roll-nav #site-logo-img{
	height: 40px;		height: 40px;
Line 486:		Line 159:
	display: block;		display: block;
	margin: 0 auto;		margin: 0 auto;
−
	}		}
Line 505:		Line 177:
	text-decoration: none;		text-decoration: none;
	display: block;		display: block;
−	/*background:rgba(20,41,60,0.3);*/	+	background:rgba(20,41,60,0.3);
−	}	+
−	.header-navigation ul > li.active > a {	+
−	/*background: rgba(47,47,47,0.3);*/	+
−	/*border-bottom: 2px solid #e64f00;*/	+
	}		}
	/* 下拉菜单*/		/* 下拉菜单*/
−	.header-navigation .tabdown-menu {	+	.tabdown-menu {
	left: auto;		left: auto;
	top: 100%;		top: 100%;
Line 521:		Line 189:
	text-transform: none;		text-transform: none;
	letter-spacing: 0;		letter-spacing: 0;
−	border-radius: 0;
	z-index: 5;		z-index: 5;
−	}
−	.header-navigation .tabdown-menu:before,
−	.header-navigation .tabdown-menu:after {
−	display: none !important;
−	}
−	.header-navigation > ul > li > .tabdown-menu {
	background: url(https://static.igem.org/mediawiki/2016/7/7f/T--BIT-China--downmenubg.png);		background: url(https://static.igem.org/mediawiki/2016/7/7f/T--BIT-China--downmenubg.png);
	background-size: 100% 100%;		background-size: 100% 100%;
Line 537:		Line 198:
	}		}
−	/*首个选项顶部红色*/	+	.tabdown-menu:before,
−	.header-navigation .tabdown-menu > li:first-child {	+	.tabdown-menu:after {
		+	display: none !important;
	}		}
−	.header-navigation .tabdown-menu li {	+	.tabdown-menu li {
	padding: 0;		padding: 0;
	margin: 0;		margin: 0;
Line 556:		Line 218:
	}		}
−	.header-navigation .tabdown-menu li:last-child {	+	.tabdown-menu li > a {
−	border: none;	+
−	}	+
−	.header-navigation .tabdown-menu li > a {	+
	padding: 10px 20px 10px 25px;		padding: 10px 20px 10px 25px;
	display: block;		display: block;
Line 565:		Line 224:
	font-size: 16px;		font-size: 16px;
	color:#eeeeee;		color:#eeeeee;
−	text-shadow: 1px 2px 5px #692117;	+	text-shadow: 1px 2px 5px #692117;
	}		}
Line 577:		Line 236:
	}		}
−	/*顶部子导航*/	+	/*左侧导航隐藏*/
−	.sub-top-nav{	+	.transform_hide{
−	-webkit-transition: all ease-in-out 0.2s;	+	-webkit-transform: translateX(-180px);
−	-moz-transition: all ease-in-out 0.2s;	+	-moz-transform: translateX(-180px);
−	-ms-transition: all ease-in-out 0.2s;	+	-ms-transform: translateX(-180px);
−	-o-transition: all ease-in-out 0.2s;	+	-o-transform: translateX(-180px);
−	transition: all ease-in-out 0.2s;	+	transform: translateX(-180px);
	}		}
−	.sub-top-hide{	+	/*左侧导航*/
−	-webkit-transform: translateX(-100%);	+	.nav-left{
−	-moz-transform: translateX(-100%);	+	float: left;margin-left:-100%;width: 200px;position:relative;
−	-ms-transform: translateX(-100%);	+
−	-o-transform: translateX(-100%);	+
−	transform: translateX(-100%);	+
	}		}
−		+	/*收缩按钮*/
−	.sub-top-nav-left{	+	.nav_shrink{
−	margin: 5px;	+	color: #654D6F;
−	padding: 2px;	+	position:absolute;
−	color: white;	+	top: -10px;
−	display: table;	+	left: 90px;font-size: 2.5em;cursor: pointer;z-index: 5;
	}		}
−
−	.sub-top-nav-left span{
−	font-size: 18px;
−	display: table-cell;
−	vertical-align: middle;
−	}
−
−	.sub-top-nav-right {
−	color: white;
−	margin: 5px;
−	padding: 2px;
−	display: table;
−	font-size: 12px;
−	}
−
−	.sub-top-nav-right span{
−	display: table-cell;
−	vertical-align: middle;
−
−	}
−
−	#sub-top-nav-right .nav-divider{
−	display: inline-block;
−	position: relative;
−	margin: 0 0.85em 0 1.1em;
−	vertical-align: top;
−	text-align: center;
−	}
−
−	/*缓慢进入*/
−	.slow-transition{
−	-webkit-transition: transform ease-in-out .5s;
−	-moz-transition: transform ease-in-out .5s;
−	-ms-transition: transform ease-in-out .5s;
−	-o-transition: transform ease-in-out .5s;
−	transition: transform ease-in-out .5s;
−	}
−
−	.transform_hide{
−	-webkit-transform: translateX(-180px);
−	-moz-transform: translateX(-180px);
−	-ms-transform: translateX(-180px);
−	-o-transform: translateX(-180px);
−	transform: translateX(-180px);
−	}
−
−	.nav-left{
−	float: left;margin-left:-100%;width: 200px;position:relative;
−	}
−
−	.nav_shrink{
−	color: #654D6F;
−	position:absolute;
−	top: -10px;
−	left: 90px;font-size: 2.5em;cursor: pointer;z-index: 5;
−
−	-webkit-transition: all ease-in-out 0.5s;
−	-moz-transition: all ease-in-out 0.5s;
−	-ms-transition: all ease-in-out 0.5s;
−	-o-transition: all ease-in-out 0.5s;
−	transition: all ease-in-out 0.5s;
−	}
−
−	#content-right-border{
−	-webkit-transition: margin ease-in-out 0.5s;
−	-moz-transition: margin ease-in-out 0.5s;
−	-ms-transition: margin ease-in-out 0.5s;
−	-o-transition: margin ease-in-out 0.5s;
−	transition: margin ease-in-out 0.5s;
−	}
	/*内容不贴边*/		/*内容不贴边*/
Line 686:		Line 272:
	}		}
−	.block-content-header{	+	.block-content-header{
−	display: inline-block;	+	display: inline-block;
−	margin-top: 20px;	+	margin-top: 20px;
−	margin-bottom: 10px;	+	margin-bottom: 10px;
−	font-weight: bolder;	+	font-weight: bolder;
−	}	+	}
	/*增加斜体，小体等特殊样式*/		/*增加斜体，小体等特殊样式*/
−	.small{	+	.small{
−	font-size: 0.5em;	+	font-size: 0.5em;
−	}	+	}
−	.italic{	+	.italic{
−	font-style: italic;	+	font-style: italic;
−	}	+	}
−	.block-red{	+	.block-red{
−	color:red;	+	color:red;
−	}	+	}
	/*增加暖色背景*/		/*增加暖色背景*/
−	.block-border-outer{	+	.block-border-outer{
−	margin-left:220px;margin-right: 20px;	+	margin-left:220px;margin-right: 20px;
−	-webkit-box-shadow: 6px 6px 0px #2A455A;	+	-webkit-box-shadow: 6px 6px 0px #2A455A;
−	-moz-box-shadow: 6px 6px 0px #2A455A;	+	-moz-box-shadow: 6px 6px 0px #2A455A;
−	box-shadow: 6px 6px 0px #2A455A;	+	box-shadow: 6px 6px 0px #2A455A;
−	background: url(https://static.igem.org/mediawiki/2016/5/59/T--BIT-China--img--basic_bg3.png);	+	background: url(https://static.igem.org/mediawiki/2016/5/59/T--BIT-China--img--basic_bg3.png);
−	margin-top: 0.5em;margin-bottom:0.5em;padding: 1px;border-radius: 10px;	+	margin-top: 0.5em;margin-bottom:0.5em;padding: 1px;border-radius: 10px;
−	}	+	}
		+
		+	.overview-content{
		+	border:3px dashed #F08B1F;
		+	border-radius: 10px;margin: 0.5em;padding: 10px;
		+	}
−	.overview-content{
−	border:3px dashed #F08B1F;
−	border-radius: 10px;margin: 0.5em;padding: 10px;
−	}
	/*图注样式*/		/*图注样式*/
−		+	.pic_info{
−	.pic_info{	+	font-size: 0.9em;
−	font-size: 0.9em;	+	width: 100%;
−	width: 100%;	+	text-align: center;
−	text-align: center;	+	}
−	}	+
−		+
	/*设置段落样式*/		/*设置段落样式*/
Line 736:		Line 321:
	.block-paragraph{		.block-paragraph{
−	margin-top: 0.5em;	+	margin-top: 0.5em;
	}		}
Line 744:		Line 329:
	}		}
−	.content-right{	+	/*设置左右段落两端对齐*/
−		+	.content-right{
−	text-align: justify;	+	}
−	text-justify: distribute-all-lines;	+
−	text-align-last: justify;	+	/*设置最大图片宽度*/
−	-moz-text-align-last: justify;	+	.content-title img{
−	-webkit-text-align-last: justify;	+	max-width:100%;
	}		}

---

Latest revision as of 13:54, 13 November 2016

@import url(http://cdn.bootcss.com/font-awesome/4.6.3/css/font-awesome.min.css);

.circle_img_2s{

   -webkit-animation:logoSizing 1s ease-in-out 0s 2;

}

/*logo大小变化效果*/ @-webkit-keyframes logoSizing {

   0%,100%{
       -webkit-transform: scale(1);
       -moz-transform: scale(1);
       -ms-transform: scale(1);
       -o-transform: scale(1);
       transform: scale(1);
   }
   50%{
       -webkit-transform: scale(1.5);
       -moz-transform: scale(1.5);
       -ms-transform: scale(1.5);
       -o-transform: scale(1.5);
       transform: scale(1.5);
   }

}

/**************************************************/ /*部分小样式*/ .home-nav-wrapper{

   padding: 10px 0 30px 0;

}

.bottom-title{

   color:rgb(21,40,60) !important;
   font-size:16px;
   margin-top: 10px;
   margin-bottom:40px;
   text-align: center;
   /*font-family: 'Raleway', sans-serif !important;*/

}

.header-xsmall, .header-xsmall a {

   display: block;
   padding-top: 10px;
   margin: 10px;
   font-size:25px;
   text-decoration: underline;
   text-align: center;
   font-weight:bold;overflow:visible;

}

/****************/ /******导航栏样式*********/ /*** Header and header elements

• • • /

.header {

   /*box-shadow: 0 5px 7px #CA01F9;*/
   box-shadow: 0 5px 7px #620053;
   /*background: #fff;*/
   border-radius: 0;
   /*margin-bottom: 23px;*/
   /*z-index: 999;*/
   position: relative;

}

/*滚动出来的菜单*/ .roll-nav{

   z-index: 3;
   padding: 0;
   position: fixed;
   background: url();
   /*background:  url(../img/top_bg.jpg);*/
   margin-top: -10px;

   -webkit-transition: transform ease-in-out 0.2s;
   -moz-transition: transform ease-in-out 0.2s;
   -ms-transition: transform ease-in-out 0.2s;
   -o-transition: transform ease-in-out 0.2s;
   transition: transform ease-in-out 0.2s;

   -webkit-box-shadow: -4px 3px 0px 0px rgba(0, 0, 0, 0.2);
   -moz-box-shadow: -4px 3px 0px 0px rgba(0, 0, 0, 0.2);
   box-shadow: -4px 3px 0px 0px rgba(0, 0, 0, 0.2);

} /*滚动隐藏*/ .roll-nav-hide{

   -webkit-transform: translateY(-500px);
   -moz-transform: translateY(-500px);
   -ms-transform: translateY(-500px);
   -o-transform: translateY(-500px);
   transform: translateY(-500px);

}

/*导航栏padding*/ .home-img{

   padding-left: 200px;padding-right: 200px;

}

@media screen and (max-width:1024px){

   .home-img{
       padding-left: 100px;padding-right: 100px;
   }

}

/* 导航栏 */ .header-navigation {

   font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
   font-size: 18px;
   font-weight: bold;
   /*margin: 0 10px 0 0;*/
   margin: 0;
   padding: 0;
   float: left;
   /*text-transform: uppercase;*/

} .header-navigation ul {

   margin: 0;
   padding: 0;
   list-style: none;

} .header-navigation > ul > li {

   float: left;
   padding:0 10px;
   /*box-shadow: 5px 0 rgba(216,209,183, 0.2);*/

}

.header-navigation > ul > li > a {

   /*禁止选中*/
   user-select: none;
   -ms-user-select: none;
   -moz-user-select: none;
   -webkit-user-select: none;

   color: #FFFFFF;
   height:86px;
   display: block;

   padding: 30px 5px 30px;

   font-size: 14px;
   font-weight: 900;

}

/*这里，对导航栏的高度缩减*/ .roll-nav .header-navigation >ul >li >a{

   padding: 10px 10px 10px;
   height: 40px;

}

1. site-logo-img{

   width: 100%;height: auto;max-width:80px;

}

/*滚动下来导航的菜单*/ .roll-nav #site-logo-img{

   height: 40px;
   width: 40px;
   display: block;
   margin: 0 auto;

}

@media screen and (max-width: 1024px){

   .header-navigation > ul > li{
       padding: 0;
   }

}

.header-navigation ul > li.active > a, .header-navigation ul > li > a:hover, .header-navigation ul > li > a:focus, .header-navigation ul > li.open > a, .header-navigation ul > li.open > a:hover, .header-navigation ul > li.open > a:focus {

   /*color: rgb(136, 41, 129);*/
   color: #FFFFFF;
   text-decoration: none;
   display: block;
   background:rgba(20,41,60,0.3);

}

/* 下拉菜单*/ .tabdown-menu {

   left: auto;
   top: 100%;
   padding: 0;
   position: absolute;
   border: none;
   text-transform: none;
   letter-spacing: 0;

   z-index: 5;

   background: url();
   background-size: 100% 100%;
   background-repeat: no-repeat;
   border-radius: 5px;

}

.tabdown-menu:before, .tabdown-menu:after {

   display: none !important;

}

.tabdown-menu li {

   padding: 0;
   margin: 0;
   /*border-bottom: solid 2px #efefef;*/
   position: relative;
   /*display:block;*/
   display: none;
   float: none;

}

.header-navigation > ul >li:hover .tabdown-menu li,.header-navigation > ul >li:focus .tabdown-menu li{

   /*显示各个子菜单*/
   display: block;

}

.tabdown-menu li > a {

   padding: 10px 20px 10px 25px;
   display: block;
   font-weight: 400;
   font-size: 16px;
   color:#eeeeee;
   text-shadow: 1px 2px 5px #692117;

}

/*二级菜单a标签hover效果*/ .header-navigation .tabdown-menu > li > a:hover, .header-navigation .tabdown-menu > li.active > a, .header-navigation .header-navigation-content .header-navigation-col li > a:hover, .header-navigation .header-navigation-content .header-navigation-col li.active > a {

   background-color: rgb(0,0,21);
   color: #cccccc;

}

/*左侧导航隐藏*/ .transform_hide{

   -webkit-transform: translateX(-180px);
   -moz-transform: translateX(-180px);
   -ms-transform: translateX(-180px);
   -o-transform: translateX(-180px);
   transform: translateX(-180px);

}

/*左侧导航*/ .nav-left{

   float: left;margin-left:-100%;width: 200px;position:relative;

}

/*收缩按钮*/ .nav_shrink{

   color: #654D6F;
   position:absolute;
   top: -10px;
   left: 90px;font-size: 2.5em;cursor: pointer;z-index: 5;

}

/*内容不贴边*/ .block-title{

   margin-top: 30px;
   color:#923F91;
   padding-bottom: 10px;
   width: 100%;
   text-align: center;
   font-size: 2.5em;

} .block-content{

   font-size: 1.5em;
   padding:10px 50px;

}

.block-content-header{

   display: inline-block;
   margin-top: 20px;
   margin-bottom: 10px;
   font-weight: bolder;

}

/*增加斜体，小体等特殊样式*/ .small{

   font-size: 0.5em;

}

.italic{

   font-style: italic;

}

.block-red{

   color:red;

}

/*增加暖色背景*/ .block-border-outer{

   margin-left:220px;margin-right: 20px;
   -webkit-box-shadow: 6px 6px 0px #2A455A;
   -moz-box-shadow: 6px 6px 0px #2A455A;
   box-shadow: 6px 6px 0px #2A455A;
   background: url();
   margin-top: 0.5em;margin-bottom:0.5em;padding: 1px;border-radius: 10px;

}

.overview-content{

   border:3px dashed #F08B1F;
   border-radius: 10px;margin: 0.5em;padding: 10px;

}

/*图注样式*/ .pic_info{

   font-size: 0.9em;
   width: 100%;
   text-align: center;

}

/*设置段落样式*/ .block-header-margin1{

   margin-top: 1em;
   margin-bottom: 1.2em;

}

.block-paragraph{

   margin-top: 0.5em;

}

.block-paragraph-padding{

   margin-top: 0.5em;
   padding: 0 1em;

}

/*设置左右段落两端对齐*/ .content-right{ }

/*设置最大图片宽度*/ .content-title img{ max-width:100%; }