<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; }
/**
- 第一部分
- /
- 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%; }
- first_s #nav_bg{
height: 80px; color: rgba(255,255,255,1.00); transition: 0.5s; }
- first_s {
height: 80px; color: rgba(255,255,255,1.00); left: 0px; padding: 0 0; }
- first_s .navbar-header {
width: 20%;
height: 80px; left: 0px; position: absolute;
}
- first_s .navbar-brand {
font-size: 24px; line-height: 72px; left: 10%; position: absolute; color: rgba(65,4,3,1.00); }
- 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; } /*
- daohangtiao{
position: fixed !important; }
- /
- 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;
}
- first_s >ul>li:hover a{
color: #fff;
}*/
- 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; }
- logotext{
width: 200px; height: 100%; font-size: 25px !important; left:calc(70px + 10%); position: absolute; }
- first_s li ul
{ width: 100%; list-style: none; padding-left: 0; text-align: center; position: absolute; display: none; height: auto;
}
- first_s .last
{ right: 0%;
}
/*#first_s li:hover > ul { display: block; }*/
- 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; }
- first_s li ul li ul
{ width: 100%;
position: absolute; left:100%; top:0; display: none; margin-top: -6px; margin-left: 1px;
}
- first_s li ul li li
{ height: 45px; line-height: 53px; padding-top: 0px; padding-bottom: 0px; position: absolute; background-color: #fff; opacity: 0;
}
- 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; }
- first_s .menu_tab_out{
display: block; height: 480px; padding: 0 0; overflow: hidden; position: relative; z-index: -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;
}
- first_s .menu_tab_s{
height: 100%; width: 100px; float: left; }
- first_s .menu_tab_s:hover .menu_i{
color: #fff; }
- first_s .menu_tab_s:hover .menu_span{
color: #fff; }
- first_s .menu_tab_s:hover{
background-color: #000; }
- first_s .menu_a{
margin-top: 5px; height: 100%; width: 100%; display: block; }
- first_s .menu_i{
height: auto; width: 100%; font-size: 40px; text-align: center; }
- first_s .menu_span{
height: auto; width: 100%; display: block; font-size: 10px; text-align: center; margin-bottom: 5px; }
- first_s .menu_tab_sr{
right: 0px; bottom: 0px; height: 67px; width: 150px; float: right; position: absolute; }
- 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; }
- navProgBar1{
width: 100%; height: 5px; background-color: #facd89; position: absolute; opacity: 0; top: 80px; z-index:50; }
- 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; }
- logo{
width: auto; height:100%; transform: scale(.7,.7); position: relative;
left: 10px; }
/*
- /
.second_s{ height: 0%; }
- third_0{
width: 100%; height: 100px; background-color: #fff; font-family: 'DIN Condensed'; text-align: center; line-height: 100px; font-size: 45px; color: #205098FF; }
- 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;
}
- 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; }
- forth_0{
width: 90%; height: 80px; position: relative; margin: 0 auto; color: #205098FF;
}
- 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; }
- cyq{
background-image: url('../img/cyq.jpg'); }
- lzx{
background-image: url('../img/lzx.jpg'); }
- xhy{
background-image: url('../img/xhy.jpg'); }
- lyy{
background-image: url('../img/lyy.jpg'); }
- gf{
background-image: url('../img/gf.jpg'); }
- yxh{
background-image: url('../img/yxh.jpg'); }
- xtm{
background-image: url('../img/xtm.jpg'); }
- lzxp{
background-image: url('../img/lzxp.jpg'); background-size: cover; }
- brp{
background-image: url('../img/brp.jpg'); background-size: cover; }
- xhyp{
background-image: url('../img/xhyp.jpg'); background-size: cover; }
- gfp{
background-image: url('../img/gfp.jpg'); background-size: cover; }
- gzjp{
background-image: url('../img/gzjp.jpg'); background-size: cover; }
- yxhp{
background-image: url('../img/yxhp.jpg'); background-size: cover; }
- xtmp{
background-image: url('../img/xtmp.jpg'); background-size: cover; }
- ydp{
background-image: url('../img/ydp.jpg'); background-size: cover; }
- lyyp{
background-image: url('../img/lyyp.jpg'); background-size: cover; }
- img_0{/*Alter*/
}
- img_1{
}
- img_2{
}
- img_3{
}
- 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>