.productbanner {
    width: 100%;
    height: auto;
    border-radius: 0 0 15% 15%;
    margin-top: -8vh;
}
.slider-product {
    position: relative;
    width: 90vw;
    height: 100vh;
    overflow: hidden;
    margin: 10vw 5vw;
}

.container-productpg1 {
    display: flex;
    transition: transform 0.5s ease;
    width: 300%;
}

.productpage {
    width: 90vw;
    height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #333333;
}

.pro-button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: #4e4e4e;
    border: none;
    padding: 10px;
    cursor: pointer;
    font-size: 2rem;
    z-index: 10;
}

.pro-button.left {
    left: 10px;
    border-radius: 40px 0 0 40px;
}

.pro-button.right {
    right: 10px;
    border-radius: 0 40px 40px 0;
}
.stage:hover {
    background-color: rgba(248, 248, 248, 0.3);
}

.stagebgimg {
    width: 57%;
    height: auto;
}

.stage {
    position: absolute;
    height: 70%;
    height: 85%;
}

.image-stage {
    position: relative;
    width: 90%;
    margin: 20px auto;
    display: flex;
    justify-content: center;
}

#Stage1,
#Stage2,
#Stage3 {
    color: aliceblue;
}

.stage-1 {
    top: 3%;
    left: 33%;
    width: 12%;
}

.stage-2 {
    top: 3%;
    left: 45%;
    width: 15%;
}

.stage-3 {
    top: 3%;
    left: 60%;
    width: 14%;
}

.stage-card {
    background-color: #5E6AB4;
    border-radius: 45px;
    padding: 40px 20px 20px 20px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
    width: 70%;
    margin: 20px auto;
    position: relative;
}

.stage-card .stage-title {
    all: initial;
    background-color: #FFA500;
    font-size: 25px;
    font-weight: 700;
    color: white;
    border-radius: 40px;
    padding: 10px 20px;
    text-align: center;
    position: absolute;
    top: -40px;
    left: 20px;
    right: 20px;
    width: 100px;
    height: 30px;
}

.stage-card h3 {
    color: white;
    font-family: impact;
}

.stage-card ol {
    margin-left: 20px;
}
.stage-card ol>li{
    color: white;
}

.stage-card p li {
    color: white;
    font-size: 16px;
}
.stage-card p {
    color: white;
    font-family: poppinsmedium;
    font-size: 18px;
}

.equipment-title {
    color: #FFEFCD;
    font-family: impact;
    font-size: 80px;
    text-align: center;
    margin: 20px;
}


.equipment-intro {
    color: #FFEFCD;
    font-family: anton;
    font-size: 26px;
    margin: 0 12%;
    text-align: center;
}
.pest-controlled hr{
    all: initial;
    display: flex;
     border: 4px solid #F27132;
     width: 30vw;
}
.crop-protected hr{
    all: initial;
    display: flex;
     border: 4px solid #F27132;
     width: 30vw;
}
.guide-hr{
    all: initial;
    display: flex;
     border: 4px solid #F27132;
     width: 30vw;
}
.tab {
    width: 978px;
    margin: 100px auto 200px auto;
}

.tab_list {
    width: 300px;
    height: 80px;
    border-radius: 20px;
    display: flex;
    justify-content: space-between;
    padding: 20px;
}

.tab_list li {
    height: 80px;
    width: 70px;
    line-height: 39px;
    text-align: center;
    cursor: pointer;
    background-size: cover;
    border-radius: 20px;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 40px;
    margin-right: 2vw;
}

.tab_list .current {
    opacity: 0.8;
    border: #bb0000 3px solid;
}

.item_info {
    padding: 20px 0 0 20px;
}

.product {
    margin-top: 15vh;
    display: none;
}

.text {
    display: none;
    color: white;
    margin-left: 5vw;
}


.tab_con div:nth-child(1) {
    background-color: gold;
}

.tab_con div:nth-child(2) {
    background-color: red;
}

.tab_con div:nth-child(3) {
    background-color: lightpink;
}


/* 为每个按钮设置对应的背景图片 */

.btn1 {
    background-image: url("https://static.igem.wiki/teams/5184/product-page/pro-img/pro5-1.webp");
}

.btn2 {
    background-image: url("https://static.igem.wiki/teams/5184/product-page/pro-img/pro1-1.webp");
}

.btn3 {
    background-image: url("https://static.igem.wiki/teams/5184/product-page/pro-img/pro4-1.webp");
}

.btn4 {
    background-image: url("https://static.igem.wiki/teams/5184/product-page/pro-img/pro2-1.webp");
}
.btn5 {
    background-image: url("https://static.igem.wiki/teams/5184/product-page/pro-img/pro3-1.webp");
}
.btn6 {
    background-image: url("https://static.igem.wiki/teams/5184/product-page/pro-img/pro6-1-2.webp");
}


.crop-title,.pest-title,.guide-title {
    font-family: impact;
    font-size: 80px;
    color: #FBC44B;
    text-align: center;
    margin: 100px 0 0 0;
}

.crops-imgcontainer {
    display: flex;
    justify-content: center;
}

.pest-imgcontainer {
    display: flex;
    justify-content: center;
}
/* pest */

.pest-list {
    display: flex;
    justify-content: space-around;
    padding: 20px;
    margin: 0 20%;
}

.left-column,
.right-column {
    display: flex;
    flex-direction: column;
}

.pest-img {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.icon-pest {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    margin-right: 10px;
}

.pest-img span {
    font-family: anton;
    color: white;
    font-size: 30px;
}

   /* session1 */
        
   @keyframes float {
    0%,
    100%,
    50% {
        transform: translateY(0)
    }
    25% {
        transform: translateY(3%)
    }
    50% {
        transform: translateY(-3%)
    }
}

.left-product {
    display: block;
}

.right-product {
    display: block;
}

.substance-heading {
    font-family: 'poppins';
    color: #FFEFCD;
    text-align: center;
    font-size: 40px;
}

.substance-intro {
    font-family: 'poppinsmedium';
    color: #F8C993;
    text-align: center;
    font-size: 20px;
    margin-top: -10px;
}

@font-face {
    font-family: 'poppinsmedium';
    src: url("https://static.igem.wiki/teams/5184/fonts/poppins-medium-webfont.woff");
}

@font-face {
    font-family: 'poppins';
    src: url("https://static.igem.wiki/teams/5184/fonts/poppins-black-webfont.woff")
}

@font-face {
    font-family: 'impact';
    src: url("https://static.igem.wiki/teams/5184/fonts/impact-webfont.woff")
}

@font-face {
    font-family: 'anton';
    src: url("https://static.igem.wiki/teams/5184/fonts/anton.woff");
}

.mid-substanceimg {
    height: 20vw;
    animation: float 6s ease infinite;
   margin: 10vh 5vh 0 5vh;
}

.dienaT-left {
    text-align: left;
}

.dienaT-right,.dienaP-right,.dienaH-right {
    text-align: right;
}

.dienaT-left1-head,
.dienaT-right1-head {
    color: #EC5D67;
}

.dienaT-left2-head,
.dienaT-right2-head {
    color: #FB8D8D;
}

.dienaT-left3-head,
.dienaT-right3-head {
    color: #FFADA5;
}



.diena-head {
    font-weight: 300;
    display: inline;
    font-family: impact;
    font-size: 1.5em;
}

.diena-content {
    font-size: 1.1vw;
    margin: 0;
    width: 16vw;
    color: #EFBF9E;
}

.product-pros {
    margin-top: 10vh;
    display: flex;
}

.product-pros img {
    margin: 0 2vw;
}

.dienaP-left1-head,
.dienaP-right1-head {
    color: #F27132;
}

.dienaP-right2-head,
.dienaP-left2-head {
    color: #F59B11;
}

.dienaP-right3-head,
.dienaP-left3-head {
    color: #FBC44B;
}

.dienaP-left1-content,
.dienaP-right1-content,
.dienaP-right2-content,
.dienaP-right3-content,
.dienaP-left3-content,
.dienaP-left2-content {
    color: #EDB12D;
}

.dienaH-left1-head,
.dienaH-right1-head {
    color: #839BFF;
}

.dienaH-right2-head,
.dienaH-left2-head {
    color: #B6C3F6;
}

.dienaH-left1-content,
.dienaH-right1-content,
.dienaH-right2-content,
.dienaH-left2-content {
    color: #E0E0E0;
}

.bluestrip {
    padding: 5vh 20vw;
    width: 100%;
    background-color: #5E6AB4;
}

.bluestrip a {
    font-family: kunika;
    text-decoration: none;
    color: white;
    margin-left: 3vw;
    text-align: center;
    font-size: 3vw;
}

@keyframes float {
    0%,
    100%,
    50% {
        transform: translateY(0)
    }
    25% {
        transform: translateY(3%)
    }
    50% {
        transform: translateY(-3%)
    }
}
/* device introduction */
.product img {
    margin-top: 10vh;
    width: 30vw;
    animation: float 6s infinite;
    margin-left: -5vw;
}
.device-intro-productpage {
    margin-top: 10vh;
}
.c {
    display: flex;

}
.device-intro-content-target {
    text-align: center;
}

.device-intro-content {
    background-color: #5E6AB4;
    border-radius: 50px;
    padding: 20px;
    width: 45vw;
}

.device-intro-content-inspire,
.device-intro-content-benefits {
    text-align: left;
}
.device-intro-content-benefits ol>li{
    font-family: arimo;
    color: white;
    font-size: 15px;
    line-height: inherit;
}