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

Line 1: Line 1:
−
{{Template:Team:CHINA_CD_UESTC/menu}}
+
/* General Slides */
−
 
+
#RightContent {
−
<!DOCTYPE html>
+
float: right;
−
<html>
+
−
<head>
+
−
 
+
−
<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;
+
−
 
+
−
***********************************************/
+
−
#RightSection {
+
 
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: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;
 +
}
 +
 +
#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;
 +
}
 +
#title {
 +
position: fixed;
 +
font-size: 80px;
 +
left:260px;
 +
z-index: 5;
 +
 +
}
 +
 +
#firstTitle {
 +
font-family:  Arial, Helvetica, sans-serif;
 +
position: fixed;
 +
width:1000px;
 +
margin-top:0;
 +
margin-bottom:0;
 +
top: 60px;
 +
font-size: 80px;
 +
color: #FFFFAA;
 +
overflow: hidden;
 +
 +
}
 +
#firstTitle p {
 +
text-align: center;
 +
    font-size: 80px;
 +
}
 +
 +
.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;
 +
}
 +
 +
#RightContentText {
 +
position: absolute;
 +
top: 510px;
 +
width: 1048px;
 +
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: 30px;
 +
line-height: 82px;
 +
color:#343434;
 +
font-weight: 300;
 +
}
 +
 +
h3 {
 +
margin:0;
 +
padding:40px 0 32px 0;
 +
text-align:center;
 +
font-family: Helvetica ;
 +
font-weight:800;
 +
font-size:32px;
 +
font-style:normal;
 +
line-height:36px;
 +
}
 +
 +
 +
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;
 +
}
 +
 +
/*________________________Judging__________________*/
 +
#bronze h3{
 +
background-image: url();
 +
background-repeat: no-repeat;
 +
text-decoration:underline;
 +
color: #e8b77c;
 +
}
 +
#silver h3{
 +
background-image: url();
 +
background-repeat: no-repeat;
 +
text-decoration:underline;
 +
color: #b4c8cb;
 +
}
 +
#gold h3{
 +
background-image: url();
 +
background-repeat: no-repeat;
 +
text-decoration:underline;
 +
color: #fbca23;
 +
}
 +
 +
.req_list{
 +
width: 90%;
 +
}
 +
.req_list h1{
 +
background:url(https://static.igem.org/mediawiki/2015/4/4e/CHINA_CD_UESTC_YesIcon.png) no-repeat;
 +
background-size: 6%;
 +
margin:0;
 +
padding:10px 0 0px 50px;
 +
margin-left: 50px;
 +
font-family: Helvetica ;
 +
font-weight:800;
 +
font-size:20px;
 +
font-style:normal;
 +
line-height:36px;
 +
}
 +
.req_list p{
 +
margin:0;
 +
margin-left: 120px;
 +
font-family: 'Microsoft Yahei' ;
 +
font-weight:500;
 +
font-size:15px;
 +
font-style:normal;
 +
line-height:26px;
 +
}
 +
/* ____________________________________ 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;
 
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;
 
}
 
}
  
−
</style>
+
.servc_block .icon1_h {
−
<body id="homeIndexBody">
+
transition: all 0.5s ease-out;
−
<div id="RightSection"></div>
+
transform: rotate(720deg) scale(0);
 +
opacity: 0;
 +
}
 +
.servc_block:hover .icon1_h {
 +
transform: rotate(720deg) scale(1);
 +
opacity: 1;
 +
transition-delay: 0.4s;
 +
}
  
−
<div id="title">
+
.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;
 +
}
  
−
<div id="firstTitle"><p><B>JOURNAL</B></p></div>
 
−
</div>
 
  
−
<div id="RightContent">
+
/* ____________ SERVICES_BLOCK ___________ */
−
<div class="transparent_class ">
+
−
<p class="blockWords">&nbsp;&nbsp;Hi! Here recorded the “significant” stages of our team which we experienced throughout the whole summer. In the initial establishment of our team, we organized various social activities and uneasy demonstrated the project at the first time, which all presents to you here.</p>
+
−
</div>
+
  
−
<div id="RightContentText">
+
/* ___________________________________ //Slide 4 ___________________________________ */
  
  
−
<div class="slide" id="slide6" data-slide="6" data-stellar-background-ratio="0.5" style="background-position: 0px 93.5px;">
 
−
<div class="container clearfix">
 
−
 
−
<div id="content" class="grid_12">
 
−
<h2>Journal</h2>
 
−
</div>
 
−
<div class="clear"></div>
 
−
 
−
<div id="content">
 
−
<div class="grid_12">
 
−
<div class="exhib_block">
 
−
<div class="exhib_line_center"></div>
 
−
 
−
<div class="exhib_cont fleft">
 
−
<div class="exhib_date_right">March 24th</div>
 
−
<p>The establishment of our team!</p>
 
−
</div>
 
−
<div class="clear"></div>
 
  
−
<div class="exhib_cont fright">
 
−
<div class="exhib_date_left">April 9th</div>
 
−
<p>We established the iGEM club in our campus.</p>
 
−
</div>
 
−
<div class="clear"></div>
 
  
−
<div class="exhib_cont fleft">
+
/* ____________________________________ Slide 6 时间轴____________________________________ */  
−
<div class="exhib_date_right">April 20th</div>
+
−
<p>Determined the project as "magnetotactic <i>E.coli</i> generates electronics."</p>
+
−
</div>
+
−
<div class="clear"></div>
+
  
−
<div class="exhib_cont fright">
+
#slide6 {
−
<div class="exhib_date_left">May 8th</div>
+
background:url(../images/slide6_bg.jpg) repeat left top;
−
<p>Communicated with professor Hu from Hong Kong University Medicine School.</p>
+
width:100%;
−
</div>
+
padding:30px 0 30px;
−
<div class="clear"></div>
+
}
  
−
<div class="exhib_cont fleft">
+
#slide6 h2 {color:#222;
−
<div class="exhib_date_right">May 10th</div>
+
}
−
<p>Determined three vectors for co-transferred which are pACYCDuet-1, pET28a and pCDFDuet-1.</p>
+
−
</div>
+
−
<div class="clear"></div>
+
  
−
<div class="exhib_cont fright">
+
/* ____________________ exhib_block ____________________ */
−
<div class="exhib_date_left">June 12th</div>
+
.exhib_block {position:relative;}
−
<p>Amplified the mamGFDC and mms6 with PCR from <i>MSR-1</i>.</p>
+
.exhib_block .fleft {margin-left:1px;}
−
</div>
+
.exhib_line_center {
−
<div class="clear"></div>
+
position:absolute;
 +
left:50%;
 +
top:12px;
 +
width:1px;
 +
height:100%;
 +
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;
 +
}
  
−
<div class="exhib_cont fleft">
+
.exhib_p_top {margin-left:80px;
−
<div class="exhib_date_right">June 15th</div>
+
}
−
<p>Linearization of the pACYCDuet-1 and amplification of the mamW, RFP and laccase.</p>
+
−
</div>
+
−
<div class="clear"></div>
+
−
+
−
<div class="exhib_cont fright">
+
−
<div class="exhib_date_left">June 18th</div>
+
−
<p>Presentation and science lesson at the experimental Kindergarden Affiliated to UESTC.</p>
+
−
</div>
+
−
<div class="clear"></div>
+
  
−
<div class="exhib_cont fleft">
+
.exhib_cont {
−
<div class="exhib_date_right">June 19th</div>
+
position:relative;
−
<p>Presentation and Interaction at the Primary School Affiliated to UESTC</p>
+
width:420px;
−
</div>
+
margin-top:30px;
−
<div class="clear"></div>
+
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;
 +
}
  
−
<div class="exhib_cont fright">
 
−
<div class="exhib_date_left">July 15th</div>
 
−
<p>Five teaching teams’ from iGEM club departure towards schools in remote area.</p>
 
−
</div>
 
−
<div class="clear"></div>
 
  
−
<div class="exhib_cont fleft">
+
.exhib_block .fright {
−
<div class="exhib_date_right">July 21th</div>
+
position: relative;
−
<p>The start of the Summer Training Camp.</p>
+
left:52%;
−
</div>
+
margin-top:50px;
−
<div class="clear"></div>
+
}
−
+
 
−
<div class="exhib_cont fright">
+
 
−
<div class="exhib_date_left">July 25th</div>
+
.exhib_cont:hover {
−
<p>The establishment of the iGEM Southwest Union of China, also the first meet up.</p>
+
-webkit-box-shadow: 0 0 16px rgba(0,0,0,0.15);
−
</div>
+
-moz-box-shadow: 0 0 16px rgba(0,0,0,0.15);
−
<div class="clear"></div>
+
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:-220px;
 +
top:27px;
 +
}
 +
.exhib_date_right {
 +
right:-230px;
 +
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:30px;
 +
}
 +
 
 +
 
 +
 
 +
/* ___________________ //exhib_block ___________________ */
 +
 
 +
 
 +
 
 +
/* ___________________________________ //Slide 6 ___________________________________ */
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
/* ____________________________________ 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 ____________________________________ */
 +
 
 +
 
 +
/*______________________________________gallery________________________________________*/
 +
/***************gallery***/
 +
@font-face {
 +
font-family: 'BebasNeueRegular';
 +
src: url('fonts/BebasNeue-webfont.eot');
 +
src: url('fonts/BebasNeue-webfont.eot?#iefix') format('embedded-opentype'),
 +
url('fonts/BebasNeue-webfont.woff') format('woff'),
 +
url('fonts/BebasNeue-webfont.ttf') format('truetype'),
 +
url('fonts/BebasNeue-webfont.svg#BebasNeueRegular') format('svg');
 +
font-weight: normal;
 +
font-style: normal;
 +
}
 +
 
 +
 
 +
.clr{
 +
clear: both;
 +
}
 +
 
 +
 
 +
.cr-gallery{
 +
width: 600px;
 +
height: 400px;
 +
position: relative;
 +
margin: 0 auto;
 +
overflow: hidden;
 +
border: 20px solid #fff;
 +
box-shadow: 1px 1px 3px rgba(0,0,0,0.1);
 +
}
 +
.cr-gallery label{
 +
font-style: italic;
 +
width: 150px;
 +
height: 30px;
 +
cursor: pointer;
 +
color: #fff;
 +
line-height: 32px;
 +
font-size: 24px;
 +
float:left;
 +
position: relative;
 +
margin-top:350px;
 +
z-index: 1000;
 +
}
 +
.cr-gallery label:before{
 +
content:'';
 +
width: 34px;
 +
height: 34px;
 +
background: rgba(130,195,217,0.9);
 +
position: absolute;
 +
left: 50%;
 +
margin-left: -17px;
 +
border-radius: 50%;
 +
box-shadow: 0px 0px 0px 4px rgba(255,255,255,0.3);
 +
z-index:-1;
 +
}
 +
.cr-gallery label:after{
 +
width: 1px;
 +
height: 400px;
 +
content: '';
 +
background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
 +
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(100%,rgba(255,255,255,1)));
 +
background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
 +
background: -o-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
 +
background: -ms-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
 +
background: linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
 +
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 );
 +
position: absolute;
 +
bottom: -20px;
 +
right: 0px;
 +
}
 +
.cr-gallery label.cr-label-img-4:after{
 +
width: 0px;
 +
}
 +
.cr-gallery input.cr-selector-img-1:checked ~ label.cr-label-img-1,
 +
.cr-gallery input.cr-selector-img-2:checked ~ label.cr-label-img-2,
 +
.cr-gallery input.cr-selector-img-3:checked ~ label.cr-label-img-3,
 +
.cr-gallery input.cr-selector-img-4:checked ~ label.cr-label-img-4{
 +
color: #68abc2;
 +
}
 +
.cr-gallery input.cr-selector-img-1:checked ~ label.cr-label-img-1:before,
 +
.cr-gallery input.cr-selector-img-2:checked ~ label.cr-label-img-2:before,
 +
.cr-gallery input.cr-selector-img-3:checked ~ label.cr-label-img-3:before,
 +
.cr-gallery input.cr-selector-img-4:checked ~ label.cr-label-img-4:before{
 +
background: #fff;
 +
box-shadow: 0px 0px 0px 4px rgba(104,171,194,0.6);
 +
}
 +
.cr-gallery input{
 +
display: none;
 +
}
 +
.cr-bgimg{
 +
width: 600px;
 +
height: 400px;
 +
position: absolute;
 +
left: 0px;
 +
top: 0px;
 +
z-index: 1;
 +
}
 +
.cr-bgimg{
 +
background-repeat: no-repeat;
 +
background-position: 0 0;
 +
}
 +
.cr-bgimg div{
 +
width: 150px;
 +
height: 100%;
 +
position: relative;
 +
float: left;
 +
overflow: hidden;
 +
background-repeat: no-repeat;
 +
}
 +
.cr-bgimg div span{
 +
position: absolute;
 +
width: 100%;
 +
height: 100%;
 +
top: 0px;
 +
left: 0px;
 +
-webkit-transform: scale(1.5);
 +
-moz-transform: scale(1.5);
 +
-o-transform: scale(1.5);
 +
-ms-transform: scale(1.5);
 +
transform: scale(1.5);
 +
opacity: 0;
 +
z-index: 2;
 +
text-indent: -9000px;
 +
}
 +
 
 +
.cr-bgimg div:nth-child(1) span{
 +
background-position: 0px 0px;
 +
}
 +
.cr-bgimg div:nth-child(2) span{
 +
background-position: -150px 0px;
 +
}
 +
.cr-bgimg div:nth-child(3) span{
 +
background-position: -300px 0px;
 +
}
 +
.cr-bgimg div:nth-child(4) span{
 +
background-position: -450px 0px;
 +
}
 +
.cr-gallery input:checked ~ .cr-bgimg div span{
 +
-webkit-animation: scaleOut 0.6s ease-in-out;
 +
-moz-animation: scaleOut 0.6s ease-in-out;
 +
-o-animation: scaleOut 0.6s ease-in-out;
 +
-ms-animation: scaleOut 0.6s ease-in-out;
 +
animation: scaleOut 0.6s ease-in-out;
 +
}
 +
@-webkit-keyframes scaleOut{
 +
0%{ -webkit-transform: scale(1); opacity: 1; }
 +
100%{ -webkit-transform: scale(1.5); opacity: 0; }
 +
}
 +
@-moz-keyframes scaleOut{
 +
0%{ -moz-transform: scale(1); opacity: 1; }
 +
100%{ -moz-transform: scale(1.5); opacity: 0; }
 +
}
 +
@-o-keyframes scaleOut{
 +
0%{ -o-transform: scale(1); opacity: 1; }
 +
100%{ -o-transform: scale(1.5); opacity: 0; }
 +
}
 +
@-ms-keyframes scaleOut{
 +
0%{ -ms-transform: scale(1); opacity: 1; }
 +
100%{ -ms-transform: scale(1.5); opacity: 0; }
 +
}
 +
@keyframes scaleOut{
 +
0%{ transform: scale(1); opacity: 1; }
 +
100%{ transform: scale(1.5); opacity: 0; }
 +
}
 +
.cr-gallery input.cr-selector-img-1:checked ~ .cr-bgimg div span:nth-child(1),
 +
.cr-gallery input.cr-selector-img-2:checked ~ .cr-bgimg div span:nth-child(2),
 +
.cr-gallery input.cr-selector-img-3:checked ~ .cr-bgimg div span:nth-child(3),
 +
.cr-gallery input.cr-selector-img-4:checked ~ .cr-bgimg div span:nth-child(4)
 +
{
 +
-webkit-transition: -webkit-transform 0.5s ease-in-out, opacity 0.5s ease-in-out, z-index 0s linear 0.6s;
 +
-moz-transition: -moz-transform 0.5s ease-in-out, opacity 0.5s ease-in-out, z-index 0s linear 0.6s;
 +
-o-transition: -o-transform 0.5s ease-in-out, opacity 0.5s ease-in-out, z-index 0s linear 0.6s;
 +
-ms-transition: -ms-transform 0.5s ease-in-out, opacity 0.5s ease-in-out, z-index 0s linear 0.6s;
 +
transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out, z-index 0s linear 0.6s;
 +
-webkit-animation: none;
 +
-moz-animation: none;
 +
-o-animation: none;
 +
-ms-animation: none;
 +
animation: none;
 +
opacity: 1;
 +
-webkit-transform: scale(1);
 +
-moz-transform: scale(1);
 +
-o-transform: scale(1);
 +
-ms-transform: scale(1);
 +
transform: scale(1);
 +
z-index:10000;
 +
}
 +
.cr-titles h3{
 +
color: #fff;
 +
text-shadow: 1px 1px 1px rgba(0,0,0,0.1);
 +
}
 +
.cr-titles h3 span{
 +
z-index: 10000;
 +
position: absolute;
 +
width: 100%;
 +
left: 0px;
 +
text-align: center;
 +
opacity: 0;
 +
top: 50%;
 +
}
 +
.cr-titles h3 span:nth-child(1){
 +
left: 0px;
 +
font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
 +
font-size: 70px;
 +
letter-spacing: 7px;
 +
color: transparent;
 +
text-shadow: 0px 0px 10px #fff;
 +
-webkit-transition: text-shadow 0.8s ease-in-out, opacity 0.8s ease-in-out;
 +
-moz-transition: text-shadow 0.8s ease-in-out, opacity 0.8s ease-in-out;
 +
-o-transition: text-shadow 0.8s ease-in-out, opacity 0.8s ease-in-out;
 +
-ms-transition: text-shadow 0.8s ease-in-out, opacity 0.8s ease-in-out;
 +
transition: text-shadow 0.8s ease-in-out, opacity 0.8s ease-in-out;
 +
}
 +
.cr-titles h3 span:nth-child(2){
 +
margin-top: 84px;
 +
letter-spacing: 0px;
 +
background: rgba(104,171,194,0.9);
 +
font-size: 14px;
 +
padding: 10px 0px;
 +
font-style: italic;
 +
font-family: Cambria, Palatino, "Palatino Linotype", "Palatino LT STD", Georgia, serif;
 +
-webkit-transition: opacity 0.8s ease-in-out;
 +
-moz-transition: opacity 0.8s ease-in-out;
 +
-o-transition: opacity 0.8s ease-in-out;
 +
-ms-transition: opacity 0.8s ease-in-out;
 +
transition: opacity 0.8s ease-in-out;
 +
}
 +
.cr-gallery input:checked ~ .cr-titles h3 span{
 +
opacity: 0;
 +
text-shadow: 0px 0px 30px #fff;
 +
}
 +
.cr-gallery input.cr-selector-img-1:checked ~ .cr-titles h3:nth-child(1) span:nth-child(1),
 +
.cr-gallery input.cr-selector-img-2:checked ~ .cr-titles h3:nth-child(2) span:nth-child(1),
 +
.cr-gallery input.cr-selector-img-3:checked ~ .cr-titles h3:nth-child(3) span:nth-child(1),
 +
.cr-gallery input.cr-selector-img-4:checked ~ .cr-titles h3:nth-child(4) span:nth-child(1){
 +
opacity: 1;
 +
text-shadow: 0px 0px 1px #fff;
 +
}
 +
.cr-gallery input.cr-selector-img-1:checked ~ .cr-titles h3:nth-child(1) span:nth-child(2),
 +
.cr-gallery input.cr-selector-img-2:checked ~ .cr-titles h3:nth-child(2) span:nth-child(2),
 +
.cr-gallery input.cr-selector-img-3:checked ~ .cr-titles h3:nth-child(3) span:nth-child(2),
 +
.cr-gallery input.cr-selector-img-4:checked ~ .cr-titles h3:nth-child(4) span:nth-child(2){
 +
opacity: 1;
 +
}
 +
/* Media Query: Let's show the inputs on mobile sized browsers because they probably don't support the label trick: */
 +
@media screen and (max-width: 768px) {
 +
.cr-gallery input{
 +
display: inline;
 +
width: 24%;
 +
margin-top: 350px;
 +
z-index: 1000;
 +
position: relative;
 +
}
 +
.cr-gallery label{
 +
display: none;
 +
}
 +
}
 +
/*________________________________________gallery-end___________________________________________*/
 +
 
 +
 
 +
/**************gallery******************/
 +
.gallery-items {
 +
width:970px;
 +
height: 1000px;
 +
margin:100px 0 0 70px;
 +
position: relative;
 +
left: -150px;
 +
}
 +
.gallery-items a {
 +
display:inline-block;
 +
height:150px;
 +
position:relative;
 +
width:230px;
 +
margin-left: 10px;
 +
margin-right: 10px;
 +
margin-top: 10px;
 +
}
 +
.gallery-items a img {
 +
cursor:pointer;
 +
display:inline-block;
 +
height:100%;
 +
left:0px;
 +
position:absolute;
 +
top:0px;
 +
width:100%;
 +
z-index:0;
 +
border: 10px solid #fff;
 +
box-shadow: 1px 1px 3px rgba(0,0,0,0.1);
 +
 
 +
 
 +
-moz-user-select: none;
 +
-khtml-user-select: none;
 +
user-select: none;
 +
 
 +
-moz-box-sizing:border-box;
 +
-webkit-box-sizing:border-box;
 +
box-sizing:border-box;
 +
 
 +
-webkit-transition-property:width, height, top, bottom, left, right, z-index, border;
 +
-webkit-transition-duration:0.5s;
 +
-moz-transition-property:width, height, top, bottom, left, right, z-index, border;
 +
-moz-transition-duration:0.5s;
 +
-o-transition-property:width, height, top, bottom, left, right, z-index, border;
 +
-o-transition-duration:0.5s;
 +
transition-property:width, height, top, bottom, left, right, z-index, border;
 +
transition-duration:0.5s;
 +
}
 +
.gallery-items li:hover img{
 +
border:15px solid #fff;
 +
cursor:default;
 +
height:190%;
 +
position:absolute;
 +
width:190%;
 +
z-index:51;
 +
 
 +
box-shadow:1px 1px 5px #888;
 +
-moz-box-shadow:1px 1px 5px #888;
 +
-webkit-box-shadow:1px 1px 5px #888;
 +
-webkit-transition-property:width, height, top, bottom, left, right, z-index, border;
 +
-webkit-transition-duration:0.5s;
 +
-moz-transition-property:width, height, top, bottom, left, right, z-index, border;
 +
-moz-transition-duration:0.5s;
 +
-o-transition-property:width, height, top, bottom, left, right, z-index, border;
 +
-o-transition-duration:0.5s;
 +
transition-property:width, height, top, bottom, left, right, z-index, border;
 +
transition-duration:0.5s;
 +
}
 +
 
 +
/* custom focus rules */
 +
.gallery-items li:hover:nth-child(3n+1) img{
 +
left: -100px;
 +
z-index: 50;
 +
}
 +
.gallery-items li:hover:nth-child(3n+2) img{
 +
left:-200px;
 +
z-index: 50;
 +
 
 +
}
 +
.gallery-items li:hover:nth-child(3n+3) img{
 +
left:-300px;
 +
z-index: 50;
 +
 
 +
}
 +
.gallery-items li:hover:nth-child(n) img{
 +
top:-100px;
 +
z-index: 50;
 +
 
 +
}
 +
.gallery-items li:hover:nth-child(n+7) img{
 +
top:-150px;
 +
z-index: 50;
 +
 
 +
}
 +
.gallery-items li:hover:nth-child(n+10) img{
 +
top:-295px;
 +
z-index: 50;
 +
 
 +
}
 +
 
 +
p {
 +
    text-align: left;
 +
    font-family: inherit;
 +
    font-size: 18px;
 +
}
 +
/***********select-gallery*********/
 +
.gallery-container{
 +
width: 80%;
 +
margin: 60px auto 30px 170px;
 +
display: block;
 +
}
 +
 
 +
 
 +
 
 +
.gallery-container label {
 +
width: 20%;
 +
height: 30px;
 +
padding: 10px;
 +
cursor: pointer;
 +
line-height: 33px;
 +
font-size: 19px;
 +
 
 +
color: rgba(255,255,255,1);
 +
text-decoration: none;
 +
background-color: rgba(219,87,5,1);
 +
font-family: 'Yanone Kaffeesatz','Microsoft yahei';
 +
display: block;
 +
padding: 4px;
 +
-webkit-border-radius: 8px;
 +
-moz-border-radius: 8px;
 +
border-radius: 8px;
 +
-webkit-box-shadow: 0px 9px 0px rgba(219,31,5,1), 0px 9px 25px rgba(0,0,0,.7);
 +
-moz-box-shadow: 0px 9px 0px rgba(219,31,5,1), 0px 9px 25px rgba(0,0,0,.7);
 +
box-shadow: 0px 9px 0px rgba(219,31,5,1), 0px 9px 25px rgba(0,0,0,.7);
 +
text-align: center;
 +
 
 +
-webkit-transition: all .3s ease;
 +
-moz-transition: all .3s ease;
 +
-ms-transition: all .3s ease;
 +
-o-transition: all .3s ease;
 +
transition: all .3s ease;
 +
 
 +
 
 +
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#gallerygallerygallery', endColorstr='#eaeaea',GradientType=0 );
 +
float: left;
 +
}
 +
.gallery-container label.gallery-label-type-all{
 +
border-radius: 3px 0px 0px 3px;
 +
}
 +
.gallery-container label.gallery-label-type-3{
 +
border-radius: 0px 3px 3px 0px;
 +
}
 +
.gallery-container input.gallery-selector-type-all:checked ~ label.gallery-label-type-all,
 +
.gallery-container input.gallery-selector-type-1:checked ~ label.gallery-label-type-1,
 +
.gallery-container input.gallery-selector-type-2:checked ~ label.gallery-label-type-2,
 +
.gallery-container input.gallery-selector-type-3:checked ~ label.gallery-label-type-3{
 +
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#646d93', endColorstr='#7c87ad',GradientType=0 );
 +
 
 +
 
 +
 
 +
-webkit-box-shadow: 0px 3px 0px rgb(255, 177, 13), 0px 3px 6px rgba(0,0,0,.9);
 +
-moz-box-shadow: 0px 3px 0px rgb(255, 177, 13), 0px 3px 6px rgba(0,0,0,.9);
 +
box-shadow: 0px 3px 0px rgb(255, 177, 13), 0px 3px 6px rgba(0,0,0,.9);
 +
background-color: rgba(255, 178, 29, 0.9);
 +
color: rgb(255, 255, 255);}
 +
.gallery-container input{
 +
display: none;
 +
}
 +
 
 +
 
 +
 
 +
.gallery-items li{
 +
margin: 0px;
 +
float: left;
 +
width: 300px;
 +
height: 200px;
 +
-webkit-transition: all 0.6s ease-in-out;
 +
-moz-transition: all 0.6s ease-in-out;
 +
-o-transition: all 0.6s ease-in-out;
 +
-ms-transition: all 0.6s ease-in-out;
 +
transition: all 0.6s ease-in-out;
 +
}
 +
.gallery-items img {
 +
width: 400px;
 +
height: 400px;
 +
}
 +
.gallery-container input.gallery-selector-type-1:checked ~ .gallery-items .gallery-item-type-1,
 +
.gallery-container input.gallery-selector-type-2:checked ~ .gallery-items .gallery-item-type-2,
 +
.gallery-container input.gallery-selector-type-3:checked ~ .gallery-items .gallery-item-type-3{
 +
opacity: 1;
 +
-webkit-transform: scale(1.1);
 +
-moz-transform: scale(1.1);
 +
-o-transform: scale(1.1);
 +
-ms-transform: scale(1.1);
 +
transform: scale(1.1);
 +
}
 +
.gallery-container input.gallery-selector-type-1:checked ~ .gallery-items li:not(.gallery-item-type-1),
 +
.gallery-container input.gallery-selector-type-2:checked ~ .gallery-items li:not(.gallery-item-type-2),
 +
.gallery-container input.gallery-selector-type-3:checked ~ .gallery-items li:not(.gallery-item-type-3){
 +
opacity: 0.1;
 +
-webkit-transform: scale(0.5);
 +
-moz-transform: scale(0.5);
 +
-o-transform: scale(0.5);
 +
-ms-transform: scale(0.5);
 +
transform: scale(0.5);
 +
}
 +
.gallery-container input.gallery-selector-type-1:checked ~ .gallery-items li:not(.gallery-item-type-1) span,
 +
.gallery-container input.gallery-selector-type-2:checked ~ .gallery-items li:not(.gallery-item-type-2) span,
 +
.gallery-container input.gallery-selector-type-3:checked ~ .gallery-items li:not(.gallery-item-type-3) span{
 +
display:none;
 +
}
 +
 
 +
/**********select-gallery over*******/
 +
 
 +
#three-line-text p{
 +
margin-left: 20px;
 +
font-family: "Microsoft yahei";
 +
color: #0073A5;
 +
}
 +
#three-line-text a{
 +
font-family: "Microsoft yahei";
 +
color: #0073A5;
 +
}
 +
 
 +
#threeline-left {
 +
float: left;
 +
width: 270px;
 +
margin:10px 0 0 50px;
 +
}
 +
#threeline-middle {
 +
float: left;
 +
width: 290px;
 +
margin:10px 0 0 20px;
 +
}
 +
#threeline-right {
 +
float: right;
 +
width: 290px;
 +
margin: 10px 60px;
 +
 
 +
}
 +
/* ____________________________________ Slide 10 照片____________________________________ */  
 +
#slide10 {
 +
width:90%;
 +
padding: 20px 0 0 30px;
 +
}
 +
 
 +
/* _________________ 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;
 +
}
 +
.portfolio_link {
 +
right:-77px;
 +
}
 +
.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 50px;
 +
text-transform:uppercase;
 +
font-size:18px;
 +
}
 +
.img_block:hover .item_description {
 +
top:20px;
 +
}
 +
.img_block .portf_img {
 +
position:absolute;
 +
left:18px;
 +
top:18px;
 +
width: 100%;
 +
height: 90%;
 +
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 ___________________*/
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
/****************gallery in education**********/
 +
/***************slide gallery***************/
 +
#owl-demo{position:relative;width:640px;height:390px;margin:20px auto 0 auto;}
 +
#owl-demo .item{ position:relative;display:block;}
 +
#owl-demo img{display:block;width:640px;height:390px;}
 +
#owl-demo span{position:absolute;left:0;bottom:37px;width:100%;font:18px/32px "微软雅黑","黑体";color:#fff;text-align:center;background-color: rgba(95, 193, 42, 0.53);}
 +
 
 +
.owl-pagination{position:absolute;left:0;bottom:10px;width:100%;height:22px;text-align:center;}
 +
.owl-page{display:inline-block;width:10px;height:10px;margin:0 5px;background-image:url(https://static.igem.org/mediawiki/2015/7/78/CHINA_CD_UESTC_pribg01.png);*display:inline;*zoom:1;}
 +
.owl-pagination .active{width:25px;background-image:url(https://static.igem.org/mediawiki/2015/c/c9/CHINA_CD_UESTC_pribg02.png);}
 +
.owl-buttons{display:none;}
 +
.owl-buttons div{position:absolute;top:50%;width:40px;height:80px;margin-top:-40px;text-indent:-9999px;}
 +
.owl-prev{left:0;background-image:url(https://static.igem.org/mediawiki/2015/2/29/CHINA_CD_UESTC_pribg03.png);}
 +
.owl-next{right:40px;background-image:url(https://static.igem.org/mediawiki/2015/d/dc/CHINA_CD_UESTC_pribg04.png);}
 +
.owl-prev:hover{background-image:url(https://static.igem.org/mediawiki/2015/6/67/CHINA_CD_UESTC_pribg05.png);}
 +
.owl-next:hover{background-image:url(https://static.igem.org/mediawiki/2015/f/f7/CHINA_CD_UESTC_pribg06.png);}
 +
.owl-item {width: 100%;}
 +
/*
 +
* Core Owl Carousel CSS File
 +
* v1.3.3
 +
*/
 +
 
 +
/* clearfix */
 +
.owl-carousel .owl-wrapper:after {
 +
content: ".";
 +
display: block;
 +
clear: both;
 +
visibility: hidden;
 +
line-height: 0;
 +
height: 0;
 +
}
 +
/* display none until init */
 +
.owl-carousel{
 +
display: none;
 +
position: relative;
 +
width: 100%;
 +
-ms-touch-action: pan-y;
 +
}
 +
.owl-carousel .owl-wrapper{
 +
display: none;
 +
position: relative;
 +
-webkit-transform: translate3d(0px, 0px, 0px);
 +
}
 +
.owl-carousel .owl-wrapper-outer{
 +
overflow: hidden;
 +
position: relative;
 +
width: 90%;
 +
border: 10px solid #fff;
 +
    box-shadow: 1px 1px 3px rgba(24, 31, 3, 0.29);
 +
}
 +
.owl-carousel .owl-wrapper-outer.autoHeight{
 +
-webkit-transition: height 500ms ease-in-out;
 +
-moz-transition: height 500ms ease-in-out;
 +
-ms-transition: height 500ms ease-in-out;
 +
-o-transition: height 500ms ease-in-out;
 +
transition: height 500ms ease-in-out;
 +
}
 +
 +
.owl-carousel .owl-item{
 +
float: left;
 +
}
 +
.owl-controls .owl-page,
 +
.owl-controls .owl-buttons div{
 +
cursor: pointer;
 +
}
 +
.owl-controls {
 +
-webkit-user-select: none;
 +
-khtml-user-select: none;
 +
-moz-user-select: none;
 +
-ms-user-select: none;
 +
user-select: none;
 +
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 +
}
 +
 
 +
/* mouse grab icon */
 +
.grabbing {
 +
    cursor:url(grabbing.png) 8 8, move;
 +
}
 +
 
 +
/* fix */
 +
.owl-carousel  .owl-wrapper,
 +
.owl-carousel  .owl-item{
 +
-webkit-backface-visibility: hidden;
 +
-moz-backface-visibility:    hidden;
 +
-ms-backface-visibility:    hidden;
 +
  -webkit-transform: translate3d(0,0,0);
 +
  -moz-transform: translate3d(0,0,0);
 +
  -ms-transform: translate3d(0,0,0);
 +
}
 +
 
 +
 
 +
/****4 windows gallery ***********/
 +
.gallery{
 +
width: 600px;
 +
height: 100%;
 +
position: relative;
 +
text-align: center;
 +
margin-right: 20px;
 +
display: inline;
 +
}
 +
 
 +
.cr-gallery input.cr-selector-img-1:checked ~ .cr-bgimg,
 +
.cr-bgimg div span:nth-child(1){
 +
background-image: url(https://static.igem.org/mediawiki/2015/c/cb/CHINA_CD_UESTC_KINDER01.JPG);
 +
background-size: 400%;
 +
}
 +
.cr-gallery input.cr-selector-img-2:checked ~ .cr-bgimg,
 +
.cr-bgimg div span:nth-child(2){
 +
background-image: url(https://static.igem.org/mediawiki/2015/5/55/CHINA_CD_UESTC_KINDER02.JPG);
 +
background-size: 400%;
 +
 
 +
}
 +
.cr-gallery input.cr-selector-img-3:checked ~ .cr-bgimg,
 +
.cr-bgimg div span:nth-child(3){
 +
background-image: url(https://static.igem.org/mediawiki/2015/3/3c/CHINA_CD_UESTC_KINDER03.JPG);
 +
background-size: 400%;
 +
 
 +
}
 +
.cr-gallery input.cr-selector-img-4:checked ~ .cr-bgimg,
 +
.cr-bgimg div span:nth-child(4){
 +
background-image: url(https://static.igem.org/mediawiki/2015/6/62/CHINA_CD_UESTC_KINDER04.JPG);
 +
background-size: 400%;
 +
}
 +
/************two line picture********/
 +
.two_line_pic {
 +
display: inline-block;
 +
position: relative;
 +
margin: 10px 0px 50px 20px;
 +
padding: 20px;
 +
border: 10px solid #fff;
 +
box-shadow: 1px 1px 3px rgba(24, 31, 3, 0.29);
 +
}
 +
.left_pic {
 +
float: left;
 +
margin-left: 50px;
 +
}
 +
.right_pic {
 +
float: right;
 +
margin-left: 5px;
 +
}
 +
/**************end two line pic******/
 +
 
 +
/***************protocol************/
 +
#page {
 +
margin-bottom: 200px;
 +
z-index: 1000;
 +
}
 +
#page ul li{
 +
list-style: none;
 +
}
 +
.leftside{
 +
color: #000;
 +
float:left;
 +
width:17%;
 +
}
 +
#page .leftside li a {
 +
cursor:pointer;
 +
color: #000;
 +
}
 +
 
 +
.rightside{
 +
float:left;
 +
margin-left:5%;
 +
width:78%;
 +
height:600px; 
 +
overflow:hidden;
 +
}
 +
.protocol{
 +
display:none;
 +
width:95%;
 +
margin-bottom:20px;
 +
}
 +
.protocolactive{
 +
display:block;
 +
width:95%;
 +
border: 5px solid #DDE8E8;
 +
 
 +
margin-bottom:20px;
 +
}
 +
 
 +
/*********green button***********/
 +
.button{
 +
width: 160px;
 +
line-height: 38px;
 +
text-align: center;
 +
font-size: 20px;
 +
position: relative;
 +
overflow: hidden;
 +
 
 +
 
 +
color: rgba(255,255,255,1);
 +
text-decoration: none;
 +
background-color: rgba(219,87,5,1);
 +
font-family: 'Yanone Kaffeesatz','Microsoft yahei';
 +
display: block;
 +
padding: 4px;
 +
-webkit-border-radius: 8px;
 +
-moz-border-radius: 8px;
 +
border-radius: 8px;
 +
 
 +
}
 +
.button.green{
 +
-webkit-box-shadow:0px 2px 0px rgba(251, 253, 63, 0.2), 0px 3px 10px rgba(0,0,0,.7);
 +
-moz-box-shadow: 0px 2px 0px rgba(251, 253, 63, 0.2), 0px 3px 10px rgba(0,0,0,.7);
 +
box-shadow: 0px 2px 0px rgba(251, 253, 63, 0.2), 0px 3px 10px rgba(0,0,0,.7);
 +
 
 +
-webkit-transition: all .3s ease;
 +
-moz-transition: all .3s ease;
 +
-ms-transition: all .3s ease;
 +
-o-transition: all .3s ease;
 +
transition: all .3s ease;
 +
 
 +
 
 +
}
 +
.green.larrow:before{
 +
background: #64C878;
 +
}
 +
.green.larrow:after{
 +
-webkit-box-shadow: 0px 3px 0px rgb(255, 177, 13), 0px 3px 6px rgba(0,0,0,.9);
 +
-moz-box-shadow: 0px 3px 0px rgb(255, 177, 13), 0px 3px 6px rgba(0,0,0,.9);
 +
box-shadow: 0px 3px 0px rgb(255, 177, 13), 0px 3px 6px rgba(0,0,0,.9);
 +
background-color: rgba(255, 178, 29, 0.9);
 +
color: rgb(255, 255, 255);}}
 +
 
 +
/***green button over*/
 +
table.tftable {font-size:12px;color:#333333;width:90%;border-width: 1px;border-color: #bcaf91;border-collapse: collapse;}
 +
table.tftable th {font-size:12px;background-color:#ded0b0;border-width: 1px;padding: 8px;border-style: solid;border-color: #bcaf91;text-align:left;}
 +
table.tftable tr {background-color:#ffffff;}
 +
table.tftable td {font-size:12px;border-width: 1px;padding: 8px;border-style: solid;border-color: #bcaf91;}
 +
/*******************end protocol**********/
 +
 
 +
 
 +
 
 +
 
 +
/**************vector*****************/
 +
.vector {
 +
width: 80%;
 +
margin: 10px 0 0 200px;
 +
}
 +
.vector h2 {
 +
font-size: 20px;
 +
font-family: Helvetica;
 +
text-decoration: none;
 +
border: 0;
 +
font-weight: bold;
 +
}
 +
.vector p {
 +
font-size: 20px;
 +
font-family:Helvetica;
 +
 
 +
}
 +
.vector img {
 +
margin-top: 10px;
 +
}
 +
#brief_text {
 +
margin: 0;
 +
font-family: Helvetica;
 +
font-weight: 600;
 +
font-size: 20px;
 +
font-style: normal;
 +
line-height: 36px;
 +
}
 +
#pic_illustration {
 +
    font-size: 15px;
 +
    margin-left: -10%;
 +
    width: 90%;
 +
}
  
−
<div class="exhib_cont fleft">
+
/*____________________________grid.css________________________________*/
−
<div class="exhib_date_right">July 27th</div>
+
−
<p>We transferred mamW, RFP and laccase gene into <i>BL21</i> and induced its expression.</p>
+
−
</div>
+
−
<div class="clear"></div>
+
  
−
<div class="exhib_cont fright">
+
/* Computer */
−
<div class="exhib_date_left">July 30th</div>
+
.grid_1 { width: 6.5%; }
−
<p>Connected mamAB with the vector pET28a and complete the construction of vector piGEM-pET28a-mamAB.</p>
+
.grid_2 { width: 15%; }
−
</div>
+
.grid_3 { width: 23.5%; }
−
<div class="clear"></div>
+
.grid_4 { width: 32%; }
 +
.grid_5 { width: 40.5%; }
 +
.grid_6 { width: 49%; }
 +
.grid_7 { width: 57.5%; }
 +
.grid_8 { width: 94%; font-family: Verdana,Arial  ;
 +
}
 +
.grid_9 { width: 74.5%; }
 +
.grid_10 { width: 83%; }
 +
.grid_11 { width: 91.5%; }
 +
.grid_12 { width: 100%; }
  
−
<div class="exhib_cont fleft">
+
.grid_1,
−
<div class="exhib_date_right">August 5th</div>
+
.grid_2,
−
<p>Amplified the mamXY with PCR from <i>MSR-1</i>. Completed the construction of vector piGEM-pET28a-mamAB.</p>
+
.grid_3,
−
</div>
+
.grid_4,
−
<div class="clear"></div>
+
.grid_5,
 +
.grid_6,
 +
.grid_7,
 +
.grid_8,
 +
.grid_9,
 +
.grid_10,
 +
.grid_11,
 +
.grid_12 {
 +
margin:20px 0 0 0;
 +
float: left;
 +
display: block;
 +
}
  
−
<div class="exhib_cont fright">
+
.alpha {margin-left:0;}
−
<div class="exhib_date_left">August 12th</div>
+
.omega {margin-right:0;}
−
<p>Communication with technical expert at Anno Medical Devices Co.Ltd.</p>
+
.gallery-list {margin:0;padding:0;}
−
</div>
+
.little_respond {display:none;}
−
<div class="clear"></div>
+
  
−
<div class="exhib_cont fleft">
+
.container{
−
<div class="exhib_date_right">August 13th</div>
+
width: 100%;
−
<p>Detection of laccase activity using by the ABTS. Communication with Manager Zhiyong Xu at Jin Douyun Space Company.</p>
+
max-width: 1000px;
−
</div>
+
margin: auto;
−
<div class="clear"></div>
+
  
−
<div class="exhib_cont fright">
+
}
−
<div class="exhib_date_left">August 17th</div>
+
−
<p>Finished the project video.</p>
+
−
</div>
+
−
<div class="clear"></div>
+
  
−
<div class="exhib_cont fleft">
 
−
<div class="exhib_date_right">August 23th</div>
 
−
<p>Connected mamXY with the vector pCDFDuet-1 and connected mamGFDC + mms6 with the vector pCDFDuet-1-mamXY.</p>
 
−
</div>
 
−
<div class="clear"></div>
 
  
−
<div class="exhib_cont fright">
 
−
<div class="exhib_date_left">August 25th</div>
 
−
<p>We visited Chengdu Biology Maker Space and got their technical support.</p>
 
−
</div>
 
−
<div class="clear"></div>
 
  
−
<div class="exhib_cont fleft">
+
.clear{clear:both;display:block;overflow:hidden;visibility:hidden;width:0;height:0}
−
<div class="exhib_date_right">August 29th</div>
+
.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}
−
<p>We were excited to obtain the exact Parts including the mamW gene and mutanted it.</p>
+
−
</div>
+
−
<div class="clear"></div>
+
  
−
<div class="exhib_cont fright">
+
@media (orientation: portrait) {
−
<div class="exhib_date_left">September 10th</div>
+
.slide{background-attachment: scroll;background-position:0 0 !important;
−
<p>It is an exciting day that we sent our Parts to MIT, wish the little box bon voyage. Happy to complete the construction of cell device and start to test it.</p>
+
}
−
</div>
+
}
−
<div class="clear"></div>
+
  
−
<div class="exhib_cont fleft">
+
@media only screen and (min-width: 321px) and (max-width: 980px) {
−
<div class="exhib_date_right">September 23th</div>
+
#title {position: fixed;font-size: 80px;left:250px;z-index: 5;}
−
<p>Set out for 2015 iGEM Giant Jamboree in MIT. We are coming, we are CHINA_CD_UESTC!</p>
+
#firstTitle {width:700px;}
−
</div>
+
#firstTitle p {font-size: 60px;}
−
<div class="clear"></div>
+
.transparent_class{top: 280px;width: 640px;left: 20px;}
−
+
#RightContentText {top: 470px;width: 655px;left: 13px;right: 8px;}
−
</div>
+
.gallery-container {width: 80%;margin: 60px 0px 30px 100px;display: block;}
−
</div>
+
.gallery-items {width: 800px;}.gallery-items li {width: 210px;height: 180px;}
−
</div>
+
.gallery-items a {height: 130px;width: 190px;margin-left: 4px;margin-right: 4px;margin-top: 10px;
−
+
}
−
</div>
+
#HZpic {background-position: 0 0 !important;width: 90%;padding: 10px;margin-top: 20px;}
−
</div>
+
.client_foto {height: 380px;width: 240px;}
 +
#slide12 {width: 97%;}
 +
#slide12 h5 {margin: 5px 0 0 0;font-size: 25px;line-height: 25px;}
 +
#slide12 h6 {font-size: 15px;line-height: 17px;}
 +
#slide12 p {font-size: 14px;font-family: Helvetica,'Microsoft Yahei';text-align: initial;}
 +
#content {height: 50px;}
 +
h2{font-size: 30px;line-height: 52px;}
 +
h4 {font-size: 22px;line-height: 36px;}
 +
p{font-size: 15px;}
 +
#threeline-left {float: left;width: 150px;margin: 10px 0 0 3px;}
 +
#threeline-middle {float: left;width: 230px;margin: 10px 0 0 0px;}
 +
#threeline-right {float: right;width: 250px;margin: 10px 20px 0 0px;}
 +
.two_line_pic img {width: 250px;height: 180px;}
 +
.left_pic {margin-left: 0px;}
 +
.button {width: 120px;}
 +
.exhib_cont {width: 240px;}
 +
.vector {width: 100%;margin: 10px 0 0 10px;}
 +
.owl-next {right: 50px;}
 +
.owl-pagination{width: 90%;}
 +
.owl-carousel .owl-wrapper-outer {width: 90%;}
 +
                        .clear {display: block;height: 30px;}
  
  
  
 +
}
  
−
</div>
 
−
</div>
 
−
</div>
 
  
−
</body>
+
@media only screen and (min-width: 970px) and (max-width: 980px) {
−
</html>
+
.gallery-list {display: none;}
 +
}

Revision as of 08:57, 9 September 2015

/* General Slides */

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

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

  1. title {

position: fixed; font-size: 80px; left:260px; z-index: 5;

}

  1. firstTitle {

font-family: Arial, Helvetica, sans-serif; position: fixed; width:1000px; margin-top:0; margin-bottom:0; top: 60px; font-size: 80px; color: #FFFFAA; overflow: hidden;

}

  1. firstTitle p {

text-align: center; 

   font-size: 80px;

}

.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: 1048px; 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: 30px; line-height: 82px; color:#343434; font-weight: 300; }

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


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

/*________________________Judging__________________*/

  1. bronze h3{

background-image: url(); background-repeat: no-repeat; text-decoration:underline; color: #e8b77c; }

  1. silver h3{

background-image: url(); background-repeat: no-repeat; text-decoration:underline; color: #b4c8cb; }

  1. gold h3{

background-image: url(); background-repeat: no-repeat; text-decoration:underline; color: #fbca23; }

.req_list{ width: 90%; } .req_list h1{ background:url(CHINA_CD_UESTC_YesIcon.png) no-repeat; background-size: 6%; margin:0; padding:10px 0 0px 50px; margin-left: 50px; font-family: Helvetica ; font-weight:800; font-size:20px; font-style:normal; line-height:36px; } .req_list p{ margin:0; margin-left: 120px; font-family: 'Microsoft Yahei' ; font-weight:500; font-size:15px; font-style:normal; line-height:26px; } /* ____________________________________ 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:100%; 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:-220px; top:27px; } .exhib_date_right { right:-230px; 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:30px; }


/* ___________________ //exhib_block ___________________ */


/* ___________________________________ //Slide 6 ___________________________________ */





/* ____________________________________ 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 ____________________________________ */


/*______________________________________gallery________________________________________*/ /***************gallery***/ @font-face { font-family: 'BebasNeueRegular'; src: url('fonts/BebasNeue-webfont.eot'); src: url('fonts/BebasNeue-webfont.eot?#iefix') format('embedded-opentype'), url('fonts/BebasNeue-webfont.woff') format('woff'), url('fonts/BebasNeue-webfont.ttf') format('truetype'), url('fonts/BebasNeue-webfont.svg#BebasNeueRegular') format('svg'); font-weight: normal; font-style: normal; }


.clr{ clear: both; }


.cr-gallery{ width: 600px; height: 400px; position: relative; margin: 0 auto; overflow: hidden; border: 20px solid #fff; box-shadow: 1px 1px 3px rgba(0,0,0,0.1); } .cr-gallery label{ font-style: italic; width: 150px; height: 30px; cursor: pointer; color: #fff; line-height: 32px; font-size: 24px; float:left; position: relative; margin-top:350px; z-index: 1000; } .cr-gallery label:before{ content:; width: 34px; height: 34px; background: rgba(130,195,217,0.9); position: absolute; left: 50%; margin-left: -17px; border-radius: 50%; box-shadow: 0px 0px 0px 4px rgba(255,255,255,0.3); z-index:-1; } .cr-gallery label:after{ width: 1px; height: 400px; content: ; background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(100%,rgba(255,255,255,1))); background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); background: -o-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); background: -ms-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); background: linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 ); position: absolute; bottom: -20px; right: 0px; } .cr-gallery label.cr-label-img-4:after{ width: 0px; } .cr-gallery input.cr-selector-img-1:checked ~ label.cr-label-img-1, .cr-gallery input.cr-selector-img-2:checked ~ label.cr-label-img-2, .cr-gallery input.cr-selector-img-3:checked ~ label.cr-label-img-3, .cr-gallery input.cr-selector-img-4:checked ~ label.cr-label-img-4{ color: #68abc2; } .cr-gallery input.cr-selector-img-1:checked ~ label.cr-label-img-1:before, .cr-gallery input.cr-selector-img-2:checked ~ label.cr-label-img-2:before, .cr-gallery input.cr-selector-img-3:checked ~ label.cr-label-img-3:before, .cr-gallery input.cr-selector-img-4:checked ~ label.cr-label-img-4:before{ background: #fff; box-shadow: 0px 0px 0px 4px rgba(104,171,194,0.6); } .cr-gallery input{ display: none; } .cr-bgimg{ width: 600px; height: 400px; position: absolute; left: 0px; top: 0px; z-index: 1; } .cr-bgimg{ background-repeat: no-repeat; background-position: 0 0; } .cr-bgimg div{ width: 150px; height: 100%; position: relative; float: left; overflow: hidden; background-repeat: no-repeat; } .cr-bgimg div span{ position: absolute; width: 100%; height: 100%; top: 0px; left: 0px; -webkit-transform: scale(1.5); -moz-transform: scale(1.5); -o-transform: scale(1.5); -ms-transform: scale(1.5); transform: scale(1.5); opacity: 0; z-index: 2; text-indent: -9000px; }

.cr-bgimg div:nth-child(1) span{ background-position: 0px 0px; } .cr-bgimg div:nth-child(2) span{ background-position: -150px 0px; } .cr-bgimg div:nth-child(3) span{ background-position: -300px 0px; } .cr-bgimg div:nth-child(4) span{ background-position: -450px 0px; } .cr-gallery input:checked ~ .cr-bgimg div span{ -webkit-animation: scaleOut 0.6s ease-in-out; -moz-animation: scaleOut 0.6s ease-in-out; -o-animation: scaleOut 0.6s ease-in-out; -ms-animation: scaleOut 0.6s ease-in-out; animation: scaleOut 0.6s ease-in-out; } @-webkit-keyframes scaleOut{ 0%{ -webkit-transform: scale(1); opacity: 1; } 100%{ -webkit-transform: scale(1.5); opacity: 0; } } @-moz-keyframes scaleOut{ 0%{ -moz-transform: scale(1); opacity: 1; } 100%{ -moz-transform: scale(1.5); opacity: 0; } } @-o-keyframes scaleOut{ 0%{ -o-transform: scale(1); opacity: 1; } 100%{ -o-transform: scale(1.5); opacity: 0; } } @-ms-keyframes scaleOut{ 0%{ -ms-transform: scale(1); opacity: 1; } 100%{ -ms-transform: scale(1.5); opacity: 0; } } @keyframes scaleOut{ 0%{ transform: scale(1); opacity: 1; } 100%{ transform: scale(1.5); opacity: 0; } } .cr-gallery input.cr-selector-img-1:checked ~ .cr-bgimg div span:nth-child(1), .cr-gallery input.cr-selector-img-2:checked ~ .cr-bgimg div span:nth-child(2), .cr-gallery input.cr-selector-img-3:checked ~ .cr-bgimg div span:nth-child(3), .cr-gallery input.cr-selector-img-4:checked ~ .cr-bgimg div span:nth-child(4) { -webkit-transition: -webkit-transform 0.5s ease-in-out, opacity 0.5s ease-in-out, z-index 0s linear 0.6s; -moz-transition: -moz-transform 0.5s ease-in-out, opacity 0.5s ease-in-out, z-index 0s linear 0.6s; -o-transition: -o-transform 0.5s ease-in-out, opacity 0.5s ease-in-out, z-index 0s linear 0.6s; -ms-transition: -ms-transform 0.5s ease-in-out, opacity 0.5s ease-in-out, z-index 0s linear 0.6s; transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out, z-index 0s linear 0.6s; -webkit-animation: none; -moz-animation: none; -o-animation: none; -ms-animation: none; animation: none; opacity: 1; -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); transform: scale(1); z-index:10000; } .cr-titles h3{ color: #fff; text-shadow: 1px 1px 1px rgba(0,0,0,0.1); } .cr-titles h3 span{ z-index: 10000; position: absolute; width: 100%; left: 0px; text-align: center; opacity: 0; top: 50%; } .cr-titles h3 span:nth-child(1){ left: 0px; font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif; font-size: 70px; letter-spacing: 7px; color: transparent; text-shadow: 0px 0px 10px #fff; -webkit-transition: text-shadow 0.8s ease-in-out, opacity 0.8s ease-in-out; -moz-transition: text-shadow 0.8s ease-in-out, opacity 0.8s ease-in-out; -o-transition: text-shadow 0.8s ease-in-out, opacity 0.8s ease-in-out; -ms-transition: text-shadow 0.8s ease-in-out, opacity 0.8s ease-in-out; transition: text-shadow 0.8s ease-in-out, opacity 0.8s ease-in-out; } .cr-titles h3 span:nth-child(2){ margin-top: 84px; letter-spacing: 0px; background: rgba(104,171,194,0.9); font-size: 14px; padding: 10px 0px; font-style: italic; font-family: Cambria, Palatino, "Palatino Linotype", "Palatino LT STD", Georgia, serif; -webkit-transition: opacity 0.8s ease-in-out; -moz-transition: opacity 0.8s ease-in-out; -o-transition: opacity 0.8s ease-in-out; -ms-transition: opacity 0.8s ease-in-out; transition: opacity 0.8s ease-in-out; } .cr-gallery input:checked ~ .cr-titles h3 span{ opacity: 0; text-shadow: 0px 0px 30px #fff; } .cr-gallery input.cr-selector-img-1:checked ~ .cr-titles h3:nth-child(1) span:nth-child(1), .cr-gallery input.cr-selector-img-2:checked ~ .cr-titles h3:nth-child(2) span:nth-child(1), .cr-gallery input.cr-selector-img-3:checked ~ .cr-titles h3:nth-child(3) span:nth-child(1), .cr-gallery input.cr-selector-img-4:checked ~ .cr-titles h3:nth-child(4) span:nth-child(1){ opacity: 1; text-shadow: 0px 0px 1px #fff; } .cr-gallery input.cr-selector-img-1:checked ~ .cr-titles h3:nth-child(1) span:nth-child(2), .cr-gallery input.cr-selector-img-2:checked ~ .cr-titles h3:nth-child(2) span:nth-child(2), .cr-gallery input.cr-selector-img-3:checked ~ .cr-titles h3:nth-child(3) span:nth-child(2), .cr-gallery input.cr-selector-img-4:checked ~ .cr-titles h3:nth-child(4) span:nth-child(2){ opacity: 1; } /* Media Query: Let's show the inputs on mobile sized browsers because they probably don't support the label trick: */ @media screen and (max-width: 768px) { .cr-gallery input{ display: inline; width: 24%; margin-top: 350px; z-index: 1000; position: relative; } .cr-gallery label{ display: none; } } /*________________________________________gallery-end___________________________________________*/


/**************gallery******************/ .gallery-items { width:970px; height: 1000px; margin:100px 0 0 70px; position: relative; left: -150px; } .gallery-items a { display:inline-block; height:150px; position:relative; width:230px; margin-left: 10px; margin-right: 10px; margin-top: 10px; } .gallery-items a img { cursor:pointer; display:inline-block; height:100%; left:0px; position:absolute; top:0px; width:100%; z-index:0; border: 10px solid #fff; box-shadow: 1px 1px 3px rgba(0,0,0,0.1);


-moz-user-select: none; -khtml-user-select: none; user-select: none;

-moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box;

-webkit-transition-property:width, height, top, bottom, left, right, z-index, border; -webkit-transition-duration:0.5s; -moz-transition-property:width, height, top, bottom, left, right, z-index, border; -moz-transition-duration:0.5s; -o-transition-property:width, height, top, bottom, left, right, z-index, border; -o-transition-duration:0.5s; transition-property:width, height, top, bottom, left, right, z-index, border; transition-duration:0.5s; } .gallery-items li:hover img{ border:15px solid #fff; cursor:default; height:190%; position:absolute; width:190%; z-index:51;

box-shadow:1px 1px 5px #888; -moz-box-shadow:1px 1px 5px #888; -webkit-box-shadow:1px 1px 5px #888; -webkit-transition-property:width, height, top, bottom, left, right, z-index, border; -webkit-transition-duration:0.5s; -moz-transition-property:width, height, top, bottom, left, right, z-index, border; -moz-transition-duration:0.5s; -o-transition-property:width, height, top, bottom, left, right, z-index, border; -o-transition-duration:0.5s; transition-property:width, height, top, bottom, left, right, z-index, border; transition-duration:0.5s; }

/* custom focus rules */ .gallery-items li:hover:nth-child(3n+1) img{ left: -100px; z-index: 50; } .gallery-items li:hover:nth-child(3n+2) img{ left:-200px; z-index: 50;

} .gallery-items li:hover:nth-child(3n+3) img{ left:-300px; z-index: 50;

} .gallery-items li:hover:nth-child(n) img{ top:-100px; z-index: 50;

} .gallery-items li:hover:nth-child(n+7) img{ top:-150px; z-index: 50;

} .gallery-items li:hover:nth-child(n+10) img{ top:-295px; z-index: 50;

}

p { 

   text-align: left;
   font-family: inherit;
   font-size: 18px;

} /***********select-gallery*********/ .gallery-container{ width: 80%; margin: 60px auto 30px 170px; display: block; }


.gallery-container label { width: 20%; height: 30px; padding: 10px; cursor: pointer; line-height: 33px; font-size: 19px;

color: rgba(255,255,255,1); text-decoration: none; background-color: rgba(219,87,5,1); font-family: 'Yanone Kaffeesatz','Microsoft yahei'; display: block; padding: 4px; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; -webkit-box-shadow: 0px 9px 0px rgba(219,31,5,1), 0px 9px 25px rgba(0,0,0,.7); -moz-box-shadow: 0px 9px 0px rgba(219,31,5,1), 0px 9px 25px rgba(0,0,0,.7); box-shadow: 0px 9px 0px rgba(219,31,5,1), 0px 9px 25px rgba(0,0,0,.7); text-align: center;

-webkit-transition: all .3s ease; -moz-transition: all .3s ease; -ms-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease;


filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#gallerygallerygallery', endColorstr='#eaeaea',GradientType=0 ); float: left; } .gallery-container label.gallery-label-type-all{ border-radius: 3px 0px 0px 3px; } .gallery-container label.gallery-label-type-3{ border-radius: 0px 3px 3px 0px; } .gallery-container input.gallery-selector-type-all:checked ~ label.gallery-label-type-all, .gallery-container input.gallery-selector-type-1:checked ~ label.gallery-label-type-1, .gallery-container input.gallery-selector-type-2:checked ~ label.gallery-label-type-2, .gallery-container input.gallery-selector-type-3:checked ~ label.gallery-label-type-3{ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#646d93', endColorstr='#7c87ad',GradientType=0 );


-webkit-box-shadow: 0px 3px 0px rgb(255, 177, 13), 0px 3px 6px rgba(0,0,0,.9); -moz-box-shadow: 0px 3px 0px rgb(255, 177, 13), 0px 3px 6px rgba(0,0,0,.9); box-shadow: 0px 3px 0px rgb(255, 177, 13), 0px 3px 6px rgba(0,0,0,.9); background-color: rgba(255, 178, 29, 0.9); color: rgb(255, 255, 255);} .gallery-container input{ display: none; }


.gallery-items li{ margin: 0px; float: left; width: 300px; height: 200px; -webkit-transition: all 0.6s ease-in-out; -moz-transition: all 0.6s ease-in-out; -o-transition: all 0.6s ease-in-out; -ms-transition: all 0.6s ease-in-out; transition: all 0.6s ease-in-out; } .gallery-items img { width: 400px; height: 400px; } .gallery-container input.gallery-selector-type-1:checked ~ .gallery-items .gallery-item-type-1, .gallery-container input.gallery-selector-type-2:checked ~ .gallery-items .gallery-item-type-2, .gallery-container input.gallery-selector-type-3:checked ~ .gallery-items .gallery-item-type-3{ opacity: 1; -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -o-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); } .gallery-container input.gallery-selector-type-1:checked ~ .gallery-items li:not(.gallery-item-type-1), .gallery-container input.gallery-selector-type-2:checked ~ .gallery-items li:not(.gallery-item-type-2), .gallery-container input.gallery-selector-type-3:checked ~ .gallery-items li:not(.gallery-item-type-3){ opacity: 0.1; -webkit-transform: scale(0.5); -moz-transform: scale(0.5); -o-transform: scale(0.5); -ms-transform: scale(0.5); transform: scale(0.5); } .gallery-container input.gallery-selector-type-1:checked ~ .gallery-items li:not(.gallery-item-type-1) span, .gallery-container input.gallery-selector-type-2:checked ~ .gallery-items li:not(.gallery-item-type-2) span, .gallery-container input.gallery-selector-type-3:checked ~ .gallery-items li:not(.gallery-item-type-3) span{ display:none; }

/**********select-gallery over*******/

#three-line-text p{ margin-left: 20px; font-family: "Microsoft yahei"; color: #0073A5; } #three-line-text a{ font-family: "Microsoft yahei"; color: #0073A5; }

#threeline-left { float: left; width: 270px; margin:10px 0 0 50px; } #threeline-middle { float: left; width: 290px; margin:10px 0 0 20px; } #threeline-right { float: right; width: 290px; margin: 10px 60px;

} /* ____________________________________ Slide 10 照片____________________________________ */ #slide10 { width:90%; padding: 20px 0 0 30px; }

/* _________________ 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; } .portfolio_link { right:-77px; } .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 50px; text-transform:uppercase; font-size:18px; } .img_block:hover .item_description { top:20px; } .img_block .portf_img { position:absolute; left:18px; top:18px; width: 100%; height: 90%; 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 ___________________*/




/****************gallery in education**********/ /***************slide gallery***************/

  1. owl-demo{position:relative;width:640px;height:390px;margin:20px auto 0 auto;}
  2. owl-demo .item{ position:relative;display:block;}
  3. owl-demo img{display:block;width:640px;height:390px;}
  4. owl-demo span{position:absolute;left:0;bottom:37px;width:100%;font:18px/32px "微软雅黑","黑体";color:#fff;text-align:center;background-color: rgba(95, 193, 42, 0.53);}

.owl-pagination{position:absolute;left:0;bottom:10px;width:100%;height:22px;text-align:center;} .owl-page{display:inline-block;width:10px;height:10px;margin:0 5px;background-image:url(https://static.igem.org/mediawiki/2015/7/78/CHINA_CD_UESTC_pribg01.png);*display:inline;*zoom:1;} .owl-pagination .active{width:25px;background-image:url(https://static.igem.org/mediawiki/2015/c/c9/CHINA_CD_UESTC_pribg02.png);} .owl-buttons{display:none;} .owl-buttons div{position:absolute;top:50%;width:40px;height:80px;margin-top:-40px;text-indent:-9999px;} .owl-prev{left:0;background-image:url(https://static.igem.org/mediawiki/2015/2/29/CHINA_CD_UESTC_pribg03.png);} .owl-next{right:40px;background-image:url(https://static.igem.org/mediawiki/2015/d/dc/CHINA_CD_UESTC_pribg04.png);} .owl-prev:hover{background-image:url(https://static.igem.org/mediawiki/2015/6/67/CHINA_CD_UESTC_pribg05.png);} .owl-next:hover{background-image:url(https://static.igem.org/mediawiki/2015/f/f7/CHINA_CD_UESTC_pribg06.png);} .owl-item {width: 100%;} /* 

* 	Core Owl Carousel CSS File
*	v1.3.3
*/

/* clearfix */ .owl-carousel .owl-wrapper:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; } /* display none until init */ .owl-carousel{ display: none; position: relative; width: 100%; -ms-touch-action: pan-y; } .owl-carousel .owl-wrapper{ display: none; position: relative; -webkit-transform: translate3d(0px, 0px, 0px); } .owl-carousel .owl-wrapper-outer{ overflow: hidden; position: relative; width: 90%; border: 10px solid #fff; 

   box-shadow: 1px 1px 3px rgba(24, 31, 3, 0.29);

} .owl-carousel .owl-wrapper-outer.autoHeight{ -webkit-transition: height 500ms ease-in-out; -moz-transition: height 500ms ease-in-out; -ms-transition: height 500ms ease-in-out; -o-transition: height 500ms ease-in-out; transition: height 500ms ease-in-out; }

.owl-carousel .owl-item{ float: left; } .owl-controls .owl-page, .owl-controls .owl-buttons div{ cursor: pointer; } .owl-controls { -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }

/* mouse grab icon */ .grabbing { 

   cursor:url(grabbing.png) 8 8, move;

}

/* fix */ .owl-carousel .owl-wrapper, .owl-carousel .owl-item{ -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; 

 -webkit-transform: translate3d(0,0,0);
 -moz-transform: translate3d(0,0,0);
 -ms-transform: translate3d(0,0,0);

}


/****4 windows gallery ***********/ .gallery{ width: 600px; height: 100%; position: relative; text-align: center; margin-right: 20px; display: inline; }

.cr-gallery input.cr-selector-img-1:checked ~ .cr-bgimg, .cr-bgimg div span:nth-child(1){ background-image: url(CHINA_CD_UESTC_KINDER01.JPG); background-size: 400%; } .cr-gallery input.cr-selector-img-2:checked ~ .cr-bgimg, .cr-bgimg div span:nth-child(2){ background-image: url(CHINA_CD_UESTC_KINDER02.JPG); background-size: 400%;

} .cr-gallery input.cr-selector-img-3:checked ~ .cr-bgimg, .cr-bgimg div span:nth-child(3){ background-image: url(CHINA_CD_UESTC_KINDER03.JPG); background-size: 400%;

} .cr-gallery input.cr-selector-img-4:checked ~ .cr-bgimg, .cr-bgimg div span:nth-child(4){ background-image: url(CHINA_CD_UESTC_KINDER04.JPG); background-size: 400%; } /************two line picture********/ .two_line_pic { display: inline-block; position: relative; margin: 10px 0px 50px 20px; padding: 20px; border: 10px solid #fff; box-shadow: 1px 1px 3px rgba(24, 31, 3, 0.29); } .left_pic { float: left; margin-left: 50px; } .right_pic { float: right; margin-left: 5px; } /**************end two line pic******/

/***************protocol************/ #page { margin-bottom: 200px; z-index: 1000; } #page ul li{ list-style: none; } .leftside{ color: #000; float:left; width:17%; } #page .leftside li a { cursor:pointer; color: #000; }

.rightside{ float:left; margin-left:5%; width:78%; height:600px; overflow:hidden; } .protocol{ display:none; width:95%; margin-bottom:20px; } .protocolactive{ display:block; width:95%; border: 5px solid #DDE8E8;

margin-bottom:20px; }

/*********green button***********/ .button{ width: 160px; line-height: 38px; text-align: center; font-size: 20px; position: relative; overflow: hidden;


color: rgba(255,255,255,1); text-decoration: none; background-color: rgba(219,87,5,1); font-family: 'Yanone Kaffeesatz','Microsoft yahei'; display: block; padding: 4px; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px;

} .button.green{ -webkit-box-shadow:0px 2px 0px rgba(251, 253, 63, 0.2), 0px 3px 10px rgba(0,0,0,.7); -moz-box-shadow: 0px 2px 0px rgba(251, 253, 63, 0.2), 0px 3px 10px rgba(0,0,0,.7); box-shadow: 0px 2px 0px rgba(251, 253, 63, 0.2), 0px 3px 10px rgba(0,0,0,.7);

-webkit-transition: all .3s ease; -moz-transition: all .3s ease; -ms-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease;


} .green.larrow:before{ background: #64C878; } .green.larrow:after{ -webkit-box-shadow: 0px 3px 0px rgb(255, 177, 13), 0px 3px 6px rgba(0,0,0,.9); -moz-box-shadow: 0px 3px 0px rgb(255, 177, 13), 0px 3px 6px rgba(0,0,0,.9); box-shadow: 0px 3px 0px rgb(255, 177, 13), 0px 3px 6px rgba(0,0,0,.9); background-color: rgba(255, 178, 29, 0.9); color: rgb(255, 255, 255);}}

/***green button over*/ table.tftable {font-size:12px;color:#333333;width:90%;border-width: 1px;border-color: #bcaf91;border-collapse: collapse;} table.tftable th {font-size:12px;background-color:#ded0b0;border-width: 1px;padding: 8px;border-style: solid;border-color: #bcaf91;text-align:left;} table.tftable tr {background-color:#ffffff;} table.tftable td {font-size:12px;border-width: 1px;padding: 8px;border-style: solid;border-color: #bcaf91;} /*******************end protocol**********/



/**************vector*****************/ .vector { width: 80%; margin: 10px 0 0 200px; } .vector h2 { font-size: 20px; font-family: Helvetica; text-decoration: none; border: 0; font-weight: bold; } .vector p { font-size: 20px; font-family:Helvetica;

} .vector img { margin-top: 10px; } #brief_text { margin: 0; font-family: Helvetica; font-weight: 600; font-size: 20px; font-style: normal; line-height: 36px; }

  1. pic_illustration {
   font-size: 15px;
   margin-left: -10%;
   width: 90%;

}

/*____________________________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: 94%; 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:20px 0 0 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 (orientation: portrait) { .slide{background-attachment: scroll;background-position:0 0 !important; } }

@media only screen and (min-width: 321px) and (max-width: 980px) { #title {position: fixed;font-size: 80px;left:250px;z-index: 5;} #firstTitle {width:700px;} #firstTitle p {font-size: 60px;} .transparent_class{top: 280px;width: 640px;left: 20px;} #RightContentText {top: 470px;width: 655px;left: 13px;right: 8px;} .gallery-container {width: 80%;margin: 60px 0px 30px 100px;display: block;} .gallery-items {width: 800px;}.gallery-items li {width: 210px;height: 180px;} .gallery-items a {height: 130px;width: 190px;margin-left: 4px;margin-right: 4px;margin-top: 10px; } #HZpic {background-position: 0 0 !important;width: 90%;padding: 10px;margin-top: 20px;} .client_foto {height: 380px;width: 240px;} #slide12 {width: 97%;} #slide12 h5 {margin: 5px 0 0 0;font-size: 25px;line-height: 25px;} #slide12 h6 {font-size: 15px;line-height: 17px;} #slide12 p {font-size: 14px;font-family: Helvetica,'Microsoft Yahei';text-align: initial;} #content {height: 50px;} h2{font-size: 30px;line-height: 52px;} h4 {font-size: 22px;line-height: 36px;} p{font-size: 15px;} #threeline-left {float: left;width: 150px;margin: 10px 0 0 3px;} #threeline-middle {float: left;width: 230px;margin: 10px 0 0 0px;} #threeline-right {float: right;width: 250px;margin: 10px 20px 0 0px;} .two_line_pic img {width: 250px;height: 180px;} .left_pic {margin-left: 0px;} .button {width: 120px;} .exhib_cont {width: 240px;} .vector {width: 100%;margin: 10px 0 0 10px;} .owl-next {right: 50px;} .owl-pagination{width: 90%;} .owl-carousel .owl-wrapper-outer {width: 90%;} 

                       .clear {display: block;height: 30px;}


}


@media only screen and (min-width: 970px) and (max-width: 980px) { .gallery-list {display: none;} }