Template:BIT-China/css/common-style

@font-face { 

 font-family: 'helveticaregular';
 src: url('https://static.igem.org/mediawiki/2018/b/bb/T--BIT-China--iGEM2018-helvetica-webfont.eot');
 src: url('https://static.igem.org/mediawiki/2018/b/bb/T--BIT-China--iGEM2018-helvetica-webfont.eot?#iefix') format('embedded-opentype'), url('https://static.igem.org/mediawiki/2018/c/c0/T--BIT-China--iGEM2018-helvetica-font-woff.woff') format('woff'), url('https://static.igem.org/mediawiki/2018/7/7f/T--BIT-China--iGEM2018-helvetica-font-ttf.ttf') format('truetype'), url('https://static.igem.org/mediawiki/2018/1/1b/T--BIT-China--iGEM2018-helvetica-font-svg.svg#helveticaregular') format('svg');
 font-weight: normal;
 font-style: normal;

} @font-face { 

 font-family: 'kg_second_chances_solidRg';
 src: url('https://static.igem.org/mediawiki/2018/0/00/T--BIT-China--iGEM2018-kgsecondchancessolid-font-eot.eot');
 src: url('https://static.igem.org/mediawiki/2018/0/00/T--BIT-China--iGEM2018-kgsecondchancessolid-font-eot.eot?#iefix') format('embedded-opentype'), url('https://static.igem.org/mediawiki/2018/9/96/T--BIT-China--iGEM2018-kgsecondchancessolid-font-woff.woff') format('woff'), url('https://static.igem.org/mediawiki/2018/1/1b/T--BIT-China--iGEM2018-kgsecondchancessolid-font-ttf.ttf') format('truetype'), url('https://static.igem.org/mediawiki/2018/3/3a/T--BIT-China--iGEM2018-kgsecondchancessolid-font-svg.svg#kg_second_chances_solidRg') format('svg');
 font-weight: normal;
 font-style: normal;

}

body, html { 

 background: #E6E6E6;
 overflow-x: hidden;
 margin: 0;

}

img { 

 width: auto;
 height: auto;
 max-width: 100%;
 max-height: 100%;

}

ul { 

 list-style-type: none;
 list-style: none;
 margin: 0;
 padding: 0;

}

ul li { 

 list-style-type: none;

}

  1. left-nav {
 position: fixed;
 z-index: 9;
 margin: 0;
 padding: 0;
 width: 100px;

 left: 5.12vw;
 top: calc(28vh + 20px);
 line-height: 25px;
 display: flex;
 display: -webkit-box;
 display: -moz-box;
 display: -ms-flexbox;
 display: -webkit-flex;

 flex-direction: column;

}

  1. left-nav ul {
 line-height: 1.2em;

}

  1. left-nav > li {
 font-size: 20px;
 width: 260px;
 margin-top: 0;
 margin-bottom: 15px;

}

  1. left-nav li:hover {
 cursor: pointer;

}

  1. left-nav li > ul {
 margin: 0 5px;
 padding: 0 5px;

}

  1. left-nav li > ul li {
 display: flex;
 display: -webkit-box;
 display: -moz-box;
 display: -ms-flexbox;
 display: -webkit-flex;
 flex-direction: column;
 margin-top: 8px;
 font-size: 12px;

}

  1. left-nav a {
 text-decoration: none;
 color: #131313;
 font-family: 'kg_second_chances_solidRg';

}

  1. left-nav a:hover {
 color: rgb(150, 150, 150);

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

}

.imgA-old-pos { 

 z-index: 9;
 position: fixed;

 top: 0;
 left: 63vw;

 width: 345px;
 height: 360px;

}

.imgA-new-pos { 

 z-index: 9;
 position: fixed;

 left: 3vw;
 top: .5vh;

 width: 172.2px;
 height: 180px;

}

.a_style { 

 font-family: 'kg_second_chances_solidRg';
 font-size: 20px;
 color: #131313;
 text-decoration: none;

}

.p_style { 

 font-family: 'helveticaregular';
 font-size: 15px;
 /*行间距*/
 line-height: 30px;
 margin-top: 5px;
 color: #131313;

 word-wrap: break-word;
 word-break: keep-all;
 text-align: justify;
 text-justify: inter-ideograph;

}

/* HP css start */ .content_container { 

 position: relative;
 left: 25vw;
 width: 60vw;
 padding: 0;
 background-color: transparent;

}

.section-upline { 

 /*display: block;*/
 width: 100%;
 /*height: 1px;*/
 /*margin-bottom: 80px;*/

}

.title-h3 { 

 font-size: 30px;
 color: #131313;
 font-weight: bold;
 letter-spacing: 3px;
 font-family: 'kg_second_chances_solidRg';

}

.my-content-p { 

 width: 100%;
 margin: auto;
 font-family: 'helveticaregular' !important;
 font-weight: 500 !important;
 font-size: 16px !important;
 line-height: 1.7 !important;
 margin-bottom: 20px;
 color: #131313;

 word-wrap: break-word;
 word-break: keep-all;
 text-align: justify;
 text-justify: inter-ideograph;

}

.my-img-box { 

 display: flex;
 /* justify-content: space-around; */

}

.my-img-box img { 

 width: 50%;
 height: 50%;
 margin-bottom: 2rem;
 /* border-radius: 10px; */

} /* end */

.footer-all { 

 bottom: 0;
 font-family: 'helveticaregular';
 position: relative;
 left: 25vw;
 width: 60vw;
 height: 170px;
 padding: 0;
 border-top-style: solid;
 color: #131313;

}

.footer-left { 

 position: absolute;
 top: 15px;
 left: 0;
 width: 30%;
 vertical-align: top;

}

.footer-left img { 

 width: 100%;

}

.footer-right { 

 position: absolute;
 top: 15px;
 right: 0;
 width: 63%;

}

.footer-info { 

 position: relative;
 font-size: 15px;
 color: rgb(161, 161, 161);
 width: 100vw;
 text-align: center;

}