.bottom-panel {
    width: 650px;
    position: fixed;
    z-index: 12;
    bottom: 0;
    height: 200px;
    transform: translate(-50%);
    left: 50%;
    color: #fff;
    display: none;
}
.color-panel  {
display: flex;
text-shadow: 0 2px 10px #000;
justify-content: center;
align-items: center;
background-size: 100% 100%;
background-position: 50%;
background-repeat: no-repeat;
background-image: url(../img/bgcolor1.37b037b3.png);
padding: 10px 0;
}
.color-panel .transition-group  {
width: 100%;
display: flex;
justify-content: space-around;
}
.color-panel .item  {
font-size: 16px;
text-align: center;
margin: 0 10px;
width:125px;
}
.color-panel .item .item-color-icon-box {
width: 40px;
height: 40px;
margin: 0 auto;
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
.main-type {
display: flex;
box-sizing: border-box;
border-bottom: 1px solid #fff;
width: 50%;
margin: 10px auto;
text-shadow: 0 2px 10px #000;
}
.main-type .item  {
cursor: pointer;
padding: 5px 0;
font-size: 20px;
box-sizing: border-box;
width: 50%;
text-align: center;
position: relative;
bottom: -1px;
}
.main-type .item.active  {
border-bottom: 4px solid #d7000f;
}
.color-panel .item .item-color-icon-box  {
width: 40px;
height: 40px;
margin: 0 auto;
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
.color-panel .item .item-color-icon-box .item-color-icon  {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
height: 100%;
width: 100%;
}
.color-panel .item .item-color-icon-box .item-check-icon  {
width: 24px;
height: 16px;
background-size: contain;
background-position: 50%;
background-repeat: no-repeat;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAiCAMAAAAuwqolAAAA7VBMVEUAAAD///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////9sDJFPAAAATnRSTlMAAgMEBggKDxEVFxweJyotLi8wMTQ2Oj5KUFdcZGpwcnN0dXZ3eHl6e3x9foaHi46UmpucpKi0ucDEy83O19jb3+Pn6ezv8vT2+Pn6/P70EXJ6AAABB0lEQVQ4y5XVV1PCUBCG4dXYsKGABXsBFey9BAsSjcbk/f8/xwsSxRDD7rnceb7ZOTO754gYzuiFf2rxUw/wbvCLr0BN79c+gUM1d84w+cIdQFPtSy82v+IDNLR86Cgy+fEbAA60fubR5pffbL4eArCv5GPXmPx0q+v3lH6pk+0rVSfTr391fT1Vr4a05vr5yDnZXtpA0Ew3mbyPff/8PwHg/m1Saf/rZd6DdJPVj9jvZl0uTuAW48LwSZTnRUpxImg4IiITt+T73wRuUWT2OfE7OQuVJIKrS1/hexI/J9oesLSezacT0ZbiYfBsvjcRberGuezZfJLQe5FyB8INyw9QqB0vDCDfBU9isdkXDwcAAAAASUVORK5CYII=);
z-index: 11;
}
.varshow_container_cambar{
position: absolute;
right: 10px;

z-index: 800;
text-align: center;

}

.varshow_container_cambar img{
width: 36px;
height: 36px;
margin: 0 auto;
display: flex;
justify-content: center;
align-items: center;
position: relative;
}

.cambar-item a{
}
.cambar-title{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
color:#fff;
font-size:10px;
line-height:12px;
text-shadow: 0 5px 5px #000;
}

#bar,#mic,#controller,#core{
    display: none;
    max-width: 800px;
   
    position:absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width:100%;
    height:50%;
    border:none;
    z-index: 999;
}
#cam{
    display: none;
    max-width: 800px;
   
    position:absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width:100%;
    height:50%;
    border:none;
    z-index: 999;
}
.swiper-wrapper{
    max-width: 800px;
}

.swiper-container {
    position:relative;
    max-width: 800px;
    width: 100%;
    height: 100%!important;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    overflow: hidden;
  }

  .swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;
    padding: 15px;
    /* Center slide text vertically */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
  }
  .slide-content-container{
      border: solid 1px #ccc;
      margin: 10px 35px 38px 19px;
      height: 100%;
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-left: 36px;
    
  }
  .swiper-pagination{
    display: none;
  }
  .append-buttons {
    text-align: left;
    /* margin-top: 20px; */
     background: #fff;
     padding: 12px 20px 10px 50px;
     border-top-left-radius: 10px;
    border-top-right-radius: 10px;
  }
  .append-buttons .closecard{
    width: 30px;
    height: 30px;
    float:right;
    border:none;
    margin-top: -43px;
    background-image: url("/static/images/lianxiang/知识卡关闭按钮.png") ;
    background-repeat:no-repeat;
     background-size:100% 100%;
      -moz-background-size:100% 100%;
}
  
  .append-buttons img{
      width: 30px;
      height: 30px;
  }
  .append-buttons a {
    display: inline-block;
    border: 1px solid #CCC;
    color: #000;
    text-decoration: none;
    padding: 4px 10px;
    border-radius: 4px;
    margin-right: 10px;
    font-size: 13px;
  }
  .append-buttons .active{
    color: #fff;
    background-color: #ccc;
  }
  #core ul{
    list-style: none;
  }
  #core ul li{
    width: 250px;
    height: 40px;
    background-color: #666;
    border-radius: 4px;
    margin-top: 10px;
    text-align: center;
    line-height: 40px;
  }
  #core ul li a {
    color: white;
   
    width: 100%;
    height: 100%;
    display: block;
  }
  .prism-player1{
    background-color:none!important;;
    border: solid 1px #ccc;
  }
  .think-tilte{
    display: block;
    padding-bottom: 10px;
    font-size: 24px;
    font-weight: bold;
    font-family: auto;
  }
  .firstitem{
     
    margin-top:16vh;
  }
  .swiper-button-prev {
    opacity: 0.35;
    background-image: url("/static/images/lianxiang/prev.png");
    background-repeat:no-repeat;
     background-size:100% 100%;
    -moz-background-size:100% 100%;
    width: 36px!important;
    height: 36px!important;
    left: 7px!important;
  }
  
  .swiper-button-prev:after {
     
    opacity: 0;
    left: 5px!important;
    width: 36px!important;
    height: 36px!important;
}
.swiper-button-prev:hover,.swiper-button-next:hover{
  opacity: 1!important;
}
.swiper-button-next {
  opacity: 0.35;
  background-image: url("/static/images/lianxiang/next.png");
  background-repeat:no-repeat;
   background-size:100% 100%;
  -moz-background-size:100% 100%;
   right: 7px!important;
  width: 36px!important;
  height: 36px!important;
}

.swiper-button-next:after {
   
  opacity: 0;
  right: 2px!important;
  width: 36px!important;
  height: 36px!important;
}
.swiper-button-disabled{
  display: none!important;
}
.thinkoverlayer{
  display: none;
}
.slide-content-container img{
  width: 100%;
  height: 100%;
}

.item-disabled{
  pointer-events: none;
  opacity: 0.5;
}
  @media (max-width: 650px){
    .right-bottom{
      right:8vw;
    }
    .color-panel .item {
        font-size: 10px;
        text-align: center;
        margin: 0 10px;
        transition: all .4s;
    }

    .bottom-panel  {
        width: 90%;
        position: fixed;
        z-index: 12;
        bottom: 0;
        height: 160px;
        transform: translate(-50%);
        left: 50%;
        color: #fff;
     
    }
    .color-panel .item .item-color-icon-box {
        width: 35px;
        height: 35px;
        margin: 0 auto;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
    }
    .color-panel .item .item-color-icon-box .item-check-icon  {
        width: 18px;
        height: 12px;
        background-size: contain;
        background-position: 50%;
        background-repeat: no-repeat;
        background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAiCAMAAAAuwqolAAAA7VBMVEUAAAD///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////9sDJFPAAAATnRSTlMAAgMEBggKDxEVFxweJyotLi8wMTQ2Oj5KUFdcZGpwcnN0dXZ3eHl6e3x9foaHi46UmpucpKi0ucDEy83O19jb3+Pn6ezv8vT2+Pn6/P70EXJ6AAABB0lEQVQ4y5XVV1PCUBCG4dXYsKGABXsBFey9BAsSjcbk/f8/xwsSxRDD7rnceb7ZOTO754gYzuiFf2rxUw/wbvCLr0BN79c+gUM1d84w+cIdQFPtSy82v+IDNLR86Cgy+fEbAA60fubR5pffbL4eArCv5GPXmPx0q+v3lH6pk+0rVSfTr391fT1Vr4a05vr5yDnZXtpA0Ew3mbyPff/8PwHg/m1Saf/rZd6DdJPVj9jvZl0uTuAW48LwSZTnRUpxImg4IiITt+T73wRuUWT2OfE7OQuVJIKrS1/hexI/J9oesLSezacT0ZbiYfBsvjcRberGuezZfJLQe5FyB8INyw9QqB0vDCDfBU9isdkXDwcAAAAASUVORK5CYII=);
    }
    .color-panel .item  {
        font-size: 10px;
        text-align: center;
        margin: 0 ;
        transition: all .4s;
    }
    .main-type {
        display: flex;
        box-sizing: border-box;
        border-bottom: 1px solid #fff;
        width: 70%;
        margin: 5px auto 5px auto;
    }
    .main-type .item.active {
        border-bottom: 2px solid #d7000f;
    }
    .color-panel .item   .item-color-text{
        font-size: 8px;
    }
    .main-type .item  {
        cursor: pointer;
        padding: 5px 0;
        font-size: 14px;
        box-sizing: border-box;
        width: 50%;
        text-align: center;
        position: relative;
        bottom: -1px;
    }
    .think-tilte{
      display: block;
   
      font-size: 24px;
      font-weight: bold;
      font-family: auto;
    }
    
    .firstitem{
      margin-top:0;
     
    }
    .append-buttons .closecard{
     
    }
    .append-buttons a {
  
      font-size: 12px;
  }
  .swiper-button-next, .swiper-button-prev ,.swiper-button-next:after, .swiper-button-prev:after {
    display: none!important;
  }
  .slide-content-container {
    margin:0;

  }
  #cam,#bar,#mic,#controller,#core{
    height: 40%;
    margin-top: 20vh;
     
  }
  .append-buttons {
    padding: 10px 15px 0px 15px;
    }
    .swiper-pagination{
      display: block;
      bottom: 5px;
    }
    .swiper-horizontal>.swiper-pagination-bullets{
  bottom: 5px!important;
}
    .swiper-pagination-bullet-active{
      background: red!important;
    }
    .thinkoverlayer{
      width: 100%;
      height: 100%;
      opacity: 0.7;
      background: #000;
      display: none;
      position: absolute;
      left: 0;
      top: 0;
      z-index: 999;
    }
    .swiper-wrapper{
      border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    }
    .swiper-slide{
      padding-bottom: 25px;
    }
}




.bottom-panel{
  width:100%;
  background-image: linear-gradient(to bottom,rgba(0,0,0,0),rgba(0,0,0,1));
}
.cambar-title{
  background:rgba(0,0,0,.5);
  line-height:10px;
  font-size:10px;
  padding: 5px;
  display:inline-block;
}
.cambar-item{
  margin-bottom:20px;
}
.right-bottom{
  background:#33333300;
  display:block;
  position:absolute;
  bottom:25vh;
  right:3vw;
  z-index:800;
}
.right-bottom img:hover{
  cursor: pointer; 
}
.right-bottom-image{
  
}
.image-box{
  position:absolute;
  bottom:calc(15vh + 36px);
  right:calc(4vw + 36px);
  height:240px;
  width:400px;
  background-image:url(/static/images/lianxiang/right-bt-btn-popup.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}


.image-box img{
  position:absolute;
  right:10px;
  top:10px;
  height:20px;
  width:20px;
  cursor: pointer;
}

@media (max-width: 767px){
 
  .image-box{
    height: 30vh;
    width:80vw;
  }
  .right-bottom{
      right:8vw;
    }
}