/* 侧导航字体 */


/* 一级标题 */

#navbar-example3 a {
    font-size: .8em;
    font-weight: 800;
}


/* 二级标题 */

#navbar-example3>nav>nav>a {
    font-size: .8em;
}


/* 有侧导航时把所有内容右移 */

.page-all-content {
    width: 80%;
    position: relative;
    left: 21%;
}


/* 标题背景图 */

.bg-hero {
    background-color: #FEF8D9;
    background-image: url('https://static.igem.wiki/teams/4632/wiki/wiki/cover/project-cover.png');
    background-repeat: no-repeat;
    background-size: 70% auto;
    background-position: 80%;
}


/* 二级标题 */

.sed_title {
    margin: 1rem 0 1rem 0;
}


/* 手机：内容居中 */

@media (max-width:830px) {
    .page-all-content {
        width: 90%;
        left: 4%
    }
    .bg-hero {
        background-size: 70% auto;
        background-position: 80% 30%;
    }
}


/* 二级标题 */

.title2 {
    /* text-align: center; */
    margin-left: 1rem;
    font-size: 25px;
}

.part {
    /* float: left; */
    margin: 1rem 0rem 0rem 0rem;
    width: 100%;
}

.part2 {
    float: left;
    margin: 1rem 0rem 0rem 0rem;
    width: 100%;
}

.page a {
    text-decoration: none;
    color: rgb(104, 90, 184);
}

.page a:hover {
    color: rgb(137, 126, 195);
    text-decoration: none;
}


/* 左边文字 */

.left_p {
    float: left;
    width: 55%;
    margin-left: 1rem;
    /* margin: 1rem 1rem 1rem 1rem; */
}


/* 右边的图片 */

.right_img {
    float: right;
    text-align: center;
    /* height: 200px; */
    width: 40%;
    /* background-color: rgb(236, 236, 236); */
}

.midst-img {
    width: 17rem;
    padding: 1rem 0;
    /* width: 100%;
    height: auto;
    margin: 0 1rem; */
}

.max-img {
    /* width: 45rem;
    padding: 1rem 0; */
    width: 100%;
    height: auto;
    margin: 0 1rem;
}

.hide-img {
    text-align: center;
    width: 35rem;
    padding: 0.5rem 0;
    height: auto;
    margin: 0 1rem;
}


/* 左边图片 */

.left_img {
    text-align: center;
    float: left;
    width: 45%;
    /* height: 200px; */
    /* margin: 1rem 1rem 1rem 1rem; */
    /* background-color: rgb(236, 236, 236); */
}


/* 右边的文字 */

.right_p {
    float: right;
    /* margin-left: 55%; */
    width: 55%;
}

.hide-part {
    margin-top: 1rem;
}


/* 上面文字 */

.top_p {
    float: inherit;
    width: 100%;
    /* margin-top: 1rem; */
    margin: 0rem 1rem 1rem 1rem;
}


/* 下面图片 */

.bottom_img {
    text-align: center;
    /* float: inherit;
    width: 100%;
    height: 100%;
    margin: 0rem 1rem 1rem 1rem;
    direction: ltr;
    overflow: auto; */
}


/* .title3移到container.css了 */


/* 提醒文字 */

.tips_p {
    text-align: center;
    font-size: 15px;
    color: rgb(62, 62, 62)
}


/* 手机：内容居中 */

@media (max-width:830px) {
    .left_p {
        width: 100%;
    }
    .right_img {
        width: 100%;
        text-align: center;
        /* height: 200px; */
    }
    .left_img {
        width: 100%;
        /* height: 200px; */
    }
    .right_p {
        width: 100%;
        text-align: center;
    }
    /* .max-img {
        width: 25rem;
        padding: 1rem 0;
    } */
    .select-img {
        width: 20rem;
        margin: 1rem 1rem 1.5rem 1rem;
        height: auto;
        margin: 0 1rem;
    }
}

@media (max-width:530px) {
    /* .max-img {
        width: 10rem;
        padding: 1rem 0;
    } */
    .select-img {
        width: 10rem;
        margin: 1rem 1rem 1.5rem 1rem;
        height: auto;
        margin: 0 1rem;
    }
}


/* 弹窗的css开始 */

.wapper {
    text-align: center;
}

.wapper ul {
    /* margin-top: 40px; */
    /* margin-left: 13%; */
    /* margin-right: 22%; */
    text-align: center;
    padding-inline-start: 0;
    /* padding: revert; */
}


/* 推荐列表中每个小块 */


/* .wapper li {
    width: 15rem;
    height: 10rem;
    text-align: center;
    font-weight: bold;
    display: table-cell;
    margin-top: 5%;
    padding: 1.5rem;
} */

.wapper li {
    width: 10rem;
    height: 10rem;
    text-align: center;
    font-weight: bold;
    display: inline-block;
    margin-top: 5%;
    padding: 1rem;
    margin: 1rem;
}

.home-img {
    width: 80%;
}


/* 手机 */

@media (max-width:830px) {
    /* .wapper li {
        width: 10rem;
        height: 10rem;
        text-align: center;
        font-weight: bold;
        display: inline-block;
        margin-top: 5%;
        padding: 1rem;
        margin: 1rem;
    } */
}


/* 小块中的标题 */

.wapper li .main_title {
    margin: 0 10px 2px;
    color: black;
    font-size: smaller;
}


/* 小块中的链接 */

.wapper li .main_title a {
    color: #333;
    display: block;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    _zoom: 1
}


/* 去除推荐列表链接中的下划线 */

.wapper li h5 a {
    text-decoration: none;
}

.wapper li {
    transition: All 0.4s ease-in-out;
    -webkit-transition: All 0.4s ease-in-out;
    -moz-transition: All 0.4s ease-in-out;
    -o-transition: All 0.4s ease-in-out;
}


/* 小块下半部分鼠标滑动事件 */

.wapper li:hover {
    transform: translate(0, -10px);
    -webkit-transform: translate(0, -10px);
    -moz-transform: translate(0, -10px);
    -o-transform: translate(0, -10px);
    -ms-transform: translate(0, -10px);
    /* -webkit-box-shadow: 0px 5px 15px #e5e5e5;
    -moz-box-shadow: 0px 5px 15px #e5e5e5;
    box-shadow: 0px 5px 15px #e5e5e5; */
}


/* 小块图片鼠标滑动事件 */

.wapper li .pic {
    margin: 0 0 0.4rem 0;
    transform: translate(0, 0);
}

.pic_1 {
    width: 7rem;
    height: 7rem;
}


/* 弹窗 */


/* .btn-alert {
    display: block;
    width: 400px;
    height: 100px;
    line-height: 100px;
    background-color: #fff;
    border-radius: 10px;
    color: #000;
    font-size: 40px;
    margin: 20px auto 0;
    border: none;
    cursor: pointer;
    letter-spacing: 5px;
    box-shadow: 0 0 5px #fff;
} */


/* 遮罩层 */

.alert {
    display: none;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100vh;
    background: rgba(0, 0, 0, .4);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99999999;
}

.alert-body {
    width: 55rem;
    height: 30rem;
    line-height: 2rem;
    background-color: #fff;
    border-radius: 10px;
    /* font-size: 30px; */
    color: #000;
    text-align: center;
    position: relative;
    animation: moveFromBottom .3s linear;
}

.close {
    line-height: 3rem;
    font-size: 2em;
    position: absolute;
    top: 0;
    right: 1rem;
    cursor: pointer;
    z-index: 9999998;
    color: rgb(104, 90, 184);
}

.close:hover {
    color: rgb(158, 148, 213);
}

.alert-all-content {
    display: none;
}

.alert-title {
    line-height: 60px;
    border-bottom: 2px solid #d8d6e3;
    font-size: 25px;
    position: relative;
    color: rgb(104, 90, 184);
    font-weight: bold;
}

.alert-content {
    display: flex;
    justify-content: center;
    align-items: center;
    /* height: 200px; */
    color: #919191;
    margin: 2rem;
    text-align: justify;
}

@keyframes moveFromTop {
    0% {
        margin-top: -600px;
    }
    100% {
        margin-top: 0;
    }
}

@keyframes moveFromBottom {
    0% {
        margin-bottom: -600px;
    }
    100% {
        margin-bottom: 0;
    }
}


/* 弹窗的滚动条 */

#scrollable-content {
    height: 345px;
    /* 设置元素高度 *显示滚动条 */
    overflow: auto;
}

::-webkit-scrollbar {
    width: 10px;
    /* 设置滚动条宽度 */
    display: 10px;
    /* 设置滚动条高度 */
}

.accordion p {
    /* text-decoration: 1rem; */
    margin: 1rem 0;
}

.alert_h1 {
    color: rgb(104, 90, 184);
    font-size: large;
}

.select-pic {
    text-align: center;
    direction: ltr;
    overflow: auto;
}

.select-img {
    margin: 1rem 1rem 1.5rem 1rem;
    width: 40rem;
    height: auto;
    margin: 0 1rem;
}

.part strong {
    color: #D93F57;
}

.part2 strong {
    color: #D93F57;
}

.buttom_part {
    text-align: center;
}

.hide-button {
    color: rgb(94 68 123);
    background-color: #f1f0f6;
    border: 4px solid rgb(94 68 123);
    border-radius: .25rem;
    width: 8rem;
    height: 2.7rem;
}


/* ::-webkit-scrollbar-thumb {
    * 设置拖动条颜色*
    background-color: #cccccc;
}

::-webkit-scrollbar-track {
     设置滚动条背景颜色*
    background-color: #f2f2f2;
} */


/* 弹窗的css结束 */