Team:Jilin China/Human Practices/CSS

<style> @charset "UTF-8"; /**

* 
* @authors Your Name (you@example.org)
* @date    2019-09-28 21:29:20
* @version $Id$
*/

@font-face {
 font-family: 'JLUCN';
 src:  url('../DIN Alternate Bold.ttf') format('truetype');
 font-weight: normal;
 font-style: normal;

}

html{
	height: 100%;
}
body{
	width: 100%;
	height: 100%;
	font-family: 'JLUCN';
	
}

.clear_both{ clear:both; }

/**

• 第一部分
• /

1. first_s{

padding-left: 0; padding-right: 0; background-color: #485; margin: 0; height: 0px; width: 100%; z-index: 999; position: absolute; color: rgba(255,255,255,1.00); width: 100%; }

1. first_s #nav_bg{

height: 80px; color: rgba(255,255,255,1.00); transition: 0.5s; }

1. first_s {

height: 80px; color: rgba(255,255,255,1.00); left: 0px; padding: 0 0; }

1. first_s .navbar-header {

width: 20%;

 height: 80px;
 left: 0px;
 position: absolute;

}

1. first_s .navbar-brand {

font-size: 24px; line-height: 72px; left: 10%; position: absolute; color: rgba(65,4,3,1.00); }

1. first_s ul {

padding: 0 0; margin: 0 0; height: 80px; float: right;

color: #FFFFFF; z-index: 500; position: absolute; list-style-type: none; right: 0px; } /*

1. daohangtiao{

position: fixed !important; }

• /

1. first_s ul > li {

z-index: 500; width: 150px;

float: left; text-align: center;

height: 100%; position: relative; background-color: #485; }

/*#first_s >ul>li:hover{

     background-color: #7ecef4;
     

}

1. first_s >ul>li:hover a{

     color: #fff;

}*/

1. first_s a {

padding: 0 0; margin: 0 0; height:100%; font-size: 20px; line-height: 380%; color: #fff; font-weight: bold; display: block; cursor: pointer; }

1. logotext{

width: 200px; height: 100%; font-size: 25px !important; left:calc(70px + 10%); position: absolute; }

1. first_s li ul

{ width: 100%; list-style: none; padding-left: 0; text-align: center; position: absolute; display: none; height: auto;

}

1. first_s .last

{ right: 0%;

}

/*#first_s li:hover > ul { display: block; }*/

1. first_s li ul li

{ width: 100%; height: 60px; padding-top: 0px; padding-bottom: 0px; line-height: 53px; position: absolute; background-color:#485; border-top:1px solid #c0c0c0; top: -1px; opacity: 0; font-size: 17px; }

1. first_s li ul li ul

{ width: 100%;

 position: absolute;
 left:100%;
 top:0;
 display: none;
 margin-top: -6px;
 margin-left: 1px;

}

1. first_s li ul li li

{ height: 45px; line-height: 53px; padding-top: 0px; padding-bottom: 0px; position: absolute; background-color: #fff; opacity: 0;

}

1. first_s .menu_big{

display: none; opacity: 0; position: relative; top: 5px; background-color: rgba(255,255,255,0.92); /*background-color: blue;*/ z-index: -5; }

1. first_s .menu_tab_out{

display: block; height: 480px; padding: 0 0; overflow: hidden; position: relative; z-index: -1; }

1. first_s .menu_tab{

width: 100%; display: block; background-color: rgba(255,255,255,0.00); border-bottom: 1px solid #c0c0c0; padding: 0 0; height: auto; overflow: hidden; position: absolute; opacity: 1;

}

1. first_s .menu_tab_s{

height: 100%; width: 100px; float: left; }

1. first_s .menu_tab_s:hover .menu_i{

color: #fff; }

1. first_s .menu_tab_s:hover .menu_span{

color: #fff; }

1. first_s .menu_tab_s:hover{

background-color: #000; }

1. first_s .menu_a{

margin-top: 5px; height: 100%; width: 100%; display: block; }

1. first_s .menu_i{

height: auto; width: 100%; font-size: 40px; text-align: center; }

1. first_s .menu_span{

height: auto; width: 100%; display: block; font-size: 10px; text-align: center; margin-bottom: 5px; }

1. first_s .menu_tab_sr{

right: 0px; bottom: 0px; height: 67px; width: 150px; float: right; position: absolute; }

1. first_s .menu_name{

height: 100%; width: 100%; font-size: 27px; line-height: 60px; display: block; text-align: center; position: relative; color: #000; opacity: 0.9; }

1. navProgBar1{

width: 100%; height: 5px; background-color: #facd89; position: absolute; opacity: 0; top: 80px; z-index:50; }

1. navProgBar2{

top: 80px; width: 0%; height: 5px; background-color: #fff; position: absolute; z-index: 120;

   opacity: 0;

} .jindutiao{ width: 0%; height: 5px; position: absolute; bottom: 0px; background-color: #facd89; display: none; }

1. logo{

width: auto; height:100%; transform: scale(.7,.7); position: relative;

left: 10px; }

/*

• /

.second_s{ height: 0%; }

1. third_0{

width: 100%; height: 100px; background-color: #fff; font-family: 'DIN Condensed'; text-align: center; line-height: 100px; font-size: 45px; color: #205098FF; }

1. third_1{

width: 90%; height: calc(100% - 100px); background-color: rgba(255,192,203,0.00); position: relative; margin: 0 auto; } .t1inb{ width: 20%; height: 100%; float: left;

}

.t1inb:nth-child(2n){ background-color: #fff;

}

.imgdo{ top: 20px;

}

.t1nb0{ height: 200px; position: relative; background-color: transparent; } .t1nb1{ height: calc(100% - 250px); position: relative; width: 90%; margin: 0 auto; background-color: green; border-top-right-radius: 27px; border-bottom-left-radius: 36px; background-color: rgba(51,125,255,0.27); }

.t1nb11{ height: calc(100% - 10%); position: relative; width: 80%; font-size: 1.3vw; top: 10%; margin: 0 auto; text-align:center;

}

.t1do{ top: 50px;

} .t1nb0 img{ display: block; top: 15px; position: relative; margin:0 auto; }

1. hparrow{

width: 100%; position: absolute; top: 50%; right: 20%;

} @font-face{ font-family: 'DIN Condensed B'; src: url(' file:///F:/Jilin_China%202019/font/DINCond-Bold.otf'); /*src: url('https://static.igem.org/mediawiki/2019/0/05/T--Jilin_China--Home--Font--Condense.otf');*/ font-size: normal; font-weight:normal; } .din{ font-family: 'DIN Condensed B'; }

.renwu{ background-size: cover; width: 200px !important; height:200px; }

.third_s{ height: 720px; position: relative; }

1. forth_0{

width: 90%; height: 80px; position: relative; margin: 0 auto; color: #205098FF;

}

1. forth_1{

width: 78%; height: auto; font-family: 'JLUCN'; position: relative; margin: 0 auto; text-align: justify;

   font-size: 23px;
   color: #444;
   font-weight: bold;
   line-height: 140%;
   margin-top: 10px;

}

.fifth{ height: auto; width: 100%; margin-top: 100px; position: relative;

}

.sidebar{ width: 6%;

position: absolute; height: 100%; background-color: transparent; }

.sbr{ right: 5%; } .sbl{ left: 5%; }

.fiftxt0{ /*h1 title*/ width: 80%; position: relative;

   left:11%; 
   margin-top: 80px;
   margin-left: 30px;
   font-size: 70px;
   text-align: right;
   color: #149;

}

.fiftxt1{ width: 800px; position: relative;

   left:11%; 
   font-size: 40px;
   text-align: left;
   margin-top: 30px;
   margin-left: 30px;
   color: #149;

} .fiftxt2{ width:500px; position: relative;

   left:11%; 
   margin-top: 20px;
   margin-left: 30px;
   font-size: 70px;
   text-align: left;
   color: #149;

} .fiftxt3{ width: 80%; position: relative;

   left:11%; 
   margin-top: 80px;
   margin-left: 30px;
   font-size: 60px;
   text-align: right;
   color: #149;

} .fiftxt30{ width: 80%; position: relative;

   left:11%; 
   margin-top: 40px;
   margin-left: 30px;
   font-size: 40px;
   text-align: right;
   color: #149;

}

.ftc{ text-align: center !important; margin-left: auto; margin-right: auto; left: 0px;

} .project_block{ background: rgba(222,255,255,1); padding: 2rem 0; box-sizing: border-box; } .fiftxtout1{ width: 80%; margin-top: 30px; position: relative; left: 13%;

}

.fiftxtout2{ width: 80%;

margin-top: 30px; position: relative; left: 5%; }

.toleft{ left: 2%; }

.toright{ right: 2%; }

.hp-img{ padding:0 2rem 2rem; box-sizing: border-box; }

.fl-left{ float: left; clear: both; padding:0 2rem 4rem 0; } .fl-right{ float: right; clear: both; padding:0 0 4rem 2rem; }

1. cyq{

background-image: url('../img/cyq.jpg'); }

1. lzx{

background-image: url('../img/lzx.jpg'); }

1. xhy{

background-image: url('../img/xhy.jpg'); }

1. lyy{

background-image: url('../img/lyy.jpg'); }

1. gf{

background-image: url('../img/gf.jpg'); }

1. yxh{

background-image: url('../img/yxh.jpg'); }

1. xtm{

background-image: url('../img/xtm.jpg'); }

1. lzxp{

background-image: url('../img/lzxp.jpg'); background-size: cover; }

1. brp{

background-image: url('../img/brp.jpg'); background-size: cover; }

1. xhyp{

background-image: url('../img/xhyp.jpg'); background-size: cover; }

1. gfp{

background-image: url('../img/gfp.jpg'); background-size: cover; }

1. gzjp{

background-image: url('../img/gzjp.jpg'); background-size: cover; }

1. yxhp{

background-image: url('../img/yxhp.jpg'); background-size: cover; }

1. xtmp{

background-image: url('../img/xtmp.jpg'); background-size: cover; }

1. ydp{

background-image: url('../img/ydp.jpg'); background-size: cover; }

1. lyyp{

background-image: url('../img/lyyp.jpg'); background-size: cover; }

1. img_0{/*Alter*/

}

1. img_1{

}

1. img_2{

}

1. img_3{

}

1. img_4{

background-image: url('../img/5.jpg'); background-size: contain; }

.fiftxt4{ width:95%; /*height: 100%;*/ font-family: 'JLUCN'; display: table; overflow:auto; font-size: 23px; overflow-y: auto; vertical-align: middle; }

.fiftxt41{ width:95%; margin-left:5%; }

.guodu{ width: 60% !important; font-size: 25px !important; margin-top: 60px !important; }

@media ( min-width: 350px ){

.fiftxt7{ font-size: 25px; } .fiftxt8{ font-size: 25px; }

.third_s{ height: 450px; }

}

@media ( min-width: 750px ){

.third_s{ height: 550px; }

.fiftxt7{ font-size: 28px; } .fiftxt8{ font-size: 25px; }

}

@media ( min-width: 1150px){

.third_s{ height: 650px; }

.fiftxt41{

line-height: 150%;

}

.fiftxt7{

font-size: 45px; } .fiftxt8{ font-size: 30px; }

}

.fifimg0{ position: absolute;

   background-position: center center;
   background-repeat: no-repeat;

}

.fifimg1{ width:30%;

} .fifimg2{ width:50%; } .fifimg3{ width:40%; } .fifimg4{ width:50%; } .fiftxt5{ width:80%; margin:0 auto; position: relative; font-family: 'JLUCN'; display: block; overflow:auto; font-size: 23px; margin-top: 20px;

}

.fiftxt6{ width: 80%; position: relative;

 	left: 11%;
   margin-top: 40px;
   margin-left: 30px;
   font-size: 45px;
	text-align: right;
   color: #149;

}

.fiftxtout3{ width: 80%; height: 200px; margin-top: 30px; position: relative; left: 13%;

}

.fiftxt7{ width: calc(80% - 200px); position: absolute;

   margin-top: 10px;
   margin-left: 30px;
   
   top: 0px;

   

}

.fiftxt8{ width: calc(80% - 200px); position: absolute;

   margin-top: 20px;
   margin-left: 30px;
  
   top: 60px;

 

} .tor{ left: 28% !important; } .fiftxt9{ width:60%;

font-family: 'JLUCN'; position: relative;

    margin-left: 30px;
    margin-top: 20px;

left: 13%;

   font-size: 23px;
   text-align: left;
  background-color: #81B5E6FF; 
  border-radius: 10px;
 color: #000;
  padding:25px 25px;

} .fiftxt10{ width:78%;

font-family: 'JLUCN'; position: relative;

    margin-left: 30px;
    margin-top: 50px;

left: 13%;

   font-size: 23px;
   text-align: left;
 

}

.ftl{ text-align: left; left: 5%; margin-left: 20px; } .m600{ height: 600px; } .m500{ height: 500px; } </style>