Difference between revisions of "Team:CHINA CD UESTC/Journal"

Line 1: Line 1:
−
{{Template:Team:CHINA_CD_UESTC/menu}}
+
/* General Slides */
 +
/*************************************************
 +
first title
 +
***********************************************/
 +
#title {
 +
    position: fixed;
 +
font-size: 80px;
 +
left:480px;
 +
z-index: 5;
  
−
<!DOCTYPE html>
+
}
−
<!-- saved from url=(0028)http://www.whitefrontier.ch/ -->
+
#firstTitle {
−
<html lang="en" class="js flexbox canvas canvastext webgl no-touch geolocation postmessage websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers applicationcache svg inlinesvg smil svgclippaths wf-brandongrotesque-i4-active wf-brandongrotesque-i7-active wf-brandongrotesque-n4-active wf-brandongrotesque-n7-active wf-dincondensedweb-n4-active wf-freightbigpro-i4-active wf-freightbigpro-i7-active wf-freightbigpro-n4-active wf-freightbigpro-n7-active wf-active">
+
font-family:  Arial, Helvetica, sans-serif;
−
<head>
+
    position: fixed;
 +
margin-top:0;
 +
    margin-bottom:0;
 +
top: 60px;
 +
font-size: 80px;
 +
color: #FFFFAA;
 +
overflow: hidden;
  
−
<link rel="stylesheet" href="https://2015.igem.org/Team:CHINA_CD_UESTC/Template:RightStyle.css?action=raw&ctype=text/css" type="text/css" />
+
}
−
</head>
+
−
<style type="text/css">
+
−
/*************************************************
+
−
whole right section
+
−
https://static.igem.org/mediawiki/2015/4/44/CHINA_CD_UESTC_TEAMbg.jpg
+
−
background-size: 180px;
+
  
 +
 +
/*************************************************
 +
right text frame container
 
***********************************************/
 
***********************************************/
−
#RightSection {
+
#RightContent {
 +
float: right;
 
position: fixed;
 
position: fixed;
 
left: 260px;
 
left: 260px;
−
top: 0;
+
top: 0px;
 
right: 0;
 
right: 0;
 
height:100%;
 
height:100%;
−
background:#F0F0F0;
 
−
background-image:url("https://static.igem.org/mediawiki/2015/7/79/CHINA_CD_UESTC_NBbg.jpg");
 
 
overflow-y: scroll;
 
overflow-y: scroll;
−
background-repeat: repeat;
 
−
background-size: 180px;
 
−
 
 
transition: all 200ms ease-out;
 
transition: all 200ms ease-out;
 
transform: translate3d(0, 0, 0);
 
transform: translate3d(0, 0, 0);
−
z-index:1;
+
z-index:5;
  
 
}
 
}
 +
.transparent_class  {
 +
border-radius: 0px;
 +
position: absolute;
 +
top: 350px;
 +
left: 50px;
 +
right: 50px;
 +
background-color: #0072E3;
 +
color:#000000;
 +
filter:alpha(opacity=80);
 +
-moz-opacity:0.8;
 +
-khtml-opacity: 0.8;
 +
opacity: 0.8;
 +
}
 +
.blockWords{
 +
font-family:Arial, Helvetica, sans-serif;
 +
font-size: 17px;
 +
padding: 15px;
 +
color: #ffffff;
 +
}
 +
 +
 +
#content{
 +
height:90px;
 +
}
 +
#HZpic {
 +
background-position:0 0 !important;
 +
width:100%;
 +
padding:10px 40px 20px 40px;
 +
    margin-top:20px;
 +
        }
 +
#content{
 +
  height:90px;
 +
  padding: 0px 0px 0px 0px;
 +
  border-left: 0px solid #444444;
 +
  border-right: 0px solid #444444;
 +
  background:none;
 +
}
 +
/*************************************************
 +
right text frame container
 +
***********************************************/
 
#firstTitle {
 
#firstTitle {
−
left:600px;
+
font-family: Arial, Helvetica, sans-serif;
 +
        position: fixed;
 +
        width:100%;
 +
margin-top:0;
 +
        margin-bottom:0;
 +
top: 60px;
 +
font-size: 80px;
 +
color: #FFFFAA;
 +
overflow: hidden;
  
 
}
 
}
−
</style>
 
−
<body id="homeIndexBody">
 
−
<div id="RightSection"></div>
 
  
−
<div id="title">
+
.transparent_class  {
 +
border-radius: 0px;
 +
position: absolute;
 +
top: 350px;
 +
        width:1000px;
 +
left: 50px;
 +
right: 50px;
 +
background-color: #0072E3;
 +
color:#000000;
 +
filter:alpha(opacity=80);
 +
-moz-opacity:0.8;
 +
-khtml-opacity: 0.8;
 +
opacity: 0.8;
 +
}
  
−
<div id="firstTitle"><p><B>JOURNAL</B></p></div>
+
#RightContentText {
−
</div>
+
position: absolute;
 +
top: 510px;
 +
    width: 1040px;
 +
left:28px;
 +
right:8px;
 +
background:#FFFFFF;
 +
color: #000000;
 +
transition: all 200ms ease-out;
 +
transform: translate3d(0, 0, 0);
 +
}
  
−
<div id="RightContent">
 
−
<div class="transparent_class ">
 
−
<p class="blockWords">&nbsp;&nbsp;We are a skillful and persistent group of nine Finns. We started as a group of students who didn't really know each other, assuming that we were going to spend our summer studying synthetic biology with strange colleagues. In the end we got a bunch of new friends and (in addition to studying synthetic biology) we just might have spent one of the best summers of our lives.</p>
 
−
</div>
 
  
−
<div id="RightContentText">
+
.slide{
 +
background-attachment: fixed;
 +
width:100%;
 +
height:100%;
 +
position: relative;
 +
padding:0 10px 0 10px;
 +
margin: 0 10px 0 10px;
 +
z-index:12;
 +
overflow:hidden;
 +
}
  
  
−
<div class="slide" id="slide6" data-slide="6" data-stellar-background-ratio="0.5" style="background-position: 0px 93.5px;">
+
h2 {
−
<div class="container clearfix">
+
display:block;
−
+
margin:0 0 23px;
−
<div id="content" class="grid_12">
+
padding:0;
−
<h2>Journal</h2>
+
text-transform:none;
−
</div>
+
text-align:left;
−
<div class="clear"></div>
+
font-style:normal;
−
+
border-bottom:1px solid #e0e0e0;
−
<div id="content">
+
font-family: Helvetica ;
−
<div class="grid_12">
+
font-size: 40px;
−
<div class="exhib_block">
+
line-height: 82px;
−
<div class="exhib_line_center"></div>
+
color:#343434;
−
+
font-weight: 300;
−
<div class="exhib_cont fleft">
+
}
−
<div class="exhib_date_right">March 24th </div>
+
−
<p>The establish of our team</p>
+
−
</div>
+
−
<div class="clear"></div>
+
  
−
<div class="exhib_cont fright">
 
−
<div class="exhib_date_left">April 20th</div>
 
−
<p>Determined the project</p>
 
−
</div>
 
−
<div class="clear"></div>
 
−
 
−
<div class="exhib_cont fleft">
 
−
<div class="exhib_date_right">June 18th </div>
 
−
<p>pPresentation and Interactive at The experimental Kinder garden Affiliated to UESTC</p>
 
−
</div>
 
−
<div class="clear"></div>
 
−
 
−
<div class="exhib_cont fright">
 
−
<div class="exhib_date_left">June 19th </div>
 
−
<p>Presentation and Interaction at the Primary school Affiliated to UESTC</p>
 
−
</div>
 
−
<div class="clear"></div>
 
  
−
<div class="exhib_cont fleft">
+
h3 {
−
<div class="exhib_date_right">July 21th</div>
+
margin:0;
−
<p>The start of the Summer training camp</p>
+
padding:40px 0 32px 0;
−
</div>
+
text-transform:uppercase;
−
<div class="clear"></div>
+
text-align:center;
−
+
font-family: Helvetica ;
−
<div class="exhib_cont fright">
+
font-weight:800;
−
<div class="exhib_date_left">July 25th </div>
+
font-size:32px;
−
<p>The establish of the union of southwest of iGEM, also the first meet up</p>
+
font-style:normal;
−
</div>
+
line-height:36px;
−
<div class="clear"></div>
+
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;
 +
}
  
−
<div class="exhib_cont fleft">
+
img.icon_img {
−
<div class="exhib_date_right">August 17th </div>
+
float:left;
−
<p>Finish the project video</p>
+
margin-right:20px;
−
</div>
+
margin-top:20px;
−
<div class="clear"></div>
+
margin-bottom:25px;
−
+
}
−
</div>
+
−
</div>
+
−
</div>
+
−
+
−
</div>
+
−
</div>
+
  
 +
.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 {
 +
width:100%;
 +
padding:20px 0 20px;
 +
}
 +
 +
.det_inf {margin-bottom:24px;
 +
}
 +
.det_inf li {margin-bottom:10px;
 +
}
 +
.det_inf li a  {
 +
color:#929292;
 +
}
 +
.det_inf li a:hover {
 +
color:#f14833;
 +
}
 +
 +
 +
 +
/* ___________________________________ //Slide 2 ___________________________________ */
 +
 +
 +
 +
 +
 +
/* ____________________________________ Slide 4  service旋转四列____________________________________ */
 +
 +
#slide4 {
 +
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:30px 0 30px;
 +
}
 +
 +
#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:20px;
 +
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_block .fright {
 +
position: relative;
 +
left:52%;
 +
margin-top:50px;
 +
}
 +
 +
 +
.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;
 +
font-family: Helvetica ;
 +
font-weight:300;
 +
font-size:26px;
 +
line-height:20px;
 +
color:#91B517;
 +
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;
 +
}
 +
 +
.exhib_date_left {
 +
left:-130px;
 +
top:27px;
 +
}
 +
.exhib_date_right {
 +
right:-170px;
 +
top:27px;
 +
text-align:right;
 +
}
 +
.exhib_cont:hover .exhib_date_right, .exhib_cont:hover .exhib_date_left, .exhib_cont:hover .exhib_date_top {font-size:26px;
 +
}
 +
 +
 +
 +
/* ___________________ //exhib_block ___________________ */
 +
 +
 +
 +
/* ___________________________________ //Slide 6 ___________________________________ */
 +
 +
 +
 +
 +
 +
 +
 +
 +
/* ____________________________________ 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(..) repeat left top;
 +
background-position:0 0 !important;
 +
width:100%;
 +
padding:10px 0 20px;
 +
        margin-top:20px;
 +
}
 +
 +
#slide12 h2 {color:#OOOOOO;
 +
            font-size:50px !important;
 +
}
 +
 +
#slide12 p {color:#888888;
 +
}
 +
#slide12 .foto {
 +
float:left;
 +
margin:0 20px 20px 0;
 +
}
 +
 +
#slide12 h5 {
 +
margin:50px 0 0 0;
 +
padding-bottom:8px;
 +
text-transform:none;
 +
font-family: Helvetica ;
 +
font-size: 32px;
 +
line-height: 31px;
 +
font-weight: 300;
 +
color:#acacac;
 +
}
 +
#slide12 h6 {
 +
margin:0 0 0 0;
 +
padding-bottom:2px;
 +
text-transform:none;
 +
font-family: Helvetica ;
 +
font-size: 20px;
 +
line-height: 23px;
 +
font-weight: 300;
 +
color:#acacac;
 +
}
 +
.client_foto {
 +
float:left;
 +
position:relative;
 +
margin:0 5px 10px 0;
 +
height:460px;
 +
width:400px;
 +
}
 +
.client_foto img {
 +
position:absolute;
 +
left:0;
 +
top:0;
 +
z-index:10;
 +
width: 90%;
 +
}
 +
.foto {z-index:5 !important;}
 +
 +
.contact_det,
 +
.contact_det a {
 +
color:#888888;
 +
line-height:26px;
 +
}
 +
.contact_det a:hover {color:#f14833;}
 +
 +
 +
 +
/* ____________________________________ //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: 90%; font-family: Verdana,Arial  ;
 +
}
 +
.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: 40px 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: 100%;
 +
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 (max-width: 1024px) {
 +
.slide{background-attachment: scroll;background-position:0 0 !important;
 +
}
 +
}
  
−
</div>
 
−
</div>
 
−
</div>
 
  
−
</body>
+
/*____________________________//grid.css________________________________*/
−
</html>
+

Revision as of 15:58, 20 August 2015

/* General Slides */ /************************************************* first title

                                                                                              • /
  1. title {
   position: fixed;

font-size: 80px; left:480px; z-index: 5;

}

  1. firstTitle {

font-family: Arial, Helvetica, sans-serif; 

   position: fixed;

margin-top:0; 

   margin-bottom:0;

top: 60px; font-size: 80px; color: #FFFFAA; overflow: hidden;

}


/************************************************* right text frame container

                                                                                              • /
  1. RightContent {

float: right; position: fixed; left: 260px; top: 0px; right: 0; height:100%; overflow-y: scroll; transition: all 200ms ease-out; transform: translate3d(0, 0, 0); z-index:5;

} .transparent_class { border-radius: 0px; position: absolute; top: 350px; left: 50px; right: 50px; background-color: #0072E3; color:#000000; filter:alpha(opacity=80); -moz-opacity:0.8; -khtml-opacity: 0.8; opacity: 0.8; } .blockWords{ font-family:Arial, Helvetica, sans-serif; font-size: 17px; padding: 15px; color: #ffffff; } 


#content{
height:90px;
}
#HZpic {

background-position:0 0 !important; width:100%; padding:10px 40px 20px 40px; 

   margin-top:20px;
        }
  1. content{
  height:90px;
  padding: 0px 0px 0px 0px;
  border-left: 0px solid #444444; 
  border-right: 0px solid #444444; 
  background:none;
}

/************************************************* right text frame container

                                                                                              • /
  1. firstTitle {

font-family: Arial, Helvetica, sans-serif; 

       position: fixed;
       width:100%;

margin-top:0; 

       margin-bottom:0;

top: 60px; font-size: 80px; color: #FFFFAA; overflow: hidden;

}

.transparent_class { border-radius: 0px; position: absolute; top: 350px; 

       width:1000px;

left: 50px; right: 50px; background-color: #0072E3; color:#000000; filter:alpha(opacity=80); -moz-opacity:0.8; -khtml-opacity: 0.8; opacity: 0.8; }

  1. RightContentText {

position: absolute; top: 510px; 

   width: 1040px;

left:28px; right:8px; background:#FFFFFF; color: #000000; transition: all 200ms ease-out; transform: translate3d(0, 0, 0); }


.slide{ background-attachment: fixed; width:100%; height:100%; position: relative; padding:0 10px 0 10px; margin: 0 10px 0 10px; 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: 40px; 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 标准文本____________________________________ */

  1. slide2 {

width:100%; padding:20px 0 20px; }

.det_inf {margin-bottom:24px; } .det_inf li {margin-bottom:10px; } .det_inf li a { color:#929292; } .det_inf li a:hover { color:#f14833; }


/* ___________________________________ //Slide 2 ___________________________________ */



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

  1. slide4 {

width:100%; padding:86px 0 69px; }

  1. 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 时间轴____________________________________ */

  1. slide6 {

background:url(../images/slide6_bg.jpg) repeat left top; width:100%; padding:30px 0 30px; }

  1. 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:20px; 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_block .fright { position: relative; left:52%; margin-top:50px; }


.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; font-family: Helvetica ; font-weight:300; font-size:26px; line-height:20px; color:#91B517; 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; }

.exhib_date_left { left:-130px; top:27px; } .exhib_date_right { right:-170px; top:27px; text-align:right; } .exhib_cont:hover .exhib_date_right, .exhib_cont:hover .exhib_date_left, .exhib_cont:hover .exhib_date_top {font-size:26px; }


/* ___________________ //exhib_block ___________________ */


/* ___________________________________ //Slide 6 ___________________________________ */





/* ____________________________________ Slide 10 照片____________________________________ */

  1. 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; }

  1. 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 左图右文____________________________________ */

  1. slide12 {

background:url(..) repeat left top; background-position:0 0 !important; width:100%; padding:10px 0 20px; 

       margin-top:20px;

}

  1. slide12 h2 {color:#OOOOOO;
            font-size:50px !important;

}

  1. slide12 p {color:#888888;

}

  1. slide12 .foto {

float:left; margin:0 20px 20px 0; }

  1. slide12 h5 {

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

  1. slide12 h6 {

margin:0 0 0 0; padding-bottom:2px; text-transform:none; font-family: Helvetica ; font-size: 20px; line-height: 23px; font-weight: 300; color:#acacac; } .client_foto { float:left; position:relative; margin:0 5px 10px 0; height:460px; width:400px; } .client_foto img { position:absolute; left:0; top:0; z-index:10; width: 90%; } .foto {z-index:5 !important;}

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


/* ____________________________________ //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: 90%; font-family: Verdana,Arial  ; } .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: 40px 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: 100%; 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 (max-width: 1024px) { .slide{background-attachment: scroll;background-position:0 0 !important; } }


/*____________________________//grid.css________________________________*/