@charset "UTF-8";

html,
body {
  width: 100vw;
  height: 100vh;
}
.homepage {
  width: 100%;
  height: 100%;
  background-image: url('../images/底.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  padding-top: 11vw;
}
.xraypage {
  width: 100%;
  height: 100%;
  background-image: url('../images/xraybg.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.homepage .menus {
  width: 56%;
  margin: 0 auto;
}
.homepage .menu {
  width: 100%;
  height: 9vw;
  margin-bottom: 3vw;
  background-image: url('../images/默认-2.png');
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}
.homepage .menu::after {
  content: '';
  display: block;
  clear: both;
}
.homepage .menu:hover {
  background-image: url('../images/默认-1.png');
  background-position: center;
}
a{
  display: inline-block;
  width: 100%;
  height: 100%;
  text-decoration: none;
  color: inherit;
}
.homepage .menu .legend {
  float: left;
  width: 9vw;
  height: 9vw;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.menu1 .legend {
  background-image: url('../images/1.png');
}
.menu2 .legend {
  background-image: url('../images/2.png');
}
.menu3 .legend {
  background-image: url('../images/3.png');
}
.homepage .menu .text {
  float: left;
  margin-left: 6vw;
  height: 9vw;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: left center;
}
.menu1 .text {
  background-image: url('../images/X射线衍射晶体结构分析实验_.png');
  width: 49%;
}
.menu2 .text {
  background-image: url('../images/基于结构的靶向共价药物设计.png');
  width: 50%;
}
.menu3 .text {
  background-image: url('../images/基于量子化学的靶向共价药物筛选_.png');
  width: 57.5%;
}

.xraypage .top {
  background-color: rgb(31, 50, 78);
  width: 100%;
  height: 6vw;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
}
.xraypage .top::after {
  content: '';
  display: block;
  clear: both;
}
.xraypage .topcont {
  width: 70%;
  margin: 0 auto;
}
.xraypage .logo {
  
  width: 35vw;
  height: 3.38vw;
  background-image: url('../images/xraylogo.png');
  background-repeat: no-repeat;
  background-size: 70%;
  background-position: left bottom;
}
.drugpage .logo {
  background-image: url('../images/drugdesign.png');
}
.ttpage .logo {
  background-image: url('../images/targetedtherapy.png');
}
.xraypage .toptext {
  color: #fff;
  height: 2.5vw;
  line-height: 2.5vw;
  float: left;
}
.xraypage .returnbtn {
  width: 5.6vw;
  height: 1.98vw;
  background-image: url('../images/返回.png');
  background-repeat: no-repeat;
  background-size: cover;
  float: right;
}

.xraypage .content {
  width: 70%;
  margin: 0 auto;
  margin-top: 2.39vw;
}
.xraypage .content::after {
  content: '';
  display: block;
  clear: both;
}
.xraypage .box {
  float: left;
  color: #fff;
  background-color: rgba(31, 50, 78, .8);
  border: 1px solid rgb(88, 120, 135);
  height: 39.9vw;
  box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
}
.xraypage .menu_box {
  width: 21%;
}
.box .heading {
  height: 2.5vw;
  line-height: 2.5vw;
  border-bottom: 1px solid rgb(88, 120, 135);
  padding-left: 1.5vw;
  font-size: 1.3em;
}
.xraypage .content_box {
  width: 77%;
  margin-left: 2%;
}
.xraypage .menus {
  width: 96%;
  margin: 1vw auto;
}
.xraypage .menu{
  width: 100%;
  height: 2.6vw;
  line-height: 2.6vw;
  margin-bottom: .6vw;
  background-image: url('../images/菜单-默认.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  text-align: center;
  cursor: pointer;
}
.xraypage .menu:hover {
  background-image: url('../images/悬停-1.png');
}
.xraypage .menu.current {
  background-image: url('../images/菜单-激活.png');
}
.xraypage iframe {
  width: 53vw;
  height: 33.2vw;
  margin: 1.5vw .5vw;
}




.drugdesign {
  color: #fff;
  padding: 1vw 3.9vw;
}
.drugdesign .step {
  display: none;
}
.drugdesign .step.show {
  display: block;
}
.drugdesign .step h2 {
  text-align: center;
  line-height: 6vw;
}
.drugdesign .step p {
  text-indent: 2em;
  line-height: 1.5em;
  margin: 1em 0;
}

.protein {
  width: 100%;
  height: 600px;
  margin: 0 auto;
  display: block;
}

.btn {
  color: #fff;
  display: block;
  margin: 3vw auto;
  width: 18vw;
  height: 4vw;
  line-height: 4vw;
  background-color: transparent;
  border: none;
  border-width: 0;
  background-image: url('../images/bgbtn.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  cursor: pointer;
  text-align: center;
}
.btn.nextstep:nth-child(2) {
  position: absolute;
  left: 87vw;
  top: 60.3vw;
  display: none;
  width: 10vw;
  height: 4vw;
  z-index: 99;
}

.btn.nextstep.active {
  display: block;
}


.photo-grids {
  display: grid;
  gap: 30px 50px;
  grid-template-columns: auto auto auto auto;
}
.grid-item {
  text-align: center;
}
.grid-item img {
  width: 100%;
  /* height: 60%; */
  display: block;
}
.grid-item.special img {
  width: 100%;
  /* height: 80.5%; */
}

.bindingmode, .frag {
  height: 2.8vw;
  line-height: 2.8vw;
  background-image: url('../images/tu.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  cursor: pointer;
}
.frag {
  background-image: url('../images/QQ20230720-0.png');
}
.frag.selected {
  background-image: url('../images/ao.png');
}

.mask, .mask2 {
  width: 100vw;
  height: 100vh;
  position: fixed;
  overflow: hidden;
  z-index: 8;
  background-color: rgba(0, 0, 0, .7);
  display: none;
}
.mask .text {
  color: #fff;
  position: absolute;
  width: 900px;
  top: calc((50% - 13.5vw - 2em));
  left: calc((50% - 24vw));
}
.mask iframe,
.mask2 .content {
  
  position: absolute;
  width: 900px;
  height: 600px;
  top: calc((50% - 13.5vw));
  left: calc((50% - 24vw));
  /* background-color: rgb(249, 249, 251);
  box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px;
  border-radius: .3vw; */
  
}

.mask2 .content {
  padding: 1em;
  background-color: rgba(31, 50, 78, .9);
  box-shadow: rgba(6, 24, 44, 0.4) 0px 0px 0px 2px, rgba(6, 24, 44, 0.65) 0px 4px 6px -1px, rgba(255, 255, 255, 0.08) 0px 1px 0px inset;
}
.mask .close,
.mask2 .close {
  width: 2.9em;
  height: 2.9em;
  position: absolute;
  top: 0;
  right: 0;
  background-image: url('../images/close.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  cursor: pointer;
}
.mask.show,
.mask2.show {
  display: block;
}

.FB3D {
  width: 93vw;
  height: 75vw;
}







.lct {
  width: 100vw;
  height: auto;
  overflow: auto;
}

.lct .block,
.lct .arrow {
  position: absolute;
}

.block {
  z-index: 3;
}
.arrow {
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.arrow .white{
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  opacity: 0;
  transition: all ease 1s;
  transition-delay: 9000ms;
}
.arrow .white.active {
  opacity: 1;
}


.lct .diagram {
  position: absolute;
  width: 11vw;
  height: 11vw;
  border-radius: 50%;
  overflow: hidden;
  background-color: rgb(122, 120, 120);
  transform: rotate3d(0, 0, 1, 0.001deg); 
}
.diagram .pic {
  content: '';
  position: absolute;
  width: 84%;
  height: 84%;
  top: 8%;
  left: 8%;
  border-radius: 50%;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  z-index: 9;
}

.lct .diagram.active:before,
.lct .diagram.active:after {
  content: " ";
  position: absolute;
  left: 0;
  top: 0;
  width: 11vw;
  height: 11vw;
  clip: rect(0px, 5.5vw, 11vw, 0px);
  background-color: rgb(122, 120, 120);
  transform: rotate3d(0, 0, 1, 0deg);
  animation: 9s spin2 linear 10s forwards;
  z-index: 6;
}
.lct .diagram.active:after {
  content: " ";
  background: rgb(48, 95, 217);
  z-index: 5;
  animation: 9s spin linear 1s forwards;
}

@keyframes spin {
  from {
    transform: rotate3d(0, 0, 1, 0deg);
  }
  to {
    transform: rotate3d(0, 0, 1, 180deg);
  }
}
@keyframes spin2 {
  from {
    background: rgb(48, 95, 217);
    transform: rotate3d(0, 0, 1, 180deg);
  }
  to {
    background: rgb(48, 95, 217);
    transform: rotate3d(0, 0, 1, 360deg);
  }
}
@-webkit-keyframes spin {
  from {
    -webkit-transform: rotate3d(0, 0, 1, 0deg);
  }
  to {
    -webkit-transform: rotate3d(0, 0, 1, 180deg);
  }
}
@-webkit-keyframes spin2 {
  from {
    background: rgb(48, 95, 217);
    -webkit-transform: rotate3d(0, 0, 1, 180deg);
  }
  to {
    background: rgb(48, 95, 217);
    -webkit-transform: rotate3d(0, 0, 1, 360deg);
  }
}




.lct .heading {
  text-align: center;
  position: absolute;
  width: 100%;
}
.lct .heading span {
  font-size: 1.2em;
  background-color: #8b8b8b;
  border-radius: 1em;
  padding: 0 .5em;
  transition: all ease 1s;
  transition-delay: 1000ms;
}
.lct .desc {
  position: absolute;
  color: #8b8b8b;
  transition: all ease 1s;
  transition-delay: 1000ms;
}
.block.active .desc {
  color: #fff;
}
.block.active .heading span {
  background-color: #fff;
  color: #000;
}


.lct .block1 {
  left: 2vw;
  top: 0vw;
  width: 21vw;
}
.block1 .diagram {
  left: 5vw;
}
.block1 .diagram .pic {
  background-image: url('../images/读取参数信息.png');
}
.block1 .heading {
  top: 11.5vw;
}
.block1 .desc {
  top: 16vw;
}
.lct .arrow1 {
  left: 15vw;
  top: 5vw;
  width: 30.8vw;
  height: .6vw;
  background-image: url('../images/l1.png');
}
.lct .arrow1 .white.active {
  background-image: url('../images/l11.png');
}


.lct .block2 {
  left: 32vw;
  top: 0vw;
  width: 27vw;
}
.block2 .diagram {
  left: 8vw;
}
.block2 .diagram .pic {
  background-image: url('../images/非共价分子.png');
}
.block2 .heading {
  top: 11.5vw;
}
.block2 .desc {
  top: 16vw;
}
.lct .arrow2 {
  left: 50vw;
  top: 5vw;
  width: 39.7vw;
  height: 10vw;
  background-image: url('../images/l2.png');
}
.lct .arrow2 .white.active {
  background-image: url('../images/l21.png');
}


.lct .block3 {
  left: 68vw;
  top: 9vw;
  width: 27vw;
}
.block3 .diagram {
  left: 15.5vw;
}
.block3 .diagram .pic {
  background-image: url('../images/构象合理性分析.png');
}
.block3 .heading {
  left: 7.5vw;
  top: 11.5vw;
}
.block3 .desc {
  top: 3.5vw;
  width: 10.5vw;
}
.lct .arrow3 {
  left: 77vw;
  top: 17vw;
  width: 13.1vw;
  height: 18.5vw;
  background-image: url('../images/l3.png');
}
.lct .arrow3 .white.active {
  background-image: url('../images/l31.png');
}


.lct .block4 {
  left: 66vw;
  top: 30vw;
  width: 23vw;
}
.block4 .diagram {
  left: 6vw;
}
.block4 .diagram .pic {
  background-image: url('../images/碎片拼接.png');
}
.block4 .heading {
  top: 11.5vw;
}
.block4 .desc {
  top: 16vw;
}
.lct .arrow4 {
  left: 39vw;
  top: 35.5vw;
  width: 33.4vw;
  height: .8vw;
  background-image: url('../images/l4.png');
}
.lct .arrow4 .white.active {
  background-image: url('../images/l41.png');
}


.lct .block5 {
  left: 30vw;
  top: 30vw;
  width: 23vw;
}
.block5 .diagram {
  left: 6vw;
}
.block5 .diagram .pic {
  background-image: url('../images/碎片拼接.png');
}
.block5 .heading {
  top: 11.5vw;
}
.block5 .desc {
  top: 16vw;
}
.lct .arrow5 {
  left: 10vw;
  top: 35.5vw;
  width: 27.8vw;
  height: 14.3vw;
  background-image: url('../images/l5.png');
}
.lct .arrow5 .white.active {
  background-image: url('../images/l51.png');
}


.lct .block6 {
  left: 0vw;
  top: 43vw;
  width: 21vw;
}
.block6 .diagram {
  left: 5vw;
}
.block6 .diagram .pic {
  background-image: url('../images/碎片拼接.png');
}
.block6 .heading {
  top: 11.5vw;
}
.block6 .desc {
  top: 16vw;
}
.lct .arrow6 {
  left: 10vw;
  top: 51vw;
  width: 24.2vw;
  height: 14.6vw;
  background-image: url('../images/l6.png');
}
.lct .arrow6 .white.active {
  background-image: url('../images/l61.png');
}


.lct .block7 {
  left: 23.9vw;
  top: 59.5vw;
  width: 27vw;
}
.block7 .diagram {
  left: 8vw;
}
.block7 .diagram .pic {
  background-image: url('../images/碎片拼接.png');
}
.block7 .heading {
  top: 11.5vw;
}
.block7 .desc {
  top: 16vw;
}
.lct .arrow7 {
  left: 37vw;
  top: 65vw;
  width: 29.5vw;
  height: .6vw;
  background-image: url('../images/l7.png');
}
.lct .arrow7 .white.active {
  background-image: url('../images/l71.png');
}

.lct .block8 {
  left: 56vw;
  top: 59.5vw;
  width: 26vw;
}
.block8 .diagram {
  left: 8.5vw;
}
.block8 .diagram .pic {
  background-image: url('../images/碎片拼接.png');
}
.block8 .heading {
  top: 11.5vw;
}
.block8 .desc {
  top: 16vw;
}
.lct .arrow8 {
  left: 73vw;
  top: 65vw;
  width: 19.8vw;
  height: .6vw;
  background-image: url('../images/l8.png');
}
.lct .arrow8 .white.active {
  background-image: url('../images/l81.png');
}







/* .btn_download, .btn_preview {
  position: absolute;
  left: 88vw;
  top: 69vw;
  width: 10.3vw;
  height: 3.7vw;
  line-height: 3.7vw;
  color: #fff;
  background-image: url('../images/按钮背景.gif');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  z-index: 1;
  text-align: center;
}
.btn_preview {
  top: 63.3vw;
}
.btn_download.active,
.btn_preview.active {
  cursor: pointer;
} */

/* .btn_next {
  position: absolute;
  left: 87vw;
  top: 63.3vw;
  
  line-height: 4vw;
  color: #fff;
  width: 10vw;
  height: 4vw;
  background-color: transparent;
  border: none;
  border-width: 0;
  background-image: url('../images/bgbtn.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  z-index: 1;
  text-align: center;
  display: none;
  cursor: pointer;
}
.btn_next.active {
  display: block;
} */

.ttcontent {
  color: #fff;
}

.ttcontent>div,
.ttcontent>iframe,
.ttcontent>form {
  margin: 0 auto;
  text-align: center;
  line-height: 3em;
}

.ttcontent .text {
  text-indent: 2em;
}


.ttcontent .input_wrap label {
  text-align: left;
  display: inline-block;
  width: 6em;
  vertical-align: middle;
}
.ttcontent .input_wrap input {
  display: inline-block;
  width: 27em;
  background-color: rgba(31, 75, 97, 1);
  border: 1px solid rgb(236, 251, 251);
  outline-style: none;
  padding: 0 10px;
  height: 2em;
  line-height: 2em;
  color: #fff;
  vertical-align: middle;
}

.ttcontent .input_email {
  margin-bottom: 5em;
}

.ttcontent .option {
  background-color: #fff;
  color: #000;
  border-radius: 19px;
  padding-left: 16px;
  letter-spacing: -0.2px;
  background-image: url('../images/ps22d4rsr5buxymtdg6shpc4pmqbp5shjb62a6090-0528-4968-ab46-15c1d6138f95.png');
  background-repeat: no-repeat;
  background-position: 98% 50%;
  width: 50%;
  margin: 1em auto;
  text-align: left;
  cursor: pointer;
  line-height: 2em;
  
}

.ttcontent .submit {
  margin-top: 5em;
  width: 18vw;
  height: 4vw;
  line-height: 4vw;
  background-color: transparent;
  border: none;
  border-width: 0;
  background-image: url('../images/bgbtn.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  cursor: pointer;
}

.ttcontent .text4 {
  color: #000;
  background-color: #fff;
  border-radius: 1em;
  width: 8em;
  line-height: 1.5em;
}

.ttcontent form {
  margin: 2em auto;
}
.ttcontent .file {
  position: relative;
  height: 2.5rem;
  line-height: 2.5rem;
}
.file .label1 {
  display: inline-block;
  position: absolute;
  left: 19rem;
  color: #fff;
}
.userdefined-file {
  position: absolute;
  top: 0;
  left: 23rem;
  /* display: none; */
  z-index: 2;
  width: 19rem;
  height: 2.5rem;
  line-height: 2.5rem;
  font-size: 0;
}

.userdefined-file input[type="text"] {
  display: inline-block;
  vertical-align: middle;
  width: 14rem;
  box-sizing: border-box;
  border: 1px solid rgb(119,161,161);
  height: 2.5rem;
  line-height: 2.5rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #fff;
}


.file input[type="file"] {
  position: absolute;
  top: 0;
  left: 23rem;
  z-index: 3;
  opacity: 0;
  width: 19rem;
  height: 2.5rem;
  line-height: 2.5rem;
  cursor: pointer;
}

.userdefined-file button {
  display: inline-block;
  vertical-align: middle;
  width: 5rem;
  text-align: center;
  height: 2.5rem;
  line-height: 2.5rem;
  /* font-size: 14px; */
  background-color: rgb(119,161,161);
  border: none;
  color: #fff;
  cursor: pointer;
  font-size: 1rem;
}

.defArea {
  width: 55em;
  height: 31em;
  
  border: 1px solid rgb(119,161,161);
}

.ttcontent .text5 {
  width: 55em;
  text-align: left;
  line-height: 2em;
}
.defArea2 {
  width: 40em;
}

.ttcontent .option2 {
  width: 15em;
  padding-left: 5.5em;
}
.ttcontent .option3 {
  width: 15em;
  padding-left: 6em;
}

.ttcontent .text_bottom {
  margin-top: 5em;
}