/*BASIC */

@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');

* {
	padding: 0%;
	margin: 0%;
	box-sizing: border-box;
	list-style: none;
	text-decoration: none;
}

:root {
	--font-size-text-mb: .8em;
	--font-size-text: 1em;
	--font-size-h1: 3em;
	--font-size-h2: 2em;
	--font-size-h3: 1.5em;
	--purple-bg: #d1d8ff;
	--purple-lighter: #cbd2ff;
	--purple-lighter: #d5dcff;
	--purple-light: #9977f9;
	--purple-dark: #6951c5;
	--blue-lighter: #dfe9f9;
	--blue-light: #b8cdf5;
	--blue-medium: #94aff6;
	--blue-dark: #1b6cda;
	--blue-darker: #1a4198;
	--grey-dark: #363739;
	--grey-darker: #131415;
	--gray: #898989;
}

body {
	width: 100vw;
	overflow-x: hidden;
	background-color: var(--purple-bg);
	font-family: 'Poppins', sans-serif;
}

/* HEADER */
.header {
	width: 100%;
	height: 100vh;
}

.header-inpage{
	height: 110px;
}

/* header-bg */
.header-bg-video {
	top: -8%;
	position: fixed;
	margin: 0;
	width: 100vw;
	object-fit: cover;
	object-position: center;
	padding: 0%;
}

/* nav-pc */
.main-nav-pc {
	position: fixed;
	/* position:sticky; */
	width: 100%;
	background-color: var(--purple-lighter);
	z-index: 100;
	display: flex;
    justify-content: center;
    align-items: center;
}

.main-nav-pc.stick{
		background-color: var(--purple-lighter);
}
.main-nav-pc.stick .main-nav-logo-pc-wrap{
		/* display: none; */
}




.main-nav-logo-pc-wrap{
	position: absolute;
	width: 105px;
	top: 6px;
	left: 91px;

}

.main-nav-logo-pc {
	/* height: 4.5em;
	padding: .5em;
	margin-left: .5em; */
	width: 100%;
}

.main-nav-ul-pc {
    display: flex;
    background: #fff;
    padding: 10px;
    margin: 30px 0;
	border-radius: 5px;
}

.main-nav-li-pc {
	position: relative;
    margin: 0 2.5em;
    text-align: center;
}

.main-nav-a-pc {
	color: var(--blue-darker);
	padding: .8em;
	font-size: 1.2em;
	font-weight: 400;
}

.main-nav-a-pc:hover {
	color: var(--blue-dark);
	background-color: var(--purple-bg);
}

.sub-nav-ul-pc {
	display: none;
	position: absolute;
	top: 2.5em;
	box-shadow: 1px 2px 3px #888;
	background-color: var(--purple-bg);
}

.sub-nav-li-pc {
    position: relative;
    width: 12em;
    padding: 1em 0;

}

.main-nav-li-pc:hover .sub-nav-ul-pc {
	display: block;
}

.sub-nav-a-pc {
	color: var(--blue-darker);
	display: block;
    position: relative;
    height: 100%;
    width: 100%;
    text-align: left;
    padding-left: 15px;
}

.sub-nav-li-pc:hover {
	background-color: var(--purple-lighter);
}

.sub-nav-li-pc:hover .sub-nav-a-pc {
	color: var(--blue-dark);
}

/* nav-mb */
#show-mobile-nav-logo {
	position: fixed;
	z-index: 5000;
}

#main-nav-mb {
	position: fixed;
	top: -1000px;
	width: 100%;
	background-color: var(--purple-lighter);
	z-index: 10000;
	transition: 1s;
}

#hide-mobile-nav-cross {
	margin: 10px;
	position: absolute;
	z-index: 20000;
}

.main-nav-logo-mb {
	height: 3em;
	padding: .5em;
	margin-left: .5em;
}

.main-nav-ul-mb {
	display: flex;
	flex-direction: column;
}

.main-nav-li-mb {
	text-align: center;
	padding: 2em;
	margin-right: 1em;
	color: var(--blue-darker);
}

.main-nav-a-mb {
	font-size: var(--font-size-text);
}

.sub-nav-ul-mb {
	left: 0%;
	position: absolute;
	display: none;
	background-color: var(--blue-lighter);
	width: 100%;
}

.sub-nav-li-mb {
	padding: 1em 0;
}

.sub-nav-li-mb:hover .sub-nav-a-mb {
	color: var(--blue-dark)
}

.main-nav-li-mb:hover .sub-nav-ul-mb {
	display: block;
}

.main-nav-li-mb:hover {
	color: var(--blue-dark);
}

.main-nav-mb {
	display: none;
}


.main-inpage{
	padding-top:140px;
	    width: 90vw;
    margin: auto;
}

.main-nav-li-pc{
	margin: 0 2em;
}

@media screen and (max-width:1360px) {
	.main-nav-logo-pc-wrap {
		width: 75px;
		top: 19px;
	}

	.main-nav-li-pc{
		margin: 0 1em;
	}
}
@media screen and (max-width:1366px) {
	.header-bg-video {
		top: 7%;
	}
}



@media screen and (max-width:768px) {
	.header-bg-video {
		top: -8%;
	}

	.main-nav-pc {
		display: none;
	}

	.main-nav-mb {
		display: block;
	}
}

@media screen and (max-width:600px) {
	.main-nav-logo-mb {
		height: 2em;
	}
}

/* header-text */
.header-text-container {
	width: 100%;
	height: 60px;
	position: fixed;
	top: 100px;
	display: block;
}

.header-text {
    padding: 0.1em;
    padding-left: 0.15em;
    padding-right: 0.15em;
    font-weight: 800;
    font-size: 30px;
    width: 50em;
    text-align: left;
    left: 5%;
    position: absolute;
    top: 52px;
}

.header-text a{
	color: #000;
    font-weight: bold;
    font-size: 54px;
}

@media screen and (max-width:820px) {
	.header-text-container {
		top: 50%;
	}

	.header-text {
		font-size: 4em;
		left: 50%;
		transform: translateX(-50%);
	}

	.header-bg-video {
		top: 7%;
	}
}

@media screen and (max-width:768px) {
	.header-text-container {
		top: 60%;
	}

	.header-text {
		font-size: 3em;
		left: 50%;
		transform: translateX(-50%);
	}
}

@media screen and (max-width:425px) {
	.header-text-container {
		top: 55%;
	}

	.header-text {
		left: 50%;
		font-size: 2em;
		transform: translateX(-50%);
	}
}

/* MAIN */
main {
	background-color: #94aff6;
	position: absolute;
	z-index: 98;
	top: 92vh;
	width: 100vw;
	scroll-behavior: smooth;
	font-size: var(--font-size-text);
}

@media screen and (max-width: 767px) {
	main {
		font-size: var(--font-size-text-mb);
	}
}

/* main-starter */
.main-starter {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 70px;
	background-color: var(--purple-lighter);
}

.main-starter-arrow {
	width: 60px;
	border-radius: 10px;
	margin-top: 5px;
}

.main-starter-arrow:hover {
	box-shadow: 0 0 1em #fff;
}

/* main-content */
#main-content {
	width: 100%;
	background-color: transparent;
	display: flex;
	
	justify-content: center;
	

    background-image: url(https://static.igem.wiki/teams/4409/wiki/lab.png);
    background-size: 410px;
    background-repeat: no-repeat;
    background-position: right bottom;	
}

#main-content.main-content--index{
align-items: center;
flex-direction: column;
}

.container {
	margin: 2vh;
	width: 90%;
	/* height: 60vh; */
	background-color: rgba(255, 255, 255, 25%);
	padding-top: 10px;
	padding-bottom: 10px;
}

.container--noheight{
	height: auto;
}


.container--p30{
	padding: 30px;
	background-color: none;
}

/* grid-universal */
.grid {
	position: relative;
	/* 	background-color: #1a4198; */
	width: 100%;
	height: 100%;
	display: grid;
	flex-grow: 999;
}

.grid-item {
	position: relative;
	padding: 20px;
	display: flex;
	justify-content: center;
	background-color: #eeeeeed1;
	overflow: auto;
}

.grid-item--title{
	font-size: 22px;
    font-weight: bold;
    margin-bottom: 30px;
    background-image: url(https://static.igem.wiki/teams/4409/wiki/019-dna.png);
    background-repeat: no-repeat;
    padding-left: 70px;
    background-position: left top;
    background-size: 50px;
    min-height: 50px;
    line-height: 50px;
}

.grid-item--text-left{
	display: block;
	text-align: left;
	padding: 50px;
}

.grid-item--p{
	text-indent: 2em;
	line-height: 1.8;
	margin-bottom: 30px;
}

.grid-2-equal {
	grid-template-columns: repeat(2, 1fr);
	grid-gap: 1em;
}

.grid-3 {
	grid-template-columns: repeat(3, 1fr);
	grid-gap: 1em;
}

.grid-2-unequal {
	grid-template-columns: 1fr 3fr;
	grid-gap: 1em;
}

.grid-4 {
	grid-template-columns: repeat(4, 1fr);
	grid-gap: 1em;
}

/* sliders */
.slider {
	opacity: 0;
	transition: opacity 250ms ease-in, transform 400ms ease-in;
}

.lefter {
	transform: translateX(-50%);
}

.righter {
	transform: translateX(50%);
	transition-delay: 150ms;
}

.lefter.show,
.righter.show {
	opacity: 1;
	transform: translateX(0);
}

@media screen and (max-width:767px) {
	.grid-2-equal {
		grid-template-columns: repeat(1, 1fr);
	}
}

/* faders */
.fader {
	opacity: 0;
	transition: opacity 250ms ease-in;
}

.fader.show {
	opacity: 1;
}

@media screen and (max-width:767px) {
	.grid-3 {
		grid-template-columns: repeat(1, 1fr);
	}
}

/* uppers */
.upper {
	transform: translateY(100%);
}

.upper.show {
	opacity: 1;
	transform: translateY(0);
}

.mb-img-box {
	background-color: #1b6cda;
	width: 100%;
}

@media screen and (max-width:767px) {
	.grid-2-unequal {
		grid-template-columns: repeat(1, 1fr);
	}
}

/* cards */
.card {
	position: absolute;
	top: 0%;
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}

.card-content {
	position: absolute;
	width: 95%;
	height: 98%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.card-img {
	margin: 2%;
	margin-top: 0%;
	height: 33%;
	width: 100%;
	background-color: whitesmoke;
}

.card-text {
	margin: 2%;
	height: 48%;
	width: 100%;
	background-color: whitesmoke;
}

.card-btn-container {
	margin: 2%;
	height: 8%;
	width: 100px;
	background-color: whitesmoke;
	border-radius: 10px;
}

.card-btn {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100%;
}

.card-btn:hover {
	background-color: #eee;
}

@media screen and (max-width: 767px) {
	.card-content {
		height: 100%;
	}

	.card-btn-container {
		width: 50px;
		border-radius: 5px;
	}
}

.footer {
	/* width: 100vw;
	background-color: #eee;
	height: 40vh;
	display: flex;
	justify-content: center;
	align-items: center; */
	background: #8b9df7;


}

.footer-main{
	background: none;
    margin: auto;
    display: flex;
    justify-content: center;
    height: auto; padding: 30px 0;
}

.footer-main img{
	max-width: 100%;
}

/* .footer-main .logo{
	width: 180px;
    padding: 0 10px;
    display: flex;
    justify-content: center;
    justify-items: center;
    align-items: center;
    margin-right: 40px;
} */
.footer-main .logo2{
    width: 240px;
    display: flex;
    justify-content: center;
    justify-items: center;
    align-items: center;
    margin-right: 60px;
    flex-direction: column;
}

.footer-main .qrcode{
	width: 160px;   
 
	margin-right: 60px;
}

.footer-main .contract-us{
	margin-right: 60px;
}

.footer-menu{
	display: flex;
}

.footer-menu ul{
	margin-right: 24px;
}
.footer-menu ul .title{color: #000;
	font-weight: bold;
}
.footer-menu li{
	color: #424242;
    font-size: 17px;
    line-height: 2.3;
}

.footer-menu a,.contract-us--text,.contract-us--title{
	color: #1169ac;
}

.contract-us--title{
	font-weight: bold;
    font-size: 22px;
    margin-bottom: 10px;
}
 


/* show-mb/show-pc */
.show-mb {
	display: none;
}


/* 回到顶部 */
.wgtop{
	position: fixed;
	width: 50px;
	height: 50px;
	background-color: #009970;
	text-align: center;
	background-repeat: no-repeat;
	background-position: center 35%;
	cursor: pointer;
	background-size: 56%;
	margin-bottom: 3px;
	border-radius: 4px;
	right: 100px;
	bottom: 70px;
	z-index: 2;
	opacity: 0;
	box-shadow: 1px 1px 3px #000;
	transition: all 1s;
}

.wgtop img{
	width: 35px;
	margin-top: 8px;
}





@media screen and (max-width: 767px) {
	.show-mb {
		display: block;
	}

	.show-pc {
		display: none;
	}
}



/* 回到顶部 */
.wgtop{
	position: fixed;
	width: 50px;
	height: 50px;
	background-color: var(--purple-dark);;
	text-align: center;
	background-repeat: no-repeat;
	background-position: center 35%;
	cursor: pointer;
	background-size: 56%;
	margin-bottom: 3px;
	border-radius: 4px;
	right: 100px;
	bottom: 20px;
	z-index: 10001;
	opacity: 0;
	box-shadow: 1px 1px 3px #000;
	transition: all 1s;
}

.wgtop img{
	width: 35px;
	margin-top: 8px;
}


/* bootstrap 样式修改 */
a{
	text-decoration: none;
}

ul{
	padding-left: 0;
}


/* 页面控制 */
.hero {
	display: flex;
	gap: 4em;
	background-color: var(--blue-lighter);
	padding: 0 4em;
}

/* side-bar */
/* .side-bar-container {
	padding-top: 2em;
	border-right: var(--blue-medium) solid .3em;
	width: 15em;
} */

.side-bar {
    position: sticky;
    padding: 1em;
    top: 8em;
    /* background-color: #fefef4; */
    width: 16em;
    height: 100px;
    margin-top: 1em;
		overflow: auto;
    height: calc(100vh - 146px);
}

.side-bar a{
	color: #333;
    text-shadow: 1px 1px 3px #33333352;
    font-size: 16px;
    line-height: 1.6;
}

.side-bar a:hover{
	color: #6951c5;
}

.side-bar li ul {
    margin-left: 16px;
}

img{
	max-width: 100%;
}

/* 正文内容设置 */
.Section0 img{
	display: block;
	margin: auto;
	margin-bottom: 10px;
	max-width: 100%;
}

.Section0 table{
	margin: auto;
	background-color: #fff;

}

.Section0 table td{
	padding: 10px;
}

.onpicture{
	text-align: center;
}

.onpicture img {
    display: inline-block;
}

.Section0 img[width="8"],
.Section0 img[width="9"],
.Section0 img[width="10"],
.Section0 img[width="11"],
.Section0 img[width="12"],
.Section0 img[width="13"],
.Section0 img[width="14"],
.Section0 img[width="15"],
.Section0 img[width="16"],
.Section0 img[width="17"],
.Section0 img[width="18"],
.Section0 img[width="19"],
.Section0 img[width="20"],
.Section0 img[width="21"],
.Section0 img[width="22"],
.Section0 img[width="23"],
.Section0 img[width="24"],
.Section0 img[width="25"],
.Section0 img[width="26"],
.Section0 img[width="27"],
.Section0 img[width="28"],
.Section0 img[width="29"],
.Section0 img[width="30"],
.Section0 img[width="31"],
.Section0 img[width="32"],
.Section0 img[width="33"],
.Section0 img[width="34"],
.Section0 img[width="35"],
.Section0 img[width="36"],
.Section0 img[width="37"],
.Section0 img[width="38"],
.Section0 img[width="39"],
.Section0 img[width="40"],
.Section0 img[width="41"],
.Section0 img[width="42"],
.Section0 img[width="43"],
.Section0 img[width="44"],
.Section0 img[width="45"],
.Section0 img[width="46"],
.Section0 img[width="47"],
.Section0 img[width="48"],
.Section0 img[width="49"],
.Section0 img[width="50"],
.Section0 img[width="51"],
.Section0 img[width="52"],
.Section0 img[width="53"],
.Section0 img[width="54"],
.Section0 img[width="55"],
.Section0 img[width="56"],
.Section0 img[width="57"],
.Section0 img[width="58"],
.Section0 img[width="59"],
.Section0 img[width="60"],
.Section0 img[width="61"],
.Section0 img[width="62"],
.Section0 img[width="63"],
.Section0 img[width="64"],
.Section0 img[width="65"],
.Section0 img[width="66"],
.Section0 img[width="67"],
.Section0 img[width="68"],
.Section0 img[width="69"],
.Section0 img[width="70"],
.Section0 img[width="71"],
.Section0 img[width="72"],
.Section0 img[width="73"],
.Section0 img[width="74"],
.Section0 img[width="75"],
.Section0 img[width="76"],
.Section0 img[width="77"],
.Section0 img[width="78"],
.Section0 img[width="79"],
.Section0 img[width="80"],
.Section0 img[width="81"],
.Section0 img[width="82"],
.Section0 img[width="83"],
.Section0 img[width="84"],
.Section0 img[width="85"],
.Section0 img[width="86"],
.Section0 img[width="87"],
.Section0 img[width="88"],
.Section0 img[width="89"],
.Section0 img[width="90"],
.Section0 img[width="91"],
.Section0 img[width="92"],
.Section0 img[width="93"],
.Section0 img[width="94"],
.Section0 img[width="95"],
.Section0 img[width="96"],
.Section0 img[width="97"],
.Section0 img[width="98"],
.Section0 img[width="99"],
.Section0 img[width="100"]
{
	display: inline-block;
}


@media (min-width: 1200px){
	.h2, h2 {
		font-size: 1.4rem;
	}
}


@media (min-width: 1200px){
	.h3, h3 {
		font-size: 1rem;
		font-weight: bold;
	}
}


.parts-table{
	background-color: #fff;
}
.parts-table th{
	background-color: #753192;
	text-align: center;
	font-size: 18px;
	font-family: Calibri;
	color: white;
	padding:10px;
	border: 1px #666 solid;
}

.parts-table td{
	padding:10px;
	border: 1px #666 solid;
}


.smile tr:nth-of-type(2n){
	background-color: #dbe5f1;
}

.smile tr:first-child{
	background-color: #4f81bd;

}

.smile td{
	border: 1px #4f81bd solid;
	 
}