View source for Team:CHINA CD UESTC/Template:RightStyle.css

/* General Slides */ 

.slide{
	background-attachment: fixed;
	width:100%;
	height:100%;
	position: relative;
	padding:0;
	z-index:12;
	overflow:hidden;
}


h2 {
	display:block;
	margin:0 0 23px;
	padding:0;
	text-transform:none;
	text-align:left;
	font-style:normal;
	border-bottom:1px solid #e0e0e0;
	font-family: Helvetica ;
	font-size: 70px;
	line-height: 82px;
	color:#343434;
	font-weight: 300;
}


h3 {
	margin:0;
	padding:40px 0 32px 0;
	text-transform:uppercase;
	text-align:center;
	font-family: Helvetica ;
	font-weight:800;
	font-size:32px;
	font-style:normal;
	line-height:36px;
	color:#3e3e3e;
}

h4 {
	margin:0;
	padding:0 0 15px;
	text-transform:none;
	text-align:left;
	font-family: Helvetica ;
	font-weight:300;
	font-size:32px;
	font-style:normal;
	line-height:36px;
	color:#222;
}

img.icon_img {
	float:left;
	margin-right:20px;
	margin-top:20px;
	margin-bottom:25px;
}

.effect_2 {
	background:url(../images/effect_2.png) repeat left top;
	position:relative;
	top:0;
	bottom:-57px;
	height:100%;
	z-index:999 !important;
}


/* ____________________________________ Slide 2 标准文本____________________________________ */ 

#slide2 {
	background:url(../images/slide2_bg.jpg) repeat left top;
	width:100%;
	padding:86px 0 69px;
}

.det_inf {margin-bottom:24px;
}
.det_inf li {margin-bottom:10px;
}
.det_inf li a  {
	color:#929292;
}
.det_inf li a:hover {
	color:#f14833;
}
li.phone {
	background:url(../images/inf_icon.png) no-repeat 0 0;
	padding-left:44px;
}
li.address {
	background:url(../images/inf_icon.png) no-repeat 0 -99px;
	padding-left:44px;
}
li.pers_mail {
	background:url(../images/inf_icon.png) no-repeat 0 -188px;
	padding-left:44px;
}
li.pers_site {
	background:url(../images/inf_icon.png) no-repeat 0 -265px;
	padding-left:44px;
}


/* ___________________________________ //Slide 2 ___________________________________ */ 





/* ____________________________________ Slide 4  service旋转四列____________________________________ */ 

#slide4 {
	background:url(../images/slide4_bg.jpg) repeat left top;
	width:100%;
	padding:86px 0 69px;
}
#slide4 h2 {
	color:#b8b8b8;
	border-bottom:1px solid #3b3b3b;
}


/* ____________ SERVICES_BLOCK ___________ */
a.servc_block {
	display:block;
	position:relative;
	text-align:center;
	color:#6f6f6f;
}

.icon_bord {
	position:relative;
	z-index:10;
	top:0;
	left:50%;
	margin-left:-51px;
	width:102px;
	height:116px;
}

.icon1, .icon1_h {
	position:absolute;
	z-index:1;
	top:0;
	left:0;
}

.servc_block .icon1 {
	transition: all 0.5s ease-out;
    opacity: 1;
}
.servc_block:hover .icon1 {
	transform: rotate(720deg) scale(0);
    opacity: 0;
}

.servc_block .icon1_h {
	transition: all 0.5s ease-out;
	transform: rotate(720deg) scale(0);
    opacity: 0;
}
.servc_block:hover .icon1_h {
	transform: rotate(720deg) scale(1);
    opacity: 1;
	transition-delay: 0.4s;
}

.servc_block p {
	font-family: Helvetica ;
	font-weight:300;
	font-size:20px;
	line-height:22px;
	color:#a3a3a3;
	transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	-webkit-transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
}
.servc_block:hover p {
	color:#f14833;
	transition-delay: 0.7s;
}


/* ____________ SERVICES_BLOCK ___________ */

/* ___________________________________ //Slide 4 ___________________________________ */ 




/* ____________________________________ Slide 6 时间轴____________________________________ */ 

#slide6 {
	background:url(../images/slide6_bg.jpg) repeat left top;
	width:100%;
	padding:86px 0 69px;
}

#slide6 h2 {color:#222;
}

/* ____________________ exhib_block ____________________ */
.exhib_block {position:relative;}
.exhib_block .fleft {margin-left:1px;}
.exhib_line_center {
	position:absolute;
	left:50%;
	top:12px;
	width:1px;
	height:83%;
	background:#c3c3c3;
}
.exhib_block p {
	padding-bottom:9px;
	font-family: Helvetica ;
	font-weight:400;
	font-size:14px;
	line-height:21px;
	color:#343434;
	transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	-webkit-transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
}
.exhib_cont:hover p {color:#f14833;
}

.exhib_p_top {margin-left:80px;
}

.exhib_cont {
	position:relative;
	width:420px;
	margin-top:30px;
	padding:13px 20px 9px;
	background:#fff;
	color:#8d8d8d;
	border:1px solid #dedede;
	border-radius:12px;
	transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	-webkit-transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
}
.exhib_cont:hover {
	-webkit-box-shadow: 0 0 16px rgba(0,0,0,0.15);
     -moz-box-shadow: 0 0 16px rgba(0,0,0,0.15);
          box-shadow: 0 0 16px rgba(0,0,0,0.15);
}

.exhib_date_right, .exhib_date_left, .exhib_date_top {
	display:block;
	position:absolute;
	width:130px;
	font-family: Helvetica ;
	font-weight:300;
	font-size:22px;
	line-height:20px;
	color:#f14833;
	transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	-webkit-transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
}
.exhib_date_top {
	left:49.5%;
	top:0;
	width:95px;
	text-align:right;
	background:url(../images/exhib_date_top_bg_h.png) no-repeat left center;
}

.exhib_date_left {
	left:-130px;
	top:27px;
	background:url(../images/exhib_date_left_bg.png) no-repeat right center;
}
.exhib_date_right {
	right:-130px;
	top:27px;
	text-align:right;
	background:url(../images/exhib_date_left_bg_right.png) no-repeat left center;
}
.exhib_cont:hover .exhib_date_right, .exhib_cont:hover .exhib_date_left, .exhib_cont:hover .exhib_date_top {font-size:26px;
}

.exhib_cont:hover .exhib_date_top {background:url(../images/exhib_date_top_bg_h.png) no-repeat left center;
}
.exhib_cont:hover .exhib_date_left {background:url(../images/exhib_date_left_bg_h.png) no-repeat right center;
}
.exhib_cont:hover .exhib_date_right {background:url(../images/exhib_date_left_bg_right_h.png) no-repeat left center;
}


/* ___________________ //exhib_block ___________________ */



/* ___________________________________ //Slide 6 ___________________________________ */ 



/* ____________________________________ Slide 8时间轴 ____________________________________ */ 
#slide8 {
	background:url(../images/slide8_bg.jpg) repeat left top;
	width:100%;
	padding:86px 0 69px;
}
#slide8 h2 {color:#b8b8b8;border-bottom:1px solid #393939;
}

#slide8 h4 {
	padding-bottom:10px;
	color:#acacac;
}

/* ____________________ exhib_block ____________________ */
#slide8 .exhib_cont {
	background:#676767;
	border:1px solid #5b5b5b;
	color:#393939;
}
#slide8 .exhib_cont:hover {
	-webkit-box-shadow: 0 0 16px rgba(0,0,0,0.8);
     -moz-box-shadow: 0 0 16px rgba(0,0,0,0.8);
          box-shadow: 0 0 16px rgba(0,0,0,0.8);
}
#slide8 .exhib_block .fleft {margin-left:0;
}
#slide8 .exhib_line_center {
	background:#676767;
	height:87%;
}
#slide8 .exhib_date_right, #slide8 .exhib_date_left, #slide8 .exhib_date_top {width:200px;}
#slide8 .exhib_date_left {left:-200px;}
#slide8 .exhib_date_right {right:-200px;}

#slide8 .exhib_date_top {background:url(../images/exhib_date_top_bg2_h.png) no-repeat left center;
}

#slide8 .exhib_date_right {background:url(../images/exhib_date_left_bg_right2.png) no-repeat left center;
}
#slide8 .exhib_date_left {background:url(../images/exhib_date_left_bg2.png) no-repeat right center;
}

#slide8 .exhib_block p {font-size:16px;color:#222;}
#slide8 .exhib_cont:hover p {color:#acacac;
}
#slide8 .exhib_p_top {color:#6f6f6f !important;}


#slide8 .exhib_cont:hover .exhib_date_left {background:url(../images/exhib_date_left_bg2_h.png) no-repeat right center;
}
#slide8 .exhib_cont:hover .exhib_date_right {background:url(../images/exhib_date_left_bg_right2_h.png) no-repeat left center;
}

/* ___________________ //exhib_block ___________________ */


/* ___________________________________ //Slide 8 ___________________________________ */








/* ____________________________________ Slide 10 照片____________________________________ */ 
#slide10 {
	background:url(../images/slide10_bg.jpg) repeat left top;
	width:100%;
	padding:86px 0 69px;
}

/* _________________ PORTFOLIO ________________ */
.gallery-list {
	text-align:center;
	margin-right:-20px !important;
}
#slide10 .hover_img {
	overflow:hidden;
	position:relative;
	height:291px;
	width:255px;
	background:#fff;
}


.img_block {
	display:inline-block;
	margin:0;
	width:251px;
	height:100%;
}

.img_block_bg {
	position:absolute;
	z-index:100;
	left:0;
	top:0;
}

.portfolio_zoom, .portfolio_link {
	width:42px;
	height:42px;
	position:absolute;
	z-index:110;
	bottom:85px;
	background-repeat:no-repeat;
	opacity:0.61;
	filter: alpha(opacity=61);
	transition: all 0.1s ease-in-out;
	-moz-transition: all 0.1s ease-in-out;
	-webkit-transition: all 0.1s ease-in-out;
	-o-transition: all 0.1s ease-in-out;
}
.portfolio_zoom {
	left:-77px;
	background-image:url(../images/zoom.png);
}
.portfolio_link {
	right:-77px;
	background-image:url(../images/link.png);
}
.portfolio_zoom:hover, .portfolio_link:hover {
	opacity:1;
	filter: alpha(opacity=100);
	z-index:310;
}
.portfolio_zoom a, .portfolio_link a {
	display:block;
	width:42px;
	height:42px;
	text-indent:-9999px;
}

.img_block:hover .portfolio_zoom {left:83px;transition-delay: 0.3s;
}
.img_block:hover .portfolio_link {right:84px;transition-delay: 0.3s;
}

.item_description {
	position:absolute;
	top:-273px;
	width:255px;
	height:291px;
	padding:0;
	background:#f14833;
	font-family: Helvetica ;
	font-size: 14px;
	line-height: 20px;
	font-weight: 400;
	text-align:center;
	color:#fff;
	transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-webkit-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
}
.item_description p {
	padding:74px 10px 0;
	text-transform:uppercase;
	font-size:18px;
}
.img_block:hover .item_description {
	top:20px;
}
.img_block .portf_img {
	position:absolute;
	left:18px;
	top:18px;
	transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-webkit-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
}
.img_block:hover .portf_img {
	position:absolute;
	top:235px;
}



/* ________________ //PORTFOLIO _______________ */

/* ___________________________________ //Slide 10 ___________________________________ */







/* ____________________________________ Slide 12 左图右文____________________________________ */

#slide12 {
	background:url(../images/slide12_bg.jpg) repeat left top;
	background-position:0 0 !important;
	width:100%;
	padding:86px 0 69px;
}

#slide12 h2 {color:#b8b8b8;border-bottom:1px solid #393939;
}

#slide12 p {color:#888888;
}
#slide12 .foto {
	float:left;
	margin:0 20px 20px 0;
}

#slide12 h5 {
	margin:100px 0 0 0;
	padding-bottom:8px;
	text-transform:none;
	font-family: Helvetica ;
	font-size: 32px;
	line-height: 31px;
	font-weight: 300;
	color:#acacac;
}

.client_foto {
	float:left;
	position:relative;
	margin:0 15px 10px 0;
	height:384px;
	width:334px;
}
.client_foto img {
	position:absolute;
	left:0;
	top:0;
	z-index:10;
}
.foto {z-index:5 !important;}

.contact_det,
.contact_det a {
	color:#888888;
	line-height:26px;
}
.contact_det a:hover {color:#f14833;}

/* ______________ SOCIALS ______________ */
.socials a {
	display:inline-block;
	width:27px;
	height:32px;
	margin:5px 8px 0;
	transition: all 0.1s ease-in-out;
	-moz-transition: all 0.1s ease-in-out;
	-webkit-transition: all 0.1s ease-in-out;
	-o-transition: all 0.1s ease-in-out;
}

.soc1 {
	background:url(../images/socials.png) no-repeat;
	background-position:0 0;
}
.soc2 {
	background:url(../images/socials.png) no-repeat;
	background-position:-47px 0;
}
.soc3 {
	background:url(../images/socials.png) no-repeat;
	background-position:-94px 0;
}
.soc4 {
	background:url(../images/socials.png) no-repeat;
	background-position:-141px 0;
}
.soc1:hover {background-position:0 -32px;
}
.soc2:hover {background-position:-47px -32px;
}
.soc3:hover {background-position:-94px -32px;
}
.soc4:hover {background-position:-141px -32px;
}

/* _____________ //SOCIALS _____________ */


/* ____________________________________ //Slide 12 ____________________________________ */









/*____________________________grid.css________________________________*/

/* Computer */
.grid_1 { width: 6.5%; } 
.grid_2 { width: 15%; } 
.grid_3 { width: 23.5%; } 
.grid_4 { width: 32%; } 
.grid_5 { width: 40.5%; }
.grid_6 { width: 49%; } 
.grid_7 { width: 57.5%; } 
.grid_8 { width: 66%; } 
.grid_9 { width: 74.5%; } 
.grid_10 { width: 83%; } 
.grid_11 { width: 91.5%; } 
.grid_12 { width: 100%; } 

.grid_1,
.grid_2,
.grid_3,
.grid_4,
.grid_5,
.grid_6,
.grid_7,
.grid_8,
.grid_9,
.grid_10,
.grid_11,
.grid_12 {
	margin: 0 20px 20px 0;
	float: left;
	display: block;
}

.alpha			{margin-left:0;}
.omega			{margin-right:0;}
.gallery-list 	{margin:0;padding:0;}
.little_respond {display:none;}

.container{
	width: 1000px;
	max-width: 1000px;
	margin: auto;
	
}



.clear{clear:both;display:block;overflow:hidden;visibility:hidden;width:0;height:0}
.clearfix:after{position:relative;z-index:99;clear:both;content:' ';display:block;font-size:0;line-height:0;visibility:hidden;width:0;height:0}* html .clearfix,*:first-child+html .clearfix{zoom:1}

@media only screen and (max-width: 1024px) {
	.slide{background-attachment: scroll;background-position:0 0 !important;
	}
}

@media only screen and (min-width: 767px) and (max-width: 1023px) {	
	
	
	.gallery-list .omega {margin-right:10px;}
	
	.filtr_bg {left:50%;}

	h4 {font-size:27px;}
	
	#slide1 h1 {font-size:50px;line-height:65px;}
	#slide1 p {font-size:30px;line-height:36px;}
	
	.padding_slide1 {padding:150px 0 30px;}
	
	.pers_inf li span {width:130px;}
	
	.exhib_cont {width:282px;}
	.exhib_block p {width:250px;}
	.exhib_date_top {left:49.3%;}


	
/* _______________ Gallery ________________ */	
	
/* ______________ //Gallery _______________ */	
/* ___________ SERV_BLOCK __________ */
	.servc_block p {font-size:28px;}
	
/* __________ //SERV_BLOCK _________ */

	.container { width: 724px; }
	.container .alpha        { margin-left: 0; margin-right: 5px; }
	.container .omega        { margin-right: 0; }
	.gallery-list .omega {margin-right:10px;}
	.container .respond_pad {padding-right:20px;}
	
	.grid_3			{ width: 166px; }
	.grid_4			{ width: 228px; }
	.grid_5      		{ width: 290px; }
	.grid_6      		{ width: 352px; }
	.grid_7   		{ width: 414px; }
	.grid_8   		{ width: 475px; }
	.grid_9			{ width: 538px; }
	.grid_12		{ width: 724px; }
}

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

	h2 {padding-bottom:10px;font-size:45px;line-height:58px;}
	
	
	#slide12 .foto {float:none;}
	#slide12 h5 {font-size:26px;}


	.inset_shadow {top:76px;bottom:0;}
	
	.menu {position:fixed;top:0;margin-top:0 !important;}
	#undefined-sticky-wrapper {height:0 !important;}
	
	
	
}

@media only screen and (min-width: 480px) and (max-width: 766px) {
	h1 {font-size:46px;line-height:115px;padding-bottom:0;}
	

	.filtr_bg {width:420px;left:50%;}
	.slogan_text {font-size:21px;}
	.left_bord, .right_bord {margin-bottom:6px;}
	#slide1 h1 {font-size:30px;line-height:40px;}
	#slide1 p {font-size:21px;line-height:42px;}
	
	#slide1 .button {margin:50px auto 0;}
	#slide1 .button:hover {margin:51px auto 0;}
	
	.exhib_line_center {left:4px;height:79%;}
	.exhib_date_top {left:0;}
	.exhib_p_top {margin-left:120px;}
	.exhib_date_left, .exhib_date_right {
		top:-30px;
		left:-42px;
		height:115px;
		padding-left:40px;
		text-align:left;
	}
	#slide8 .exhib_date_left, #slide8 .exhib_date_right {
		top:-30px;
		left:-42px;
		height:115px;
		padding-left:40px;
		text-align:left;
	}

	#slide8 .exhib_block .fleft {margin-left:42px;}
	#slide8 .exhib_date_top {width:155px;}
	#slide8 .exhib_p_top {margin-left:170px;}
	#slide8 .exhib_line_center {height:83%;}
	
	.exhib_cont, .exhib_block .fleft {
		margin-left:42px;
		margin-top:50px;
		width:230px;
	}
	
	.gallery-list {margin-right:0 !important;}
	
/* _____________ menu ______________ */	
	#nav {margin:0;}

/* ____________ //menu _____________ */	

/* _______________ JCAROUSEL ________________ */
	
/* ______________ //JCAROUSEL _______________ */

	.container { width: 420px; }
	
	.grid_1,
	.grid_2,
	.grid_3,
	.grid_4,
	.grid_5,
	.grid_6,
	.grid_7,
	.grid_8,
	.grid_9,
	.grid_10,
	.grid_11,
	.grid_12 {width:420px;}
	
	.fright{float:none;}
	.fleft{float:none;}
	
}

@media screen and (max-width : 479px) {	
	
	h2 {font-size:40px;line-height:50px;margin:0;}
	h4 {font-size:22px;line-height:28px;}
	

	
	.padding_slide1 {padding:188px 0 100px;}

	.filtr_bg {width:295px;}
	.slogan_text {font-size:21px;}
	.left_bord, .right_bord {margin-bottom:6px;width:70px;}
	#slide1 h1 {font-size:24px;line-height:30px;}
	#slide1 p {font-size:21px;line-height:42px;}
	#slide1 .button {margin:40px auto 0;}
	#slide1 .button:hover {margin:41px auto 0;}
	
	
	
	.educ_block p {font-size:16px;}
	
	.pers_inf li {font-size:12px;}
	.pers_inf li span {width:110px;}
	
	
	.exhib_line_center {left:4px;height:79%;}
	.exhib_date_top {left:0;}
	.exhib_p_top {margin-left:42px;padding-top:30px;}
	.exhib_date_left, .exhib_date_right {
		top:-30px;
		left:-42px;
		height:115px;
		padding-left:40px;
		text-align:left;
		background:url(../images/exhib_date_left_bg.png) no-repeat left center;
	}
	.exhib_cont:hover .exhib_date_left, .exhib_cont:hover .exhib_date_right {background:url(../images/exhib_date_left_bg_h.png) no-repeat left center;
	}
	#slide8 .exhib_date_left, #slide8 .exhib_date_right {
		top:-30px;
		left:-42px;
		height:115px;
		padding-left:40px;
		text-align:left;
		background:url(../images/exhib_date_left_bg2.png) no-repeat left center;
	}
	#slide8 .exhib_cont:hover .exhib_date_left, #slide8 .exhib_cont:hover .exhib_date_right {background:url(../images/exhib_date_left_bg2_h.png) no-repeat left center;
	}
	
	#slide8 .exhib_block .fleft {margin-left:42px;}
	#slide8 .exhib_date_top {width:155px;}
	#slide8 .exhib_p_top {margin-left:42px;padding-top:30px;}
	#slide8 .exhib_line_center {height:84%;}
	
	.exhib_cont, .exhib_block .fleft {
		margin-left:42px;
		margin-top:50px;
		width:210px;
	}
	
	.gallery-list {margin-right:0 !important;}
	
	.client_foto img {width:300px;}
	
/* _______________ JCAROUSEL ________________ */
	
/* ______________ //JCAROUSEL _______________ */

/* ___________ SERV_BLOCK __________ */
	
		
/* __________ //SERV_BLOCK _________ */

	.container { width: 300px; }

	.grid_1,
	.grid_2,
	.grid_3,
	.grid_4,
	.grid_5,
	.grid_6,
	.grid_7,
	.grid_8,
	.grid_9,
	.grid_10,
	.grid_11,
	.grid_12 {
		width:300px;
	}
	
	.fright{float:none;}
	.fleft{float:none;}

}

@media screen and (max-width : 399px) {	
	.btn_dropdown {margin-right:3px;}
	
	
	.gallery-list {width:270px;margin-left:15px !important;}
	
	
	#map_block iframe {height:300px !important;}
	
	
	.contact_form input[type="text"], .contact_form textarea {width:88%;}
	
	
	.container { width: 295px; }

	.grid_1,
	.grid_2,
	.grid_3,
	.grid_4,
	.grid_5,
	.grid_6,
	.grid_7,
	.grid_8,
	.grid_9,
	.grid_10,
	.grid_11,
	.grid_12 {
		width:295px;
	}
	
}















/*____________________________//grid.css________________________________*/