* {outline:none}
.wrap-scroll {
    width:100%;
    max-width:800px;
    overflow:auto;
}
.wrap {
  position:relative;
  width:742px;
  width:100%;
  height:300px;
  margin: auto;
}
.wrap .container {
  position:absolute;
  height:295px;
  background-color:black;
  border-radius:6px;
  box-shadow:0px 0px 8px rgba(0, 0, 0, 0.4);
  overflow: hidden;
}
.wrap .container.old{
  left:0;
  top:0;
  width:350px;
}
.wrap .container.new{
  right:0;
  top:0;
  width:350px;
}
.wrap .container .bottom{
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display:flex;
    width:100%;
    bottom:0;
    position:absolute;
}
.wrap .container .bottom .step {
      flex:3;
      -webkit-flex:3;
      -ms-flex:3;
      width:100%;
      height:54px;
      background-color:#373942;
      border-bottom-left-radius:6px;
      display:flex;
}
.wrap .container.new .bottom .step span {
        flex:0.6;
        -webkit-flex:0.6;
        -ms-flex:0.6;
}
.wrap .container .bottom .step span {
        flex:0.6;
        -webkit-flex:0.6;
        -ms-flex:0.6;
        line-height:54px;
        color:#fff;
        margin-left:7px;
        font-size:18px;
}
#epiceditor-preview .wrap .container .bottom ul {
        flex:2;
        -webkit-flex:2;
        -ms-flex:2;
        list-style:none;
        height: 10px;
        margin: 23px 0;
        padding-left: 15px;
}
#epiceditor-preview .wrap .container .bottom li {
       position:relative;
       height:7px;
       width:7px;
       margin:0 10px;
       float:left;
       border-radius:50%;
       background-color:none;
       border:1px solid #535560;
}
#epiceditor-preview .wrap .container.new .bottom li {
       margin:0 7px;
}
.wrap .container.new .bottom li {
       position:relative;
       height:7px;
       width:7px;
       margin:0 7px;
       float:left;
       border-radius:50%;
       background-color:none;
       border:1px solid #535560;
}
.wrap .container .bottom li:first-child:before {
  width:0;
}

.wrap .container .bottom li:before {
  content: '';
  position: absolute;
  width: 20px;
  border-top: 1px solid #535560;
  left: -21px;
  top: 3px;
}

.wrap .container.new .bottom li:before {
  content: '';
  position: absolute;
  width: 14px;
  border-top: 1px solid #535560;
  left: -15px;
  top: 3px;
}
.wrap .container.new .bottom li:first-child:before {
  width:0;
}
.wrap .container .bottom li.true {
  background-color:#7a7d86;
}
.wrap .container .bottom li.active {
  background-color:#fff;
  box-shadow:0 0 6px rgba(255, 255, 255, 0.78);
}
.wrap .btn {
  flex:1;
  background-color:#6cb5f3;
  border:0;
  margin:0;
  padding:0;
  text-transform:uppercase;
  color:#fff;
  font-weight:bold;
  border-bottom-right-radius:6px;
  cursor:pointer;
  transition:all .3s;
}
.wrap .btn:hover {
  background-color:#6BA5D6;
  transition:all .3s;
}
.wrap .btn:active {
  background-color:#5F8AAF;
}
.wrap .slider-turn{
  width:10000px;
}
.wrap img{
  width:350px;
  float:left;
}
.wrap .container .bottom .step span.num {
  font-size: 0.8em;
  margin-left:0;
}

@media (max-width: 720px), (max-device-width: 720px){
  .wrap {
    width:742px;
    overflow:auto;
  }
}

@media (max-width: 476px), (max-device-width: 476px){
  .wrap {
    width:350px;
    height:610px;
    overflow:auto;
  }
  .wrap .container.old{
    left:0;
    top:0;
    width:350px;
  }
  .wrap .container.new{
    right:0;
    top:auto;
    bottom:0;
    width:350px;
  }
}