.plasmid {
   padding: .4rem 0 1.2rem;
}

@media only screen and (max-width: 768px) {
   .plasmid {
      padding: 20px 0;
   }
}

/* ==========================================================================
   晶体结构
   ========================================================================== */
/* —————————— 1 —————————— */
.crystal_first {
   padding: .85rem 0;
   background: rgb(247, 250, 252);
}

.search_bar {
   border-radius: .04rem;
   background: rgb(222, 239, 239);
   padding: .25rem;
}

.crystal_search {
   justify-content: space-between;
}

.crystal_left {
   width: 3.1rem;
}

.crystal_right {
   width: calc(100% - 3.25rem);
   justify-content: space-between;
}

.crystal_btn {
   width: 1.2rem;
   height: .74rem;
   border-radius: .04rem;
   background: rgba(69, 180, 208, 0.95);
   border: none;
   color: rgb(255, 255, 255);
   font-size: .2rem;
   line-height: 1.2;
   font-weight: 500;
}

.crystal_input {
   width: calc(100% - 1.35rem);
   padding: 0 .25rem;
   color: rgb(0, 0, 0);
   font-size: .2rem;
   border: none;
   border-radius: .04rem;
   overflow: hidden;
}

.crystal_input::placeholder {
   color: rgb(136, 136, 136);
}

.crystal_left .layui-input {
   height: .74rem;
   border-radius: .04rem;
   color: rgb(136, 136, 136);
   font-size: .2rem;
}

.crystal_left .layui-form-select dl {
   top: .8rem;
}

.crystal_left .layui-form-selectup dl {
   top: auto;
   bottom: .8rem;
}


/* —————————— 2 —————————— */
.crystal_second {
   padding: .7rem 0 .6rem;
}

.crystal_desc {
   padding: .4rem;
   color: rgb(0, 0, 0);
   font-size: var(--fontSize16);
   font-weight: 400;
   line-height: 240%;
   border-radius: .04rem;
   background: rgb(240, 248, 248);
}

.crystal_list {
   margin: 0 0 0 -0.6rem;
   padding: .3rem .3rem 0;
}

.crystal_list li {
   width: calc(25% - .6rem);
   margin: 0 0 .6rem .6rem;
}

.crystal_box .pic {
   border: .02rem solid rgb(222, 239, 239);
   border-radius: .04rem;
   background: rgb(255, 255, 255);
}

.crystal_title {
   border-radius: 4px;
   height: .4rem;
   background: rgb(222, 239, 239);
   text-align: center;
   margin-top: .1rem;
   color: rgb(0, 0, 0);
   font-size: var(--fontSize16);
   font-weight: 400;
   line-height: 1.2;
   padding: 0 .1rem;
}


/* —————————— 3 —————————— */
.crystal_third {
   padding: 0 0 1rem;
   position: relative;
   z-index: 1;
}

/* .crystal_third::before {
   content: "";
   position: absolute;
   left: 0;
   bottom: 0;
   width: 100vw;
   height: 3.7rem;
   background: rgb(0, 129, 197) linear-gradient(180.00deg, rgba(28, 86, 117, 0) 60.305%, rgba(22, 99, 153, 0.23) 69.466%, rgb(17, 112, 189) 100%);
   z-index: -1;
} */

.crystal_service {
   margin: -0.25rem 0 0 -0.25rem;
}

.crystal_service li {
   width: calc(25% - .25rem);
   margin: .25rem 0 0 .25rem;
}

.crySer_box {
   border-radius: .04rem;
   overflow: hidden;
   height: 100%;
   background: rgb(0, 129, 197) linear-gradient(180.00deg, rgba(28, 86, 117, 0) 60.305%, rgba(22, 99, 153, 0.23) 69.466%, rgb(17, 112, 189) 100%);
}

.crySer_box .pic {
   border: .02rem solid rgb(217, 234, 242);
   border-radius: .04rem;
   background: rgb(255, 255, 255);
}

/* .crySer_box .pic::before {
   content: "";
   position: absolute;
   right: -0.4rem;
   top: 50%;
   transform: translateY(-50%);
   width: .52rem;
   height: .36rem;
   background: url(../crystal/arrow.png) no-repeat;
   background-size: .52rem auto;
   z-index: 1;
} */

.crystal_service li:last-child .crySer_box .pic::before {
   display: none;
}

.crySer_area {
   padding: 0 .2rem .35rem;
}

.crySer_title {
   color: rgb(255, 255, 255);
   font-size: .2rem;
   font-weight: 500;
   padding: .35rem 0 .15rem;
}

.crySer_info {
   color: rgb(255, 255, 255);
   font-size: var(--fontSize16);
   font-weight: 400;
   line-height: 1.5;
}

.pre_dian4 p {
   position: relative;
   padding-left: .2rem;
}

.pre_dian4 p::before {
   content: "";
   position: absolute;
   left: .08rem;
   top: .1rem;
   width: .04rem;
   height: .04rem;
   border-radius: 50%;
   background: rgb(0, 0, 0);
}

.crySer_info.pre_dian4 p::before {
   background: #fff;
}


/* —————————— 4 —————————— */
.crystal_fourth {
   padding: 0 0 .6rem;
}

.bioCry_list {
   margin: 0 0 0 -0.2rem;
}

.bioCry_list li {
   width: calc(25% - .2rem);
   margin: .2rem 0 0 .2rem;
}

.biortus_crystal {
   border-radius: .2rem;
   box-shadow: 0px 6px 6px 0px rgba(6, 40, 46, 0.05);
   background: radial-gradient(80.50% 113.03% at 41% -10%, rgb(255, 255, 255) 32.809%, rgb(248, 253, 255) 97.639%);
   border: .02rem solid #C5ECFF;
   flex-direction: column;
   align-items: center;
   height: 100%;
   padding: 0 .1rem .4rem;
}

.bioCry_img {
   width: 1.24rem;
   height: 1.24rem;
   margin-top: -0.24rem;
   transition: all .4s;
}

/* .biortus_crystal:hover .bioCry_img {
   transform: rotateY(360deg);
} */

.biortus_crystal:hover .bioCry_img {
   transform: translateY(-0.1rem);
}

.bioCry_title {
   margin-top: .4rem;
   color: rgb(51, 51, 51);
   font-size: .2rem;
   font-weight: 400;
   line-height: 1.4;
   text-align: center;
}

.echarts_module {
   margin: .3rem 0;
}


/* —————————— 5 —————————— */
.crystal_fifth {
   padding: .9rem 0;
   background: rgba(245, 249, 251, 0.8) linear-gradient(180.00deg, rgba(154, 198, 220, 0) 57.252%, rgba(224, 240, 248, 0.38) 100%);
}

.crystalNum_list {
   margin: 0 0 0 -1rem;
}

.crystalNum_list li {
   width: calc(23% - 1rem);
   margin: 0 0 0 1rem;
}

.crystalNum_list li:nth-child(4) {
   width: calc(31% - 1rem);
}

.crystal_num {
   color: rgb(33, 33, 33);
   font-size: .6rem;
   font-weight: 500;
}

.crystalNum_unit {
   background: linear-gradient(270.00deg, rgb(0, 164, 156), rgb(0, 134, 209));
   -webkit-background-clip: text;
   background-clip: text;
   -webkit-text-fill-color: transparent;
   font-size: .48rem;
   line-height: 1.1;
   font-weight: 400;
}

.crystalNum_title {
   color: rgb(119, 119, 119);
   font-size: .2rem;
   font-weight: 400;
   line-height: 1.2;
}

#echarts1 {
   width: 100%;
   height: 6rem;
}

@media only screen and (max-width: 1200px) {
   .crystal_desc {
      line-height: 2;
   }

   .crystal_title {
      height: 36px;
   }
}

@media only screen and (max-width: 768px) {
   .crystal_second {
      padding: 20px 0;
   }

   .crystal_fourth {
      padding: 40px 0 20px;
   }
}

@media only screen and (max-width: 500px) {
   .crystal_list li {
      width: calc(50% - .6rem);
   }

   .crystal_service li {
      width: calc(50% - .25rem);
   }

   .crystal_third::before {
      height: calc(100% - 50px);
   }

   .bioCry_list li {
      width: calc(50% - .2rem);
   }

   .crystalNum_list {
      margin: 0 0 0 -20px;
   }

   .crystalNum_list li {
      width: calc(50% - 20px) !important;
      margin: 0 0 10px 20px;
   }

   .crystal_left {
      width: 100%;
   }

   .crystal_right {
      width: 100%;
      margin-top: 10px;
   }

   .crystal_first {
      padding: 20px 0;
   }

   .crystal_list {
      padding: 20px 0 0;
   }

   #echarts1 {
      height: 500px;
   }
}













/* ==========================================================================
   蛋白小分子复合物
   ========================================================================== */
.molecule_area {
   border-radius: .24rem;
   background: rgb(228, 238, 238);
   padding: .3rem .4rem;
   margin-top: .4rem;
}

.molecule_title {
   align-items: baseline;
}

.molecule_name {
   color: rgb(0, 164, 156);
   font-size: .18rem;
   font-weight: 500;
   line-height: 1.2;
   margin-right: .4rem;
}

.molecule_line {
   flex-grow: 1;
   border-bottom: 1px solid rgb(194, 222, 221);
}

.molecule_msg {
   margin-top: .2rem;
   color: rgb(0, 0, 0);
   font-size: var(--fontSize16);
   font-weight: 400;
   line-height: 2.4;
}

@media only screen and (max-width: 1200px) {
   .molecule_name {
      font-size: 14px;
   }

   .molecule_msg {
      line-height: 2;
   }
}












/* ==========================================================================
   抗原抗体结构
   ========================================================================== */


.antigen_title {
   color: rgb(51, 51, 51);
   font-size: .3rem;
   font-weight: 700;
   text-align: center;
}

#echarts2 {
   width: 100%;
   height: 6rem;
}

.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;
}

.cellApply_box {
   height: 100%;
}



@media only screen and (max-width: 500px) {
   .example_title {
      font-size: 12px;
   }

   .example_nwms {
      padding: 10px 20px;
   }

   #echarts2 {
      height: 350px;
   }
}







/* ==========================================================================
   PROTAC
   ========================================================================== */
.protac_tag {
   margin-top: 1.2rem;
}







/* ==========================================================================
   Crystallographic Fragment Screening
   ========================================================================== */