.mini-header {
  padding-top: 0;
  overflow: hidden;
  min-width: inherit;
  background: rgba(0, 0, 0, 0.75);
}

.mini-header header {
  position: relative;
  background: rgba(0, 0, 0, 0.75);
  box-shadow: none;
}

.mini-header .logo {
  float: left;
  width: 40px;
  overflow: hidden;
  background: url('//cdn.elicht.com/logo/eltmall_ico.svg') no-repeat;
}
.mini-header .logo img{
  visibility: hidden;
}
header:after {
  content: "";
  height: 10px;
  position: absolute;
  left: 0;
  right: 0;
  bottom: -10px;
}
.mini-header .navbar .container {
  position: relative;
}
.mini-header .dealer-header .header-navbar {
}
.mini-header .nav-category {
  float: left;
  display: block;
  position: relative;
  margin-top: -12px;
  width: 56px;
  height: 60px;
  cursor: pointer;
}
.mini-header .nav-category .collapse {
  border-radius: 0px 2px 2px 0px;
  overflow: hidden;
  top: 60px;
}
.mini-header .nav-category .collapse:before {
  display: none;
}
.mini-header .nav-category:hover {
  color: #fff;
  background: #f30213;
}
.mini-header .nav-category-title {
  cursor: pointer;
  width: 36px;
  overflow: hidden;
  margin: 15px 0 0 6px;
}
.mini-header .nav-category-title .ico {
  font-family: iconfont;
  font-size: 20px;
}
.mini-header .nav-category-title .ico::before{
    content: "\e630";
}

.mini-header .navbar-nav {
  display: block;
  position: absolute;
  padding-left: 0;
}

.nav-category-title a {
  padding-left: 12px;
  background: none;
  color: #ccc;
}

.mini-header .header-navbar .navbar-nav {
  float: left;
  width: 36px;
  position: relative;
  z-index: 1;
}

.mini-header .header-navbar .navbar-nav > li {
  float: none;
  display: none;

}

.mini-header .header-navbar .navbar-nav:before {
    content: "\e678";
    font-family: iconfont;
    font-size: 20px;
    line-height: 60px;
    width: 56px;
    height: 60px;
    text-align: center;
    color: #ccc;
    cursor: pointer;
    margin-top: -12px;
}
.mini-header .header-navbar .navbar-nav > li > a{
  text-align: left;
  font-size: 14px;
  line-height: 44px;
}
.mini-header .navbar-nav .dropdown-hover:hover .dropdown-menu,
.mini-header .navbar-nav > li {
  float: none;
  display: none;
}

.mini-header .header-navbar .navbar-nav > li.line-v {
  display: none !important;
}

.mini-header .header-navbar .navbar-nav:hover:before {
  color: #fff;
  background: var(--red);
}

.mini-header .header-navbar .navbar-nav:hover > li {
  display: block;
  background-color: #fff;
  width: 150px;
  text-align: center;
  padding-left: 20px !important;
  padding-right: 15px !important;
}

.mini-header .header-navbar .navbar-nav > li:first-child {
  border-radius: 0 3px 0 0;
}

.mini-header .header-navbar .navbar-nav > li:last-child {
  border-radius: 0 0 3px 3px;
}

.mini-header .header-navbar .navbar-nav > li > a:hover:after,
.mini-header .header-navbar .navbar-nav > li.active > a:after {
  display: none;
}

.header-navbar .navbar-logo {
  display: block;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, 0);
  height: 28px;
}
.header-navbar .navbar-logo img {
  height: 100%;
}
.header-navbar .navbar-apps {
  right: 12px;
}
.header-navbar .navbar-apps .navbar-apps-item {
  height: 38px;
}

.top-bar-user-menu {
  border-radius: 3px;
}
.mini-header .dealer-header .navbar-apps {
  float: right;
}
.mini-header .dealer-header .navbar-apps .close-it {
  background: #fff;
}
.mini-header .dealer-header .navbar-apps .navbar-ico:hover,
.navbar-apps .navbar-ico:hover,
.navbar-apps-item__user:hover .navbar-ico {
  background: #f30213;
  color: #fff;
}

.sidebar {
  display: none;
}

.guide-title {
  position: fixed;
  top: 0;
  left: 128px;
  line-height: 60px;
  max-width: 800px;
  font-size: 18px;
  z-index: 1002;
  color: #ccc;
}

header .guide-title {
  position: absolute;
}

.navbar-so-active .nav-so-form {
  box-shadow: none;
}

header .navbar-apps-item > .navbar-ico,
header .navbar-apps-item a > .navbar-ico {
  background: none;
}

header .nav-so-cate .dropdown-menu,
header .navbar-so-active .nav-so-form,
header .nav-so-form .close-it {
  border: 0;
}

header .nav-so-form .nav-so-label {
  line-height: 36px;
}

header .nav-so-form .close-it:hover:before,
header .nav-so-form .close-it:hover:after {
  background: #fff;
}

header .navbar-apps-item__user {
  display: initial;
}

#guideAgentBox {
  position: absolute;
  top: 60px;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 997;
}

.guide-box {
  height: 100%;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

.guide-box .focus-box {
  /*display: none;*/
  position: absolute;
  /*width: 100%;*/
  /*height: 100%;*/
  z-index: 2;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.guide-mounted .focus-box {
  display: initial;
}

.guide-mode-on .focus-box {
  /*display: none;*/
}

.guide-box .guide-banner {
  position: relative;
  width: 100%;
  height: 100%;
  height: 100% !important;
  margin: 0 auto;
}

.guide-box .guide-banner .item {
  position: relative;
  width: 100%;
  height: 100%;
}

.guide-box .guide-banner .open-img-box {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 1;
}

.guide-box .guide-banner .item-bd {
  position: relative;
  height: 100%;
}

.guide-box .guide-banner .item-img,
.guide-box .open-img-box img {
  display: block;
  /*width: 100%;*/
  height: 100% !important;
}

.img-h .item-img,
.img-h .open-img-box img {
  width: auto;
  height: 100%;
}

.focus-img-editor-view .focus-item,
.focus-img-editor-view .focus-img-editor-tbar {
  display: none !important;
}

.focus-img-editor .lui-popup,
.focus-img-editor .lui-backdrop {
  position: absolute;
}

.focus-img-editor .lui-backdrop {
  border-radius: 3px;
}

.focus-item {
  position: absolute;
  z-index: 1000;
}

div.focus-item {
  width: 0;
  height: 0;
}

pre.focus-item-el {
  overflow: inherit;
  background: none;
  position: absolute;
  border: 0;
  padding: 5px;
  margin: 0;
  border-radius: 0;
  cursor: default;
  font-family: inherit;
  line-height: inherit;
  text-align: left;
}

.focus-item:hover {
  z-index: 1001;
}

.focus-item .dropdown-menu {
  z-index: 1000;
}

.focus-item .tooltip {
  display: block;
  opacity: 1;
  white-space: nowrap;
  background: none;
  border: 0;
}

.focus-item .tooltip .tooltip-inner {
  background-color: rgba(0, 0, 0, 0.4);
  padding: 5px 8px;
  color: rgba(252, 252, 252, 0.75);
  line-height: 18px;
}

.focus-item .tooltip .tooltip-arrow {
  opacity: 0.4;
}

.focus-item .tooltip.left {
  right: 16px;
  top: 50%;
  margin-top: -14px;
}

.focus-item .tooltip.right {
  left: 16px;
  top: 50%;
  margin-top: -14px;
}

.focus-item .tooltip.top {
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
}

.focus-item .tooltip.bottom {
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
}

.dragging > .focus-point-menu,
.dragging > .focus-light-no,
.dragging > .tooltip {
  display: none !important;
}

.focus-point-menu,
.focus-point-menu li:before,
.focus-point-menu a:before {
  background-repeat: no-repeat;
  background-image: url(//static.elicht.com/themes/yanxuan/images/guide.png);
}

.focus-point-menu {
  display: none;
  width: 220px;
  height: 220px;
  background-position: 0 -73px;
  font-size: 18px;
  cursor: default;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -110px 0 0 -110px;
  z-index: 999;
  opacity: 0.9;
  transform: scale(0.65);
}

.focus-item:hover .focus-point-menu {
  display: block;
}

.focus-item:hover .tooltip,
.focus-item:hover .focus-light-no {
  display: none;
}

.focus-point-menu li {
  position: absolute;
  cursor: pointer;
}

.focus-point-menu li.disabled:hover {
  filter: grayscale(100%);
  opacity: 0.5;
}

.focus-menu-lights,
.focus-menu-photos {
  top: 50%;
  margin-top: -53px;
  width: 88px;
  height: 106px;
}

.focus-menu-photos {
  right: 0;
}

.focus-point-menu li:before,
.focus-point-menu a:before {
  background-position: 0 -456px;
}

.focus-point-menu li:before {
  content: "";
  position: absolute;
  display: none;
  width: 105px;
  height: 105px;
}

.focus-menu-switcher,
.focus-menu-detial {
  left: 50%;
  margin-left: -53px;
  width: 106px;
  height: 88px;
}

.focus-menu-switcher:before {
  top: -19px;
  transform: rotate(45deg) scale(0.99);
}

.focus-menu-lights:before {
  left: -19px;
  transform: rotate(-45deg) scale(0.99);
}

.focus-menu-photos:before {
  right: -19px;
  transform: rotate(135deg) scale(0.99);
}

.focus-point-menu li:hover:before {
  display: block;
}

.focus-point-menu a {
  display: block;
  text-align: center;
  padding: 22px 0 0;
  color: #999;
  position: relative;
}

.focus-menu-switcher a {
  padding-top: 15px;
}

.focus-point-menu a:before {
  content: "";
  display: block;
  margin: 0 auto 4px;
  width: 32px;
  height: 32px;
}

.focus-menu-switcher a:before {
  background-position: 0 2px;
}

.focus-menu-switcher:hover a:before {
  background-position: 0 -30px;
}

.focus-menu-lights a:before {
  background-position: -32px 2px;
}

.focus-menu-lights:hover a:before {
  background-position: -32px -30px;
}

.focus-menu-photos a:before {
  background-position: -65px 2px;
}

.focus-menu-photos:hover a:before {
  background-position: -65px -30px;
}

.focus-menu-detial {
  bottom: 0;
}

.focus-menu-detial:before {
  top: 2px;
  transform: rotate(-135deg) scale(0.99);
}

.focus-menu-detial a {
  padding-top: 10px;
}

.focus-menu-detial a:before {
  background-position: -97px 2px;
}

.focus-menu-detial:hover a:before {
  background-position: -97px -30px;
}

.focus-point-menu li:hover a {
  color: #fff;
}

.focus-item .focus-point {
  position: absolute;
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -6px;
  background: var(--red);
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.9);
}

.focus-item .focus-light-no {
  position: absolute;
  min-width: 18px;
  padding: 0 4px;
  height: 18px;
  line-height: 16px;
  text-align: center;
  border: 1px solid rgba(0, 0, 0, 0.25);
  background-color: rgba(0, 0, 0, 0.25);
  color: rgba(255, 255, 255, 0.5);
  font-size: 12px;
  border-radius: 100px;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
}

.focus-item .focus-point:before {
  z-index: -1;
  position: absolute;
  top: 50%;
  left: 50%;
  content: "";
  width: 12px;
  height: 12px;
  background-color: rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  animation: focusPoint 1s infinite;
  -webkit-animation: focusPoint 1s infinite;
}

@-webkit-keyframes focusPoint {
  from {
    width: 12px;
    height: 12px;
    opacity: 1;
  }
  to {
    width: 28px;
    height: 28px;
    opacity: 0;
  }
}

@-moz-keyframes focusPoint {
  from {
    width: 12px;
    height: 12px;
    opacity: 1;
  }
  to {
    width: 28px;
    height: 28px;
    opacity: 0;
  }
}

@-o-keyframes focusPoint {
  from {
    width: 12px;
    height: 12px;
    opacity: 1;
  }
  to {
    width: 28px;
    height: 28px;
    opacity: 0;
  }
}

@-ms-keyframes focusPoint {
  from {
    width: 12px;
    height: 12px;
    opacity: 1;
  }
  to {
    width: 28px;
    height: 28px;
    opacity: 0;
  }
}

@keyframes focusPoint {
  from {
    width: 12px;
    height: 12px;
    opacity: 1;
  }
  to {
    width: 28px;
    height: 28px;
    opacity: 0;
  }
}

.guide-icon-list {
  position: fixed;
  z-index: 10;
}

.guide-icon-list > li,
.guide-icon-list > li > a {
  position: relative;
  color: rgba(252, 252, 252, 0.8);
}

.guide-icon-list > li:hover,
.guide-icon-list > li > a:hover {
  color: #fff;
}

.guide-icon-list .fa-icon {
  display: block;
  width: 40px;
  height: 40px;
  line-height: 36px;
  text-align: center;
  border: 2px solid rgba(0, 0, 0, 0.25);
  background-color: rgba(0, 0, 0, 0.25);
  border-radius: 50%;
  font-size: 18px;
  cursor: pointer;
  margin: 0 auto 4px;
  opacity: 0.8;
  position: relative;
}

.guide-icon-list .fa-icon-txt {
  font-size: 16px;
}

.guide-icon-list > li:hover .fa-icon {
  color: rgba(255, 255, 255, 0.9);
  background-color: rgba(0, 0, 0, 0.9);
  /*border-color: var(--yellow);*/
  opacity: 1;
}

.guide-icon-list > li.active .fa-icon {
  background: #f30213;
  border-color: #f30213;
  opacity: 1;
}

.guide-icon-list > li.disabled,
.guide-icon-list > li.disabled:hover {
  color: rgba(205, 205, 205, 0.5);
}

.guide-icon-list > li.disabled .fa-icon,
.guide-icon-list > li.disabled .fa-icon {
  border: 2px solid rgba(0, 0, 0, 0.2);
  background-color: rgba(0, 0, 0, 0.2);
  opacity: 0.7;
  cursor: not-allowed;
}

.guide-icon-list > li.disabled .ico-nang,
.guide-icon-list > li.disabled .ico-nang {
  opacity: 0.65;
}

.bottom-panel {
  left: 0;
  right: 0;
  bottom: 0;
  position: absolute;
  z-index: 99;
}

.bottom-panel .tools-panel {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 15px;
  transition: all 0.3s ease;
}

.bottom-panel i {
  vertical-align: middle;
  font-size: 18px;
}

.bottom-panel .guide-nav-box {
  position: absolute;
  transition: all 0.3s ease;
  height: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  z-index: 1;
}

.bottom-panel .guide-nav-box.active {
  padding: 20px 0 0 0;
  height: 136px;
  overflow: initial;
  z-index: 2;
  transition: all 0.3s ease;
}

.bottom-panel .guide-nav-box.active ~ .tools-panel {
  transition: all 0.3s ease;
  margin-bottom: 151px;
}

.bottom-panel-bg {
  background-color: rgba(34, 34, 34, 0.7);
  position: fixed;
  transition: all 0.3s ease;
  height: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.focus-img-editor .bottom-panel-bg {
  position: absolute;
}

.bottom-panel .guide-nav-box.active ~ .bottom-panel-bg {
  height: 136px;
  transition: all 0.3s ease;
}

.bottom-panel .guide-nav-close {
  position: absolute;
  right: 13px;
  top: 10px;
  color: #aaa;
  cursor: pointer;
  z-index: 2;
  width: 24px;
  line-height: 24px;
  height: 24px;
  overflow: hidden;
  text-align: center;
  border-radius: 50%;
}

.bottom-panel .guide-nav-close:hover {
  background: var(--red);
  color: #fff;
}

.bottom-panel .guide-nav {
  padding: 0 50px 0;
  height: 116px;
}

.guide-icon-list-b {
  position: relative;
  bottom: 0;
  right: 30px;
  font-size: 12px;
}

.guide-icon-list-b > li {
  float: left;
  margin-left: 15px;
  text-align: center;
  position: relative;
}

.guide-icon-list-b #cartIcon {
  z-index: 1;
}

.guide-icon-list-b > li .name {
  line-height: 20px;
  text-shadow: rgba(0, 0, 0, 0.75) 0 0 5px;
}

.guide-icon-list-b .lamps-box {
  width: 320px;
  position: absolute;
  right: 0;
  bottom: 81px;
  background-color: #fff;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
  color: #333;
  text-align: left;
}

.guide-icon-list-b .lamps-list {
  max-height: 340px;
}

.guide-icon-list-b .lamps-list li {
  padding-left: 15px;
  display: flex;
  margin-bottom: 10px;
}

.guide-icon-list-b .lamps-list li .image-box {
  width: 64px;
  height: 64px;
  border: 1px solid #eee;
  margin-right: 10px;
}

.guide-icon-list-b .lamps-list li .image-box img {
  width: 100%;
}

.guide-icon-list-b .lamps-list li .msg {
  flex: 1;
  font-size: 12px;
  text-align: left;
  padding: 0 20px 0 0;
}

.guide-icon-list-b .lamps-list li .msg > h3 {
  color: #333;
  font-size: 12px;
  font-weight: normal;
  line-height: 1.46;
  text-align: justify;
}

.guide-icon-list-b .lamps-list li .handle {
  width: 80px;
  color: var(--red);
  text-align: right;
  padding: 0 15px;
}

.guide-icon-list-b .lamps-list li .handle > .del {
  color: #333;
}

.guide-icon-list-b .lamps-list li .handle > .del:hover {
  color: var(--red);
}

.guide-icon-list-b .lamps-list li .cancel > .iconfont {
  font-size: 20px;
}

.guide-icon-list-b .lamps-sum {
  background-color: #f3f3f3;
  position: relative;
  padding: 10px;
}

.guide-icon-list-b .lamps-list:empty ~ .lamps-sum {
  display: none;
}

.guide-icon-list-b .cert {
  width: 14px;
  height: 14px;
  background-color: #f3f3f3;
  position: absolute;
  right: 18px;
  bottom: -6px;
  transform: rotate(45deg);
  border-top: 0;
  border-left: 0;
}

.guide-icon-list-b .lamps-list:empty ~ .cert {
  background-color: #fff;
}

.guide-icon-list-b .lamps-list:not(:empty) ~ .cart-con-box-msg {
  display: block;
}

.guide-icon-list-b .cart-badge {
  top: 0;
  margin: -6px 0 0 4px;
}

.guide-icon-list-b .cart-badge:empty {
  display: none;
}

.scroll-panel {
  position: absolute;
  z-index: 999;
  display: none;
}

.scroll-panel-x {
  left: 0;
  bottom: 0;
  width: 100%;
  height: 16px;
  overflow-y: hidden;
  overflow-x: auto;
  display: none;
}

.scroll-panel-y {
  top: 0;
  right: 0;
  width: 16px;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
}

.img-h .scroll-panel-x {
  display: initial;
}

.img-h .scroll-panel-y {
  display: none;
}

.scroll-panel-body {
  position: relative;
}

.scroll-panel::-webkit-scrollbar {
  height: 16px;
  width: 16px;
}

.scroll-panel::-webkit-scrollbar-thumb {
  border-radius: 8px;
  border: 5px solid transparent;
  background-clip: content-box;
  /*background-color: rgba(204, 204, 204, 0);*/
}

.scroll-panel:hover::-webkit-scrollbar-thumb {
  background-color: rgba(204, 204, 204, 0.65);
  /*background-color: rgba(152, 163, 166, .25);*/
}

.scroll-panel::-webkit-scrollbar-thumb:hover {
  background-color: rgba(204, 204, 204, 0.85);
}

.ico-nang {
  background-image: url("images/jinnang.png");
  width: 96px;
  height: 96px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -48px 0 0 -48px;
  transform: scale(0.3);
  opacity: 0.8;
}

.guide-icon-list > li.active .fa-icon .ico-nang {
  opacity: 1;
}

.yz-ico.active:after {
  background-color: var(--red);
}

.active > .yz-ico,
.yz-ico.active {
  color: var(--red) !important;
}

.ico-nang-project {
}

.ico-nang-plan {
  background-position: -96px 0;
}

.ico-nang-scene {
  background-position: -192px 0;
}

.ico-nang-pseudo {
  background-position: -288px 0;
}

.ico-nang-view {
  background-position: -384px 0;
}

.ico-nang-tips {
  background-position: -480px 0;
}

.nang-popup {
  border-radius: 3px;
  background: rgba(34, 34, 34, 0.7);
}

.nang-popup .lui-popup__hd {
  border-bottom: 0;
  height: 80px;
}

.nang-popup .lui-popup__title {
  text-align: center;
  padding-top: 50px;
  color: #fff;
  font-size: 18px;
}

.nang-popup .lui-popup__bd {
  padding: 20px 60px;
}

.nang-popup-project {
  width: 840px;
}

.nang-popup-project .lui-popup__bd {
  min-height: 240px;
}

.nang-popup-project .img-list {
  margin: 0 30px;
}

.nang-popup-project .img-list > li {
  padding: 0 10px;
  height: 142px;
}

.nang-popup-project .img-list .img-list-bd {
  padding: 3px 8px;
}

.nang-hover-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  display: block;
}

.img-h .nang-hover-img {
  with: auto;
  height: 100%;
}

.text-shadow {
  text-shadow: 0 0 5px rgba(0, 0, 0, 0.75);
}

.nang-scene-name {
  margin: 0 0 0 20px;
  padding-left: 30px;
  line-height: 20px;
  position: relative;
  color: rgba(252, 252, 252, 0.8);
  font-size: 12px;
}

.nang-scene-name i {
  position: absolute;
  top: 50%;
  left: 15px;
}

.nang-scene-name .txt:empty ~ i {
  display: none;
}

.nang-img-loading {
  position: absolute;
  right: 20px;
  top: 20px;
  color: rgba(252, 252, 252, 0.8);
}

.nang-img-loading .loading {
  width: 24px;
  height: 24px;
}

.nang-pop {
  position: absolute;
  padding: 12px;
  bottom: 78px;
  width: 144px;
  left: 50%;
  margin-left: -72px;
  background: rgba(0, 0, 0, 0.75);
  border-radius: 6px;
}

.nang-pop:after {
  content: "";
  bottom: -10px;
  left: 50%;
  margin-left: -10px;
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  border: 10px solid transparent;
  border-bottom-width: 0;
  border-top-color: rgba(0, 0, 0, 0.75);
}

.guide-icon-list > li .nang-pop {
  display: none;
}

.guide-icon-list > li:hover .nang-pop {
  display: initial;
}

.guide-icon-list > li .nang-pop:before {
  content: "";
  height: 30px;
  position: absolute;
  bottom: -30px;
  left: 0;
  right: 0;
}

.nang-pop .img-list > li {
  float: none;
  width: 100%;
}

.nang-wrap .img-list .img-list-item {
  border-radius: 3px;
  overflow: hidden;
  position: relative;
}

.nang-wrap .img-list .img-list-item img {
  border-radius: 3px;
}

.nang-wrap .img-list-box .img-list-bd {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 6px 12px;
  background: -webkit-linear-gradient(bottom, #333, transparent);
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

.nang-wrap .img-list .img-list-box h3 a {
  color: #fff;
}

.nang-wrap .img-list .img-list-item:hover:after,
.nang-wrap .img-list .img-list-item.active:after,
.nang-wrap .img-list .img-list-item.active:hover:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 2px solid var(--red);
  border-radius: 3px;
}

.nang-wrap .img-list .img-list-item:hover:after {
  border-color: rgba(255, 255, 255, 0.75);
}

.nang-pop .img-list > li + li {
  margin-top: 4px;
}

.nang-pop .img-list-box .img-list-bd {
  padding: 4px 10px;
}

.nang-wrap .img-list-item .img-list-bd h3 {
  margin: 0;
  line-height: 20px;
  height: 20px;
  font-size: 12px;
  font-weight: normal;
  color: #fff;
  text-align: center;
}

.nang-wrap .img-list-item .img-list-bd h3 a {
  color: #fff;
}

.nang-popup-scene-tips {
  width: 600px;
  height: 400px;
}

.nang-popup-scene-tips .lui-popup__bd {
  margin: 20px;
  padding: 0 40px;
  height: 280px;
}

.nang-popup-scene-tips .lui-popup__bd p,
.nang-popup-scene-tips .lui-popup__bd div {
  margin: 0 0 15px 0;
}

.nang-slider-list__item {
  position: relative;
  text-align: center;
  width: 134px;
  margin: 0 10px;
}

.nang-slider-list__item.square {
  width: 116px;
}

.nang-slider-list__item .title {
  color: #eee;
  font-size: 12px;
  margin-top: 8px;
  display: block;
  position: absolute;
  background: -webkit-linear-gradient(bottom, #333, transparent);
  left: 0;
  right: 0;
  bottom: 0;
  line-height: 24px;
  padding: 2px 0;
}

.nang-slider-list__item .title p {
  margin: 0 10px;
}

.nang-slider-list__item .title:empty {
  display: none;
}

.nang-slider-list__item .img {
  cursor: pointer;
}

.nang-slider-list__item .img figure {
  padding-bottom: 96px;
  background: #ccc;
}

.nang-slider-list__item .img.img-square figure {
  padding-bottom: 100%;
}

.nang-slider-list__item .msg {
  height: 0;
  overflow: hidden;
  text-align: center;
  font-size: 12px;
}

.nang-slider-list__item .msg > p {
  line-heigt: 18px;
  height: 36px;
  margin-bottom: 10px;
  color: #888;
}

.nang-slider-list__item:hover,
.nang-slider-list__item:hover .nang-slider-list__item_bd {
  bottom: 0;
  background-color: #fff;
  box-shadow: 0 -3px 6px 0 rgba(0, 0, 0, 0.25);
  color: #333;
  z-index: 10;
  padding: 20px;
  margin: 0 -20px;
  width: 174px;
}

.nang-slider-list__item:hover .msg {
  height: auto;
  padding-top: 5px;
}

.nang-slider-list__item.is-nav-selected .img:after,
.nang-slider-list__item.active .img:after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  border: 2px solid var(--red);
  cursor: pointer;
}

.nang-slider-list__item.active .title {
  left: 12px;
  right: 12px;
  bottom: 2px;
  line-height: 24px;
  padding: 2px 0 0;
}

.nang-slider-list__item:hover .title {
  position: static;
  background: none;
  padding: 0;
  line-height: 1.25;
  color: #333;
}

.nang-slider-list__item:hover .title.desc {
  text-align: justify;
  white-space: inherit;
  -webkit-line-clamp: unset;
}

.nang-swiper-goods .nang-slider-list__item {
  width: 96px;
}

.nang-swiper-goods .nang-slider-list__item:hover {
  margin: 0 -30px;
  width: 166px;
}

.focus-img-editor .guide-nav {
  padding-bottom: 20px;
}

.focus-img-editor .nang-slider-list__item:hover {
  width: 96px;
  height: 96px;
  margin: 0 10px;
  padding: 0;
  bottom: initial;
}

.focus-img-editor .nang-slider-list__item:hover .nang-slider-list__item_bd {
  position: absolute;
  bottom: -20px;
}

.nang-swiper .flickity-viewport {
  overflow: initial;
  height: 100% !important;
}

.nang-swiper .flickity-prev-next-button {
  background-color: transparent;
  width: 30px;
  height: 30px;
}

.nang-swiper .flickity-prev-next-button .arrow {
  fill: #ccc;
}

.nang-swiper .flickity-prev-next-button.previous {
  left: 10px;
}

.nang-swiper .flickity-prev-next-button.next {
  right: 10px;
}

.pseudo-bar-wrap {
  position: absolute;
  right: 20px;
  top: 20px;
  bottom: 90px;
  text-align: center;
}

.pseudo-bar {
  background: linear-gradient(
    0deg,
    black 0,
    #00f 7%,
    #0ff 30%,
    #0f0 45%,
    #ff0 73%,
    #f00 87%,
    white 98%
  );
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
}

.pseudo-bar-wrap h5 {
  line-height: 30px;
  font-weight: normal;
  color: #fff;
  font-size: 12px;
  text-shadow: rgba(0, 0, 0, 0.75) 0 0 5px;
}

/* 分享 */
.sidebar-pop {
  right: 0;
  bottom: 81px;
  background: rgba(0, 0, 0, 0.75);
  border-radius: 6px;
  border: 0;
}

.sidebar-pop:before {
  right: 0;
  bottom: -48px;
  height: 50px;
  left: 0;
  top: auto;
  width: 100%;
}

.sidebar-pop-arrow {
  border-left-color: transparent;
  border-top-color: rgba(0, 0, 0, 0.75);
  right: 13px;
  bottom: -20px;
  border-width: 10px;
}

.sidebar-pop-arrow:after {
  display: none;
}

.images_preview {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.75);
  z-index: 1002;
}
.images_preview .imgbox {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.images_preview .close {
  position: absolute;
  right: -80px;
  top: -80px;
  width: 160px;
  height: 160px;
  background-color: rgba(255, 255, 255, 0.25);
  border-radius: 50%;
}
.images_preview .close::after {
  content: "\e6b6";
  font-family: "iconfont";
  position: absolute;
  left: 30px;
  bottom: 30px;
  font-size: 40px;
  color: rgba(0, 0, 0, 0.35);
}
.images_preview .close:hover::after {
  color: #fff;
}
.images_preview .close:hover {
  background-color: #f30213;
  opacity: 1;
}

.modalPlan {
  z-index: 2000;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.6);
}

.modalPlan__close {
  position: absolute;
  top: 30px;
  right: 30px;
  width: 30px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  font-weight: bold;
  color: black;
  background-color: rgba(255,255,255,0.8);
  box-shadow: 0px 2px 6px 2px rgba(0, 0, 0, 0.18);
  border-radius: 50%;
}

.modalPlan__img {
  display: block;
  max-width: 90%;
  max-height: 90%;
}

[v-cloak]{
  display: none;
}