body { padding-top: 56px; }
.left-aligned { margin-left: auto; }
.bg-dark { background-color: #000000 !important; }
.bg-hero { background-color: rgb(110, 0, 0); }

/* CALLOUT */
.bd-callout { padding:1.25rem; margin-top:1.25rem; margin-bottom:1.25rem; border:1px solid #e9ecef; border-left-width:.25rem; border-radius:.25rem }
.bd-callout h4 { margin-bottom:.25rem }
.bd-callout p:last-child { margin-bottom:0 }
.bd-callout code { border-radius:.25rem }
.bd-callout+.bd-callout { margin-top:-.25rem }
.bd-callout-info { border-left-color:hsl(194, 66%, 61%) }
.bd-callout-warning { border-left-color:#f0ad4e }
.bd-callout-danger { border-left-color:#d9534f }

/* footer */
footer a { color: white; font-weight: bold; text-decoration: none; }
footer a:hover { color: white; text-decoration: underline; }

body {
    background-color: #5E6AB4;
    overflow-x: hidden;
  padding-right: 0px !important; 
  transition: background-color 0.5s; 
  scroll-behavior: smooth;
}
.modal-open {
     overflow-y: scroll;
      padding-right: 0 !important;
    }
/* fonts */
@font-face {
    font-family: 'impact';
    src:url("https://static.igem.wiki/teams/5184/fonts/impact-webfont.woff")
}

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

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

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

@font-face{
    font-family: 'anton';
    src: url("https://static.igem.wiki/teams/5184/fonts/anton.woff");
}
@font-face{
    font-family: 'kunika';
    src: url("https://static.igem.wiki/teams/5184/fonts/kunika.woff");
}
@font-face {
    font-family: 'iconfontsidebar';
    src: url('https://static.igem.wiki/teams/5184/fonts/iconfont.woff2?t=1727624921257') format('woff2'), url('https://static.igem.wiki/teams/5184/fonts/iconfont.woff?t=1727624921257') format('woff'), url('https://static.igem.wiki/teams/5184/fonts/iconfont.ttf?t=1727624921257') format('truetype');
}
@font-face {
    font-family: 'iconfontsafety';
    src: url('https://static.igem.wiki/teams/5184/fonts/iconfont-safety.woff');
}
@font-face {
    font-family: 'iconfont-contribution';
    src: url('https://static.igem.wiki/teams/5184/fonts/iconfont-contribution.woff');
}
@font-face {
    font-family: 'iconfont-hp';
    src: url('https://static.igem.wiki/teams/5184/fonts/iconfont-hp.woff');
}
@font-face {
    font-family: 'iconfont-sustainability';
    src: url('https://static.igem.wiki/teams/5184/fonts/iconfont-sustainability.woff');
}
@font-face {
    font-family: 'iconfont-inclusive';
    src: url('https://static.igem.wiki/teams/5184/fonts/iconfont-inclusive.woff');
}
@font-face {
    font-family: 'iconfont-education';
    src: url('https://static.igem.wiki/teams/5184/fonts/iconfont-education.woff');
}
@font-face {
    font-family: 'iconfont-entrepreneur';
    src: url('https://static.igem.wiki/teams/5184/fonts/iconfont-entrepreneur2.woff');
}
@font-face {
    font-family: 'tenorite';
    src: url('https://static.igem.wiki/teams/5184/fonts/tenorite.woff');
}

.gradient-overlay {
    position: absolute;
    width: 100%;
    margin-top: -100px;
    height: 108px;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #5E6AB4);
}
.bannerimg-project{
    width: 20vw;
    height: 18vw;
    margin-top: 5vh;
    margin-left: 10%;
    align-content: baseline;
}

.bannerimg-team{
    width: 18vw;
    height: 20vw;
    margin-top: 5vh;
    margin-left: 10%;
    align-content: baseline;
}

.bannerimg-hp {
    width: 22vw;
    height: 19vw;
    margin-top: 6vh;
    margin-left: 8%;
    align-content: baseline;
}

.bannerimg-lab {
    width: 26vw;
    height: 18vw;
    margin-top: 8vh;
    margin-left: 10%;
    align-content: baseline;
}
.bannerimg-sustainability{
    width: 22vw;
    height: 22vw;
    margin-top: 3vh;
    margin-left: 10%;
    align-content: baseline;
}
.containerone {
    display: flex;
    height: 100%;
}

.col-lg-12 {
    display: flex;
    background-color: #FBC44B;
    border-radius: 0 0 15vh 15vh;
}

.col12description {
    font-family: 'impact';
    color: #FF6262;
    font-size: 8vw;
    /* 120px */
    margin: 10vh 0 0 20vh;
}
    
@media screen and (max-width: 1350px) {
    .col12description {
        font-size: 100px;
        margin: 10vh 0 0 10vh;
    }
    .bg-hero {
        height: auto;
    }
}
.bg-hero {
    background-color: #F27132;
    border-radius: 0 0 30vh 30vh;
    background-size: cover;
    height: 450px;
    display: flex;
    margin-top: -60px;
    margin-bottom: 150px;
    text-align: center;
}
/* progress bar */
#progress-container {
    position: fixed;
    /* top: 64px; */
    z-index: 100;
    width: 100%;
    height: 6px;
    left: 0;
    bottom: 0px;
}

#progress-bar {
    height: 5px;
    background: linear-gradient(90deg, #ffaca8, #E37A74, #8A3A3A);
    width: 0;
    border-radius: 5px;
}

#progress-img {
    background-image: url('https://static.igem.wiki/teams/5184/redspiderleaf-2.png');
    position: absolute;
    background-repeat: no-repeat;
    background-size: contain;
    top: -25px;
    left: -20px;
    width: 50px;
    height: 50px;
    z-index: 100000;
}

/* 侧边栏 */
.left {
    margin-left: -20vh;
    height: auto;
    width: 40vh;
    /* margin-left: 10%; */
}

.sidebarcontainer {
    position: sticky;
    top: 150px;
    margin-top: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

/* .iconfont {
    margin-left: -32px;
    font-size: 26px !important;
    color: #126603;
    line-height: 50px;
    text-align: center;
} */
.iconfontsidebar, .iconfontsafety{
    color: white;
    font-size: 2rem;
    margin-left: -38px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.iconfontsidebar{
    font-family: "iconfontsidebar";
}

.iconfontsafety{
    font-family: 'iconfontsafety' !important;
}

.menu-box .icon-spider {
    margin-left: 0px;
}

.menu-box {
    position: sticky;
    top: 150px;
    align-items: center;
    width: 100px;
    height: 360px;
    background-color: #F59B11;
    /* 6c0808  */
    border-radius: 40px;
    box-shadow: 5px 5px 7px 4px rgba(0, 0, 0, .3);
    /* 添加过渡 */
    transition: all .6s ease-out;
    overflow: hidden;
}

.menu-box:hover {
    width: 220px;
    border-radius: 80px;
}
/* hover时让文字出现 */

.menu-box:hover>ul>li p {
    display: block;
}

/* 表情盒子 */

.emotion-box {
    width: 100%;
    text-align: center;
    margin: 10px auto;
}

/* #emotion1,
#emotion2 {
    color: #126603;
    font-size: 32px !important;
    animation: jitter .3s linear forwards;
} */

#emotion2 {
    display: none;
}

.menu-box:hover #emotion1 {
    display: none;
}

.menu-box:hover #emotion2 {
    display: block;
}

.sidebarul {
    padding-left: 0;
    width: 100%;
    height: 75%;
}

.sidebarli {
    margin-bottom: 5px;
    padding-left: 2rem;
    list-style: none;
    transition: transform 0.5s ease;
}

.sidebarli>a {
    display: flex;
    margin-left: 5vh;
    justify-content: left;
    align-items: center;
    height: 20%;
    text-decoration: none;
    /* 禁止用户选中 */
    user-select: none;
}

.sidebarli:hover {
    transform: translateX(10px);
    cursor: pointer;
}

.sidebarli:hover .content,
.sidebarli:hover i {
    color: #434B7C;
}

.sidebarli:hover i {
    animation: jitter .5s ease-in;
}

.content {
    font-family: 'poppins';
    display: none;
    padding-left: 5px;
    color: #ffffff;
    /* 设置文字不换行 */
    white-space: nowrap;
    transition: all .3s ease-out;
}

.sidebar-img {
    height: 130px;
    margin-top: -28px;
    margin-left: 30px;
    z-index: 1;
}

.sidebar-img.jump {
    animation: jitter .5s ease forwards;
}

/* 抖动动画 */

@keyframes jitter {
    0% {
        /* 缩放1.2倍，顺时针旋转10° */
        transform: scale(1.2) rotate(10deg);
    }
    50% {
        transform: scale(0.8) rotate(-10deg);
    }
    0% {
        transform: scale(1.0) rotate(0deg);
    }
}
    /* 小蜘蛛滑动 */
    #spider {
        margin-left: 43vw;
        margin-top: -20px;
        position: fixed;
        left: 50%;
        transform: translateX(-50%);
        font-size: 30px;
        z-index: 2;
        text-decoration: none;
    }
    
    #web {
        margin-left: 43vw;
        position: fixed;
        top: 0px;
        left: 50%;
        transform: translateX(-50%);
        width: 2px;
        background: rgb(255, 255, 255);
        z-index: 0;
    }
    
    #spider:hover {
        cursor: pointer;
       
    }
 /* boom */
    
 #spider img {
    display: block;
}

#spider img:hover {
    opacity: 0;
}

#spider .hover-image {
    margin-left: -4px;
    margin-top: -80px;
    position: absolute;
    width: 80px;
    height: 100px;
    opacity: 0;
    transition: opacity 0.5s;
}

#spider:hover .hover-image {
    opacity: 1;
}
.boom-top {
    color: white;
    font-family: impact;
    font-size: 1rem;
    opacity: 0;
    transition: opacity .5s;
}

#spider:hover .boom-top {
    opacity: 1;
}

/* 正文 */
.col-lg-8 {
    margin-right: 6%;
}
.col-lg-8__header {
    padding-top: 40px;
    position: relative;
}
.col-lg-8__header .honeyBg {
    position: relative;
    width: fit-content;
    height: 80px;
}
.inspiration {
    font-family: 'impact';
    font-size: 2.8vw;
    font-weight: 200;
    color: #fff;
    /* border-radius: 35px;
    width: fit-content;
    height: 80px;
    background-color: #F59B11;
    margin-bottom: 7vh;
    padding: 10px 50px 15px 50px; */
    border-radius: 35px;
    height: 80px;
    width: max-content;
    background-color: #F59B11;
    padding: 10px 50px 10px 50px;
    position: relative;
    top: calc(-20px);
}

.col-lg-8 .inspirationtext {
    text-align: left;
    padding: 50px;
    height: auto;
    /* width: 1000px; */
    width: 63vw;
    border-radius: 30px;
    background-color: #FDE7C8;
    box-shadow: 12px 12px #FBC44B;
}
.col-lg-8 .inspirationtext .figure-note {
    text-align: center;
    margin-top: 1rem;
    font-size: 14px;
}
.inspirationtext a {
    color: #F27132;
    text-decoration: none;
    font-weight: 550;
}

.inspirationtext a:hover {
    color: #949494;
}
.subhead {
    font-size: 1.8rem;
    font-weight: 600;
    color: #5E6AB4;
}
.subsubhead {
    font-weight: 550;
    font-size: 1.2rem;
    color: #7B8CD2;
}
.referencetriangle {
    margin-left: -15px;
    margin-right: 15px;
    display: inline-block;
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 15px solid #7078A9;
    vertical-align: middle;
}
/* description img */
.glassimg {
    /* float: right; */
    height: 150px;
    /* margin-right: 18%;
    margin-top: -17%; */
    margin-right: -10%;
    position: absolute;
    bottom: -30px;
    right: 0;
}

/* .honeyimg {
    float: left;
    height: 14vh;
    margin-top: -11vh;
    margin-left: 1%;
} */
.honey-box {
    width: 100%;
    display: flex;
    position: absolute;
    bottom: 10px;
    height: 5vh;
}
.honeyimg {
    flex: 1 0 0;
    /* width: 100%; */
    height: 11vh;
}
.honey-box .honeyimg__first {
    /* left: 0; */
}
.honey-box .honeyimg__last {
    /* right: 0; */
    margin-left: -40px;
}
  /* reference */
        
  .collapse-container {
    width: 63vw;
    background-color: #ffecd1;
    color: #000;
    font-size: 24px;
    border-radius: 30px;
}

.collapse-title {
    margin-top: 80px;
    line-height: 100px;
    padding: 0 50px;
    font-size: 34px;
    font-weight: 700;
    color: #434B7C;
    border-bottom: 1px solid #eee;
    cursor: pointer;
}

.collapse-content { 
    margin: 20px;
    display: block;
    justify-content: center;
    align-items: center;
    font-size: 15px;
    color: #666;
    height: 0;
    overflow: hidden;
    transition: all .5s;
}

.collapse-content.show {
    height: auto;
    padding-bottom: 20px;
}

/* reference end */

.menutext {
    display: block;
    width: 230px;
    height: 40px;
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
    color: rgb(0, 0, 0);
    text-indent: 2em;
    line-height: 40px;
}

a:hover {
    color: #900500;
}

.menuhead {
    font-size: 30px;
}

hr {
    margin-left: 0px;
    width: 15%;
}
/* protocol */
      
    .accordion {
        margin-left: -10px;
        width: 120%;
        box-sizing: border-box;
        height: auto;
    }
    
    .accordion .contentBx {
        position: relative;
        margin: 10px 20px;
    }
    
    .accordion .contentBx .label {
        width: 90%;
        position: relative;
        padding: 10px;
        margin-bottom: 10px;
        background-color: #F59B11;
        color: #fff;
        cursor: pointer;
        font-size: 28px;
        font-weight: 500;
        border-radius: 10px 10px 0 0;
        /* box-shadow: 6px 6px 10px -1px rgba(0, 0, 0, 0.15), -1px -1px 10px -1px rgba(255, 255, 255, 0.7); */
    }
    
    .accordion .contentBx .label:hover {
        font-weight: 700;
        color: #F2EEED;
    }
    
    .accordion .contentBx .label::before {
        content: '+';
        position: absolute;
        top: 50%;
        right: 20px;
        transform: translateY(-50%);
        font-size: 1.5em;
    }
    
    .accordion .label.active::before {
        content: '-';
    }
    
    .accordion .contentBx .contentprotocol {
        width: 90%;
        position: relative;
        background-color: #ffecd1;
        height: 0;
        overflow: hidden;
        transition: 0.4s;
        overflow-y: auto;
    }
    
    .accordion .label.active+.contentprotocol {
        height: auto;
        padding: 30px;
        border-radius: 0 0 10px 10px;
    }
    .contentprotocolhead {
        font-family: 'poppins';
        font-size: 25px;
        font-weight: 600;
        color: #7B8CD2;
    }
    
    .contentprotocolsubhead {
        font-family: 'poppins';
        font-size: 18px;
        font-weight: 600;
        color: #7B8CD2;
    }
    
    .contentprotocol p {
        font-family: 'poppinsmedium';
        color: #4c4c4c;
        font-size: 15px;
        line-height: 35px;
    }
    
    .contentprotocol ul,
    .contentprotocol ol>li {
        font-family: 'poppinsmedium';
        color: #4c4c4c;
        font-size: 18px;
        line-height: 35px;
    }
    .label {
        font-family: 'Poppins', sans-serif;
    }
    /* home */
    @keyframes float {
        0%,
        100%,
        50% {
            transform: translateY(0)
        }
        25% {
            transform: translateY(3%)
        }
        50% {
            transform: translateY(-3%)
        }
    }
    
    .pageonetext {
        font-family: 'cubaonarrow';
        font-size: 3vw;
        color: #F59B11;
        margin-top: 200px;
        margin-left: 5vw;
    }
    
    .pagetwotext {
        text-align: center;
        font-size: 30px;
        margin-top: 350px;
        color: #FEE6E0;
    }
    
    .page.one {
        transform: translateX(-400px);
        transition: transform 0.5s ease;
    }
    /*   .page:nth-of-type(even) {
        transform: translateX(-400%);
    } */
    
    .page.one.show {
        transform: translateX(0);
    }
    /* .page.one.right {
        transform: translateX(200px);
        transition: transform .5s ease;
    } */
    
    .page.one.right {
        transform: translateX(0px);
    }
    /* pageonecircle */
    @font-face {
        font-family: 'cubaonarrow';
        src: url("https://static.igem.wiki/teams/5184/fonts/cubao-free-narrow.woff");
    }

    .homepagecircle {
        position: absolute;
        margin-top: -45vw;
        left: 40vw;
        width: 30vh;
        height: 3vw;
        border-radius: 50%;
        transform: translate(-50%, -50%);
    }
    
    .imagepageone {
        width: 230px;
        height: 230px;
        position: absolute;
        transform-origin: center center;
    }
    
    #image3 {
        width: 25vw;
        height: 25vw;
    }
    
    #image2 {
        height: 20vw;
        width: 20vw;
    }
    
    .pageonecontainer {
        height: 450px;
    }
  
    .page.two {
        transform: translateY(200px);
        transition: transform 0.5s ease;
    }
    
    .page.two.show {
        transform: translateY(0px);
    }
    
    .-b {
        margin-top: 20px;
        font-family: 'dingosstamp';
        font-size: 5vw;
        text-align: center;
        color: #C32B2B;
        transform: rotate(-5deg);
    }
    
    .-c {
        font-family: 'guerrilla';
        font-size: 4vw;
        transform: rotate(2deg);
        margin-top: -40px;
        text-align: center;
        color: #7B8CD2;
    }
    
    .-d {
        font-size: 4vw;
        color: #F59B11;
        text-align: center;
        font-family: 'magnifico';
        transform: rotate(4deg);
        margin-top: -20px;
    }
    
    .-e {
        text-align: center;
        font-size: 30px;
        margin-top: 30px;
        color: #FEE6E0;
    }

    .pagethreecontainer {
        height: 650px;
        width: 100%;
        background-image: url("https://static.igem.wiki/teams/5184/home/homebackground4.webp");
        background-repeat: no-repeat;
        background-size: cover;
        margin-top: 200px;
    }
    
    .pagethreetext.-bb {
        text-align: center;
        color: #C32B2B;
        font-size: 10vw;
        transform: rotate(0deg);
        font-family: 'peacesans';
        float: left;
        padding-top: 280px;
        animation: float 6s ease infinite;
    }
    
    .-aa {
        float: left;
        font-size: 2.5vw;
        color: white;
        padding-top: 400px;
        margin-left: 15vw;
    }
    
    .-cc {
        padding-top: 400px;
        font-size: 2.5vw;
        color: white;
        float: left;
    }
    
    .page.three {
        transform: translateY(200px);
        transition: transform 1s ease;
    }
    
    .page.three.show {
        transform: translateY(0px);
    }
    .pagefourcontainer{
        margin-bottom: 20vh;
    }
    .pagefourtext.-aaa {
        text-align: center;
        font-family: 'impact';
        font-size: 2vw;
        color: white;
        margin-top: 100px;
        margin-right: 5vh;
    }
    
    .pagefourtext.-bbb {
        text-align: center;
        font-family: 'impact';
        font-size: 2vw;
        color: white;
        margin-top: 160px;
        margin-left: 500px;
    }
    
    .pagefourtext.-ccc {
        font-family: 'impact';
        font-size: 2.5vw;
        color: white;
        margin-top: 35vh;
        margin-left: 150px;
    }
    
    .page.four {
        transform: translateX(-200px);
        transition: transform .5s ease;
    }
    
    .page.four.show {
        transform: translateX(0px);
    }
    
    .page.four.right {
        transform: translateX(200px);
        transition: transform .5s ease;
    }
    
    .page.four.right.show {
        transform: translateX(0px);
    }
    
    .pagefourtext.-ddd {
        z-index: 1;
        position: absolute;
        font-family: 'impact';
        font-size: 4vw;
        color: #E9FFB6;
        margin-top: 20px;
        margin-left: 900px;
    }
    
    .imgpagefour {
        position: relative;
        display: flex;
        background-size: 50% auto;
        height: 5vh;
        width: 100vw;
        float: right;
        margin-top: -100px;
        margin-right: -300px;
    }
       
    #first_lottie_container {
        height: 260px;
        /* margin-right: -100vh; */
        margin-left: 54%;
    }
    .leftcontent {
        display: flex;
        flex-direction: column;
        align-items: center;
        animation: float 6s infinite;
    }
    
    .rightcontent {
        display: flex;
        flex-direction: column;
        align-items: center;
        animation: float 6s infinite;
    }
    
    .chickenimg {
        margin: 0 5vw;
        width: 40vw;
    }
    
    .pagefivecontainer {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100vw;
    }
    
    .chickenimgleft1,
    .chickenimgleft2,
    .chickenimgright1,
    .chickenimgright2 {
        width: 15vw;
    }
  
    .chickenstatement {
        font-family: 'impact';
        color: #7B8CD2;
        text-align: center;
        font-size: 3vw;
        margin-top: -80px;
    }
    
    .pagesixcontainer {
        margin-top: 10vh;
        height: 1000px;
    }
    
    .pagesixtext.-aaaa {
        font-family: 'impact';
        color: #FEE6E0;
        margin-left: 10vw;
        font-size: 2vw;
    }
    
    .pagesixtext.-bbbb {
        font-family: 'impact';
        color: #7B8CD2;
        font-size: 2.5vw;
        font-weight: 100;
        padding-right: 29vw;
        float: right;
    }
    
    .pagesixtext.-cccc {
        font-family: 'impact';
        color: #E06767;
        font-size: 2.5vw;
        padding-right: 26vw;
        float: right;
    }
    
    .pagesixtext.-dddd {
        font-family: 'impact';
        color: #EDB12D;
        font-size: 2.5vw;
        padding-right: 15vw;
            float: right;
    }
    
    .page.six {
        transform: translateX(-200px);
        transition: transform .5s ease;
    }
    
    .page.six.show {
        transform: translateX(0px);
    }
    
    .page.six.right {
        transform: translateX(200px);
        transition: transform 1s ease;
    }
    
    .page.six.right.show {
        transform: translateX(0px);
    }
    
    .pagesixtext.-eeee {
        float: left;
        text-align: center;
        font-family: 'impact';
        color: #FEE6E0;
        font-size: 2vw;
        opacity: 0;
        margin: 10vh 12%;
        transform: translateX(-100px);
        transition: opacity .4s ease-in-out, transform 2s ease-in-out;
    }
    
    .page.six.appear.show>.-eeee {
        opacity: 1;
        transform: translateX(0);
    }
    
    .page.six.up {
        transform: translateY(200px);
        transition: transform .5s ease;
    }
    
    .page.six.up.show {
        transform: translateY(0px);
    }
      
    #third_lottie_container {
        margin-left: 20vh;
      bottom: 50vh;
    }

     /* page seven */
        
     .pageseventext.-A {
        font-family: 'impact';
        color: #FEE6E0;
        font-size: 2vw;
        text-align: center;
        margin: 0 10vw;
    }
    
    .page.seven.up {
        transform: translateY(200px);
        transition: transform .5s ease;
    }
    
    .page.seven.up.show {
        transform: translateY(0px);
    }
    
    #pagesevennumber {
        font-family: 'poppins';
        color: #902E4D;
        font-size: 180px;
        text-align: center;
        margin-top: 50px;
    }
    
    .pageseventext.-B {
        font-family: 'poppins';
        color: #EDB12D;
        font-size: 2vw;
        text-align: center;
        margin-top: -80px;
    }
    
    .pageseventext.-C {
        font-family: 'impact';
        color: #FEE6E0;
        font-size: 2vw;
        text-align: center;
        margin-top: 100px;
        /* transform: translateX(-100px); */
        transition: opacity .5s ease-in-out, transform 1s ease-in-out;
    }
    
    .page.seven.appear.show>.-C {
        opacity: 1;
        transform: scaleX(1.1);
    }
    .pageeighttext.-AA {
        font-family: 'impact';
        color: #FEE6E0;
        font-size: 2vw;
        text-align: center;
        margin-top: 200px;
    }
    
    .page.eight.up {
        transform: translateY(100px);
        transition: transform .6s ease;
    }
    
    .page.eight.up.show {
        transform: translateY(0px);
    }
    
    .pageeighttext.-BB {
        font-family: 'impact';
        color: #FDE7C8;
        font-size: 1.6vw;
        text-align: center;
        margin-top: 10vh;
        margin-bottom: 4vh;
        transform: translateX(-100px);
        opacity: 0;
        transition: opacity .5s ease-in-out, transform 1s ease-in-out;
    }
    
    .page.eight.appear.show>.-BB {
        opacity: 1;
        transform: translateX(0) scaleX(1.1);
    }
    
    .pageeightimgleft {
        height: 45vh;
        float: left;
        margin-left: 300px;
    }
    
    .pageeightimgright {
        height: 45vh;    
        float: right;
        margin-right: 300px;
    }
    
    .page.eight.box {
        transition: 0.5s;
    }
    
    .page.eight.box.show {
        transform: translateY(100px);
    }
    
    .rightcontent8>.page.eight.box.show {
        transform: translateX(-15%);
    }

    .leftcontent8>.page.eight.box.show {
        transform: translateX(15%);
    }
    .leftcontent8,.rightcontent8{
        animation: float 6s ease infinite;
    }
    .pageeighttext.-CC {
        font-family: 'impact';
        color: #EDB12D;
        font-size: 25px;
        text-align: center;
        margin-top: 5vh;
        margin-bottom: 5vh;
        transform: translateX(-30px);
        transition: opacity .5s ease-in-out, transform 1s ease-in-out;
    }
    
    .page.eight.appear.show>.-CC {
        opacity: 1;
        transform: translateX(0) scaleX(1.3);
    }
    
    .pageeightimgright,
    .pageeightimgleft {
        animation: float 6s ease infinite;
    }

    .pageeightlink {
        cursor: pointer;
        color: #F59B11;
    }
    
    .pageeightlink:hover {
    cursor: pointer;
        color: #d0bcbc;
    }
    .pageeightcontainer {
        height: 1200px;
 
    }
    .pageninetext.-AAA {
        font-family: 'poppins';
        color: #EDB12D;
        text-align: center;
        margin-top: 280px;
        margin-bottom: 10vh;
        font-size: 3.5vw;
    }

    .show1 {
        margin-left: 0;
    }
    
    .appear {
        margin-left: 0;
        opacity: 1;
    }
    
    .hidef {
        margin-left: -100px;
        opacity: 0;
    }
    
    .hideb {
        margin-left: 100px;
        opacity: 0;
    }
      
    .containerhome {
        height: 500vh;
        width: 100%;
    }
    
    .sectioncon {
        position: sticky;
        top: 0;
        overflow-x: hidden;
    }
    
    .sectioncon2 {
        width: 100vw;
        display: flex;
        transition: margin-left 0.5s;
    }
    
    .section {
        width: 100vw;
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 2rem;
        color: white;
        flex-shrink: 0;
    }
   
    
    .pageninetext.-AAA {
        font-family: 'poppins';
        color: #EDB12D;
        text-align: center;
        width: 100%;
        font-size: 3.5vw;
        transition: 0.5s;
        position: absolute;
        margin-top: -5vh;
    }
    
    .page.nine.right img {
        height: 15vw;
        margin-top: 20vh;
        animation: float 5s ease infinite;
    }
    
    .page.nine.right {
        width: flex;
    }
    
    .waterdropimg {
        height: 12vw;
        position: absolute;
        transition: 0.5s;
        animation: float 5s ease infinite;
    }
    
    .waterdrop {
        margin-top: 20vh;
        width: 13vw;
    }
    
    .imgpagenineoneback {
        width: 50vw;
        position: absolute;
        transition: 0.5s;
    }
    
    .pageninecontainerdown {
        display: flex;
    }
    .scroll-detect {
        height: 500px;
        width: 100%;
        position: absolute;
        top: 7950px;
    }
    .pagetentext.-AAAA {
        font-family: 'impact';
        font-size: 3vw;
        margin-left: 10vh;
        color: #C32B2B;
        margin-top: 300px;
        opacity: 0;
        transition: opacity 1s ease-in-out, transform 1s ease-in-out;
    }
    
    .page.ten.appear.show>.-AAAA {
        opacity: 1;
        transform: translateX(0);
        ;
    }
    
    .page.ten.up {
        transform: translateY(400px);
        transition: transform .6s ease;
    }
    
    .page.ten.up.show {
        transform: translateY(0px);
    }
    
    .page.ten {
        color: #f1f2f6;
        font-size: 5em;
        font-weight: 300;
        font-family: 'impact';
        text-align: center;
        margin-top: 200px;
    }
    
    span.mark10 {
        border-right: 2px solid white;
        animation: blink 0.6s step-end infinite;
    }
    
    @keyframes blink {
        from,
        to {
            border-color: transparent;
        }
        50% {
            border-color: white;
        }
    }
.pagetencontainer{
    height: 55vh;
}
    .pageelevencontainer {
        margin-top: 300px;
    }
    
    .pageeleventext.-one {
        font-family: 'canva sans';
        margin: 0 10vh 0 10vh;
        font-size: 2vw;
        color: #FDE7C8;
    }
    
    .elevenimg1 {
        float: right;
        height: 20vw;
        margin-right: 18vh;
        margin-top: -10vh;
        animation: float 8s ease infinite;
    }
    
    .pageeleventext.-two {
        font-family: 'canva sans';
        font-size: 2vw;
        margin-left: 20vh;
        margin-right: 10vh;
        color: #FDE7C8;
    }
    
    .elevenimg2 {
        height: 18vw;
        margin: -10vh -10vh 0 20vh;
        animation: float 8s ease infinite;
    }
    
    .pageeleventext.-three {
        font-family: 'canva sans';
        font-size: 2vw;
        margin-left: 10vh;
        color: #FDE7C8;
    }
    
    .elevenimg3 {
        height: 20vw;
        margin: -10vh 20vh 0 10vh;
        animation: float 8s ease infinite;
    }
    
    .pageelevenmiddle {
        display: flex;
        margin-top: 10vh;
    }
    
    .pageelevenup {
        display: flex;
    }
    
    .pageelevendown {
        margin-top: 10vh;
        display: flex;
    }
    
    .page.eleven {
        transform: translateX(-400px);
        transition: transform .6s ease;
    }
    
    .page.eleven.show {
        transform: translateX(0px);
    }
    
    .page.eleven.right {
        transform: translateX(400px);
        transition: transform .6s ease;
    }
    
    .page.eleven.right.show {
        transform: translateX(0px);
    }
    .hu2intro {
        position: sticky;
        top: 93%;
        font-family: impact;
        color: #FFCC5F;
        font-size: 25px; 
    }

    .pagetwelvecontainer {
        margin-top: 40vh;
    }
    
    .pagetwelveup {
        display: flex;
    }
    
    .page.twelve.up {
        transform: translateY(200px);
        transition: transform .6s ease;
    }
    
    .page.twelve.up.show {
        transform: translateX(0px);
    }
    
    .pagetwelveimgcontainer {
        text-align: center;
        position: relative;
        height: 170vh;
    }
    
    .pagetwelveimg {
        position: sticky;
        top: 40px;
        height: 700px;
        margin-top: -80vh;
        animation: float 6s ease infinite;
    }
    
    .-onee,
    .-twoo,
    .-threee {
        font-family: 'canva sans';
        font-size: 30px;
        margin-left: 32vh;
        color: #F6E3E1;
        opacity: 0;
        transition: opacity 1.6s ease-in-out, transform 1s ease-in-out;
    }
    
    .pagetwelvetext.-fourr {
        font-family: 'poppins';
        color: #EDB12D;
        font-size: 3vw;
        margin: 40vh 0;
        text-align: center;
    }
    
    .page.twelve.appear.show>.-onee,
    .page.twelve.appear.show>.-twoo,
    .page.twelve.appear.show>.-threee {
        opacity: 1;
        transform: translateX(0);
    }

    .pagethirteentext.-first {
        font-family: 'canva sans';
        position: absolute;
        color: #EDB12D;
        font-size: 20px;
        margin: 20vh 135vh 0 5vh;
        text-align: center;
        opacity: 0;
        transform: translateX(-200px);
        transition: opacity 1.6s ease-in-out, transform .5s ease-in-out;
    }
    
    .page.thirteen.appear.show>.-first {
        opacity: 1;
        transform: translateX(0);
    }
    
    .pagethirteentext.-second {
        font-family: 'canva sans';
        position: absolute;
        color: #EDB12D;
        font-size: 20px;
        margin: 60vh 5vh 0 135vh;
        text-align: center;
        opacity: 0;
        transform: translateX(200px);
        transition: opacity 2s ease-in-out, transform 2s ease-in-out;
    }
    
    .page.thirteen.appear.show>.-second {
        opacity: 1;
        transform: translateX(0);
    }
    
    .pagethirteentext.-third {
        font-family: 'canva sans';
        position: absolute;
        color: #EDB12D;
        font-size: 20px;
        margin: 90vh 135vh 0 5vh;
        text-align: center;
        opacity: 0;
        transition: opacity 3s ease-in-out, transform 3s ease-in-out;
        transform: translateX(-400px);
    }
    
    .page.thirteen.appear.show>.-third {
        opacity: 1;
        transform: translateX(0px);
    }
    
    .pagethirteentext.-fourth {
        font-family: 'canva sans';
        position: absolute;
        color: #EDB12D;
        font-size: 20px;
        margin: 120vh 5vh 0 135vh;
        text-align: center;
        opacity: 0;
        transition: opacity 3s ease-in-out, transform 3s ease-in-out;
        transform: translateX(400px);
    }
    
    .page.thirteen.appear.show>.-fourth {
        opacity: 1;
        transform: translateX(0px);
    }
    
      /* 兼容性 */
      @media screen and (max-width: 1250px) {
        /* page 13 */
        .pagethirteentext.-first {
            font-size: 20px;
            margin: 20vh 135vh 0 5vh;
        }
        .pagethirteentext.-second {
            font-size: 20px;
            margin: 60vh 5vh 0 100vh;
        }
        .pagethirteentext.-third {
            font-size: 20px;
            margin: 90vh 100vh 0 5vh;
        }
        .pagethirteentext.-fourth {
            font-size: 20px;
            margin: 125vh 5vh 0 100vh;
        }
        .pagetwelveimg {
            height: 50%;
        }
    }


    .pagefourteencontainer {
        height: 100vh;
        margin-top: 50vh;
    }
    
    .pagefourteentext.-firstt {
        font-family: 'impact';
        color: #FEE6E0;
        font-weight: 200;
        text-align: center;
        font-size: 1.8vw;
        margin: 0 15vh;
    }
    
    .pagefourteentext.-secondd {
        font-weight: 200;
        font-family: 'impact';
        color: #FEE6E0;
        text-align: center;
        font-size: 1.8vw;
        margin: -8vh 30vh 0 30vh;
    }
    
    .page.fourteen.up {
        transform: translateY(100px);
        transition: transform .6s ease;
    }
    
    .page.fourteen.up.show {
        transform: translateY(0px);
    }
    
    .page.fourteen {
        transform: translateX(-50px);
        transition: transform .6s ease;
    }
    
    .page.fourteen.show {
        transform: translateX(50px);
    }
    
    .islandlottiecontainer {     
       margin: 8vh auto;
        width: 50%;
    }

    .pagefiftiehcontainer {
        margin-top: 20vh;
    }
    
    .pagefiftiehtextone {
        font-family: 'impact';
        color: #EDB12D;
        font-size: 2vw;
        margin-left: 30vh;
    }
    
    .pagefiftiehtexttwo {
        font-weight: 200;
        font-family: 'impact';
        color: #EFBF9E;
        font-size: 2vw;
        margin-left: 36vw;
        margin-top: 4vh;
        float: left;
    }
    
    .pagefiftiehtextthree-1 {
        font-family: 'impact';
        color: #F59B11;
        font-size: 2.5vw;
        float: right;
        margin-top: 4vh;
        margin-right: 1vw;
        /* margin-top: -6vh; */
    }
    
    .pagefiftiehtextthree-2 {
        font-family: 'impact';
        color: #96A6E9;
        font-size: 2.5vw;
        float: right;
    }
    
    .pagefiftiehtextthree-3 {
        font-family: 'impact';
        color: #FB8D8D;
        font-size: 2.5vw;
        float: right;
    }
    
    .pagefiftiehtextfour {
        font-family: 'impact';
        color: #F8C993;
        font-size: 2.1vw;
        margin: 5vw 9vw;
        text-align: center;
        float: left;
        /* margin-top: 16vh; */
    }
    
    .pagefiftiehupper {
        padding-right: 33%;
    }
    
    .page.fiftieh {
        transform: translateX(-50px);
        transition: transform .6s ease;
    }
    
    .page.fiftieh.show {
        transform: translateX(50px);
    }
    
    .page.fiftieh.right {
        transform: translateX(200px);
        transition: transform .8s ease;
    }
    
    .page.fiftieh.right.show {
        transform: translateX(-0px);
    }

    #wheat_lottie_container {
        height: 400px;
        /* margin-bottom: 23vh; */
    }
    
    .stickylottie2 {
        height: 390px;
        margin-top: -400px;
    }


    .pagesixteencontainer {
        margin-top: 60vh;
    }
    
    .pagesixteentexta {
        font-family: 'impact';
        font-size: 2.2vw;
        color: #FDE7C8;
        text-align: center;
        margin: 0 20vh;
    }
    
    .page.sixteen.up {
        transform: translateY(200px);
        transition: transform .6s ease;
    }
    
    .page.sixteen.up.show {
        transform: translateX(0px);
    }
    .pageseventeencontainer {
        margin-top: 30vh;
    }
    
    .pageseventeentext {
        font-family: 'cubaonarrow';
        color: #F6E3E1;
        font-size: 60px;
        margin-left: 10%;
        float: left;
    }
    
    .page17 {
        margin-left: 100vh;
        display: flex;
    }
    
    .extendimg1,
    .extendimg3,
    .extendimg5,
    .extendimg7,
    .extendimg9 {
        height: 38vh;
    }
    
    .extendimg2,
    .extendimg4,
    .extendimg6,
    .extendimg8,
    .extendimg10 {
        height: 30vh;
    }
    
    .page17.extend1,
    .page17.extend2,
    .page17.extend3,
    .page17.extend4,
    .page17.extend5 {
        width: 10vh;
        animation: float 6s ease infinite;
    }
    
    .page17.extend1 {
        margin-left: 120vh;
    }
    
    .page17.extend2 {
        margin-left: 80vh;
    }
    
    .page17.extend3 {
        margin-left: 120vh;
    }
    
    .page17.extend4 {
        margin-left: 70vh;
    }
    
    .page17.extend5 {
        margin-left: 110vh;
    }
    
    .extendimg2 {
        margin-left: -35vh;
        margin-top: 4vh;
        transition: all .3s;
    }
    
    .extendimg4 {
        margin-left: -35vh;
        margin-top: 3vh;
        transition: all .3s;
    }
    
    .extendimg6 {
        height: 25vh;
        margin-left: -28vh;
        margin-top: 3vh;
        transition: all .3s;
    }
    
    .extendimg8 {
        margin-left: -34vh;
        margin-top: -3vh;
        transition: all .3s;
    }
    
    .extendimg10 {
        margin-left: -32vh;
        transition: all .3s;
    }
    
    .extend1:hover .extendimg2 {
        height: 45vh;
        margin-top: -5vh;
        margin-left: -40vh;
    }
    
    .extend2:hover .extendimg4 {
        height: 45vh;
        margin-top: -8vh;
        margin-left: -40vh;
    }
    
    .extend3:hover .extendimg6 {
        height: 36vh;
        margin-top: -10vh;
        margin-left: -30vh;
    }
    
    .extend4:hover .extendimg8 {
        height: 42vh;
        margin-top: -15vh;
        margin-left: -40vh;
    }
    
    .extend5:hover .extendimg10 {
        height: 40vh;
        margin-top: -10vh;
        margin-left: -37vh;
    }
    
    .arrowbox {
        font-size: 45px;
        font-family: 'impact';
        background-image: linear-gradient( to right, #5E6AB4, #5E6AB4 50%, #F59B11 50%);
        background-size: 200% 100%;
        background-position: -100%;
        display: inline-block;
        padding: 15px;
        position: relative;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        transition: all 0.3s ease-in-out;
    }
   
    .arrowbox:hover {
        background-position: 0;
    }
    
    .arrowbox:hover::before {
        width: 100%;
    }
    
    .page17leanrmore {
        background-color: #F6E3E1;
        height: 90px;
        width: 300px;
        border-radius: 45px;
        margin-top: 5vh;
        text-align: center;
    }
    .iframe-container-pv {
        display: flex;
        justify-content: center;
        align-items: center;
        margin: auto;
    }
    
    .iframe-container-title {
        margin-top: 50vh;
    }
    

    .iframe-pv {
        width: 840px;
        height: 473px;
    }

    .promotiontitle {
        font-family: impact;
        font-size: 8vh;
        color: #2a2a2a;
        margin: 80px;
        text-align: center;
        animation: float 3s ease infinite;
    }

     /* 兼容性 */
/*              
     @media screen and (max-width: 1350px) {
        .islandlottiecontainer {
         
            margin: 8vh auto;
         
            width: 50%;
        }
        .pagefiftiehcontainer {
            margin-top: 20vh;
        }
        .pagefiftiehtextone {
            font-size: 25px;
            margin-left: 30vh;
        }
        .pagefiftiehtexttwo {
            font-size: 30px;
            margin-left: 35%;
            margin-top: 4vh;
            float: left;
        }
        .pagefiftiehtextthree-1 {
            font-size: 30px;
            float: right;
            margin-top: 4vh;
        }
        .pagefiftiehtextthree-2 {
            font-size: 30px;
            float: right;
        }
        .pagefiftiehtextthree-3 {
            font-size: 30px;
    
            float: right;
        }
        .pagefiftiehtextfour {
            font-size: 25px;
            margin: 6vh 15vh;
            text-align: center;
            float: left;
        }
      
        .page.fiftieh {
            transform: translateX(-20%);
            transition: transform .6s ease;
        }
        .page.fiftieh.show {
            transform: translateX(-5%);
        }
        .page.fiftieh.right {
            transform: translateX(60%);
            transition: transform .8s ease;
        }
        .page.fiftieh.right.show {
            transform: translateX(0);
        }
        #wheat_lottie_container {
            height: 350px;
     
        }
        .stickylottie2 {
            height: 320px;
            margin-top: -330px;
        }
    } */


        /* engineering cycle */
        .cycle-content-ul li {
            line-height: 35px;
        }
        .cycle-container {
            display: flex;
            align-items: flex-start;
            width: 100%;
            border-radius: 20px;
            flex-direction: row;
            justify-content: space-evenly;
        }
        
        .cycle-circle-container {
            display: flex;
            width: 20%;
            height: 100%;
            flex-direction: column;
            align-items: center;
         /* margin-right: -10vw; */
         margin: 5vw -10vw 5vw 0;
        }
        
        .cycle-circle {
            position: relative;
            width: 10vw;
            height: 10vw;
            border-radius: 50%;
            background-color: #FBC44B;
            overflow: visible;
            display: flex;
            flex-direction: column;
            align-items: center;
            font-weight: bold;
            margin-bottom: 10px;
        }
        
        .cycle-circle img {
            border-radius: 30%;
            width: 80%;
            padding: 10px;
            padding-top: 2vh;
            object-fit: contain;
            transition: width .3s linear;
        }
        
        .cycle-circle p {
            color: #C72F42;
            font-family: poppins;
            text-align: center;
            margin: 0;
        }
        
        .cycle1 {
            left: 20%;
        }
        
        .cycle2 {
            right: 20%;
        }
        
        .cycle3 {
            left: 20%;
        }
        
        .cyclecontent-container {
            /* margin: 20px; */
            margin: 8vw 0;
            width: 40vw;
            position: relative;
            background-color: #FDE7C8;
          /* border: #F59B11 10px solid; */
          box-shadow: 12px 12px #FBC44B;
            border-radius: 40px;
        }
        
        .cycle-title {
            position: relative;
            font-size: 2em;
        }
        
        .cycle-content {
            position: relative;
            color: #F27132;
            font-size: 1em;
            margin: 0 1em 1em 0;
            padding: 1%;
        }
        .cycle-content-ul {
            list-style: none;
            display: none;
            li {
                display: flex;
            }
        }
        
        .cycle-content-ul-cycle {
            font-weight: 1000;
            color: #dd4b02;
            width: auto;
            min-width: 92px;
        }
        
        .showContent {
            display: block;
        }
        #cycle-title {
            font-size: 50px;
            margin: 2vh;
            text-align: center;
            color: #C72F42;
            font-family: anton;
        }
        
        #cycle-subheading {
            font-size: 20px;
            text-align: center;
            color: #C72F42;
            font-family: poppins;
        }
        
        .ppp:hover {
            background-color: #5E6AB4;
            box-shadow: 0 0 20px #FBC44B, inset 0 0 20px #FBC44B;
        }
        
        .ppp:hover>img {
            width: 120%;
        }
        
        .ppp:hover>p {
            display: none;
        }
        
        .ppp {
            transition: all .3s linear;
        }
    /* abstract */
        .abstract-container{
            display: block;
        }

        .abstract {
            width: 100%;
        }
        
        .abstract-heading {
            font-family: anton;
            color: #F9B11F;
            text-align: center;
            font-size: 4rem;
        }
        
        .abstract-hr {
            width: 70%;
            margin: auto;
            border: #FFCC5F 2px solid;
        }
        
        .abstract-content {
            /* font-family: poppinsmedium; */
            font-size: 1.1rem;
            text-align: left;
            margin: 5vh 15vw;
            color: #ffffff;
        }

            /* part table */
            
            th>a {
                color: black;
                text-underline-position: below;
            }
            
            table thead tr {
                background-color: #F27132;
                color: #fff;
            }
            
            table tbody tr:nth-child(odd) {
                background-color: #FFCC5F;
            }
            
            table tbody tr:hover {
                background-color: rgba(143, 143, 143, 0.3);
            }

            /* contribution */
           .iconfontsidebar.contribution{
            font-family: 'iconfont-contribution';
           }
          
            /* sustainable */
            .menu-box.sustainable{
                height: 520px;
               }
               .menu-box.sustainable:hover {
                width: 260px;
            }
            .iconfontsidebar.sustainable{
                font-family: 'iconfont-sustainability';
            }
            .sidebarcontainer.sustainable{
                top: 100px;
            }
            .menu-box.sustainable{
                top: 100px;
            }
            .sidebarli.sustainable{
                margin-bottom: 10px;
            }
            .menu-box.menu-box.sustainable:hover .sidebarli.sustainable{
                margin-bottom: 5px;
            }
            /* inclusive */
            .iconfontsidebar.inclusive{
                font-family: 'iconfont-inclusive';
            }
            .menu-box.inclusive{
                height: 440px;
            }
            .menu-box.inclusive:hover {
                width: 220px;
            }
            .iconfontsidebar.education{
                font-family: 'iconfont-education';
            }

            /* education */
            .menu-box.education{
                height: 440px;
            }
            .sidebarli.education{
                margin-bottom: 12px;
            }
        .menu-box.education:hover .sidebarli.education{
            margin-bottom: 5px;
        }

 
        .award_star:hover~.award_content {
            display: block;
            opacity: 1;
            background-color: rgba(94, 106, 180, .8);
            border: rgba(255, 180, 74, 0.6) 5px solid;
            border-radius: 5%;
        }
        
    
        .award_b {
            transition: all .5s;
        }
        
        .award_star {
            width: 10vw;
        }
        
        .award_content {
            width: 70vw;
            height: 35vw;
            opacity: 0;
            display: none;
            transition: .5s opacity;
        }
        
        .award_b {
            width: 70vw;
            margin-top: 5vh;
            position: absolute;
        }
        
        .award_t {
            width: 8vw;
            margin-left: 5vw;
            margin-top: 100px;
            animation: float 3s infinite;
        }
        
        .award_star,
        .award_content {
            position: fixed;
            top: 0;
            z-index: 999;
        }
        
        .award_content {
            margin-left: 10vw;
            margin-top: 20vh;
        }