.relevant {
  position: fixed;
  top: 10%;
  right: 10px;
  z-index: 15;
}
.relevant_btn {
  position: fixed;
  top: 22px;
  right: 0px;
  width: 160px;
  height: 180px;
  overflow: hidden;
  z-index: 9;
  color: #fff;
  text-align: center;
  cursor: pointer;
  animation: myfirst 5s;
  -moz-animation: myfirst 5s;
  /* Firefox */
  -webkit-animation: myfirst 5s;
  /* Safari 和 Chrome */
  -o-animation: myfirst 5s;
}
.relevant_btn embed {
  margin-left: -70px;
  margin-top: -40px;
}
.relevant_block_btn {
  position: fixed;
  top: 20px;
  right: 0;
  width: 150px;
  height: 180px;
  z-index: 10;
}
.relevant_body {
  background: #fff;
  border-left: 5px solid #f5934c;
  width: 250px;
  padding: 30px 10px;
  box-shadow: -10px 0 10px 10px rgba(139, 50, 50, 0.1);
  margin-right: -10px;
  position: relative;
  display: none;
  height: 100vh;
}
.relevant_close_btn {
  color: #d80100;
  font-size: 1.5em;
  position: absolute;
  top: 20px;
  right: 15px;
  cursor: pointer;
}
.relevant_tittle {
  text-align: center;
  border-top: 3px solid #d80100;
  padding-top: 10px;
  width: 50%;
  margin: 0 auto;
  margin-bottom: 20px;
}
.relevant_list_body {
  height: 800px;
  overflow: hidden;
}
.relevant_list_body_hide {
  width: 104%;
  overflow-x: hidden;
  overflow-y: auto;
}
.relevant_list_one {
  margin-bottom: 2px;
}
.relevant_list_tittle {
  background: #fff4ec;
  cursor: pointer;
  padding: 10px;
}
.relevant_list_ul {
  padding: 20px 0;
  display: none;
}
.relevant_list_ul li a {
  color: #1f1f1f;
  padding: 10px 20px;
}
.relevant_list_ul li a:hover {
  background: #fae4d4;
}
.relevant_list_tittle_2 {
  color: red;
}
.ji_relevant {
  width: 325px;
  position: fixed;
  top: 0;
  right: 0;
  z-index: 15;
}
.jl_relevant_btn {
  position: fixed;
  right: 10px;
  bottom: 10px;
  cursor: pointer;
}
.jl_relevant_btn_close {
  color: #d80100;
  position: fixed;
  right: 20px;
  bottom: 125px;
  z-index: 10;
  font-size: 1.5em;
  display: none;
}
.jl_relevant_outer {
  width: 280px;
  height: 550px;
  position: fixed;
  bottom: -550px;
  right: 0;
  z-index: 15;
}
.jl_relevant_body {
  width: 280px;
  height: 550px;
  position: relative;
  perspective: 1500px;
}
.jl_relevant_header {
  position: relative;
}
.jl_relevant_header > img {
  width: 100%;
}
.jl_relevant_close_btn {
  position: absolute;
  right: 15px;
  top: 30px;
  z-index: 1;
}
.jl_relevant_back_btn {
  position: absolute;
  left: 15px;
  top: 30px;
  z-index: 1;
}
.jl_relevant_main {
  height: 87%;
  overflow-y: auto;
}
.jl_relevant_main ul {
  padding: 10px;
}
.jl_relevant_main li {
  padding: 0 8px;
  border-bottom: 1px dashed #dedede;
}
.jl_relevant_main li:hover {
  border-bottom: rgba(0, 0, 0, 0);
}
.jl_relevant_main li:hover a {
  color: #fff;
}
.jl_relevant_main a {
  color: #1f1f1f;
  padding: 12px 0;
  transition: color 0.5s;
  -webkit-transition: color 0.5s;
  -o-transition: color 0.5s;
  -moz-transition: color 0.5s;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.jl_relevant_checked {
  border-bottom: rgba(0, 0, 0, 0) !important;
}
.jl_relevant_checked a {
  color: #fff;
}
.jl_relevant_checked_bg {
  position: absolute;
  left: -4px;
  top: 86px;
  z-index: -1;
  transition: top 0.3s;
  -webkit-transition: top 0.3s;
  -o-transition: top 0.3s;
  -moz-transition: top 0.3s;
}
.jl_relevant_checked_bg img {
  width: 100%;
}
.jl_relevant_1 .jl_relevant_main li {
  overflow: hidden;
}
.jl_relevant_1 .jl_relevant_main a {
  transition: background 1s, border-radius 1s;
  -webkit-transition: background 1s, border-radius 1s;
  -o-transition: background 1s, border-radius 1s;
  -moz-transition: background 1s, border-radius 1s;
}
.jl_relevant_1 .jl_relevant_main a:hover {
  background: #007ec7;
  border-radius: 6px;
}
.jl_relevant_1 .jl_relevant_main a:nth-child(odd) {
  float: left;
  text-align: left;
  width: 60%;
}
.jl_relevant_1 .jl_relevant_main a:nth-child(even) {
  float: right;
  text-align: center;
  width: 35%;
}
.jl_relevant_2 .jl_relevant_main li {
  overflow: hidden;
}
.jl_relevant_2 .jl_relevant_main a {
  transition: background 1s, border-radius 1s;
  -webkit-transition: background 1s, border-radius 1s;
  -o-transition: background 1s, border-radius 1s;
  -moz-transition: background 1s, border-radius 1s;
}
.jl_relevant_2 .jl_relevant_main a:hover {
  background: #0da6ff;
  border-radius: 6px;
}
.jl_relevant_2 .jl_relevant_main a:nth-child(odd) {
  float: left;
  text-align: left;
  width: 60%;
}
.jl_relevant_2 .jl_relevant_main a:nth-child(even) {
  float: right;
  text-align: center;
  width: 35%;
}
.jl_relevant_1 {
  background: #fff;
  height: 550px;
  opacity: 1;
  width: 100%;
  transform: rotateY(0deg);
  -webkit-transform: rotateY(0deg);
  -moz-transform: rotateY(0deg);
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 1;
  box-shadow: 0 0 3px 3px rgba(0, 0, 0, 0.2);
  transition: transform 1s, opacity 1s;
  -webkit-transition: transform 1s, opacity 1s;
  -o-transition: transform 1s, opacity 1s;
  -moz-transition: transform 1s, opacity 1s;
  transform-origin: 0 0;
  -ms-transform-origin: 0 0;
  -webkit-transform-origin: 0 0;
  -o-transform-origin: 0 0;
  -moz-transform-origin: 0 0;
}
.jl_relevant_2 {
  background: #fff;
  width: 100%;
  height: 550px;
  transform: rotateY(180deg);
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  opacity: 0;
  left: 0;
  bottom: 0;
  position: absolute;
  z-index: 0;
  transition: transform 1s, opacity 1s;
  -webkit-transition: transform 1s, opacity 1s;
  -o-transition: transform 1s, opacity 1s;
  -moz-transition: transform 1s, opacity 1s;
  transform-origin: 0 0;
  -ms-transform-origin: 0 0;
  -webkit-transform-origin: 0 0;
  -o-transform-origin: 0 0;
  -moz-transform-origin: 0 0;
}
.jl_rel_rotate_1 {
  transform: rotateY(0deg);
  -webkit-transform: rotateY(0deg);
  -moz-transform: rotateY(0deg);
  z-index: 1;
  opacity: 1;
}
.jl_rel_rotate_2 {
  transform: rotateY(-180deg);
  -webkit-transform: rotateY(-180deg);
  -moz-transform: rotateY(-180deg);
  opacity: 0;
}
.relevant_body {
  height: auto;
  margin-right: 0;
  width: 300px;
  height: 100vh;
  padding: 10px;
}
.relevant_tittle {
  padding: 0;
  margin: 20px 0;
  border: none;
  width: 100%;
}
.relevant_tittle img {
  width: 80%;
  margin-left: -8px;
}
.relevant_close_btn {
  top: 10px;
}
.relevant_list_tittle {
  overflow: hidden;
  padding: 0px;
}
.relevant_list_tittle a {
  color: #000;
  padding: 10px 0;
  font-size: 0.95em;
  transition: background 0.5s;
  -webkit-transition: background 0.5s;
  -o-transition: background 0.5s;
  -moz-transition: background 0.5s;
}
.relevant_list_tittle a:hover {
  background: #ffd2b3;
}
.relevant_list_tittle a:nth-child(odd) {
  float: left;
  padding-left: 10px;
  width: 60%;
}
.relevant_list_tittle a:nth-child(even) {
  float: right;
  width: 35%;
  text-align: center;
}
.relevant_window,
.relevant_list_ul_window {
  display: none;
}
.relevant_list_ul li {
  overflow: hidden;
  transition: background 0.5s;
  -webkit-transition: background 0.5s;
  -o-transition: background 0.5s;
  -moz-transition: background 0.5s;
}
.relevant_list_ul li:hover {
  background: #ffe6d5;
}
.relevant_list_ul li a {
  float: left;
  padding: 10px 5px;
  font-size: 0.95em;
  transition: background 0.5s;
  -webkit-transition: background 0.5s;
  -o-transition: background 0.5s;
  -moz-transition: background 0.5s;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.relevant_list_ul li a:hover {
  background: #ffd7ba;
}
.relevant_list_ul li a:nth-child(odd) {
  float: left;
  width: 55%;
  padding-left: 10px;
}
.relevant_list_ul li a:nth-child(even) {
  float: right;
  width: 35%;
  text-align: center;
}
.relevant_list_ul_li_checked {
  color: #fff;
}
.relevant_list_body {
  height: 800px;
}
.relevant_list_body_hide {
  height: 800px;
}
@keyframes myfirst {
  0% .jl_relevant_btn_img_1 {
    display: block;
  }
  0% .jl_relevant_btn_img_2 {
    display: none;
  }
  50% .jl_relevant_btn_img_1 {
    display: none;
  }
  50% .jl_relevant_btn_img_2 {
    display: block;
  }
  100% .jl_relevant_btn_img_1 {
    display: block;
  }
  100% .jl_relevant_btn_img_2 {
    display: none;
  }
}
@-moz-keyframes myfirst {
  0% .jl_relevant_btn_img_1 {
    display: block;
  }
  0% .jl_relevant_btn_img_2 {
    display: none;
  }
  50% .jl_relevant_btn_img_1 {
    display: none;
  }
  50% .jl_relevant_btn_img_2 {
    display: block;
  }
  100% .jl_relevant_btn_img_1 {
    display: block;
  }
  100% .jl_relevant_btn_img_2 {
    display: none;
  }
}
@-webkit-keyframes myfirst {
  0% .jl_relevant_btn_img_1 {
    display: block;
  }
  0% .jl_relevant_btn_img_2 {
    display: none;
  }
  50% .jl_relevant_btn_img_1 {
    display: none;
  }
  50% .jl_relevant_btn_img_2 {
    display: block;
  }
  100% .jl_relevant_btn_img_1 {
    display: block;
  }
  100% .jl_relevant_btn_img_2 {
    display: none;
  }
}
@-o-keyframes myfirst {
  0% .jl_relevant_btn_img_1 {
    display: block;
  }
  0% .jl_relevant_btn_img_2 {
    display: none;
  }
  50% .jl_relevant_btn_img_1 {
    display: none;
  }
  50% .jl_relevant_btn_img_2 {
    display: block;
  }
  100% .jl_relevant_btn_img_1 {
    display: block;
  }
  100% .jl_relevant_btn_img_2 {
    display: none;
  }
}