.swapper-img-modal .modal-body{
  margin: 0;
  padding: 0;
}
.swapper-img-modal .all-popover-style {
  display: flex;
  width: 1535px;
  margin-left: 44px;
}
.swapper-img-modal .modal-dialog.oris-modal {
  width: unset !important;
  max-width: 95% !important;
  height:94%;
}
.swapper-img-modal .modal-content {
  width: 100%;
  height: 100%;
  overflow: hidden;
  overflow-y: auto;
  border-radius: 8px;
  box-shadow: none;
  color: #121212;
}

.swapper-img-modal .left-style {
  width: 100%;
  display: flex;
  align-items: center;
}

.swapper-img-modal .left-style .left-style-left {
  cursor: pointer;
  margin-right: 14px;
}

.swapper-img-modal .left-style .left-style-right {
  cursor: pointer;
  margin-left: 14px;
}

.swapper-img-modal .left-img {
  width:  745px;
  height:  745px;
  background: #FFFFFF;
  border: 1px solid #DCDCDC;
  position: relative;
}

.swapper-img-modal .content-img {
  position: absolute;
  width: 743px;
  height:  743px;
  margin: auto;
  overflow: hidden;
}
.swapper-img-modal .content-nomal-img {
  position: absolute;
  width: 743px;
  height:  743px;
  margin: auto;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

.swapper-img-modal .content-nomal-img>img {
  max-width: 743px;
  max-height: 743px;
}

.swapper-img-modal .glyphicon {
  top: 15px;
  color: #999999;
}
.swapper-img-modal .icon-btn {
  padding: 15px 5px;
  width: 32px;
  height: 60px;
  background: #FFFFFF;
  border: 1px solid #DCDCDC;
}
.swapper-img-modal .icon-btn:hover {
  background: #EDEFF3;
}

.swapper-img-modal .left-img-message {
  position: absolute;
  bottom: -23px;
  margin-left: 41%;
  width: 136px;
  height: 13px;
  font-size: 14px;
  font-family: Arial;
  font-weight: 400;
  line-height: 24px;

}

.swapper-img-modal .right-style {
  width: 100%;
  margin-left: 20px;
}

.swapper-img-modal .right-top-font {
  height: 140px;
  margin-top: 24px;
}

.swapper-img-modal .top-title {
  font-size: 20px;
  font-family: Arial;
  font-weight: 400;
  line-height: 10px;
  margin-left: 18px;
  margin-bottom: 15px;
}

.swapper-img-modal .top-content {
  width: 659px;
  height: 57px;
  font-size: 14px;
  font-family: Arial;
  font-weight: 400;
  line-height: 18px;
  margin-left: 18px;
}



.swapper-img-modal .img-title {
  width: 64px;
  height: 19px;
  font-size: 20px;
  font-family: Arial;
  font-weight: 400;
  line-height: 26px;
  margin-left: 18px;
}
.swapper-img-modal .right-img{
   width: 690px;
  display: flex;
  flex-wrap: wrap;
 }
.swapper-img-modal .right-img>.right-img-item {
  margin-bottom: 10px;
  background: #FFFFFF;
  border: 2px solid #DCDCDC;
}
.swapper-img-modal .right-img>.right-img-item:hover {
  border: 2px solid #B56631;
  cursor: pointer;
}
.swapper-img-modal .right-img>.right-img-item {
  margin-left: 20px;
  width: 80px;
  height: 80px;
  overflow: hidden;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
.swapper-img-modal .right-img-item>img {
  max-width: 80px;
  max-height: 80px;
}
.swapper-img-modal .right-img .right-img-item-active {
   border: 2px solid #B56631;
 }
.swapper-img-modal .cover {
  width: 100%;
  height: 100%;
  z-index: 10;
  position: absolute;
  left: 0;
  top: 0;
  cursor: crosshair;
}

.swapper-img-modal .big-image {
  position:absolute;
  width: 743px;
  height:  743px;
  margin: auto;
  display: none;
  overflow: hidden;
}

.swapper-img-modal .big-image img {
  position: absolute;
  min-width: 100%;
  min-height: 100%;
  left: 0;
  top: 0;
}
.swapper-img-modal .modal-header {
  border-bottom: 0;
}
.swapper-img-modal .oris-modal .close {
  font-size: 35px !important;
}
.swapper-img-modal .giga {
  color: #999999;
  font-weight: 700;
}
@media screen and (min-width: 1920px){
  .swapper-img-modal .right-style {
    margin-left: 40px;
  }

  .swapper-img-modal .top-content {
    width: 690px;
  }
}
@media screen and (min-width: 1880px) and (max-width:1920px) {
  .swapper-img-modal .right-style {
    margin-left: 40px;
  }

  .swapper-img-modal .top-content {
    width: 690px;
  }
}
@media screen and (min-width: 1780px) and (max-width:1880px) {
  .swapper-img-modal .right-style {
    margin-left: 20px;
  }
  .swapper-img-modal .all-popover-style {
    margin-left: 25px;
  }
  .swapper-img-modal .top-content {
    width: 600px;
  }
}
@media screen and (min-width: 1680px) and (max-width:1780px) {
  .swapper-img-modal .right-style {
    margin-left: 10px;
  }
  .swapper-img-modal .all-popover-style {
    margin-left: 20px;
  }
  .swapper-img-modal .top-content {
    width: 590px;
  }
  .swapper-img-modal .right-img{
    width:510px;
  }
}
@media screen and (min-width: 1580px) and (max-width: 1680px) {
  .swapper-img-modal .right-style {
    margin-left: 10px;
  }
  .swapper-img-modal .all-popover-style {
    margin-left: 20px;
  }
  .swapper-img-modal .top-content {
    width: 470px;
  }
  .swapper-img-modal .right-img{
    width:490px;
  }
}
@media screen and (min-width: 1480px) and (max-width: 1580px) {

  .swapper-img-modal .content-nomal-img {
    width:  675px;
    height:  675px;
  }

  .swapper-img-modal .right-style {
    margin-left: 10px;
  }
  .swapper-img-modal .all-popover-style {
    margin-left: 10px;
  }
  .swapper-img-modal .right-top-font {
    height: 170px;
  }
  .swapper-img-modal .top-content {
    width: 440px;
  }
  .swapper-img-modal .right-img{
    width:410px;
  }
  .swapper-img-modal .left-img {
    width:  675px;
    height:  675px;
  }
  .swapper-img-modal .big-image {
    width: 673px;
    height:  673px;
  }
  .swapper-img-modal .content-img {
    width: 673px;
    height:  673px;
  }
  .swapper-img-modal .content-nomal-img>img {
    max-width: 673px;
    max-height: 673px;
  }
}
@media screen and (min-width: 1380px) and (max-width: 1480px) {

  .swapper-img-modal .content-nomal-img {
    width:  675px;
    height:  675px;
  }
  .swapper-img-modal .right-style {
    margin-left: 0;
  }
  .swapper-img-modal .all-popover-style {
    margin-left: 0;
  }
  .swapper-img-modal .right-top-font {
    height: 170px;
  }
  .swapper-img-modal .top-content {
    width: 410px;
  }
  .swapper-img-modal .right-img{
    width:410px;
  }
  .swapper-img-modal .left-img {
    width:  675px;
    height:  675px;
  }
  .swapper-img-modal .big-image {
    width: 673px;
    height:  673px;
  }
  .swapper-img-modal .content-img {
    width: 673px;
    height:  673px;
  }
  .swapper-img-modal .content-nomal-img>img {
    max-width: 674px;
    max-height: 673px;
  }
}
@media screen and (min-width: 1280px) and (max-width: 1380px) {
  .swapper-img-modal .content-nomal-img {
    width:  675px;
    height:  675px;
  }
  .swapper-img-modal .right-style {
    margin-left: 0;
  }
  .swapper-img-modal .all-popover-style {
    margin-left: 0;
  }
  .swapper-img-modal .right-top-font {
     height: 170px;
   }
  .swapper-img-modal .top-content {
    width: 360px;
  }
  .swapper-img-modal .right-img{
    width:350px;
  }
  .swapper-img-modal .left-img {
    width:  675px;
    height:  675px;
  }
  .swapper-img-modal .big-image {
    width: 673px;
    height:  673px;
  }
  .swapper-img-modal .content-img {
    width: 673px;
    height:  673px;
  }
  .swapper-img-modal .content-nomal-img>img {
    max-width: 673px;
    max-height: 673px;
  }
}
@media screen and (min-width: 1180px) and (max-width: 1280px) {
  .swapper-img-modal .content-nomal-img {
    width:  555px;
    height:  555px;
  }
  .swapper-img-modal .right-style {
    margin-left: -150px;
  }
  .swapper-img-modal .all-popover-style {
    margin-left: 0;
  }
  .swapper-img-modal .top-content {
    width: 300px;
  }
  .swapper-img-modal .right-img{
    width:350px;
  }
  .swapper-img-modal .left-img {
    width:  555px;
    height:  555px;
    margin-bottom: 20px;
  }
  .swapper-img-modal .big-image {
    width: 553px;
    height:  553px;
  }
  .swapper-img-modal .content-img {
    width: 553px;
    height:  553px;
  }
  .swapper-img-modal .content-nomal-img>img {
    max-width: 553px;
    max-height: 553px;
  }
  .swapper-img-modal .right-top-font {
    height: 212px;
  }
}
@media screen and (min-width: 1080px) and (max-width: 1180px) {
  .swapper-img-modal .content-nomal-img {
    width:  555px;
    height:  555px;
  }
  .swapper-img-modal .right-style {
    margin-left: -150px;
  }
  .swapper-img-modal .all-popover-style {
    margin-left: 0;
  }
  .swapper-img-modal .top-content {
    width: 210px;
  }
  .swapper-img-modal .right-img{
    width: 235px;
    overflow-y: scroll;
    height: 265px;
  }

  .swapper-img-modal .left-img {
    width:  555px;
    height:  555px;
    margin-bottom: 20px;
  }
  .swapper-img-modal .big-image {
    width: 553px;
    height:  553px;
  }
  .swapper-img-modal .content-img {
    width: 553px;
    height:  553px;
  }
  .swapper-img-modal .content-nomal-img>img {
    max-width: 553px;
    max-height: 553px;
  }
  .swapper-img-modal .right-top-font {
    height: 250px;
  }
}
@media screen and (max-width: 1080px){
  .swapper-img-modal .content-nomal-img {
    width:  505px;
    height:  505px;
  }
  .swapper-img-modal .right-style {
    margin-left: -200px;
  }
  .swapper-img-modal .all-popover-style {
    margin-left: 0;
  }
  .swapper-img-modal .top-content {
    width: 165px;
    overflow-y: scroll;
    height: 180px;
  }

  .swapper-img-modal .right-img{
    width: 182px;
    overflow-y: scroll;
    height: 209px;
  }

  .swapper-img-modal .left-img {
    width:  505px;
    height:  505px;
    margin-bottom: 20px;
  }
  .swapper-img-modal .big-image {
    width: 503px;
    height:  503px;
  }
  .swapper-img-modal .content-img {
    width: 503px;
    height:  503px;
  }
  .swapper-img-modal .content-nomal-img>img {
    max-width: 503px;
    max-height: 503px;
  }
  .swapper-img-modal .right-top-font {
    height: 250px;
  }
  .swapper-img-modal .right-img>img {
    width: 60px;
    height: 60px;
    cursor: pointer;}
 }
@media screen and(max-height: 915px){
  .swapper-img-modal .content-nomal-img {
    width: 553px;
    height: 553px;
  }
  .swapper-img-modal .left-img {
    width: 555px;
    height: 555px;
  }
  .swapper-img-modal .big-image {
    width: 553px;
    height: 553px;
  }
  .swapper-img-modal .content-img {
    width: 553px;
    height: 553px;
  }
  .swapper-img-modal .content-nomal-img>img {
    max-width: 553px;
    max-height: 553px;
  }
}
@media screen and (min-height: 515px) and (max-height: 815px){
  .swapper-img-modal .right-style {
    margin-left: -100px;
  }
  .swapper-img-modal .content-nomal-img {
    width: 553px;
    height: 553px;
  }
  .swapper-img-modal .left-img {
    width: 555px;
    height: 555px;
  }
  .swapper-img-modal .big-image {
    width: 553px;
    height: 553px;
  }
  .swapper-img-modal .content-img {
    width: 553px;
    height: 553px;
  }
  .swapper-img-modal .content-nomal-img>img {
    max-width: 553px;
    max-height: 553px;
  }
}
@media (min-width: 768px){
  .swapper-img-modal .modal-dialog {
    width: 600px;
    margin: 5px 60px;
  }}
.swapper-img-modal .modal-dialog {
  margin: 0 auto;
  margin-top: 2%;
}