.plasmid {
    padding: .4rem 0 1.2rem;
}

@media only screen and (max-width: 768px) {
    .plasmid {
        padding: 20px 0;
    }
}

/* ==========================================================================
   Cryo-EM
   ========================================================================== */
.inner_list {
    margin: 0 0 0 -0.6rem;
}

.inner_list li {
    margin: .4rem 0 0 .6rem;
}

.inner_box {
    /* width: 3.6rem; */
    border-top: 1px solid rgb(135, 184, 209);
    padding-top: .1rem;
    align-items: center;
}

.inner_num {
    font-size: .4rem;
    line-height: 1.4;
    font-weight: 500;
    margin-right: .2rem;
}

.inner_list li:nth-child(1) .inner_num {
    color: rgb(66, 172, 231);
}

.inner_list li:nth-child(2) .inner_num {
    color: rgb(38, 205, 197);
}

.inner_list li:nth-child(3) .inner_num {
    color: rgb(145, 184, 117);
}

.inner_txt {
    color: rgb(255, 255, 255);
    font-size: .24rem;
    font-weight: 400;
    line-height: 160%;
}


/* —————————— 1 —————————— */
.cryoem_first {
    padding: 1rem 0 0;
}

.cryoem_list li {
    width: 16.66%;
    transition: all .3s;
}

.cryoem_list li:not(:last-of-type) {
    border-right: 1px solid rgb(187, 219, 236);
}

.cryoem_list li:hover {
    width: 30%;
}

.cryoem_group {
    position: relative;
    background: rgb(247, 250, 252);
    height: 4.8rem;
    overflow: hidden;
}

.cryoem_list li:hover .cryoem_group {
    /*background: url(../cryoEM/cryoem01_on.png) no-repeat;*/
    background-size: cover;
    background: rgb(255 255 255);
}

.cryoem_box {
    padding: .3rem;
    flex-direction: column;
    height: 100%;
}

.cryoem_title {
    color: rgb(0, 0, 0);
    font-size: .2rem;
    font-weight: 500;
    margin-bottom: .2rem;
}

.cryoem_box .pic {
    margin-top: auto;
}

.cryoem_list li:hover .cryoem_box {
    display: none;
}

.cryoem_info {
    position: relative;
    color: rgb(51, 51, 51);
    font-size: var(--fontSize16);
    font-weight: 400;
    line-height: 2;
    width: 100%;
    z-index: 2;
}

.pre_dian5 p {
    position: relative;
    padding-left: .2rem;
}

.pre_dian5 p::before {
    content: "";
    position: absolute;
    left: .08rem;
    top: .14rem;
    width: .04rem;
    height: .04rem;
    border-radius: 50%;
    background: rgb(0, 0, 0);
}

.cryoem_cover {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    visibility: hidden;
}

.cryoem_list li:hover .cryoem_cover {
    opacity: 1;
    visibility: visible;
}

.cryoem_module {
    position: relative;
    padding: .3rem;
    height: 100%;
}

.cryoem_video {
    z-index: 1;
    position: absolute;
    right: 0;
    bottom: 0;
    width: 70%;
    /* max-height: 3.2rem; */
}

.video_play {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}




/* —————————— 2 —————————— */
.cryoem_second {
    padding: 1rem 0;
    background: rgb(198, 224, 238);
}

.representative {
    border-radius: .04rem;
    box-shadow: 0px 0px 18px 0px rgba(14, 77, 112, 0.15);
    background: rgb(255, 255, 255);
    padding: .45rem .15rem .55rem;
}

.representative_title {
    color: rgb(0, 0, 0);
    font-size: .28rem;
    font-weight: 600;
    text-align: center;
    margin-bottom: .4rem;
}

.representative_list {
    margin: 0 0 0 -0.1rem;
}

.representative_item {
    width: calc(33.33% - .1rem);
    margin: 0 0 .1rem .1rem;
}

.representative_item table tr th {
    background: rgb(0, 134, 209);
    height: 60px;
    text-align: left;
    padding: 0 .1rem;
    color: rgb(255, 255, 255);
    font-size: var(--fontSize14);
    font-weight: 500;
    border: 1px solid rgba(255, 255, 255, 0.7);
}

.representative_item table tr td {
    border: 1px solid rgba(255, 255, 255, 0.7);
    color: rgb(0, 0, 0);
    font-size: 12px;
    font-weight: 400;
    height: 30px;
    padding: 0 .1rem;
}

.representative_item table tr:nth-child(odd) {
    background: rgba(210, 225, 233, 0.7);
}

.representative_item table tr:nth-child(even) {
    background: rgba(247, 250, 252, 0.7);
}




/* —————————— 3 —————————— */
.cryoem_third {
    padding: 1.2rem 0 .8rem;
}

.equipment_list {
    margin: 0 0 0 -0.4rem;
}

.equipment_list li {
    width: calc(25% - .4rem);
    margin: 0 0 .4rem .4rem;
}

.equipment_box {
    position: relative;
}

.equipment_box::before {
    content: "";
    position: absolute;
    width: calc(100% + .4rem);
    height: 1px;
    background: rgb(135, 184, 209);
    bottom: 1.1rem;
    left: 0;
}

.equipment_list li:last-child .equipment_box::before {
    width: 100%;
}

.equipment_box .pic {
    border-radius: .04rem .04rem 0px 0px;
}

.equipment_title {
    color: rgb(255, 255, 255);
    font-size: .3rem;
    font-weight: 500;
    line-height: 1.2;
    height: .8rem;
    text-align: center;
    border-radius: 4px;
    position: relative;
    margin-top: .6rem;
}

.equipment_title::before {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: -0.4rem;
    width: .2rem;
    height: .2rem;
    border-radius: 50%;
    background: rgb(99, 187, 180);
}

.equipment_title::after {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: -0.2rem;
    width: 1px;
    height: .3rem;
    background: rgb(135, 184, 209);
    z-index: -1;
}

.equipment_list li:nth-child(1) .equipment_title {
    background: rgb(99, 187, 180);
}

.equipment_list li:nth-child(1) .equipment_title::before {
    background: rgb(99, 187, 180);
}

.equipment_list li:nth-child(2) .equipment_title {
    background: rgb(0, 162, 154);
}

.equipment_list li:nth-child(2) .equipment_title::before {
    background: rgb(0, 162, 154);
}

.equipment_list li:nth-child(3) .equipment_title {
    background: rgb(0, 134, 209);
}

.equipment_list li:nth-child(3) .equipment_title::before {
    background: rgb(0, 134, 209);
}

.equipment_list li:nth-child(4) .equipment_title {
    background: rgb(67, 121, 188);
}

.equipment_list li:nth-child(4) .equipment_title::before {
    background: rgb(67, 121, 188);
}




/* —————————— 4 —————————— */
.cryoem_fourth {
    background: rgb(247, 250, 252);
    padding: 1rem 0 .9rem;
}

.service_list li {
    margin-bottom: .5rem;
}

.service_box {
    padding: 0 .5rem .3rem;
    justify-content: space-between;
    background: url(../cryoEM/service_bg.png) no-repeat;
    background-size: 100% 100%;
}

.service_left {
    width: calc(100% - 3.2rem);
}

.service_right {
    width: 2.6rem;
}

.service_right .pic {
    border: 1px solid rgb(0, 134, 209);
    border-radius: .04rem;
    background: rgb(255, 255, 255);
    margin-top: -0.3rem;
}

.service_title {
    color: rgb(0, 164, 156);
    font-size: .28rem;
    font-weight: 700;
    font-style: italic;
    padding: .1rem 0;
    border-bottom: 1px solid rgb(116, 196, 197);
}

.service_area {
    margin: .3rem 0 0;
    justify-content: space-between;
}

.service_item {
    position: relative;
    padding-left: .2rem;
    color: rgb(51, 51, 51);
    font-size: var(--fontSize16);
    line-height: 2;
    width: calc(33.33% - .1rem);
}

.service_item::before {
    content: "";
    position: absolute;
    width: .04rem;
    height: .04rem;
    background: #333333;
    border-radius: 50%;
    left: .08rem;
    top: .14rem;
}

.service_item a:hover {
    text-decoration: underline;
}

.service_list li:last-child .service_item {
    width: 100%;
}




/* —————————— 5 —————————— */
.cryoem_fifth {
    padding: 1.15rem 0 1.05rem;
    background: linear-gradient(180.00deg, rgba(154, 198, 220, 0) 22.137%, rgba(224, 240, 248, 0.5) 100%);
}

.question_list {
    margin: 0 0 0 -0.45rem;
}

.question_list li {
    width: calc(33.33% - .45rem);
    margin: 0 0 .45rem .45rem;
}

.question_flex {
    justify-content: space-between;
    align-items: center;
    padding: .25rem .4rem;
    border-radius: 4px;
}

.question_list li:nth-child(1) .question_flex {
    background: rgb(69, 184, 175);
}

.question_list li:nth-child(2) .question_flex {
    background: rgb(30, 150, 216);
}

.question_list li:nth-child(3) .question_flex {
    background: rgb(116, 154, 229);
}

.question_link {
    color: rgb(255, 255, 255);
    font-size: .24rem;
    font-weight: 500;
}

.question_circle {
    flex-shrink: 0;
    box-shadow: 0px 3px 4px 0px rgba(46, 88, 88, 0.25);
    background: rgb(247, 250, 252);
    width: .48rem;
    height: .48rem;
    border-radius: 50%;
    transition: all .3s;
}

.question_circle .fa-angle-right {
    background: linear-gradient(270.00deg, rgb(0, 164, 156), rgb(0, 134, 209) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-size: .24rem;
}

.question_flex:hover .question_circle {
    transform: translateX(0.1rem);
}


@media only screen and (max-width: 1200px) {
    .service_item {
        padding-left: 15px;
    }

    .service_item::before {
        width: 3px;
        height: 3px;
        top: 10.5px;
        left: 6px;
    }

    .pre_dian5 p {
        padding-left: 15px;
    }

    .pre_dian5 p::before {
        width: 3px;
        height: 3px;
        top: 10.5px;
        left: 6px;
    }
}

@media only screen and (max-width: 920px) {
    .inner_box {
        width: auto;
    }
}

@media only screen and (max-width: 768px) {
    .representative_item {
        width: 100%;
    }

    .representative_item table tr td:nth-child(1),
    .representative_item table tr td:nth-child(2) {
        width: 35%;
    }

    .inner_list {
        display: none;
    }

    .cryoem_list li:nth-child(3) {
        border-right: none;
    }

    .cryoem_list li:nth-child(-n + 3) {
        border-bottom: 1px solid rgb(187, 219, 236);
    }

    .cryoem_list {
        flex-wrap: wrap;
    }

    .cryoem_list li {
        width: 33.33%;
    }

    .cryoem_list li:hover {
        width: 33.33%;
    }

    .cryoem_box {
        display: none;
    }

    .cryoem_cover {
        visibility: initial;
        opacity: 1;
    }

    .cryoem_info {
        width: 100%;
    }

    .cryoem_group {
        background: url(../cryoEM/cryoem01_on.png) no-repeat;
        background-size: cover;
    }

    .question_circle .fa-angle-right {
        font-size: 16px;
    }

}

@media only screen and (max-width: 500px) {
    .cryoem_list li {
        width: 100%;
    }

    .cryoem_list li:hover {
        width: 100%;
    }

    .cryoem_list li {
        border-right: none !important;
        border-bottom: 1px solid rgb(187, 219, 236) !important;
    }

    .cryoem_title {
        font-size: 14px;
    }

    .equipment_list li {
        width: calc(50% - .4rem);
    }

    .equipment_list li:nth-child(2) .equipment_box::before {
        width: 100%;
    }

    .service_left {
        width: 100%;
    }

    .service_right {
        width: 50%;
    }

    .service_box {
        justify-content: center;
    }

    .service_right .pic {
        margin-top: 10px;
    }

    .service_item {
        width: calc(50% - .1rem);
    }

    .question_list li {
        width: calc(100% - .45rem);
    }

    .cryoem_fifth {
        padding: 20px 0;
    }

    .cryoem_fourth {
        padding: 20px 0 15px;
    }

    .cryoem_third {
        padding: 40px 0 20px;
    }
}










/* ==========================================================================
   CryoEM结构库
   ========================================================================== */
.gpcrs_list {
    margin: 0 0 0 -0.3rem;
}

.gpcrs_list li {
    width: calc(25% - .3rem);
    margin: 0 0 0 .3rem;
}

.gpcrs_box {
    border-radius: .04rem;
    background: rgb(255, 255, 255);
    padding: .3rem;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.gpcrs_box .pic {
    margin-top: auto;
}

.gprcs_heading {
    justify-content: space-between;
    align-items: flex-start;
}

.gprcs_title {
    width: 73%;
    color: rgb(0, 134, 209);
    font-size: .22rem;
    font-weight: 500;
    padding-bottom: .1rem;
    border-bottom: 1px solid rgb(225, 225, 225);
}

.gpcrs_h5 {
    color: rgb(0, 0, 0);
    font-size: .2rem;
    font-weight: 400;
    margin-bottom: .05rem;
}

.gpcrs_h6 {
    color: rgb(153, 153, 153);
    font-size: var(--fontSize14);
    text-align: right;
}


.gprcs_frame {
    padding: .6rem .4rem;
    border-radius: 0px 1.2rem 4px 4px;
    background: rgb(255, 255, 255);
    position: relative;
}

.gprcs_frame::before {
    content: "";
    position: absolute;
    left: 0;
    top: -0.1rem;
    border-radius: 0px 1.2rem 0px 0px;
    background: linear-gradient(270.00deg, rgba(0, 164, 156, 0.5), rgba(0, 134, 209, 0.5) 100%);
    width: 100%;
    height: 1.2rem;
    z-index: -1;
}

.gprcs_area {
    font-size: var(--fontSize16);
    font-weight: 400;
    line-height: 2.4;
}

.literature {
    margin-top: .5rem;
    padding-top: .5rem;
    border-top: 1px dashed rgb(0, 134, 209);
}

.litera_flex {
    justify-content: space-between;
}

.reference {
    color: rgb(51, 51, 51);
    font-size: .2rem;
    font-weight: 500;
}

.reference_list {
    width: 86%;
}

.reference_item {
    color: rgb(102, 102, 102);
    font-size: 12px;
    line-height: 2.3;
}


@media only screen and (max-width: 768px) {
    .gpcrs_h5 {
        font-size: 14px;
    }
}

@media only screen and (max-width: 500px) {
    .gpcrs_list li {
        width: 100%;
        margin: 0 0 20px .6rem;
    }

    .gprcs_title {
        font-size: 16px;
    }

    .reference {
        font-size: 14px;
        font-weight: bold;
    }

    .reference_list {
        width: 100%;
    }
}

/* .gpcrs_box .upimg3 {
    transition: all .8s;
}

.gpcrs_box .pic:hover .upimg3 {
    -webkit-transform: translate(-50%, -50%) rotate(180deg);
    transform: translate(-50%, -50%) rotate(180deg);
} */









/* ==========================================================================
   SPA
   ========================================================================== */
.nanobody_area {
    padding: .5rem;
    border-radius: .2rem;
    background: rgb(255, 255, 255);
}

.qa_circle {
    flex-shrink: 0;
    width: .3rem;
    height: .3rem;
    border-radius: 50%;
    background: rgb(84, 180, 182);
    color: rgb(255, 255, 255);
    font-size: .2rem;
    line-height: 1;
}

.question {
    margin-left: .1rem;
    padding: .04rem .2rem;
    color: rgb(255, 255, 255);
    font-size: .16rem;
    font-weight: 500;
    line-height: 120%;
    border-radius: 100px;
    background: rgb(84, 180, 182);
}

.nanobody_answer {
    margin: .3rem 0 0;
}

.nanobody_answer .qa_circle {
    background: rgb(125, 161, 232);
}

.answer {
    margin-left: .2rem;
    color: rgb(51, 51, 51);
    font-size: .16rem;
    font-weight: 400;
    line-height: 200%;
}

.nanobody_area .nanobody_qa:not(:last-of-type) {
    margin-bottom: .3rem;
    padding-bottom: .15rem;
    border-bottom: 1px dashed rgb(106, 179, 214);
}

.answer_right {
    flex-shrink: 0;
    margin-left: .8rem;
}

.answer_right img {
    width: 2rem;
}


@media only screen and (max-width: 1200px) {
    .answer {
        font-size: 12px;
    }

    .qa_circle {
        width: 20px;
        height: 20px;
        font-size: 12px;
    }

    .question {
        font-size: 12px;
    }
}

@media only screen and (max-width: 500px) {
    .answer {
        flex-direction: column;
    }

    .answer_right {
        margin-left: 0;
        margin-top: 20px;
    }

    .answer_right img {
        width: auto;
    }
}









/* ==========================================================================
   药物递送载体表征LNP
   ========================================================================== */
.benefit_list {
    padding: 0 .1rem;
    margin: -0.2rem 0 0 -0.2rem;
}

.benefit_list li {
    width: calc(25% - .2rem);
    margin: .2rem 0 0 .2rem;
}

.benefit_circle {
    position: relative;
    width: 100%;
    height: .2rem;
}

.benefit_circle::after {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: .2rem;
    height: .2rem;
    background: rgb(255, 158, 0);
    border-radius: 50%;
}

.benefit_circle::before {
    content: "";
    position: absolute;
    left: -0.1rem;
    top: 50%;
    transform: translateY(-50%);
    width: calc(100% + .2rem);
    height: 1px;
    background: rgb(216, 216, 216);
    z-index: -1;
}

.benefit_area {
    margin-top: .35rem;
    position: relative;
    background: rgb(227, 239, 245);
    height: 1rem;
    padding: 0 .2rem;
}

.benefit_area::before {
    content: "";
    position: absolute;
    left: 0;
    top: -0.25rem;
    width: .41rem;
    height: .25rem;
    background: url(../cryoEM/triangle.svg) no-repeat;
    background-size: .41rem auto;
}

.benefit_name {
    color: #000000;
    font-size: var(--fontSize16);
    font-weight: 400;
    line-height: 140%;
}


.mor_list {
    margin: 0 0 0 -0.8rem;
}

.mor_list li {
    width: calc(25% - .8rem);
    margin: 0 0 .4rem .8rem;
}

.mor_title {
    border-radius: .04rem;
    background: rgb(217, 234, 242);
    height: .4rem;
    color: rgb(0, 0, 0);
    font-size: var(--fontSize18);
    font-weight: 400;
    line-height: 120%;
    margin-bottom: .1rem;
}

.mor_img .pic {
    border-radius: .04rem;
}

.morphological {
    color: rgb(0, 164, 156);
    font-size: var(--fontSize18);
    font-weight: 400;
    line-height: 120%;
    text-align: center;
    position: relative;
}

.morphological::after,
.morphological::before {
    content: "";
    position: absolute;
    width: 2rem;
    height: 1px;
    background: rgb(194, 231, 229);
    top: 50%;
    transform: translateY(-50%);
}

.morphological::before {
    left: -2.4rem;
}

.morphological::after {
    right: -2.4rem;
}

.deep_learn {
    margin: .4rem 0;
}

.analysis_list {
    margin: .4rem 0 0 -0.4rem;
}

.analysis_list li {
    width: calc(20% - .4rem);
    margin: 0 0 .4rem .4rem;
}

.analysis_box {
    border: .02rem solid rgb(0, 164, 156);
    background: rgb(255, 255, 255);
    border-radius: .04rem;
    position: relative;
}

.analysis_box::before {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: -0.4rem;
    width: .36rem;
    height: .25rem;
    background: url(../cryoEM/arrow01.png) no-repeat;
    background-size: .36rem auto;
}

.analysis_list li:last-child .analysis_box::before {
    display: none;
}

.mrna_flex {
    margin: .4rem 0 0 -0.8rem;
}

.mrna_box {
    width: calc(50% - .8rem);
    margin: 0 0 .4rem .8rem;
    padding: .25rem .3rem;
    border-radius: .04rem;
    background: rgb(255, 255, 255);
}

.mrna_list {
    margin: -0.2rem 0 0 -0.2rem;
}

.mrna_list li {
    width: calc(50% - .2rem);
    margin: .2rem 0 0 .2rem;
}

@media only screen and (max-width: 1200px) {
    .mor_title {
        height: 32px;
    }

    .benefit_area {
        height: 72px;
    }
}

@media only screen and (max-width: 768px) {
    .benefit_list li {
        width: calc(50% - .2rem);
    }
}

@media only screen and (max-width: 500px) {
    .benefit_list li {
        width: 100%;
    }

    .mor_list li {
        width: calc(50% - .8rem);
    }

    .morphological::after,
    .morphological::before {
        display: none;
    }

    .analysis_list li {
        width: calc(50% - .4rem);
    }

    .mrna_box {
        width: 100%;
    }

    .question {
        border-radius: 10px;
    }
}








/* ==========================================================================
   微晶电子衍射MicroED
   ========================================================================== */
.keyMicro_list li {
    width: calc(16.66% - .2rem);
}


.keyMicro_list .benefit_area {
    height: 1.4rem;
}

.applymicro_list {
    margin: 0 0 0 -0.25rem;
}

.applymicro_list li {
    width: calc(25% - .25rem);
    margin: 0 0 .4rem .25rem;
}

.applymicro_img .pic {
    border-radius: .04rem;
    background: rgb(255, 255, 255);
}

.flowmicro_list {
    margin: 0 0 .26rem -0.24rem;
}

.flowmicro_list li {
    width: calc(16.66% - .24rem);
    margin: 0 0 .24rem.24rem;
}

.flowmicro_title {
    color: rgb(0, 0, 0);
    font-size: var(--fontSize14);
    font-weight: 400;
    line-height: 1.2;
    height: calc(var(--fontSize14) * 4);
    padding-right: .2rem;
}

.flowmicro_num {
    width: .3rem;
    height: .3rem;
    font-size: var(--fontSize18);
    font-weight: 700;
    line-height: 1;
    border-radius: 50%;
    margin-right: .09rem;
    flex-shrink: 0;
}

.flowmicro_list li:nth-child(1) .flowmicro_num {
    color: rgb(82, 178, 130);
    background: rgb(194, 236, 215);
}

.flowmicro_list li:nth-child(2) .flowmicro_num {
    color: rgb(60, 158, 158);
    background: rgb(189, 232, 233);
}

.flowmicro_list li:nth-child(3) .flowmicro_num {
    color: rgb(38, 187, 217);
    background: rgb(196, 240, 249);
}

.flowmicro_list li:nth-child(4) .flowmicro_num {
    color: rgb(168, 168, 240);
    background: rgb(224, 224, 246);
}

.flowmicro_list li:nth-child(5) .flowmicro_num {
    color: rgb(125, 161, 232);
    background: rgb(208, 220, 241);
}

.flowmicro_list li:nth-child(6) .flowmicro_num {
    color: rgb(93, 179, 223);
    background: rgb(204, 227, 238);
}

.flowmicro_box .pic {
    margin-right: .2rem;
    border-radius: .04rem;
}

.flowmicro_arr {
    margin: .2rem 0;
}

.industymicro_list {
    margin: 0 0 .15rem -0.25rem;
}

.industymicro_list li {
    width: calc(25% - .25rem);
    margin: 0 0 .25rem .25rem;
}

.industymicro_title {
    color: rgb(255, 255, 255);
    font-size: var(--fontSize18);
    font-weight: 400;
    line-height: 120%;
    text-align: center;
    border-radius: .04rem;
    height: .6rem;
    margin-bottom: .1rem
}

.industymicro_list li:nth-child(1) .industymicro_title {
    background: rgb(168, 168, 240);
}

.industymicro_list li:nth-child(2) .industymicro_title {
    background: rgb(125, 161, 232);
}

.industymicro_list li:nth-child(3) .industymicro_title {
    background: rgb(125, 196, 232);
}

.industymicro_list li:nth-child(4) .industymicro_title {
    background: rgb(38, 187, 217);
}

.industymicro_img .pic {
    border-radius: .04rem;
    background: rgb(255, 255, 255);
}


.example_box {
    padding: .15rem .4rem;
    border-radius: .04rem;
    border: .02rem solid rgb(212, 230, 247);
    background: rgb(255, 255, 255);
    justify-content: space-between;
    align-items: center;
    position: relative;
    cursor: pointer;
    z-index: 1;
}

.example_box::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: .2rem;
    height: 100%;
    background: rgb(212, 230, 247);
    z-index: -1;
    transition: all .3s;
}

.example_box.on::before {
    width: 100%;
}

.example_title {
    color: rgb(0, 0, 0);
    font-size: .2rem;
    font-weight: 400;
}

.example_unfold {
    width: .25rem;
    height: .25rem;
    background: url(../images/unfold.svg) no-repeat center;
    background-size: contain;
}

.example_nwms {
    margin-top: .2rem;
    border: .02rem solid rgb(212, 230, 247);
    border-radius: .04rem;
    background: rgb(255, 255, 255);
    padding: .5rem .6rem;
    display: none;
}

.example_warp {
    color: rgb(0, 0, 0);
    font-size: var(--fontSize16);
    font-weight: 400;
    line-height: 240%;
}

.cell_example .example_item:not(:last-of-type) {
    margin-bottom: .2rem;
}

@media only screen and (max-width: 1200px) {
    .keyMicro_list .benefit_area {
        height: 100px;
    }

    .flowmicro_num {
        width: 24px;
        height: 24px;
    }

    .flowmicro_list li {
        width: calc(33.33% - .24rem);
    }

    .industymicro_title {
        height: 36px;
    }
}


@media only screen and (max-width: 768px) {
    .keyMicro_list li {
        width: calc(33.33% - .2rem);
    }
}

@media only screen and (max-width: 500px) {
    .example_title {
        font-size: 12px;
    }

    .example_nwms {
        padding: 10px 20px;
    }

    .keyMicro_list li {
        width: calc(50% - .2rem);
    }

    .applymicro_list li {
        width: calc(50% - .25rem);
    }

    .flowmicro_list li {
        width: calc(50% - .24rem);
    }

    .industymicro_list li {
        width: calc(50% - .25rem);
    }
}







/* ==========================================================================
   服务能力
   ========================================================================== */
.facility_list li:not(:last-of-type) {
    margin-bottom: .2rem;
}

.facility_box {
    justify-content: space-between;
    border-radius: .04rem;
    background: rgb(255, 255, 255);
    padding: .3rem .4rem;
}

.facility_left {
    width: 3.2rem;
}

.facility_right {
    width: calc(100% - 3.6rem);
}

.facility_left .pic {
    border-radius: .04rem;
}

.facility_title {
    color: rgb(0, 164, 156);
    font-size: .2rem;
    font-weight: 500;
    margin-bottom: .4rem
}

.facility_desc {
    max-height: calc(var(--fontSize16) * 16.2);
    overflow-y: auto;
    color: rgb(0, 0, 0);
    font-size: var(--fontSize16);
    font-weight: 400;
    line-height: 180%;
    scrollbar-width: thin;
}

.research_img {
    text-align: center;
    border-top: 1px solid rgb(225, 225, 225);
    margin-top: .2rem;
    padding-top: .2rem;
}

.cover_list {
    margin: 0 0 .36rem -0.04rem;
}

.cover_list li {
    width: calc(10% - .04rem);
    margin: 0 0 .04rem .04rem;
}

.cover_box .pic {
    border: .02rem solid rgb(255, 255, 255);
    border-radius: .04rem;
}

@media only screen and (max-width: 1200px) {
    .facility_desc {
        line-height: 1.5;
        max-height: calc(var(--fontSize16) * 13.5);
    }
}

@media only screen and (max-width: 768px) {
    .facility_title {
        font-size: 14px;
    }
}

@media only screen and (max-width: 500px) {
    .facility_left {
        width: 100%;
    }

    .facility_right {
        width: 100%;
        margin-top: 20px;
    }

    .facility_desc {
        max-height: 100%;
    }

    .cover_list li {
        width: calc(20% - .04rem);
    }
}






/* ==========================================================================
   往期论文
   ========================================================================== */
.papers_main {
    padding: .3rem .4rem .5rem;
    background: rgb(255, 255, 255);
}

.papers_flex {
    padding-bottom: .2rem;
    border-bottom: .02rem solid rgb(0, 164, 156);
    justify-content: space-between;
    position: relative;
    z-index: 9;
}

.papers_title {
    color: rgb(0, 164, 156);
    font-size: .2rem;
    font-weight: 500;
}

.papers_right {
    width: 100px;
}

.papers_right .layui-input {
    border: 1px solid rgb(221, 221, 221);
    border-radius: .04rem;
    background: rgb(255, 255, 255);
    color: rgb(102, 102, 102);
    font-size: 14px;
}

.papers_right .layui-form-select .layui-edge {
    border: none;
    right: 12px;
    width: 8px;
    height: 8px;
    border-bottom: 2px solid rgb(186, 221, 221);
    border-right: 2px solid rgb(186, 221, 221);
    margin-top: -6px;
    transform: rotate(45deg);
}

.papers_right .layui-form-selected .layui-edge {
    margin-top: -3px;
    transform: rotate(225deg);
}

.papers_item {
    padding: .4rem 0 .2rem;
    border-bottom: 1px solid rgb(225, 225, 225);
}

.papers_name {
    color: rgb(122, 199, 191);
    font-size: .16rem;
    font-weight: 400;
}

.papers_intro {
    color: rgb(0, 0, 0);
    font-size: .2rem;
    font-weight: 400;
    margin: .06rem 0;
}

.papers_date {
    color: rgb(153, 153, 153);
    font-size: .14rem;
}

.papers_paging {
    margin-top: .45rem;
    display: flex;
    justify-content: flex-end;
}

.papers_item:hover .papers_intro {
    color: var(--primary);
}

@media only screen and (max-width: 1200px) {
    .papers_name {
        font-size: 12px;
    }

    .papers_title {
        font-size: 16px;
    }

    .papers_intro {
        font-size: 14px;
    }

    .papers_date {
        font-size: 12px;
    }
}