body,
html {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  font-family: 'MicrosoftYaHei';
}

ul {
  padding: 0;
  margin: 0;
}

li {
  list-style: none;
}

a {
  text-decoration: none;
}

a:link {
  color: #fff;
}

a:visited {
  color: #fff;
}

a:active {
  color: #fff;
}

p {
  margin: 0;
}

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

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

.application-example-main {
  width: 100%;
  min-width: 1200px;
  /* 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;
}

/* 代码沙箱 左侧容器 */
.application-example-main>.application-example-left {
  min-width: 0px;
  width: 330px;
  max-width: 355px;
  position: relative;
  height: 100%;
  /* min-height: 900px; */
  z-index: 4;
  border-right: 1px solid #d0d9d9;
  transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1);
  background: #f8f8f9;
  flex-shrink: 0;
  /* overflow-y: scroll; */
  /* overflow-x: auto; */
}

.application-example-left>.arrows {
  position: absolute;
  top: 50%;
  right: -7.2%;
  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;
}

.application-example-left>.application-example-title {
  width: 100%;
  height: 50px;
  display: flex;
  padding-left: 20px;
  border-bottom: 1px solid #d0d9d9;
  box-sizing: border-box;
  font-size: 18px;
  color: #262C38;
  background: #f8f8f9;
  font-weight: bold;
}

.application-example-left>.application-example-title>div {
  width: 100%;
  height: 100%;
  background: url('../../../img/application-example/application-img.png') no-repeat 0px 20px;
  text-indent: 28px;
  line-height: 58px;
}

/* 代码沙箱 左侧列表 */
.application-example-left-list {
  width: 100%;
  height: calc(100% - 50px);
  border-right: 1px solid #d0d9d9;
  box-sizing: border-box;
  overflow-y: scroll;
}

.application-left-list {
  width: 100%;
  height: calc(100% - 50px);
  min-height: 530px;
  box-sizing: border-box;
  background: #f8f8f9;
  overflow-x: hidden;
}

.application-left-list> :nth-child(1) {
  display: none;
}

.application-left-list> :nth-child(2) {
  height: calc(100% - 0px);
}

.application-type {
  width: 100%;
}

.type-scroll {
  width: 100%;
  height: calc(100% - 40px);
  overflow-y: scroll;
}

.application-left-list>:nth-child(1)>.type-scroll {
  overflow-y: hidden;
}

.application-type .type-top {
  height: 40px;
  display: flex;
  background: #eeeeee;
  border-top: 1px solid #d0d9d9;
  border-bottom: 1px solid #d0d9d9;
  box-sizing: border-box;
  padding-left: 23px;
  align-items: center;
  font-size: 16px;
  color: #262C38;
  font-weight: bold;
  text-indent: 3px;
}

.application-type .type-top img {
  margin-right: 8px;
}

.application-type .type-item {
  height: 40px;
  padding-left: 54px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  font-size: 14px;
  color: #262c38;
  cursor: pointer;
  font-weight: 700;
}

.application-type .type-item img {
  width: 16px;
  margin-right: 8px;
  pointer-events: none;
}

.application-type .type-item-active {
  position: relative;
  color: #007fff;
  background: #fff;
}

.application-type .type-item-active ::before {
  content: '';
  position: absolute;
  width: 2px;
  height: 40px;
  left: 0;
  top: 0;
  background: #0080ff;
}

.application-type .type-item div {
  pointer-events: none;
}

.application-industry {
  width: 100%;
}

.application-industry>.industry-top {
  height: 40px;
  display: flex;
  background: #eeeeee;
  border-bottom: 1px solid #d0d9d9;
  border-top: 1px solid #d0d9d9;
  box-sizing: border-box;
  padding-left: 25px;
  align-items: center;
  font-size: 16px;
  color: #262c38;
}

.application-industry>.industry-top img {
  margin-right: 8px;
}

.application-industry>.industry-item {
  height: 40px;
  padding-left: 54px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  font-size: 14px;
  color: #262c38;
}

.application-industry>.industry-item img {
  margin-right: 8px;
}

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

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

.type-scroll::-webkit-scrollbar {
  width: 8px;
  border-radius: 5px;
  background: transparent;
}

.type-scroll::-webkit-scrollbar-thumb {
  width: 8px;
  height: 122px;
  background: #7f8595;
}

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

.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-left em::before {
  content: '';
  display: block;
  width: 0;
  height: 0;
  position: absolute;
  right: -22px;
  top: 8px;
  border: 4px solid transparent;
  border-left: 4px solid #444E63;
}

.search-box-left :nth-last-child(1)::before {
  display: none;
}


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

.application-right-top {
  /* width: 1530px; */
  height: 50px;
  display: flex;
  align-items: center;
  font-size: 18px;
  color: #262c38;
  font-weight: 700;
}

.application-right-top>img {
  width: 20px;
  margin-right: 8px;
}

.application-right-cont {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  /* justify-content: space-between; */
}

.application-right-cont>.application-scenes {
  width: 290px;
  height: 220px;
  margin: 0 14px 10px 0;
  box-shadow: 0px 0px 1px 2px #00000020;
}

/* .application-right-cont :nth-child(5n) {
  margin-right: 0;
} */

.application-scenes-top {
  width: 290px;
  height: 183px;
  position: relative;
  justify-content: space-between;
}

.application-right-cont>.application-scenes>.scenes-img {
  width: 290px;
  height: 183px;
}

.application-scenes-top .scenes-img img {
  width: 290px;
  height: 183px;
}

.application-scenes-top .scenes-hover {
  width: 100%;
  height: 183px;
  position: absolute;
  background: rgba(0, 0, 0, 0.5);
  left: 0;
  top: 0;
  display: none;
}

.scenes-img:hover+div {
  display: block;
}

.application-scenes-top .scenes-hover:hover {
  display: block;
}

.scenes-hover-cont {
  width: 100%;
  padding: 70px 0 58px 0;
  display: flex;
  justify-content: space-evenly;
  position: relative;
}

.scenes-gpu {
  font-size: 12px;
  color: #ffff;
  text-indent: 10px;
}

.scenes-hover-cont>div {
  width: 90px;
  height: 30px;
  display: flex;
  align-items: center;
  font-size: 14px;
  border-radius: 2px;
  color: #ffffff;
  background-color: #1177e3;
  cursor: pointer;
}

.scenes-hover-cont>div>img {
  margin: 0 4px 0 10px;
}

.scenes-hover-cont>.case-pos>img {
  margin-left: 15px;
}

.scenes-hover-cont>.share_but {
  position: absolute;
  width: 50px;
  height: 24px;
  background: #1D7BE1;
  right: 6px;
  top: 6px;
  font-family: '微软雅黑';
  font-size: 12px;
  border-radius: 2px;
}

.scenes-hover-cont>.share_but>img {
  margin: 0 4px 0 5px;
}

.scenes-hover-cont>.experience>div>img {
  margin: 0 4px 0 10px;

}

.scenes-hover-cont>.experience {
  position: relative;
}

.phone_experience {
  position: absolute;
  width: 90px;
  height: 30px;
  background: #1D7BE1;
  border-radius: 2px;
  top: 40px;
  left: 0;
  display: flex;
  align-items: center;
  font-family: '微软雅黑';
  font-size: 14px;
}

.scenes-hover-cont>.experience>.phone_experience>img {
  margin: 0 7px 0 13px;

}

.case-pos a {
  margin: -2px 0 0 3px;
}

.application-scenes-bottom {
  display: flex;
  padding-top: 6px;
}

.application-scenes-bottom>.scenes-stream {
  width: 46px;
  height: 25px;
  background: #0fcccc;
}

.application-scenes-bottom>.scenes-stream>div {
  width: 100%;
  height: 100%;
  background: url('../../../img/application-example/stream.png') no-repeat 4px 5px;
  text-indent: 25px;
  font-size: 14px;
  color: #ffffff;
  line-height: 25px;
}

.application-scenes-bottom>.scenes-port {
  width: 46px;
  height: 25px;
  background: #1177e3;
}

.application-scenes-bottom>.scenes-port>div {
  width: 100%;
  height: 100%;
  background: url('../../../img/application-example/duan.png') no-repeat 4px 5px;
  text-indent: 25px;
  font-size: 14px;
  color: #ffffff;
  line-height: 25px;
}

.application-scenes-bottom>.scenes-name {
  width: 183px;
  font-size: 14px;
  color: #17223d;
  text-indent: 5px;
  line-height: 25px;
  font-weight: 549;
  white-space: nowrap;

  overflow: hidden;
  text-overflow: ellipsis;
}

.application-scenes-bottom>.scenes-memory {
  width: 58px;
  font-size: 14px;
  color: #777777;
  text-align: right;
  line-height: 25px;
}

.qrcodeCanvas_pop {
  width: 440px;
  height: 480px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: #FFFFFF;
  box-shadow: 0px 0px 4px #17233D;
  display: none;
}

.qrcode_title {
  height: 80px;
  font-family: '微软雅黑';
  font-size: 20px;
  font-weight: 700;
  color: #17213D;
  text-align: center;
  line-height: 80px;
  position: relative;
}

.qrcode_title img {
  position: absolute;
  right: 8px;
  top: 10px;
  cursor: pointer;
}

.qrcode_box {
  width: 320px;
  height: 310px;
  margin: auto;
  position: relative;
}

.qrcode_bor1 {
  width: 16px;
  height: 16px;
  position: absolute;
  left: 0;
  top: 0;
  background: url('../../../img/application-example/bk1.png') no-repeat;
}

.qrcode_bor2 {
  width: 16px;
  height: 16px;
  position: absolute;
  right: 0;
  top: 0;
  background: url('../../../img/application-example/bk2.png') no-repeat;
}

.qrcode_bor3 {
  width: 16px;
  height: 16px;
  position: absolute;
  left: 0;
  bottom: 0;
  background: url('../../../img/application-example/bk3.png') no-repeat;
}

.qrcode_bor4 {
  width: 16px;
  height: 16px;
  position: absolute;
  right: 0;
  bottom: 0;
  background: url('../../../img/application-example/bk4.png') no-repeat;
}

#qrcodeCanvas {
  width: 250px;
  height: 250px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.qrcode_bot {
  width: 250px;
  height: 58px;
  margin: auto;
  font-family: '微软雅黑';
  font-size: 18px;
  color: #17223D;
  text-align: center;
  line-height: 70px;
  text-indent: 10px;
  background: url('../../../img/application-example/wx_bg.png') no-repeat 6px 22px;
}

.qrcode_bot_sec {
  height: 90px;
  line-height: 90px;
  background: url('../../../img/application-example/wx_bg.png') no-repeat 6px 33px;
}

.qrcode_hint {
  font-family: '微软雅黑';
  font-size: 12px;
  color: #17223D;
  text-align: center;
}

/* 
 *右侧铺满全屏
*/
.application-example-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;
}

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

.application-example-flooding>.right-example>.right-example-top>.example-name {
  width: calc(100% - 50px);
}

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

.application-example-flooding > .application-right-cont :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;
}

.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 #3b4150;
  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 #3b4150;
  /* 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;
}

.case a {
  color: #17223d;
}

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

/* 
  * 代码沙箱 底部
 */
.application-example-footer {
  width: 100%;
  height: 24px;
  min-width: 1200px;
  /* 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;
}

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

.application-example-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;
  border-right: none !important;
  /* overflow: hidden; */
  /* 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); */
}

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

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

  100% {
    width: 0;
  }
}

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

  100% {
    width: 330px;
  }
}

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

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

.example-arrows-shrink .item-top .example-arrows {
  transform: rotate(-90deg);
}

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

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

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

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

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

  100% {
    height: auto;
  }
}

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

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

  100% {
    height: auto;
  }

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

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

  100% {
    width: 100%;
  }
}

@media screen and (max-width: 1900px) {
  .application-example-cont {
    padding-bottom: 8px;
    overflow-x: scroll;
  }

  ::-webkit-scrollbar {
    height: 8px;
  }

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

    100% {
      width: 0px;
    }
  }

  /* .arrows {
    right: -12% !important;
  } */

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

@media screen and (max-height: 800px) {
  .application-left-list {
    /* height: 480px; */
    /* overflow-y: scroll; */
  }

  .application-left-list::-webkit-scrollbar {
    display: none;
  }
}