body,
html {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  font-family: 'MicrosoftYaHei';
  /* scroll-behavior: smooth; */
}

ul {
  padding: 0;
  margin: 0;
}

li {
  list-style: none;
}

a {
  text-decoration: none;
}

a:link {
  color: #262c38;
}

a:visited {
  color: #262c38;
}

a:active {
  color: #262c38;
}

p {
  margin: 0;
}

a,
button,
input {
  -webkit-tap-highlight-color: rgba(255, 0, 0, 0);
}

.code-sandbox-cont {
  width: 100%;
  /* height: calc(100% - 70px); */
  height: 100%;
  /* overflow: scroll; */
  overflow: hidden;
  padding: 70px 0 0 0;
  box-sizing: border-box;
}

.code-sandbox-main {
  width: 100%;
  min-width: 1320px;
  /* height: calc(100% - 94px); */
  /* height: calc(100% - 24px); */
  height: calc(100% - 24px);
  /* padding: 70px 0 24px 0; */
  display: flex;
  /* justify-content: center; */
  overflow: hidden;
  margin: 0 auto;
  position: relative;
}

/* API代码开发 左侧容器 */
.code-sandbox-main>.code-sandbox-left {
  width: 330px;
  position: relative;
  height: 100%;
  z-index: 4;
  transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1);
  background: #f8f8f9;
  /* overflow: hidden; */
  border-right: 1px solid #d0d9d9;
  flex-shrink: 0;
  /* box-sizing: border-box; */
}

.code-sandbox-left>.arrows {
  position: absolute;
  top: 50%;
  right: -7%;
  box-sizing: border-box;
  width: 24px;
  height: 60px;
  transform: translateY(-50%);
  border: 1px solid #94acc0;
  border-radius: 0 5px 5px 0;
  cursor: pointer;
  z-index: 4;
  background: #F1F3F3;
}

.arrows div {
  width: 100%;
  height: 100%;
  background: url('../../../img/code-sandox/arrows.png') no-repeat center center;
}

.code-sandbox-left>.code-sandbox-title {
  width: 100%;
  height: 50px;
  display: flex;
  padding-left: 20px;
  border-bottom: 1px solid #d0d9d9;
  /* border-right: 1px solid #d0d9d9; */
  box-sizing: border-box;
  font-size: 18px;
  color: #262c38;
  background: #f8f8f9;
  overflow: hidden;
}

.code-sandbox-left>.code-sandbox-title .text {
  width: 80%;
  height: 100%;
  background: url('../../../img/code-sandox/title-img.png') no-repeat 0px 18px;
  padding-left: 24px;
 box-sizing: border-box;
  line-height: 53px;
  font-weight: bold;
}

.code-sandbox-left .features-table {
  display: flex;
  width: 40px;
  height: 100%;
  margin: 2px 0 0 14px;
  align-items: center;
}

.features-table .table-list {
  width: 20px;
  height: 20px;
  cursor: pointer;
  background: url('../../../img/feature-example/list.png');
}

.features-table .table-img {
  width: 20px;
  height: 20px;
  cursor: pointer;
  background: url('../../../img/feature-example/img.png');
}

.features-table .table-list-ac {
  background: url('../../../img/feature-example/list_ac.png');
}

.features-table .table-img-ac {
  background: url('../../../img/feature-example/img_ac.png');
}

/* API代码开发 左侧列表 */
.code-sandbox-left-list {
  width: 100%;
  height: calc(100% - 50px);
  /* border-right: 1px solid #d0d9d9; */
  box-sizing: border-box;
  background: #f8f8f9;
  overflow-y: auto;
}

.code-sandbox-cont::-webkit-scrollbar {
  width: 8px;
  border-radius: 5px;
  background: transparent;
}

.code-sandbox-cont::-webkit-scrollbar-thumb {
  width: 8px;
  height: 122px;
  background: #7f8595;
}


.code-sandbox-left-list::-webkit-scrollbar {
  width: 8px;
  border-radius: 5px;
  background: transparent;
}

.code-sandbox-left-list::-webkit-scrollbar-thumb {
  width: 8px;
  height: 122px;
  background: #7f8595;
}

.code-sandbox-left-list>.example-type {
  width: 100%;
}

.code-sandbox-left-list>.example-type>.example-type-item {
  width: 100%;
}

.code-sandbox-left-list>.example-type>.example-type-item>.item-top {
  width: 100%;
  height: 40px;
  padding-left: 20px;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  cursor: pointer;
}

.code-sandbox-left-list>.example-type>.example-type-item>.item-top>.example-img {
  width: 22px;
  height: 40px;
  background: url('../../../img/code-sandox/example-img.png') no-repeat 3px 15px;
}

.code-sandbox-left-list>.example-type>.example-type-item>.item-top>.example-name {
  width: 252px;
  height: 100%;
  pointer-events: all;
  line-height: 42px;
  font-weight: 700;
  font-size: 14px;
  color: #262C38;
  text-indent: 2px;
}

.code-sandbox-left-list>.example-type>.example-type-item>.item-top>.example-name-active {
  color: #0080ff;
}

.code-sandbox-left-list>.example-type>.example-type-item>.item-top>.example-arrows {
  width: 21px;
  height: 40px;
  pointer-events: all;
  background: url('../../../img/code-sandox/down-arrows.png') no-repeat 0 16px;
  cursor: pointer;
}

.code-sandbox-left-list .item-top-active {
  background: #fff;
}

.code-sandbox-left-list>.example-type>.example-type-item>.item-top-active>.example-img {
  width: 22px;
  height: 40px;
  background: url('../../../img/code-sandox/example-ac.png') no-repeat 3px 15px;
  background-size: 14px 12px;
}

.code-sandbox-left-list>.example-type>.example-type-item>.item-top-active>.example-name {
  color: #0080ff;
}

.code-sandbox-left-list>.example-type>.example-type-item>.item-top-active>.example-arrows {
  background: url('../../../img/code-sandox/down-arrows-ac.png') no-repeat;
  background-size: 14px 8px;
  background-position: 0px 16px;
}

.code-sandbox-left-list>.example-type>.example-type-item>.item-children {
  width: 290px;
  height: 220px;
  background: #f8f8f9;
  margin: 0 0 10px 20px;
  box-shadow: 0px 0px 2px 1px #00000020;
}

.code-sandbox-left-list>.example-type>.example-type-item>.item-children>.scenes-img {
  width: 290px;
  height: 183px;
  text-align: center;
  position: relative;
  cursor: pointer;
}

.code-sandbox-left-list>.example-type>.example-type-item>.item-children>.scenes-img img {
  width: 290px;
  height: 183px;
}

.code-sandbox-left-list>.example-type>.example-type-item>.item-children>.children-name {
  /* display: flex; */
  width: 100%;
  font-size: 14px;
  color: #17223d;
  padding-left: 24px;
 box-sizing: border-box;
  position: relative;
  line-height: 30px;
  margin-top: 6px;
  cursor: pointer;

}

.code-sandbox-left-list>.example-type>.example-type-item>.item-children>.children-name div {
  width: 290px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.code-sandbox-left-list>.example-type>.example-type-item>.item-children>.children-name span {
  display: none;
  position: absolute;
  font-size: 12px;
  color: #17223d;
  width: auto;
  height: 20px;
  line-height: 20px;
  bottom: -11px;
  right: 0px;
  padding: 0 10px;
  border: 1px solid #000;
  background: #fff;
  color: #000;
  z-index: 2;
  text-indent: 0;
  white-space: nowrap;
}


.code-sandbox-left-list>.example-type>.example-type-item>.item-children>.children-name:hover span {
  display: inline-block;
}

.code-sandbox-left-list>.example-type>.example-type-item>.item-children>.children-name::before {
  content: '';
  display: inline-block;
  width: 3px;
  height: 14px;
  background: #0080ff;
  position: absolute;
  left: 12px;
  top: 8px;
}

.code-sandbox-left-list>.example-type>.example-type-item>.item-children-active {
  background: #1d7be1;
}

.code-sandbox-left-list>.example-type>.example-type-item>.item-children-active>.scenes-img img {
  width: 283px;
  height: 183px;
  margin-top: 4px;
}

.code-sandbox-left-list>.example-type>.example-type-item>.item-children-active>.children-name {
  color: #ffffff;
  font-weight: 700;
}

.code-sandbox-left-list>.example-type>.example-type-item>.item-children-active>.children-name::before {
  background: #ffffff;
}

.code-sandbox-left-list>.example-type>.example-type-item {
  background: #f8f8f9 !important;
}

/* 
* 无图片列表
*/
.code-sandbox-left-list>.example-type-no-img {
  background: #f8f8f9;
}

.code-sandbox-left-list>.example-type-no-img>.example-type-item {
  background: #f8f8f9 !important;
}

.code-sandbox-left-list>.example-type-no-img>.example-type-item>.item-children {
  height: 30px;
  margin: 3px 0 0 20px;
  box-shadow: 0 0 0 0 #fff;
  background: #f8f8f9;
}

.example-type-no-img .scenes-img {
  display: none;
}

.code-sandbox-left-list>.example-type-no-img>.example-type-item>.item-children>.children-name {
  margin: 0;
}

.code-sandbox-left-list>.example-type-no-img>.example-type-item>.item-children>.children-name::before {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  top: 12px;
}

.code-sandbox-left-list>.example-type-no-img>.example-type-item>.item-children-active {
  background: #f8f8f9;
}

.code-sandbox-left-list>.example-type-no-img>.example-type-item>.item-children>.children-name {
  color: #17223d;
}

.code-sandbox-left-list>.example-type-no-img>.example-type-item>.item-children-active>.children-name {
  color: #0080ff;
}

.code-sandbox-left-list>.example-type-no-img>.example-type-item>.item-children>.children-name::before {
  background: #0080ff;
}

.item-children-active {
  height: 25px;
}

.pos_box {
  position: absolute;
  width: calc(100% - 328px);
  height: 50px;
  left: 328px;
  top: 0px;
  z-index: 2;
  background: #fff;
  /* background: url('../../../img/application-example/title_bg.png') no-repeat;
  background-size: cover; */
}

.pos_box_flooding {
  width: calc(100%);
  left: 0px;
}

.pos_box_flooding .search-box {
  width: calc(100% - 67px);
}

.search-box {
  width: calc(100% - 42px);
  min-width: 600px;
  height: 50px;
  z-index: 2;
  display: flex;
  justify-content: space-between;
}

.search-box-left {
  font-family: '微软雅黑';
  font-size: 16px;
  color: #888888;
  line-height: 51px;
  text-indent: 34px;
}

.search-box-left span {
  position: relative;
  margin-right: 30px;
}

.search-box-left span::before {
  content: '';
  display: block;
  width: 0;
  height: 0;
  position: absolute;
  right: -22px;
  top: 8px;
  border: 4px solid transparent;
  border-left: 4px solid #888888;
}

.search-box-left em {
  position: relative;
  margin-right: 30px;
  color: #444E63;
  font-style: normal;
  font-weight: 700;
}

.search-box .search_cen {
  display: flex;
  position: absolute;
  left: 50%;
  transform: translateX(-55.25%);
  top: 12px;
}

.search_cen .dxr {
  width: 104px;
  height: 30px;
  border: 1px solid #94ACC0;
  /* border-right: 1px solid #00a8ff; */
  box-sizing: border-box;
  border-radius: 2px 0 0 2px;
  cursor: pointer;
  background: url('../../../img/code-sandox/port.png') no-repeat 17px 8px;
  text-indent: 41px;
  line-height: 26px;
  font-size: 16px;
  color: #3b4150;
}

.search_cen .lxr {
  width: 104px;
  height: 30px;
  border: 1px solid #94ACC0;
  /* border-left: none; */
  box-sizing: border-box;
  border-radius: 0 2px 2px 0;
  cursor: pointer;
  background: url('../../../img/code-sandox/stream.png') no-repeat 17px 6px;
  text-indent: 41px;
  line-height: 26px;
  font-size: 16px;
  color: #3B4150;
}

.search_cen .dxr_active {
  background: url('../../../img/code-sandox/port-ac.png') no-repeat 17px 8px;
  border: 1px solid #00a8ff;
  color: #1d7ae0;
}

.search_cen .lxr_active {
  background: url('../../../img/code-sandox/stream-ac.png') no-repeat 17px 6px;
  border: 1px solid #00a8ff;
  color: #1d7ae0;
}


.search-box-right {
  width: 293px;
  min-width: 210px;
  margin: 10px 10px 0 0;
  position: relative;
}

.search-box-right input {
  width: 100%;
  height: 30px;
  background: #E6EFF9;
  border: 1px solid #8A8A8A;
  border-radius: 5px;
  text-indent: 18px;
  color: #BABABA;
  font-size: 16px;
  outline: 1px #2284d7;
}

::-webkit-input-placeholder {
  color: #BABABA;
}

.search-box-right input:focus {
  border: 1px solid #2284d7;
}

.search-box-right img {
  width: 16px;
  height: 16px;
  position: absolute;
  right: 14px;
  top: 7px;
  cursor: pointer;
}

/* API代码开发 右侧容器  */
.code-sandbox-right {
  width: calc(100% - 330px);
  min-width: 900px;
  height: calc(100% - 60px);
  padding: 0 15px 0 30px;
  box-sizing: border-box;
  overflow-y: scroll;
  position: absolute;
  right: 0;
  top: 50px;
}

.code-sandbox-right>.right-example {
  /* width: 1530px; */
  border-bottom: 1px solid #d0d9d9;
}

.code-sandbox-right>.right-example>.right-example-top {
  height: 50px;
  display: flex;
  /* border-bottom: 1px solid #D0D9D9; */
  box-sizing: border-box;
  align-items: center;
  justify-content: space-between;
}

.code-sandbox-right>.right-example>.right-example-top>.example-img {
  width: 20px;
  height: 17px;
}

.example-img img {
  vertical-align: top;
}

.code-sandbox-right>.right-example>.right-example-top>.example-name {
  width: calc(100% - 51px);
  font-size: 18px;
  font-weight: bold;
  color: #262c38;
}

.arrows-img {
  width: 14px;
}

.code-sandbox-right>.right-example>.right-example-bottom {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  /* justify-content: space-between; */
}

.code-sandbox-right>.right-example>.right-example-bottom>.example-children {
  width: 290px;
  height: 220px;
  box-shadow: 0px 0px 2px 1px #00000020;
  margin: 0 14px 18px 0;
}

.code-sandbox-right>.right-example>.right-example-bottom>.example-children>.scenes-img {
  width: 290px;
  height: 183px;
  position: relative;
  cursor: pointer;
}

.code-sandbox-right>.right-example>.right-example-bottom>.example-children>.scenes-img img {
  width: 290px;
  height: 183px;
}

.scene_info {
  width: 40px;
  position: absolute;
  display: flex;
  left: 0;
  bottom: 0;
  font-size: 14px;
  line-height: 26px;
  color: #ffffff;
  text-align: center;
}

.info_port {
  width: 26px;
  height: 25px;
  background: #1177E3;
}

.info_stream {
  width: 26px;
  height: 25px;
  background: #0FCCCC;
}

.info_but_hig {
  /* background: red;
  color: #000; */
}

/* .code-sandbox-right>.right-example>.right-example-bottom :nth-child(5n) {
    margin-right: 0;
} */

.code-sandbox-right>.right-example>.right-example-bottom>.example-children>.example-name {
  width: 100%;
  color: #17223d;
  font-size: 14px;
  text-indent: 20px;
  position: relative;
  margin-top: 6px;
  line-height: 25px;
  font-weight: 530;
}

.example-name div {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.example-name span {
  display: none;
  position: absolute;
  font-size: 12px;
  width: auto;
  height: 20px;
  line-height: 20px;
  bottom: -18px;
  right: 0px;
  padding: 0 10px;
  border: 1px solid #000;
  background: #fff;
  color: #000;
  z-index: 2;
  text-indent: 0;
  white-space: nowrap;
}

.code-sandbox-right>.right-example>.right-example-bottom>.example-children .example-name:hover span {
  display: inline-block;
}

.code-sandbox-right>.right-example>.right-example-bottom>.example-children .example-name::before {
  content: '';
  display: inline-block;
  width: 3px;
  height: 14px;
  background: #0080ff;
  position: absolute;
  top: 6px;
  left: 11px;
}

/* 
 *右侧铺满全屏
*/
.code-sandbox-flooding {
  width: 100%;
  height: 100%;
  /* position: absolute;
    left: 50%;
    right: 50%;
    transform: translate(-50%, 0); */
  animation: flooding 0s cubic-bezier(0.42, 0, 0.58, 1) forwards;
}

.code-sandbox-flooding>.right-example {
  width: 100%;
}

.code-sandbox-flooding>.right-example>.right-example-top>.example-img {
  width: 25px;
}

.code-sandbox-flooding>.right-example>.right-example-top>.example-name {
  width: 100%;
}

/* .code-sandbox-flooding>.right-example>.right-example-bottom :nth-child(5n) {
    margin-right: 20px;
}

.code-sandbox-flooding>.right-example>.right-example-bottom :nth-child(6n) {
    margin-right: 0;
} */

/* 场景页及返回页按钮 */
.scenes-page {
  width: 100%;
  min-width: 900px;
  position: relative;
  display: none;
  z-index: 3;
  background: #fff;
}

.scenes-page>.scenes-top {
  padding-left: 11px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.scenes-iframe {
  min-width: 900px;
  box-sizing: border-box;
  height: calc(100% - 50px);
  overflow: hidden;
  /* background: #17223d; */
}

.scenes-iframe>iframe {
  width: 100%;
  height: 100%;
}

.scenes-page>.scenes-top>.bo-back {
  width: 80px;
  height: 30px;
  font-size: 14px;
  color: #ffffff;
  background: #1d7be1;
  cursor: pointer;
  border-radius: 3px;
  line-height: 28px;
}

.scenes-page>.scenes-top>.bo-back img {
  vertical-align: middle;
  margin: -3px 0 0 13px;
}

.scenes-page>.scenes-top>.port-stream-rander {
  display: flex;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.scenes-page>.scenes-top>.port-stream-rander>.port-button {
  width: 104px;
  height: 30px;
  border: 1px solid #94ACC0;
  border-right: 1px solid #00a8ff;
  box-sizing: border-box;
  border-radius: 2px 0 0 2px;
  cursor: pointer;
}

.scenes-page>.scenes-top>.port-stream-rander>.port-button-active {
  border: 1px solid #00a8ff;
  background: #d7f0ff;
}

.scenes-page>.scenes-top>.port-stream-rander>.port-button>div {
  width: 100%;
  height: 100%;
  background: url('../../../img/code-sandox/port.png') no-repeat 17px 8px;
  text-indent: 41px;
  line-height: 26px;
  font-size: 16px;
  color: #3b4150;
}

.scenes-page>.scenes-top>.port-stream-rander>.port-button-active>div {
  background: url('../../../img/code-sandox/port-ac.png') no-repeat 17px 8px;
  color: #1d7ae0;
}

.scenes-page>.scenes-top>.port-stream-rander>.stream-button {
  width: 104px;
  height: 30px;
  border: 1px solid #94ACC0;
  /* border-left: none; */
  box-sizing: border-box;
  border-radius: 0 2px 2px 0;
  cursor: pointer;
}

.scenes-page>.scenes-top>.port-stream-rander>.stream-button-active {
  border: 1px solid #00a8ff;
  background: #d7f0ff;
}

.scenes-page>.scenes-top>.port-stream-rander>.stream-button>div {
  width: 100%;
  height: 100%;
  background: url('../../../img/code-sandox/stream.png') no-repeat 17px 6px;
  text-indent: 41px;
  line-height: 26px;
  font-size: 16px;
  color: #3b4150;
}

.scenes-page>.scenes-top>.port-stream-rander>.stream-button-active>div {
  background: url('../../../img/code-sandox/stream-ac.png') no-repeat 17px 6px;
  color: #1d7ae0;
}

.scenes-page>.scenes-top>.top-right {
  /* width: 277px; */
  display: flex;
  color: #51596c;
  font-size: 14px;
  position: relative;
  cursor: pointer;
  margin-top: 10px;
}

.scenes-page>.scenes-top>.top-right>.share {
  width: 90px;
  height: 30px;
  background: url('../../../img/code-sandox/share.png') no-repeat 0 4px;
  text-indent: 18px;
  cursor: pointer;
}

.scenes-page>.scenes-top>.top-right>.message {
  width: 90px;
  height: 30px;
  background: url('../../../img/code-sandox/message.png') no-repeat 0 2px;
  text-indent: 18px;
}

.video-url {
  width: 90px;
  height: 30px;
  background: url('../../../img/feature-example/video-demonstration-bg.png') no-repeat 0 2px;
  text-indent: 18px;
}

.scenes-page>.scenes-top>.top-right>.case {
  width: 90px;
  height: 30px;
  background: url('../../../img/code-sandox/case-base.png') no-repeat 0 2px;
  text-indent: 18px;
}

.scenes-page>.scenes-top>.top-right>.show-run {
  width: 291px;
  height: 165px;
  position: absolute;
  left: -19px;
  top: 20px;
  padding: 11px 6px 0 6px;
  box-sizing: border-box;
  background: url('../../../img/code-sandox/message-bg.png') no-repeat;
  z-index: 2;
  display: none;
}

.scenes-page>.scenes-top>.top-right>.show-run>.show-run-top {
  width: 260px;
  height: 30px;
  margin: 0 auto;
  border-bottom: 1px solid #e7e9eb;
  background: url('../../../img/code-sandox/message-ac.png') no-repeat 10px 8px;
  color: #17233d;
  font-size: 14px;
  text-indent: 32px;
  line-height: 32px;
}

.scenes-page>.scenes-top>.top-right>.show-run>.first-load {
  width: 260px;
  height: 23px;
  margin: 0 auto;
  text-indent: 32px;
  font-size: 12px;
  line-height: 29px;
  color: #17223d;
}

.scenes-page>.scenes-top>.top-right>.show-run>.first-load>span {
  color: #1d7be0;
}

.scenes-page>.scenes-top>.top-right>.show-run>.cpu {
  width: 260px;
  height: 20px;
  margin: 0 auto;
  text-indent: 51px;
  font-size: 12px;
  line-height: 23px;
  color: #51596d;
}

.scenes-page>.scenes-top>.top-right>.show-run>.cpu>span {
  color: #1d7be0;
}

/* 
  * API代码开发 底部
 */
.code-sandbox-footer {
  width: 100%;
  height: 24px;
  min-width: 1320px;
  /* position: absolute; */
  /* bottom: 1px; */
  background: #fff;
  border-top: 1px solid #94acc0;
  /* padding: 0 10px; */
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: #51596c;
  line-height: 24px;
  margin: 0 auto;
  overflow: hidden;
}

.code-sandbox-footer :nth-child(1) {
  position: relative;
  text-indent: 7px;
}

.code-sandbox-footer :nth-child(1)::before {
  content: '';
  display: inline-block;
  width: 2px;
  height: 11px;
  background: #0080ff;
  position: absolute;
  left: 0;
  top: 7px;
}

/* 
 * 链接弹窗
 */
.link-popup {
  position: absolute;
  width: 420px;
  height: 140px;
  left: 50%;
  top: 50%;
  padding-left: 10px;
  /* display: flex; */
  transform: translate(-50%, -50%);
  background-color: #fff;
  color: #ccd0d7;
  align-items: center;
  display: none;
  z-index: 3;
}

.link-top {
  width: 400px;
  height: 30px;
  border-bottom: 1px solid #e7e9eb;
  margin: 0 auto;
  line-height: 30px;
  text-indent: 23px;
  font-size: 14px;
  color: #51596c;
  background: url('../../../img/code-sandox/fenxiang.png') no-repeat 0 7px;
}

.link-close {
  width: 12px;
  height: 12px;
  position: absolute;
  top: 8px;
  right: 12px;
  background: url('../../../img/code-sandox/close.png') no-repeat;
  cursor: pointer;
}

.link-dis {
  width: 400px;
  display: flex;
  margin: 0 auto;
  padding-top: 30px;
  font-size: 14px;
  color: #17223d;
}

.link-cont {
  width: 280px;
  height: 24px;
  padding: 0 8px 0 10px;
  font-size: 12px;
  overflow: hidden;
  white-space: nowrap;
  box-sizing: border-box;
  outline: none;
  border: 1px solid #1d7be1;
  box-sizing: border-box;
  margin-left: 12px;
}

.link-cont :checked {
  border-color: transparent;
}

.link-cont :focus {
  border-color: transparent;
}

.link-copy {
  text-align: center;
  width: 60px;
  height: 24px;
  line-height: 24px;
  background: #1d7be1;
  color: #fff;
  border-radius: 4px;
  cursor: pointer;
  margin-left: 14px;
}

.link-copy>div {
  background: url('../../../img/code-sandox/fz-ico.png') no-repeat 7px 5px;
  text-indent: 15px;
}

.link-tips {
  position: absolute;
  width: 90px;
  height: 30px;
  line-height: 23px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, 130%);
  text-align: center;
  color: #31c47d;
  font-size: 12px;
  text-indent: 15px;
  background: url('../../../img/code-sandox/fuzhi.png') no-repeat 0 3px;
  display: none;
}

/* 
 * 滑块移动
*/
.move-left {
  animation: move_left 0s cubic-bezier(0.42, 0, 0.58, 1) forwards;
  /* transform: translate(-336px); */
}

.move-left>.arrows {
  border-radius: 5px 0 0 5px;
  transform: rotate(180deg);
  left: 7%;
}

.move-right {
  animation: move_right 0s cubic-bezier(0.42, 0, 0.58, 1) forwards;
  /* transform: translate(-336px); */
}

@keyframes move_left {
  0% {
    width: 330px;
  }

  100% {
    width: 0;
    border-right: none;
  }
}

@keyframes move_right {
  0% {
    width: 0;
  }

  100% {
    width: 330px;
  }
}

/* 
 * 展开 收缩
*/
.example-arrows-shrink {
  animation: shrink 0s ease-in forwards;
  background: #F8F8F9 !important;
}

.example-arrows-unfold {
  animation: unfold 0s ease-in forwards;
}

.example-arrows-shrink .item-top .example-arrows {
  transform: rotate(-180deg);
  transform-origin: 34% 49%;
}

.example-arrows-shrink .item-children {
  box-shadow: 0 0 0 0 transparent !important;
}

.right-example-shrink {
  animation: shrink 0s ease-in forwards;
}

.right-example-shrink .example-children {
  box-shadow: 0 0 0 0 transparent !important;
}

.right-example-unfold {
  animation: unfold 0s ease-in forwards;
}

.right-example-shrink .right-example-top .arrows-img {
  transform: rotate(-180deg);
}

@keyframes unfold {
  0% {
    height: 40px;
    /* overflow: hidden; */
  }

  50% {
    height: 250px;
    /* overflow: hidden; */
  }

  100% {
    height: auto;
  }
}

@keyframes shrink {
  0% {
    height: auto;
  }

  50% {
    height: 250px;
    /* overflow: hidden; */
  }

  100% {
    height: 40px;
    overflow: hidden;
  }
}

/* 
 * 右侧铺满
*/
@keyframes flooding {
  0% {
    width: 1554px;
  }

  100% {
    width: 100%;
  }
}

@media screen and (max-width: 960px) {
  .code-sandbox-left {
    /* min-width: 200px; */
    /* display: none; */
    width: 200px;
  }

  @keyframes move_left {
    0% {
      width: 330px;
    }

    100% {
      width: 22px;
    }
  }
}

@media screen and (max-width: 1900px) {
  .code-sandbox-cont {
    /* padding-bottom: 8px; */
    overflow-x: scroll;
  }

  .code-sandbox-cont::-webkit-scrollbar {
    height: 10px;
  }

  @keyframes move_left {
    0% {
      width: 330px;
    }

    100% {
      width: 0px;
    }
  }

  .move-left {
    border-right: none !important;
  }

  .move-left .code-sandbox-left-list {
    opacity: 0;
  }

  .move-left>.arrows {
    left: 0%;
  }
}