/*process部分*/
.progress_inner{
    display: block;
    position: relative;
    box-sizing: border-box;
}
/*相邻同胞选择器，选择被勾选的input标签后 第n个label标签*/
.progress_inner #step-1:checked + input + input + input + input + div + div + div + div > .box_base,  .progress_inner #step-4:checked + input + div + div + div + div > .box_base,  .progress_inner #step-3:checked + input + input + div + div + div + div > .box_base,  .progress_inner #step-2:checked + input + input + input + div + div + div + div > .box_base {
    top: 30%;
    left: -60px;
    opacity: 1;
}
.progress_inner #step-1:checked + input + input + input + input + div + div + div + div > .box_item,   .progress_inner #step-4:checked + input + div + div + div + div > .box_item,  .progress_inner #step-3:checked + input + input + div + div + div + div > .box_item,  .progress_inner #step-2:checked + input + input + input + div + div + div + div > .box_item {
    top: -30px;
    left: 0px;
    opacity: 0;
}

.progress_inner #step-2:checked + input + input + input + div + div + div + div > .box_lid,  .progress_inner #step-4:checked + input + div + div + div + div > .box_lid {
    top: -20px;
    left: 0px;
    opacity: 0;
}
.progress_inner #step-2:checked + input + input + input + div + div + div + div > .box_item,  .progress_inner #step-4:checked + input + div + div + div + div > .box_item {
    top: -10px;
    left: 0px;
    opacity: 1;
}

.progress_inner #step-3:checked + input + input + div + div + div + div > .box_item,  .progress_inner #step-4:checked + input + div + div + div + div > .box_item {
    top: 10px;
    left: 0px;
    opacity: 1;
}
.progress_inner #step-3:checked + input + input + div + div + div + div > .box_lid,   .progress_inner #step-4:checked + input + div + div + div + div > .box_lid {
    top: -1px;
    left: 0px;
    opacity: 1;
}

.progress_inner__status .box_string,  .progress_inner__status .box_tag,  .progress_inner__status .box_bow__right,  .progress_inner__status .box_bow__left,  .progress_inner__status .box_bow,  .progress_inner__status .box_ribbon,  .progress_inner__status .box_item,  .progress_inner__status .box_base,  .progress_inner,  .progress_inner__step:before {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    margin: auto;
}

.progress_inner__bar--set,  .progress_inner__bar {
    height: 6px;
    left: 10%;
    background: repeating-linear-gradient(45deg,#B4DAEB, #B4DAEB 4px, #85BBD3 4px, #B4DAEB 7px);
    transition: width 800ms cubic-bezier(0.915, 0.015, 0.3, 1.005);
    border-radius: 6px;
    width: 0;
    position: relative;
    z-index: -1;
}

.progress_inner__step:before {
    width: 50px;
    height: 50px;
    color: #70afd0;
    background: white;
    line-height: 45px;
    border: 3px solid #a6cde2;
    font-size: 22px;
    top: 3px;
    border-radius: 30%;
    transition: all 0.4s;
    cursor: pointer;
    pointer-events: none;
}

.progress_inner__step {
    width: 20%;
    font-size: 14px;
    padding: 0 10px;
    transition: all 0.4s;
    float: left;
    text-align: center;
    position: relative;
}
.progress_inner__step label {
    padding-top: 50px;
    top: -20px;
    display: block;
    position: relative;
    cursor: pointer;
}
.progress_inner__step:hover {
    color: white;
}
.progress_inner__step:hover:before {
    color: white;
    background:#B4DAEB;
}


.progress_inner {
    height: 200px;
    width: initial;
}
.progress_inner #step-4:checked + input + div {
    width: 60%;
}
.progress_inner #step-4:checked + input + div + div + div > .tab:nth-of-type(4) {
    opacity: 1;
    top: 0;
}
.progress_inner #step-4:checked + input + div + div + div + div {
    right: 30%;
}
.progress_inner #step-3:checked + input + input + div {
    width: 40%;
}
.progress_inner #step-3:checked + input + input + div + div + div > .tab:nth-of-type(3) {
    opacity: 1;
    top: 0;
}
.progress_inner #step-3:checked + input + input + div + div + div + div {
    right: 50%;
}
.progress_inner #step-2:checked + input + input + input + div {
    width: 20%;
}
.progress_inner #step-2:checked + input + input + input + div + div + div > .tab:nth-of-type(2) {
    opacity: 1;
    top: 0;
}
.progress_inner #step-2:checked + input + input + input + div + div + div + div {
    right: 70%;
}
.progress_inner #step-1:checked + input + input + input + input + div {
    width: 0%;
}
.progress_inner #step-1:checked + input + input + input + input + div + div + div > .tab:nth-of-type(1) {
    opacity: 1;
    top: 0;
}
.progress_inner #step-1:checked + input + input + input + input + div + div + div + div {
    right: 90%;
}
.progress_inner__step:nth-of-type(1):before {
    content: "1";
}
.progress_inner__step:nth-of-type(2):before {
    content: "2";
}
.progress_inner__step:nth-of-type(3):before {
    content: "3";
}
.progress_inner__step:nth-of-type(4):before {
    content: "4";
}

.progress_inner__bar--set {
    width: 0;
    top: -6px;
    background: #70afd0;
    position: relative;
    z-index: -2;
}
.progress_inner__tabs .tab {
    opacity: 0;
    position: absolute;
    top: 40px;
    text-align: left;
    margin-top: 80px;
    padding: 30px;
    background: white;
    border-radius: 10px;
    transition: all 0.2s;
}
.progress_inner__tabs .tab h1 {
    margin: 0;
}
.progress_inner__tabs .tab p {
    font-weight: 400;
    opacity: 0.8;
    font-size: 1.3em;
}
.progress_inner__status {
    width: 40px;
    height: 40px;
    top: -80px;
    transition: right 800ms cubic-bezier(0.915, 0.015, 0.3, 1.005);
    transform: translateX(50%);
    position: absolute;
}
.progress_inner__status div {
    opacity: 0;
    transition: all 600ms cubic-bezier(0.915, 0.015, 0.3, 1.005);
    transition-delay: 300ms;
}
.progress_inner__status div {
    position: absolute;
}
.progress_inner__status .box_base {
    background-image: url("https://static.igem.wiki/teams/4195/wiki/background/little-car.png");
    background-size: cover;
    width: 110px;
    height: 60px;
    z-index: 1;
    border-radius: 1px;
}

.progress_inner input[type=radio] {
    display: none;
}

.reference{
    font-size:20px;
    padding-left: 0px;
}
.tab{
    max-width: 100%;
}
.pre-box{
    margin-top: 1100px;
}
@media(max-width: 1000px) {
    .pre-box{
        margin-top: 1600px;
    }
}
@media(max-width: 300px) {
    .pre-box{
        margin-top: 2300px;
    }
}

/*苏杭的动画*/

.beer-slider {
    transform: scale(1);
    margin-top: -15%;
    display: inline-block;
    overflow: hidden;
    position: relative
}

.beer-slider *, .beer-slider:after, .beer-slider :after, .beer-slider:before, .beer-slider :before {
    box-sizing: border-box
}

.beer-slider img, .beer-slider svg {
    vertical-align: bottom
}

.beer-slider > * {
    height: 100%
}

.beer-slider > img {
    height: auto;
    max-width: 100%
}

.beer-reveal {
    left: 0;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    right: 50%;
    top: 0;
    transition: opacity .35s;
    z-index: 1
}

.beer-reveal > :first-child {
    height: 100%;
    max-width: none;
    width: 200%
}

.beer-reveal > img:first-child {
    height: auto
}

.beer-range {
    -moz-appearance: none;
    -ms-touch-action: auto;
    -webkit-appearance: slider-horizontal !important;
    bottom: 0;
    cursor: pointer;
    height: 100%;
    left: -1px;
    margin: 0;
    opacity: 0;
    position: absolute;
    top: 0;
    touch-action: auto;
    width: calc(100% + 2px);
    z-index: 2
}

.beer-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    height: 300vh
}

.beer-range::-moz-range-thumb {
    -webkit-appearance: none;
    height: 300vh
}

.beer-range::-ms-tooltip {
    display: none
}

.beer-handle {
    background-image: url("https://static.igem.wiki/teams/4195/wiki/web-picture/design/move.png");
    background-size: 100%;
    background-repeat: no-repeat ;
    left: 50%;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    transform: translate3d(-50%, -50%, 0);
    transition: background .3s, box-shadow .3s, opacity .5s .25s;
    z-index: 2
}
#Reveal .beer-handle{
    top: 82%;
    height: 10%;
    width: 15%;
}
#Reveal1 .beer-handle{
    top: 70%;
    height: 24%;
    width: 15%;
}


.beer-handle:before {
    left: 10px;
    transform: rotate(-45deg)
}

.beer-handle:after {
    right: 0;
    transform: rotate(135deg)
}

.beer-range:focus ~ .beer-handle {
}

.beer-reveal[data-beer-label]:after, .beer-slider[data-beer-label]:after {
    content: attr(data-beer-label);
    line-height: 1;
    padding: .5rem;
    position: absolute;
    top: 1.5rem
}

.beer-slider[data-beer-label]:after {
    right: 1.5rem
}

.beer-reveal[data-beer-label]:after {
    left: 1.5rem
}

.beer-reveal[data-beer-label=""]:after, .beer-slider[data-beer-label=""]:after {
    content: none
}

.beer-ready .beer-handle, .beer-ready .beer-reveal {
    opacity: 1
}

.promotion-video{
    background: linear-gradient(#e2fbfa,#d3f7f6 50%);
}

.after-mark {
    position: absolute;
    height: 70px;
    width: 60px;
    background: url("https://static.igem.wiki/teams/4195/wiki/background/mark.png");
    background-size: 100% 100%;
    top: 200px;
    right: -20px;
    opacity: 0;
}
.active1{
    opacity: 1 !important;
}
.active2{
    top: 310px !important;
    opacity: 1 !important;
}
.active3 {
    top: 390px !important;
    opacity: 1 !important;
}

.MathJax nobr>span.math>span{border-left-width:0 !important};