/*-------------------------------------------------------------------
    파일정의 :  showroom_2025.css / showroom 2차 국문 쇼룸 페이지
    작성날짜 : 2025-01 ~ 2025-03 오선화, 유제영, 김주연
    showroom 2차 범위 : HUEN, UVIS, 견적내기 CCTV 배치 대기 영역
-------------------------------------------------------------------*/
:root {
  --color-key: #1d6ceb;
  --bg-color: rgb(226, 226, 226);
}

/* 공통 */
.showroom-container-wrap .showroom-container-inner.active:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 30%;
  height: 100%;
  z-index: 10;
  background: linear-gradient(to right, #f2f2f2 30%, transparent 100%);
}
.showroom-container-wrap[class*="screen"]:not(.screen0) .showroom-intro-header .page-back-main {
  display: none;
}
.showroom-container-wrap.default .showroom-intro-header .page-back-area,
.showroom-container-wrap.main .showroom-intro-header .page-back-area {
  display: none;
}
.showroom-container-wrap[class*="screen"]:not(.screen0) .showroom-intro-header .page-back-area {
  display: inline-block;
}

/* 우측 메뉴 */
.service-step-wrap .service-step-inner .step-list-wrap .step-play-list .step-play-item .link-list-step {
  width: 100%;
  text-align: left;
}

/* 프로그래스 */
.showroom-container-wrap.default .service-step-wrap {
  transform: translate(calc(100% + 48px), -50%);
}
.showroom-container-wrap.main .service-step-wrap {
  transition: transform 0.5s ease;
}
.service-step-wrap.service-step-wrap2 {
  right: 48px;
  -webkit-transform: translate(0, -50%);
  -moz-transform: translate(0, -50%);
  -ms-transform: translate(0, -50%);
  transform: translate(0, -50%);
  border-radius: 24px;
}
.service-step-wrap.service-step-wrap2 .service-step-inner {
  width: 480px;
  max-height: calc(100vh - 120px);
  padding: 0 32px 136px 32px;
  background-color: rgb(255, 255, 255);
  border: 0;
  border-radius: 24px;
  overflow-y: auto;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.service-step-wrap.service-step-wrap2 .service-step-inner::-webkit-scrollbar {
  display: none;
}
.service-step-wrap.service-step-wrap2 .title-step-top {
  position: sticky;
  top: 0;
  left: 0;
  margin: 0;
  padding: 48px 0 8px;
  background-color: #fff;
  z-index: 1;
}
.service-step-wrap.service-step-wrap2 .title-step-top .title-top-logo {
  display: block;
  width: 65px;
  height: 20px;
  margin-bottom: 12px;
  background-image: url(../../images/ko/showroom/sr11/img-logo-uvis.png);
  background-repeat: no-repeat;
  background-size: contain;
}
.service-step-wrap.service-step-wrap2 .title-step-top .title-top-logo > img {
  vertical-align: top;
}
.service-step-wrap.service-step-wrap2 .title-step-top .title-top-text .text {
  font-size: 32px;
  line-height: 48px;
  letter-spacing: normal;
}
.service-step-wrap.service-step-wrap2 .accordion-item {
  position: relative;
  display: block;
  padding: 28px 0;
  border-bottom: 1px solid rgb(234, 234, 234);
}
.service-step-wrap.service-step-wrap2 .accordion-item.on {
  padding-bottom: 0;
  border: 0;
}
.service-step-wrap.service-step-wrap2 .accordion-item.on .accordion-tit::after {
  transform: rotate(180deg);
  transition: transform 0.3s ease;
}
.service-step-wrap.service-step-wrap2 .accordion-tit {
  position: relative;
  font-size: 20px;
  font-weight: 600;
}
.service-step-wrap.service-step-wrap2 .accordion-tit::after {
  content: "";
  position: absolute;
  top: 2px;
  right: 0;
  display: inline-block;
  width: 24px;
  height: 24px;
  background-image: url(../../images/ko/showroom/sr11/icon-arrow-btm.svg);
  background-repeat: no-repeat;
  background-size: contain;
  transition-duration: 0.3s;
}
.service-step-wrap.service-step-wrap2 .accordion-cont {
  opacity: 0;
  visibility: hidden;
  overflow: hidden;
  max-height: 0;
  -webkit-transition-duration: 0.5s;
  -moz-transition-duration: 0.5s;
  -o-transition-duration: 0.5s;
  transition-duration: 0.5s;
  /* -webkit-transition-timing-function: ease;
    -moz-transition-timing-function: ease;
    -o-transition-timing-function: ease;
    transition-timing-function: ease; */
}
.service-step-wrap.service-step-wrap2 .accordion-item.on .accordion-cont {
  /* margin-top: 20px; */
  opacity: 1;
  visibility: unset;
  overflow: unset;
  max-height: 600px;
}
.service-step-wrap.service-step-wrap2 .accordion-item .cont-inner {
  margin-top: 20px;
  padding: 24px 20px;
  background-color: rgb(246, 246, 246);
  border-radius: 8px;
}
.service-step-wrap.service-step-wrap2 .accordion-cont .sub-cont {
  font-size: 18px;
  font-weight: 500;
}
.service-step-wrap.service-step-wrap2 .accordion-cont .sub-cont + * {
  margin-top: 24px;
}
.service-step-wrap.service-step-wrap2 .accordion-cont .sub-list {
  /* margin-top: 24px; */
}
.service-step-wrap.service-step-wrap2 .accordion-cont .sub-list > li {
  font-size: 0;
}
.service-step-wrap.service-step-wrap2 .accordion-cont .sub-list > li + li {
  margin-top: 20px;
}
.service-step-wrap.service-step-wrap2 .accordion-cont .sub-list > li > .cont-tit {
  font-size: 0;
}
.service-step-wrap.service-step-wrap2 .accordion-cont .sub-list > li > .cont-tit > i {
  display: inline-block;
  width: 32px;
  height: 32px;
  margin-right: 12px;
  background-repeat: no-repeat;
  background-size: contain;
  vertical-align: middle;
}
.service-step-wrap.service-step-wrap2 .accordion-cont .sub-list > li > .cont-tit > .icon-check + strong {
  font-weight: 500;
}
.service-step-wrap.service-step-wrap2 .accordion-cont .sub-list > li > .cont-tit > strong {
  display: inline-block;
  width: calc(100% - 44px);
  font-size: 18px;
  font-weight: 700;
  vertical-align: middle;
}
.service-step-wrap.service-step-wrap2 .accordion-cont .sub-list > li > .cont-txt {
  margin-left: 44px;
  color: rgb(102, 102, 102);
  font-size: 18px;
  font-weight: 500;
}
.service-step-wrap.service-step-wrap2 .service-step-inner .step-list-wrap {
  margin-top: 24px;
  padding: 0;
  background-color: unset;
  border: 0;
}
.service-step-wrap.service-step-wrap2 .service-step-inner .step-list-wrap .step-play-list .step-play-item {
  padding: 24px;
  border: 1px solid rgb(234, 234, 234);
  border-radius: 8px;
}
.service-step-wrap.service-step-wrap2
  .service-step-inner
  .step-list-wrap
  .step-play-list
  .step-play-item
  + .step-play-item {
  margin-top: 12px;
}
.service-step-wrap.service-step-wrap2
  .service-step-inner
  .step-list-wrap
  .step-play-list
  .step-play-item
  .title-con
  .text {
  width: calc(100% - 40px);
  color: rgb(51, 51, 51);
  font-size: 20px;
  font-weight: 600;
  line-height: 30px;
}
.service-step-wrap.service-step-wrap2 .service-step-inner .step-list-wrap .step-play-list .step-play-item .sub-con {
  display: block;
  width: 100%;
  color: rgb(102, 102, 102);
  font-size: 18px;
  font-weight: 500;
  line-height: 24px;
  opacity: 0;
  visibility: hidden;
  overflow: hidden;
  max-height: 0;
  -webkit-transition-duration: 0.5s;
  -moz-transition-duration: 0.5s;
  -o-transition-duration: 0.5s;
  transition-duration: 0.5s;
}
.service-step-wrap.service-step-wrap2 .progress-wrap {
  display: flex;
  align-items: flex-start;
  width: 100%;
  opacity: 0;
  visibility: hidden;
  overflow: hidden;
  max-height: 0;
  -webkit-transition-duration: 0.5s;
  -moz-transition-duration: 0.5s;
  -o-transition-duration: 0.5s;
  transition-duration: 0.5s;
}
.service-step-wrap.service-step-wrap2 .progress-wrap .progress-item {
  display: flex;
  flex-direction: column;
  width: 100%;
}
.service-step-wrap.service-step-wrap2 .progress-wrap .progress-item + .progress-item {
  margin-left: 4px;
}
.service-step-wrap.service-step-wrap2 .progress-wrap .progress-item.active .progress-text {
  font-weight: 600;
  color: var(--color-key);
}
.service-step-wrap.service-step-wrap2 .progress-wrap .progress-bar {
  position: relative;
  width: 100%;
  height: 8px;
  background-color: rgb(228, 228, 228);
  border-radius: 8px;
}
.service-step-wrap.service-step-wrap2 .progress-wrap .progress-fill {
  position: absolute;
  top: 0;
  left: 0;
  width: 0px;
  height: 8px;
  background-color: var(--color-key);
  border-radius: 8px;
}
.service-step-wrap.service-step-wrap2 .progress-wrap .progress-text {
  margin-top: 4px;
  padding: 0 2px;
  color: rgb(153, 153, 153);
  font-size: 14px;
  font-weight: 500;
  line-height: 21px;
  word-break: break-all;
}
.service-step-wrap.service-step-wrap2 .progress-wrap .progress-item.play .progress-fill {
  width: 50%;
}
.service-step-wrap.service-step-wrap2 .progress-wrap .progress-item.play .progress-text {
  color: rgb(29, 108, 235);
  font-weight: 700;
}
.service-step-wrap.service-step-wrap2 .progress-wrap .progress-item.complete .progress-fill {
  width: 100%;
}
.service-step-wrap.service-step-wrap2 .progress-wrap .progress-item.complete + .progress-item.play .progress-fill {
  -webkit-transition-delay: 0.3s;
  -moz-transition-delay: 0.3s;
  -o-transition-delay: 0.3s;
  transition-delay: 0.3s;
}
.service-step-wrap.service-step-wrap2 .progress-wrap .progress-item.complete + .progress-item.play .progress-text {
  -webkit-transition-delay: 0.3s;
  -moz-transition-delay: 0.3s;
  -o-transition-delay: 0.3s;
  transition-delay: 0.3s;
}
.service-step-wrap.service-step-wrap2 .automatic-layer {
  opacity: 1;
  visibility: unset;
  top: 22px;
  right: 20px;
  width: 32px;
  height: 32px;
  background-color: rgb(29, 108, 235);
  border-radius: 50%;
}
.service-step-wrap.service-step-wrap2 .service-circle-play .icon-play {
  width: 18px;
  height: 18px;
  background-image: url(../../images/ko/showroom/srcomm/icon-white-play.png);
}
.service-step-wrap.service-step-wrap2 .step-play-item.play .service-circle-play .icon-play {
  background-image: url(../../images/ko/showroom/srcomm/icon-white-pause.png);
}
.service-step-wrap.service-step-wrap2 .step-button-wrap {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 40px 32px;
  background: linear-gradient(rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 20%);
  border-radius: 0 0 24px 24px;
}
.service-step-wrap.service-step-wrap2 .step-button-wrap .button-submit {
  display: block;
  width: 100%;
  padding: 13px 0;
  background-color: rgb(29, 108, 235);
  color: rgb(255, 255, 255);
  border-radius: 8px;
  font-size: 20px;
  font-weight: 700;
  text-align: center;
}
.service-step-wrap.service-step-wrap2 .service-step-inner .step-list-wrap .step-play-list .step-play-item.active {
  background-color: rgb(246, 246, 246);
}
.service-step-wrap.service-step-wrap2
  .service-step-inner
  .step-list-wrap
  .step-play-list
  .step-play-item.active
  .title-con
  .text {
  color: rgb(0, 0, 0);
  font-weight: 700;
}
.service-step-wrap.service-step-wrap2
  .service-step-inner
  .step-list-wrap
  .step-play-list
  .step-play-item.active
  .sub-con {
  margin-top: 4px;
  opacity: 1;
  visibility: unset;
  overflow: unset;
  max-height: 100px;
}
.service-step-wrap.service-step-wrap2
  .service-step-inner
  .step-list-wrap
  .step-play-list
  .step-play-item.active
  .progress-wrap {
  margin: 16px 0 -8px 0;
  opacity: 1;
  visibility: unset;
  overflow: unset;
  max-height: 100px;
}
.service-step-wrap.service-step-wrap2
  .service-step-inner
  .step-list-wrap
  .step-play-list
  .step-play-item.view
  .sub-con {
  display: none;
}
/* HUEN, UVIS 스탭 공통 */
.wrap-online-showroom .sr-bubble-talk {
  position: absolute;
  padding: 24px 40px;
  font-weight: 600;
  font-size: 24px;
  text-align: center;
  white-space: nowrap;
  border-radius: 100px;
  background-color: rgba(249, 249, 249, 0.9);
}
.wrap-online-showroom .sr-bubble-talk:before {
  content: "";
  position: absolute;
  left: 56px;
  bottom: -20px;
  width: 30px;
  height: 20px;
  background-image: url(../../images/ko/showroom/sr10/bg-bubble-tail.png);
  background-size: 30px auto;
  background-repeat: no-repeat;
}
.wrap-online-showroom .sr-bubble-talk.right::before {
  left: auto;
  right: 56px;
  transform: scaleX(-1);
}
.wrap-online-showroom .bottom-gray-tooltip-wrap .bottom-gray-text {
  font-weight: 600;
}
.wrap-online-showroom .bottom-gray-tooltip-wrap .bottom-gray-text strong {
  font-weight: 600;
  color: #8bc6ff;
}

/* UVIS */
.wrap-online-showroom .sr11-uvis .bottom-gray-tooltip-wrap .bottom-gray-text .color-bold-blue,
.wrap-online-showroom .sr11-uvis .sr-popup-text > em {
  color: #8bc6ff;
}
.sr11-uvis .bottom-gray-tooltip-wrap .fn {
  font-size: 24px;
  color: #c4c4c4;
}
.sr11-uvis {
  background-color: var(--bg-color);
  line-height: 1.5;
  letter-spacing: normal;
}
.sr11-uvis .showroom-content-wrap11 {
  width: 1920px;
  height: 1080px;
  top: 50%;
  left: 50%;
  z-index: 3;
  transform-origin: center;
  will-change: transform;
}
.sr11-uvis .showroom-screen-wrap {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.sr11-uvis .showroom-step-wrap {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.sr11-uvis .showroom-step-inner {
  position: relative;
  width: 100%;
  height: 100%;
}
.sr11-uvis .step-inner-cont {
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.sr11-uvis .sr-active-item {
  opacity: 0;
  visibility: hidden;
}
.sr11-uvis .sr-active-item.active {
  opacity: 1;
  visibility: unset;
  transition-duration: 1s;
}
.sr11-uvis .sr-active-item .img-management-wrap.active .img-management-system::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.4);
  border-radius: 32px;
}
.sr11-uvis .showroom-background-area {
  position: absolute;
  width: 1920px;
  height: 1080px;
  top: 50%;
  left: 50%;
}
.sr11-uvis .showroom-background-inner {
  position: relative;
  width: inherit;
  height: inherit;
}
.sr11-uvis [class*="showroom-background-layer"] {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 2320px;
  height: 1480px;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
  transform: translate3d(-50%, -50%, 0);
  transition: backgrond-image 0.5s ease;
}
.sr11-uvis .showroom-background-inner.active {
  transform: translateX(-100%);
  transition: transform 1.5s ease;
}
.sr11-uvis .showroom-background-inner.active .wrap {
  position: absolute;
  top: 0;
  left: 0;
  width: 1920px;
  height: 1080px;
}
.sr11-uvis .showroom-background-inner.active .wrap + .wrap {
  left: 100%;
}
.sr11-uvis .showroom-background-layer {
  background-image: url(../../images/ko/showroom/sr11/bg-sr11-s0.webp);
}
.sr11-uvis .showroom-background-layer2 {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease;
}
.sr11-uvis .showroom-background-inner.active .showroom-background-layer2 {
  opacity: 1;
  visibility: unset;
  transition: opacity 0.5s ease;
  background-image: url(../../images/ko/showroom/sr11/bg-sr11-sc1-3.webp);
}
.sr11-uvis .showroom-background-dim {
  opacity: 0;
  visibility: hidden;
  background-color: rgba(0, 0, 0, 0.32);
  -webkit-transition-duration: 1s;
  -moz-transition-duration: 1s;
  -o-transition-duration: 1s;
  transition-duration: 1s;
}
.sr11-uvis .showroom-background-dim.active {
  opacity: 1;
  visibility: unset;
}
.sr11-uvis .bottom-gray-tooltip-wrap {
  left: calc((100% - 480px) / 2);
}

.sr11-uvis.main .showroom-screen0-wrap,
.sr11-uvis.screen1 .showroom-screen1-wrap,
.sr11-uvis.screen2 .showroom-screen2-wrap {
  opacity: 1;
  visibility: unset;
  pointer-events: unset;
}

/* ------ uvis screen0 ------ */
.sr11-uvis.main .showroom-screen0-wrap .showroom-step1-wrap {
  opacity: 1;
  visibility: unset;
  pointer-events: unset;
}
.sr11-uvis.main .sr-pointer-wrap {
  opacity: 1;
  visibility: unset;
  pointer-events: unset;
  -webkit-transition-delay: 1s;
  -moz-transition-delay: 1s;
  -o-transition-delay: 1s;
  transition-delay: 1s;
  -webkit-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  -o-transition-duration: 0.3s;
  transition-duration: 0.3s;
}
.sr11-uvis.main .sr-pointer-wrap1 {
  top: 360px;
  left: 426px;
}
.sr11-uvis.main .sr-pointer-wrap2 {
  top: 720px;
  left: 592px;
}
.sr11-uvis.main .sr-hover-item1 {
  top: 184px;
  left: 338px;
}
.sr11-uvis.main .sr-hover-item2 {
  top: 542px;
  left: 389px;
}
.sr11-uvis.main .bottom-gray-tooltip-wrap-sr0 {
  bottom: 80px;
  opacity: 1;
  visibility: unset;
  pointer-events: unset;
  transition-delay: 1s;
  transition-duration: 0.5s;
}
.sr11-uvis.main .bottom-gray-text1 {
  display: block;
}
.sr11-uvis.hover .showroom-background-dim {
  opacity: 1;
  visibility: unset;
  pointer-events: unset;
  transition-duration: 1s;
}
.sr11-uvis.hover .sr-hover-item.active {
  opacity: 1;
  visibility: unset;
  pointer-events: unset;
  transition-duration: 1s;
}
/* ------ // uvis screen0 ------ */

/* ------ uvis screen1 ------ */
.sr11-uvis.screen1.step1 .showroom-step1-wrap,
.sr11-uvis.screen1.step2 .showroom-step2-wrap,
.sr11-uvis.screen1.step3 .showroom-step3-wrap,
.sr11-uvis.screen1.step4 .showroom-step4-wrap,
.sr11-uvis.screen1.step5 .showroom-step5-wrap {
  opacity: 1;
  visibility: unset;
  pointer-events: unset;
}

.sr11-uvis.screen1.step1.step1-1 .showroom-background-layer {
  background-image: url(../../images/ko/showroom/sr11/bg-sr11-sc1-1.webp);
}
.sr11-uvis.screen1.step1.step1-1 .step-inner-cont.step1-1 {
  opacity: 1;
  visibility: unset;
  pointer-events: unset;
}
.sr11-uvis.screen1.step1.step1-1 .sr-bubble-talk1-1 {
  top: 212px;
  left: 82px;
}
.sr11-uvis.screen1.step1.step1-1 .sr-bubble-talk1-2 {
  top: 372px;
  left: 506px;
}
.sr11-uvis.screen1.step1.step1-1 .sr-circle-item2 {
  position: absolute;
  top: 322px;
  left: 522px;
  z-index: 33;
  opacity: 0;
  visibility: hidden;
}
.sr11-uvis.screen1.step1.step1-1 .sr-circle-item2.active {
  opacity: 1;
  visibility: unset;
  animation-name: sr-circle-item2;
  animation-duration: 2s;
  animation-fill-mode: both;
}
@keyframes sr-circle-item2 {
  50% {
    top: 322px;
    left: 522px;
    transform: scale(1);
    background-color: unset;
    border: 0;
  }
  100% {
    top: 134px;
    left: 93px;
    transform: scale(0.54);
    background-color: unset;
    border: 0;
  }
}
.sr11-uvis.screen1.step1.step1-1 .sr-popup-frame .frame-items .items-wrap2 {
  margin: 0px 0 65px 106px;
}
.sr11-uvis.screen1.step1.step1-1 .sr-popup-frame .frame-items .items-wrap2.active .line1 {
  top: -100px;
  left: -165px;
  width: 163px;
  height: 306px;
  background-image: url(../../images/ko/showroom/sr11/img-line1.png);
  background-size: 163px 306px;
}
.sr11-uvis.screen1.step1.step1-1 .sr-popup-frame .frame-items .items-wrap3 {
  margin: 22px 0 0 85px;
}
.sr11-uvis.screen1.step1.step1-1 .sr-popup-frame .frame-items .items-wrap3.active .line {
  top: 77px;
  left: -83px;
  width: 72px;
  height: 24px;
  background-image: url(../../images/ko/showroom/sr11/img-line2.png);
  background-size: 72px 24px;
}
.sr11-uvis.screen1.step1.step1-1 .sr-popup-frame .frame-items .items-wrap4 {
  margin: 22px 0 0 119px;
}
.sr11-uvis.screen1.step1.step1-1 .sr-popup-frame .frame-items .items-wrap4.active .line {
  top: 77px;
  left: -119px;
  width: 104px;
  height: 24px;
  background-image: url(../../images/ko/showroom/sr11/img-line3.png);
  background-size: 104px 24px;
}
.sr11-uvis.screen1.step1.step1-1 .bottom-gray-tooltip-wrap-sr1-st1.active {
  opacity: 1;
  visibility: unset;
  bottom: 80px;
  transition-duration: 0.5s;
}
.sr11-uvis.screen1.step1.step1-1 .bottom-gray-tooltip-wrap-sr1-st1 .bottom-gray-text1 {
  display: block;
}

.sr11-uvis.screen1.step2.step2-1 .showroom-background-layer {
  background-image: url(../../images/ko/showroom/sr11/bg-sr11-sc1-3.webp);
}
.sr11-uvis.screen1.step2.step2-1 .step-inner-cont.step2-1 {
  opacity: 1;
  visibility: unset;
  pointer-events: unset;
}
.sr11-uvis.screen1.step2.step2-1 .img-management-wrap3 .img-management-system {
  width: 760px;
  height: 385px;
  background-image: url(../../images/ko/showroom/sr11/img-sr11-sc1-management-system2.png);
}
.sr11-uvis.screen1.step2.step2-1 .img-management-wrap3 .img-management-zoom {
  top: 79px;
  left: 83px;
  width: 594px;
  height: 226px;
  background-image: url(../../images/ko/showroom/sr11/img-sr11-sc1-management-zoom2.png);
}
.sr11-uvis.screen1.step2.step2-1 .img-management-wrap1 .img-management-system {
  width: 760px;
  height: 388px;
  background-image: url(../../images/ko/showroom/sr11/img-sr11-sc1-management-system3.png);
}
.sr11-uvis.screen1.step2.step2-1 .img-management-wrap1 .img-management-zoom {
  top: 154px;
  left: 192px;
  width: 560px;
  height: 171px;
  background-image: url(../../images/ko/showroom/sr11/img-sr11-sc1-management-zoom3.png);
}
.sr11-uvis.screen1.step2.step2-1 .img-management-wrap2 .img-management-system {
  width: 760px;
  height: 419px;
  background-image: url(../../images/ko/showroom/sr11/img-sr11-sc1-management-system4.png);
}
.sr11-uvis.screen1.step2.step2-1 .img-management-wrap2 .img-management-zoom {
  top: 152px;
  left: 40px;
  width: 687px;
  height: 183px;
  background-image: url(../../images/ko/showroom/sr11/img-sr11-sc1-management-zoom4.png);
}

.sr11-uvis.screen1.step3.step3-1 .showroom-background-layer {
  background-image: url(../../images/ko/showroom/sr11/bg-sr11-sc1-1.webp);
}
.sr11-uvis.screen1.step3.step3-1 .bottom-gray-tooltip-wrap-sr1-st3-1.active {
  opacity: 1;
  visibility: unset;
  bottom: 80px;
  transition-duration: 0.5s;
}
.sr11-uvis.screen1.step3.step3-1 .bottom-gray-tooltip-wrap-sr1-st3-1 .bottom-gray-text {
  display: block;
}
.sr11-uvis.screen1.step3.step3-1 .step-inner-cont.step3-1 {
  opacity: 1;
  visibility: unset;
  pointer-events: unset;
}
.sr11-uvis.screen1.step3.step3-1 .sr-circle-item {
  position: absolute;
  top: 451px;
  left: 811px;
}
.sr11-uvis.screen1.step3.step3-1 .sr-circle-item2 {
  z-index: 33;
  opacity: 0;
  visibility: hidden;
}
.sr11-uvis.screen1.step3.step3-1 .sr-circle-item2.active {
  opacity: 1;
  visibility: unset;
  animation-name: sr-circle-item2-1;
  animation-duration: 2s;
  animation-fill-mode: both;
}
@keyframes sr-circle-item2-1 {
  50% {
    top: 451px;
    left: 811px;
    background-color: unset;
    border: 0;
  }
  100% {
    top: 358px;
    left: 426px;
    background-color: unset;
    border: 0;
  }
}
.sr11-uvis.screen1.step3.step3-1 .img-management-wrap .img-management-system {
  width: 760px;
  height: 383px;
  background-image: url(../../images/ko/showroom/sr11/img-sr11-sc1-management-system5.png);
}
.sr11-uvis.screen1.step3.step3-1 .img-management-wrap .img-management-zoom {
  top: 76px;
  left: 217px;
  width: 531px;
  height: 206px;
  background-image: url(../../images/ko/showroom/sr11/img-sr11-sc1-management-zoom5.png);
}
.sr11-uvis.screen1.step3.step3-1 .bottom-gray-tooltip-wrap-sr1-st3 .bottom-gray-text1 {
  display: block;
}

.sr11-uvis.screen1.step4.step4-1 .showroom-background-layer {
  background-image: url(../../images/ko/showroom/sr11/bg-sr11-sc1-5.webp);
}
.sr11-uvis.screen1.step4.step4-1 .step-inner-cont.step4-1 {
  opacity: 1;
  visibility: unset;
  pointer-events: unset;
}
.sr11-uvis.screen1.step4.step4-1 .bottom-gray-tooltip-wrap-sr1-st4 .bottom-gray-text1 {
  display: block;
}
.sr11-uvis.screen1.step4.step4-1 .bottom-gray-tooltip-wrap-sr1-st4 .bottom-gray-text2 {
  display: block;
}
.sr11-uvis.screen1.step4.step4-1 .bottom-gray-tooltip-wrap-sr1-st4 .bottom-gray-text3 {
  display: block;
}
.sr11-uvis.screen1.step4.step4-1 .active-item.active .img-navigation-route {
  opacity: 1;
  visibility: unset;
}
.sr11-uvis.screen1.step4.step4-1 .img-navigation-route.active .img-worning {
  opacity: 1;
  visibility: unset;
}

.sr11-uvis.screen1.step5 .showroom-background-layer {
  background-image: url(../../images/ko/showroom/sr11/bg-sr11-sc1-2.webp);
  transition: background-image 0.5s, transform 0.5s;
}
.sr11-uvis.screen1.step5 .showroom-background-layer.active {
  transform: translate3d(-50%, calc(-50% + 75px), 0);
}
.sr11-uvis.screen1.step5.step5-1 .sr-info-wrap + .bottom-gray-tooltip-wrap-sr1-5 {
  bottom: 80px;
  opacity: 1;
  visibility: unset;
  pointer-events: unset;
  transition: opacity 0.5s ease 0.5s, bottom 0.5s ease 0.5s;
}
.sr11-uvis.screen1.step5.step5-1 .sr-info-wrap.active + .bottom-gray-tooltip-wrap-sr1-5 {
  bottom: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.5s ease, bottom 0.5s ease;
}
.sr11-uvis.screen1.step5.step5-1 .bottom-gray-tooltip-wrap-sr1-5 .bottom-gray-text {
  display: block;
}
/* ------ // uvis screen1 ------ */
/* ------ uvis screen2 ------ */
.sr11-uvis.screen2.step1 .showroom-step1-wrap,
.sr11-uvis.screen2.step2 .showroom-step2-wrap,
.sr11-uvis.screen2.step3 .showroom-step3-wrap,
.sr11-uvis.screen2.step4 .showroom-step4-wrap {
  opacity: 1;
  visibility: unset;
  pointer-events: unset;
}
.sr11-uvis.screen2.step1 .showroom-background-layer {
  background-image: url(../../images/ko/showroom/sr11/bg-sr11-sc1-3.webp);
}
.sr11-uvis.screen2.step1.step1-1 .step-inner-cont.step1-1 {
  opacity: 1;
  visibility: unset;
  pointer-events: unset;
}
.sr11-uvis.screen2.step1.step1-1 .bottom-gray-tooltip-wrap-sr2 .bottom-gray-text1 {
  display: block;
}
.sr11-uvis.screen2.step1.step1-1 .sr-active-item {
  position: absolute;
  top: 216px;
  left: 543px;
}
.sr11-uvis.screen2.step1.step1-1 .img-management-wrap .img-management-system {
  width: 760px;
  height: 380px;
  background-image: url(../../images/ko/showroom/sr11/img-sr11-sc2-management-system1.png);
}
.sr11-uvis.screen2.step1.step1-1 .img-management-wrap .img-management-zoom {
  top: 67px;
  left: 13px;
  width: 363px;
  height: 194px;
  background-image: url(../../images/ko/showroom/sr11/img-sr11-sc2-management-zoom1.png);
}
.sr11-uvis.screen2.step1.step1-1 .sr-active-item .img-management-system {
  width: 285px;
  height: 575px;
  background-image: url(../../images/ko/showroom/sr11/img-sr11-sc2-management-system2.png);
}
.sr11-uvis.screen2.step1.step1-1 .sr-active-item .img-management-zoom {
  top: 117px;
  left: -75px;
  width: 436px;
  height: 328px;
  background-image: url(../../images/ko/showroom/sr11/img-sr11-sc2-management-zoom2.png);
}
.sr11-uvis.screen2.step1.step1-1 .bottom-gray-tooltip-wrap-sr2 .bottom-gray-text2 {
  display: block;
}
.sr11-uvis.screen2.step1.step1-1 .sr-person-sc2-1 {
  top: 350px;
  left: 1014px;
  width: 171px;
  height: 486px;
}
.sr11-uvis.screen2.step2.step2-1 .showroom-background-layer {
  background-image: url(../../images/ko/showroom/sr11/bg-sr11-sc1-3.webp);
}
.sr11-uvis.screen2.step2.step2-1 .step-inner-cont.step2-1 {
  opacity: 1;
  visibility: unset;
  pointer-events: unset;
}
.sr11-uvis.screen2.step2.step2-1 .sr-bubble-talk2-1 {
  top: 153px;
  left: 740px;
}
.sr11-uvis.screen2.step2.step2-1 .bottom-gray-tooltip-wrap-sr2 .bottom-gray-text3 {
  display: block;
}
.sr11-uvis.screen2.step2.step2-1 .sr-person-sc1-2 {
  top: 391px;
  left: 279px;
  width: 168px;
  height: 480px;
}
.sr11-uvis.screen2.step2.step2-1 .bottom-gray-tooltip-wrap-sr2 .bottom-gray-text4 {
  display: block;
}
.sr11-uvis.screen2.step2.step2-1 .sr-circle-item1 {
  position: absolute;
  top: 451px;
  left: 811px;
}
.sr11-uvis.screen2.step2.step2-1 .sr-alert-msg {
  position: absolute;
  top: 367px;
  left: 817px;
  transition-duration: 1s;
}
.sr11-uvis.screen2.step2.step2-1 .img-management-wrap .img-management-system {
  margin: 0 61px;
  width: 574px;
  height: 413px;
  background-image: url(../../images/ko/showroom/sr11/img-sr11-sc2-management-system3.png);
}
.sr11-uvis.screen2.step2.step2-1 .img-management-wrap .img-management-zoom {
  top: 39px;
  left: 323px;
  width: 227px;
  height: 261px;
  background-image: url(../../images/ko/showroom/sr11/img-sr11-sc2-management-zoom3.png);
}
.sr11-uvis.screen2.step3.step3-1 .showroom-background-layer {
  background-image: url(../../images/ko/showroom/sr11/bg-sr11-sc2-3.webp);
}
.sr11-uvis.screen2.step3.step3-1 .step-inner-cont.step3-1 {
  opacity: 1;
  visibility: unset;
  pointer-events: unset;
}
.sr11-uvis.screen2.step3.step3-1 .sr-bubble-talk2-2 {
  top: 134px;
  left: 530px;
}
.sr11-uvis.screen2.step3.step3-1 .bottom-gray-tooltip-wrap-sr2 .bottom-gray-text5 {
  display: block;
}
.sr11-uvis.screen2.step3.step3-1 .img-moblie1 {
  background-image: url(../../images/ko/showroom/sr11/img-mobile2.png);
}
.sr11-uvis.screen2.step3.step3-1 .img-moblie2 {
  background-image: url(../../images/ko/showroom/sr11/img-mobile3.png);
}
.sr11-uvis.screen2.step3.step3-1 .bottom-gray-tooltip-wrap-sr2 .bottom-gray-text6 {
  display: block;
}
.sr11-uvis.screen2.step3.step3-1 .sr-active-item {
  position: absolute;
  top: 220px;
  left: 497px;
}
.sr11-uvis.screen2.step3.step3-1 .sr-active-item .img-management-system {
  width: 285px;
  height: 575px;
  background-image: url(../../images/ko/showroom/sr11/img-sr11-sc2-management-system4.png);
}
.sr11-uvis.screen2.step3.step3-1 .sr-active-item .img-management-zoom {
  top: 96px;
  left: -28px;
  width: 340px;
  height: 388px;
  background-image: url(../../images/ko/showroom/sr11/img-sr11-sc2-management-zoom4.png);
}
.sr11-uvis.screen2.step3.step3-1 .bottom-gray-tooltip-wrap-sr2-1.active {
  opacity: 1;
  visibility: unset;
  pointer-events: unset;
}
.sr11-uvis.screen2.step3.step3-1 .bottom-gray-tooltip-wrap-sr2-1 .bottom-gray-text {
  display: block;
}
.sr11-uvis.screen2.step4 .showroom-background-layer {
  background-image: url(../../images/ko/showroom/sr11/bg-sr11-sc2-5.webp);
  transition: transform 0.5s ease;
}
.sr11-uvis.screen2.step4 .showroom-background-layer.active {
  transform: translate3d(-50%, -50%, 0px) scale(1.2);
}
.sr11-uvis.screen2.step4 .sr-info-item1 {
  top: 310px;
  left: 952px;
  width: 200px;
}
.sr11-uvis.screen2.step4 .sr-info-item1 .circle-line-wrap {
  top: 74px;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
}
.sr11-uvis.screen2.step4 .sr-info-item1 .circle-line-wrap .lines {
  width: 17px;
  height: 12px;
  background-image: url(../../images/ko/showroom/sr11/img-line7.png);
}
.sr11-uvis.screen2.step4 .sr-info-item1 .circle-line-wrap .circle {
  top: 20px;
  left: 50%;
  right: auto;
  transform: translateX(-50%);
}
.sr11-uvis.screen2.step4 .sr-info-item2 {
  top: 644px;
  left: 889px;
  width: 264px;
  text-align: right;
}
.sr11-uvis.screen2.step4 .sr-info-item2 .circle-line-wrap {
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}
.sr11-uvis.screen2.step4 .sr-info-item2 .circle-line-wrap .lines {
  width: 63px;
  height: 80px;
  background-image: url(../../images/ko/showroom/sr11/img-line6.png);
}
.sr11-uvis.screen2.step4 .sr-info-item2 .circle-line-wrap .circle {
  top: 21px;
  left: -36px;
}
.sr11-uvis.screen2.step4.step4-1 .sr-info-wrap + .bottom-gray-tooltip-wrap-sr2-4 {
  bottom: 80px;
  opacity: 1;
  visibility: unset;
  pointer-events: unset;
  transition: opacity 0.5s ease 0.5s, bottom 0.5s ease 0.5s;
}
.sr11-uvis.screen2.step4.step4-1 .sr-info-wrap.active + .bottom-gray-tooltip-wrap-sr2-4 {
  bottom: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.5s ease, bottom 0.5s ease;
}
.sr11-uvis.screen2.step4.step4-1 .bottom-gray-tooltip-wrap-sr2-4 .bottom-gray-text {
  display: block;
}
/* ------ // uvis screen2 ------ */

/* ------ uvis 공통 ------ */
.sr11-uvis .service-step-wrap .title-step-top .title-top-logo {
  width: 65px;
  height: 20px;
  background-image: url(../../images/ko/showroom/sr11/img-logo-uvis.png);
}
.sr11-uvis .sr-pointer-wrap {
  position: absolute;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.sr11-uvis .sr-pointer-pin {
  width: 24px;
  height: 24px;
  background-color: rgba(170, 170, 170);
}
.sr11-uvis .sr-pointer-wrap .sr-pointer-tip-wrap {
  position: absolute;
  left: 50%;
  bottom: -38px;
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
}
.sr11-uvis .sr-pointer-wrap .sr-pointer-tip-wrap .sr-pointer-tip-inner {
  position: relative;
  text-align: center;
  padding-top: 23px;
}
.sr11-uvis .sr-pointer-wrap .sr-pointer-tip-wrap .sr-pointer-tip-inner .box-text {
  display: inline-block;
  background-color: #fff;
  white-space: nowrap;
  font-weight: 700;
  font-size: 18px;
  color: rgba(102, 102, 102);
  text-align: center;
  padding: 11px 20px;
  border-radius: 24px;
}
.sr11-uvis .sr-pointer-wrap .sr-pointer-tip-wrap .sr-pointer-tip-inner .triangle-top {
  position: absolute;
  top: 0;
  left: 50%;
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
  width: 0px;
  height: 0px;
  border-bottom: 12px solid #fff;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-radius: 4px;
}
.sr11-uvis .sr-pointer-wrap .sr-pointer.active .box-text {
  color: rgb(0, 0, 0);
}
.sr11-uvis .sr-hover-item {
  position: absolute;
  z-index: -1;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition-duration: 1s;
}

.sr11-uvis .sr-person-cs {
  position: absolute;
  opacity: 0;
  visibility: hidden;
  transition-property: opacity;
  transition-duration: 1s;
}
.sr11-uvis .sr-person-cs.active {
  opacity: 1;
  visibility: unset;
}
.sr11-uvis .sr-person-sc1-1 {
  width: 190px;
  height: 540px;
  top: 354px;
  left: 296px;
  background-image: url(../../images/ko/showroom/sr11/img-sr11-sc1-person1.svg);
}
.sr11-uvis .sr-person-sc1-2 {
  top: 253px;
  left: 904px;
  width: 190px;
  height: 540px;
  background-image: url(../../images/ko/showroom/sr11/img-sr11-sc1-person2.svg);
}
.sr11-uvis .sr-person-sc1-3 {
  top: 328px;
  left: 318px;
  width: 236px;
  height: 522px;
  background-image: url(../../images/ko/showroom/sr11/img-sr11-sc1-person3.svg);
}
.sr11-uvis .sr-person-sc1-4 {
  top: 355px;
  left: 296px;
  width: 190px;
  height: 540px;
  background-image: url(../../images/ko/showroom/sr11/img-sr11-sc1-person4.svg);
}
.sr11-uvis .sr-person-sc2-5 {
  top: 216px;
  left: 865px;
  width: 190px;
  height: 540px;
  background-image: url(../../images/ko/showroom/sr11/img-sr11-sc2-person5.svg);
}
.sr11-uvis .sr-person-sc2-6 {
  top: 216px;
  left: 865px;
  width: 190px;
  height: 540px;
  background-image: url(../../images/ko/showroom/sr11/img-sr11-sc2-person6.svg);
}
.sr11-uvis .sr-person-sc2-7 {
  top: 355px;
  left: 339px;
  width: 280px;
  height: 540px;
  background-image: url(../../images/ko/showroom/sr11/img-sr11-sc2-person7.svg);
}
.sr11-uvis .sr-person-sc2-8 {
  top: 354px;
  left: 697px;
  width: 190px;
  height: 540px;
  background-image: url(../../images/ko/showroom/sr11/img-sr11-sc2-person8.svg);
}

.sr11-uvis .sr-bubble-talk {
  position: absolute;
  text-align: center;
  opacity: 0;
  visibility: hidden;
}
.sr11-uvis .sr-bubble-talk.active {
  opacity: 1;
  visibility: unset;
  transition-duration: 1s;
}
.sr11-uvis .sr-bubble-talk .point {
  color: rgb(29, 108, 235);
  font-weight: 700;
}
/* .sr11-uvis .sr-speech-bubble-text {
  padding: 24px 40px;
  line-height: 1.4;
}
.sr11-uvis .sr-speech-bubble-box {
  background-color: #fff;
}
.sr11-uvis .sr-speech-bubble-tail {
  position: absolute;
  top: calc(100% - 22px);
  left: 75%;
  right: auto;
  width: 0px;
  height: 0px;
  border-top: 24px solid #fff;
  border-left: 26px solid transparent;
  border-right: 0;
  border-radius: 6px;
  background: unset;
}
.sr11-uvis .sr-speech-bubble-tail.left {
  left: 15%;
  border-left: 0;
  border-right: 26px solid transparent;
} */

.sr11-uvis .sr-monitor {
  position: absolute;
  top: 396px;
  left: 270px;
  display: inline-block;
  width: 120px;
  height: 140px;
  background-image: url(../../images/ko/showroom/sr11/img-monitor.png);
  background-repeat: no-repeat;
  background-size: contain;
  opacity: 0;
  visibility: hidden;
}
.sr11-uvis .sr-monitor.active {
  opacity: 1;
  visibility: unset;
  transition-duration: 1s;
}

.sr11-uvis .sr-circle-item {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 348px;
  height: 348px;
  background-color: #fff;
  border: 8px solid rgb(18, 156, 255);
  border-radius: 50%;
}
.sr11-uvis .sr-circle-item.w180 {
  width: 180px;
  height: 180px;
}
.sr11-uvis .sr-circle-item1 {
  position: absolute;
  top: 322px;
  left: 522px;
  transform: scale(0);
}
.sr11-uvis .sr-circle-item1.active {
  transform: scale(1);
  transition-property: transform;
  transition-duration: 1s;
}
.sr11-uvis .circle-bg-wt {
  position: relative;
  display: inline-block;
  width: 180px;
  height: 180px;
  background-color: #fff;
  border-radius: 50%;
}
.sr11-uvis .circle-bg-wt.w160 {
  width: 160px;
  height: 160px;
}
.sr11-uvis .circle-bg-wt > i {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.sr11-uvis .circle-bg-wt > .img-dtg {
  width: 120px;
  height: 60px;
}
.sr11-uvis .sr-alert-msg > p {
  padding: 17px 24px 17px 20px;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.5;
}
.sr11-uvis .sr-alert-msg:has(.complete) i {
  width: 28px;
  height: 28px;
  margin-right: 8px;
  background-image: url(../../images/ko/showroom/sr11/icon-complete-wht.svg);
  background-size: 28px;
}

.sr11-uvis .sr-info-popup-wrap {
  position: relative;
  width: calc(100% - 528px);
  height: 100%;
  visibility: hidden;
  pointer-events: none;
}
.sr11-uvis .sr-info-popup-wrap .sr-popup-inner {
  z-index: 3;
}
.sr11-uvis .sr-info-popup-wrap.active {
  visibility: unset;
  pointer-events: unset;
}
.sr11-uvis .sr-info-popup-wrap.active .sr-popup-inner::before {
  opacity: 1;
  visibility: unset;
  background-color: rgba(34, 34, 34, 0.64);
  backdrop-filter: blur(40px);
  will-change: opacity, backdrop-filter;
  transition: opacity 1s ease, backdrop-filter 1s ease;
}

.sr11-uvis .sr-popup-wrap {
  width: calc(100% - 528px);
  opacity: 1;
  visibility: hidden;
  pointer-events: none;
  transition: none;
}
.sr11-uvis .sr-popup-wrap.active {
  visibility: unset;
  pointer-events: unset;
}
.sr11-uvis .sr-popup-wrap.active .sr-popup-content {
  opacity: 1;
  visibility: unset;
  pointer-events: unset;
}
.sr11-uvis .sr-popup-wrap.active .sr-popup-inner::before {
  opacity: 1;
  visibility: unset;
  background-color: rgba(34, 34, 34, 0.64);
  backdrop-filter: blur(40px);
  will-change: opacity, backdrop-filter;
  transition: opacity 1s ease, backdrop-filter 1s ease;
}
.sr11-uvis .sr-popup-inner {
  width: auto;
  min-width: 360px;
  max-width: 1226px;
  min-height: auto;
  padding: 0;
  background-color: unset;
  -moz-border-radius: 16px;
  border-radius: 16px;
  box-shadow: 0 4px 40px rgba(0, 0, 0, 0.24);
}
.sr11-uvis .sr-popup-inner::before {
  opacity: 0;
  visibility: hidden;
  backdrop-filter: blur(0px);
  will-change: opacity, backdrop-filter;
  transition: opacity 1s ease, backdrop-filter 1s ease;
}
.sr11-uvis .sr-popup-content {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  padding: 80px 62px 80px 61px;
  font-size: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease;
}
.sr11-uvis .sr-popup-text {
  margin-top: 64px;
  font-size: 24px;
  font-weight: 600;
  line-height: 1.5;
}
.sr11-uvis .sr-popup-frame {
  width: auto;
  min-height: auto;
}
.sr11-uvis .sr-popup-frame .frame-items {
  display: flex;
  align-items: center;
  justify-content: center;
}
.sr11-uvis .sr-popup-frame .frame-items .items-wrap {
  position: relative;
  opacity: 0;
  visibility: hidden;
}
.sr11-uvis .sr-popup-frame .frame-items .items-wrap.active {
  opacity: 1;
  visibility: unset;
}
.sr11-uvis .sr-popup-frame .frame-items .items-wrap.active .items {
  transform: scale(1);
}
.sr11-uvis .sr-popup-frame .frame-items .items-wrap + .items-wrap {
  margin-left: 144px;
}
.sr11-uvis .sr-popup-frame .frame-items .items {
  transform: scale(0);
  -webkit-transition-duration: 0.5s;
  -moz-transition-duration: 0.5s;
  -o-transition-duration: 0.5s;
  transition-duration: 0.5s;
}
.sr11-uvis .sr-popup-frame .frame-items .items + .items {
  margin-top: 40px;
}
.sr11-uvis .sr-popup-frame .frame-items .items .name {
  display: inline-block;
  margin-top: 24px;
  padding: 14px 24px;
  color: #fff;
  border: 2px solid rgb(18, 156, 255);
  border-radius: 200px;
  font-size: 18px;
  font-weight: 600;
  white-space: nowrap;
}
.sr11-uvis .sr-popup-frame .frame-items .items .circle-bg-blk {
  display: inline-block;
  width: 144px;
  height: 144px;
  padding: 8px;
  background-color: rgba(0, 0, 0, 0.24);
  border-radius: 50%;
}
.sr11-uvis .sr-popup-frame .frame-items .items .circle-bg-blk .name {
  display: block;
  margin-top: 4px;
  padding: 0;
  border: 0;
}
.sr11-uvis .sr-popup-frame .frame-items .line {
  position: absolute;
  z-index: -1;
  display: inline-block;
  width: 0px;
  background-repeat: no-repeat;
  transition-property: width;
  transition-duration: 0.5s;
}
.sr11-uvis .sr-popup-frame .frame-items .items-wrap.active .line {
  top: 80px;
  left: -123px;
  width: 104px;
  height: 24px;
  background-image: url(../../images/ko/showroom/sr11/img-line3.png);
  background-size: 104px 24px;
}

.sr11-uvis .img-management-wrap {
  position: relative;
}
.sr11-uvis .img-management-wrap .img-management-system {
  position: relative;
  display: inline-block;
  width: 774px;
  height: 418px;
  background-image: url(../../images/ko/showroom/sr11/img-sr11-sc1-management-system1.png);
  background-repeat: no-repeat;
  background-size: contain;
  transition-duration: 0.5s;
  opacity: 1;
  overflow: hidden;
  will-change: opacity;
}
.sr11-uvis .img-management-wrap .img-management-zoom {
  position: absolute;
  top: 84px;
  left: 40px;
  width: 688px;
  height: 216px;
  background-image: url(../../images/ko/showroom/sr11/img-sr11-sc1-management-zoom1.png);
  background-repeat: no-repeat;
  background-size: contain;
  transform: scale(0);
  will-change: transform;
}
.sr11-uvis .sr-popup-wrap .img-management-wrap.active .img-management-system {
  opacity: 0.32;
}
.sr11-uvis .img-management-wrap.active .img-management-zoom {
  transform: scale(1);
  transition-duration: 0.5s;
}

.sr11-uvis .sr-person-sc2-1 {
  position: absolute;
  top: 253px;
  left: 904px;
  width: 190px;
  height: 540px;
  background-image: url(../../images/ko/showroom/sr11/img-sr11-sc2-person1.svg);
  background-repeat: no-repeat;
  background-size: contain;
}
.sr11-uvis .sr-person-sc2-2 {
  width: 190px;
  height: 540px;
  top: 249px;
  left: 904px;
  background-image: url(../../images/ko/showroom/sr11/img-sr11-sc2-person2.svg);
}
.sr11-uvis .sr-person-sc2-3 {
  top: 391px;
  left: 448px;
  width: 168px;
  height: 480px;
  background-image: url(../../images/ko/showroom/sr11/img-sr11-sc2-person3.svg);
}
.sr11-uvis .sr-person-sc2-4 {
  top: 392px;
  left: 617px;
  width: 168px;
  height: 480px;
  background-image: url(../../images/ko/showroom/sr11/img-sr11-sc2-person4.svg);
}

/* img */
.sr11-uvis [class^="img-"] {
  display: inline-block;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}
.sr11-uvis .img-transport {
  width: 301px;
  height: 319px;
  background-image: url(../../images/ko/showroom/sr11/img-transport.png);
}
.sr11-uvis .img-bus {
  width: 445px;
  height: 375px;
  background-image: url(../../images/ko/showroom/sr11/img-bus.png);
}
.sr11-uvis .img-dtg {
  width: 218px;
  height: 108px;
  background-image: url(../../images/ko/showroom/sr11/img-dtg.svg);
}
.sr11-uvis .img-thermometer {
  width: 70px;
  height: 108px;
  background-image: url(../../images/ko/showroom/sr11/img-thermometer.svg);
}
.sr11-uvis .img-comms {
  width: 100px;
  height: 100px;
  background-image: url(../../images/ko/showroom/sr11/img-comms.svg);
}
.sr11-uvis .img-network {
  width: 80px;
  height: 80px;
  background-image: url(../../images/ko/showroom/sr11/img-network.svg);
}
.sr11-uvis .img-uvis-server {
  width: 94px;
  height: 98px;
  background-image: url(../../images/ko/showroom/sr11/img-uvis-server.svg);
}
.sr11-uvis .img-eTAS {
  width: 223px;
  height: 180px;
  background-image: url(../../images/ko/showroom/sr11/img-eTAS.svg);
}
.sr11-uvis .img-clock {
  width: 80px;
  height: 80px;
  background-image: url(../../images/ko/showroom/sr11/img-clock.svg);
}
.sr11-uvis .img-sns {
  width: 94px;
  height: 100px;
  background-image: url(../../images/ko/showroom/sr11/img-sms.svg);
}
.sr11-uvis .img-navigation {
  width: 105px;
  height: 84px;
  background-image: url(../../images/ko/showroom/sr11/img-navigation.svg);
}
.sr11-uvis .img-collision {
  position: absolute;
  top: 361px;
  left: 553px;
  width: 212px;
  height: 212px;
  background-image: url(../../images/ko/showroom/sr11/img-collision.svg);
  opacity: 0;
  visibility: hidden;
}
.sr11-uvis .img-collision.active {
  opacity: 1;
  visibility: unset;
  transition-delay: 1s;
  transition-duration: 1s;
}
.sr11-uvis .img-moblie {
  position: absolute;
  top: 220px;
  left: 497px;
  display: inline-block;
  width: 285px;
  height: 575px;
  background-image: url(../../images/ko/showroom/sr11/img-mobile.png);
  background-repeat: no-repeat;
  background-size: contain;
  opacity: 0;
  visibility: hidden;
}
.sr11-uvis .img-moblie.active {
  opacity: 1;
  visibility: unset;
  transition-duration: 1s;
}
.sr11-uvis .img-navigation-route {
  position: absolute;
  top: 318px;
  left: 783px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 162px;
  height: 82px;
  background-image: url(../../images/ko/showroom/sr11/img-navigation-route.png);
  background-size: 100% 100%;
  opacity: 0;
  visibility: hidden;
  transition: opacity 1s ease;
}
.sr11-uvis .img-navigation-route.active {
  opacity: 1;
  visibility: unset;
  transform: translateX(-210px) scale(1.1);
  top: 301px;
  transition: top 1s ease, transform 1s ease;
}
.sr11-uvis .img-worning {
  display: inline-block;
  width: 98px;
  height: 68px;
  background-image: url(../../images/ko/showroom/sr11/img-worning.png);
  opacity: 0;
  visibility: hidden;
  transition: opacity 1s ease;
}
.sr11-uvis .img-multibox {
  display: inline-block;
  width: 100px;
  height: 100px;
  background-image: url(../../images/ko/showroom/sr11/img-multibox.svg);
  background-repeat: no-repeat;
  background-size: contain;
}
.sr11-uvis .img-manager {
  display: inline-block;
  width: 180px;
  height: 180px;
  background-image: url(../../images/ko/showroom/sr11/img-manager.svg);
  background-repeat: no-repeat;
  background-size: contain;
}
.sr11-uvis .img-cardreader {
  display: inline-block;
  width: 60px;
  height: 112px;
  background-image: url(../../images/ko/showroom/sr11/img-cardreader.svg);
  background-repeat: no-repeat;
  background-size: contain;
}
.sr11-uvis .img-cardreader2 {
  width: 180px;
  height: 180px;
  background-image: url(../../images/ko/showroom/sr11/img-cardreader2.svg);
}
.sr11-uvis .img-moblie3 {
  position: absolute;
  top: 220px;
  left: 497px;
  width: 285px;
  height: 575px;
  background-image: url(../../images/ko/showroom/sr11/img-mobile3.png);
  background-repeat: no-repeat;
  background-size: contain;
}

/* icon */
.sr11-uvis .accordion-list-wrap [class^="icon-"] {
  display: inline-block;
  width: 32px;
  height: 32px;
  margin-right: 12px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 32px;
  vertical-align: middle;
}
.sr11-uvis .icon-monitoring {
  background-image: url(../../images/ko/showroom/sr11/icon-monitoring.svg);
}
.sr11-uvis .icon-graph {
  background-image: url(../../images/ko/showroom/sr11/icon-graph.svg);
}
.sr11-uvis .icon-car {
  background-image: url(../../images/ko/showroom/sr11/icon-car.svg);
}
.sr11-uvis .icon-chart {
  background-image: url(../../images/ko/showroom/sr11/icon-chart.svg);
}
.sr11-uvis .icon-check {
  background-image: url(../../images/ko/showroom/sr11/icon-check.svg);
}
.sr11-uvis .icon-document {
  background-image: url(../../images/ko/showroom/sr11/icon-document.svg);
}

/* 장착 기기 소개 */
/* .sr11-uvis.screen1.step5 .sr-info-item {
    opacity: 1;
    visibility: unset;
    pointer-events: unset;
    transition-property: opacity;
    transition-delay: 0.5s;
    transition-duration: 0.5s;
}
.sr11-uvis.screen1.step5 .sr-info-item2 {
    opacity: 1;
    visibility: unset;
    pointer-events: unset;
    transition-property: opacity;
    transition-delay: 1s;
    transition-duration: 0.5s;
} */
.sr11-uvis.screen1.step5 .sr-info-wrap .sr-info-item1.ani-active .circle-line-wrap {
  z-index: -1;
}
.sr11-uvis.screen1.step5 .sr-info-wrap .sr-info-item2 {
  top: 726px;
  left: 880px;
  width: 295px;
  text-align: right;
}
.sr11-uvis.screen1.step5 .sr-info-wrap .sr-info-item1 .circle-line-wrap {
  top: 32px;
  right: 0;
}
.sr11-uvis.screen1.step5 .sr-info-wrap .sr-info-item2 .circle-line-wrap {
  top: 32px;
  left: 0;
}
.sr11-uvis.screen1.step5 .sr-info-wrap .sr-info-item2 .circle-line-wrap .circle {
  top: 21px;
  left: -35px;
}
.sr11-uvis.screen1.step5 .sr-info-wrap .sr-info-item1 .circle-line-wrap .circle-layer {
  width: 280px;
  height: 280px;
}
.sr11-uvis.screen1.step5 .sr-info-wrap .sr-info-item2 .circle-line-wrap .lines {
  width: 124px;
  height: 80px;
  background-image: url(../../images/ko/showroom/sr11/img-line5.png);
}

.sr-info-wrap {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.5s;
}
.sr-info-wrap .sr-info-item {
  position: absolute;
  top: 251px;
  left: 240px;
  width: 619px;
  transition: transform 0.5s;
}
.sr-info-wrap .sr-info-item.ani-active .circle-line-wrap {
  opacity: 1;
}
.sr-info-wrap .sr-info-item.ani-active .circle-layer {
  background-image: url(../../images/ko/showroom/sr11/img-circle-bg.png);
  background-repeat: no-repeat;
  background-size: 100%;
  animation-name: circle-layer;
  animation-duration: 1.5s;
  animation-iteration-count: infinite;
}
.sr-info-wrap .sr-info-item > ul > li + li {
  margin-top: 16px;
}
.sr-info-wrap .info-view {
  width: 200px;
  height: 64px;
  background-color: rgb(29, 108, 235);
  padding: 14px 20px;
  border-radius: 8px;
  text-align: left;
  opacity: 0.64;
}
.sr-info-wrap .info-view.on {
  opacity: 1;
}
.sr-info-wrap .info-view > span {
  position: relative;
  display: block;
  color: #fff;
  font-size: 24px;
  font-weight: 600;
}
.sr-info-wrap .info-view > span::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 32px;
  height: 32px;
  background-image: url(../../images/ko/showroom/sr11/icon-search.svg);
  background-repeat: no-repeat;
  background-size: 100%;
}
.sr-info-wrap .circle-line-wrap {
  position: absolute;
  opacity: 0.64;
  transition-property: opacity;
  transition-duration: 0.5s;
  z-index: -1;
}
.sr-info-wrap .circle-line-wrap .lines {
  position: relative;
  display: block;
  width: 419px;
  height: 160px;
  background-image: url(../../images/ko/showroom/sr11/img-line4.png);
  background-repeat: no-repeat;
  background-size: contain;
  z-index: -1;
}
.sr-info-wrap .circle-line-wrap .circle {
  position: absolute;
  top: 60px;
  right: -24px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background-color: #fff;
  border: 3px solid rgb(18, 156, 256);
  border-radius: 50%;
}
.sr-info-wrap .circle-line-wrap .circle::after {
  content: "";
  display: block;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: rgb(18, 156, 256);
}
.sr-info-wrap .circle-line-wrap .circle-layer {
  position: absolute;
  display: inline-block;
  width: 160px;
  height: 160px;
}
@keyframes circle-layer {
  0% {
    transform: scale(0);
    opacity: 1;
  }
  80% {
    opacity: 0.4;
  }
  100% {
    transform: scale(1);
    opacity: 0;
  }
}

/* .sr-info-popup-wrap {
  position: relative;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 100;
}
.sr-info-popup-wrap.active {
  opacity: 1;
  visibility: unset;
  pointer-events: unset;
} */
.sr-info-popup-wrap .sr-popup-info-view {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 80px 24px 56px 24px;
  color: #fff;
}
.sr-info-popup-wrap .info-view-close {
  position: absolute;
  top: 24px;
  right: 24px;
  display: inline-block;
  width: 32px;
  height: 32px;
  background-image: url(../../images/ko/showroom/srcomm/icon-close-wht.png);
  background-repeat: no-repeat;
  background-size: 32px;
}
.sr-info-popup-wrap .sr-info-text-area {
  margin-top: 32px;
  text-align: center;
}
.sr-info-popup-wrap .sr-info-text-area > strong {
  font-size: 16px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.7);
}
.sr-info-popup-wrap .sr-info-text-area > h4 {
  font-size: 24px;
  font-weight: 700;
}
.sr-info-popup-wrap .sr-info-text-area > p {
  margin-top: 12px;
  font-size: 18px;
  font-weight: 500;
}
.sr-info-popup-wrap .sr-info-text-area .fn {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.7);
}

/* HUEN */
/* 공통 */
.sr10-huen {
  background-color: var(--bg-color);
}
.sr10-huen.default .service-step-wrap {
  transform: translate(calc(100% + 48px), -50%);
}
.sr10-huen .showroom-content-wrap-huen {
  width: 1920px;
  height: 1080px;
  top: 50%;
  left: 50%;
  z-index: 4;
}
.sr10-huen .showroom-step-wrap {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: calc(100% - 528px);
  height: 100%;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.sr10-huen .showroom-step-inner {
  position: relative;
  width: 100%;
  height: 100%;
}
.sr10-huen [class^="showroom-screen"]:not(.showroom-screen-inner) {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.5s ease;
}
.sr10-huen.screen0 .showroom-screen0-wrap,
.sr10-huen.screen1 .showroom-screen1-wrap,
.sr10-huen.screen2 .showroom-screen2-wrap,
.sr10-huen.screen3 .showroom-screen3-wrap,
.sr10-huen.screen4 .showroom-screen4-wrap,
.sr10-huen.screen5 .showroom-screen5-wrap {
  opacity: 1;
  visibility: unset;
  pointer-events: unset;
  transition: opacity 0.5s ease;
}
.sr10-huen [class^="showroom-step"]:not(.showroom-step-inner) {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.5s ease;
}
.sr10-huen[class*="screen"].step1 .showroom-step1-wrap,
.sr10-huen[class*="screen"].step2 .showroom-step2-wrap,
.sr10-huen[class*="screen"].step3 .showroom-step3-wrap,
.sr10-huen[class*="screen"].step4 .showroom-step4-wrap {
  opacity: 1;
  visibility: unset;
  pointer-events: unset;
  transition: opacity 0.5s ease;
}
.sr10-huen[class*="screen"] .step-inner-cont {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.5s ease;
}
.sr10-huen[class*="screen"] .step-inner-cont.step-intro {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.5s ease;
}
.sr10-huen[class*="screen"] .step-inner-cont.step-intro.active {
  opacity: 1;
  visibility: unset;
  pointer-events: unset;
  transition: opacity 0.5s ease;
}
.sr10-huen[class*="screen"].step1-1 .step-inner-cont.step1-1,
.sr10-huen[class*="screen"].step1-2 .step-inner-cont.step1-2,
.sr10-huen[class*="screen"].step1-3 .step-inner-cont.step1-3,
.sr10-huen[class*="screen"].step2-1 .step-inner-cont.step2-1,
.sr10-huen[class*="screen"].step2-2 .step-inner-cont.step2-2,
.sr10-huen[class*="screen"].step2-3 .step-inner-cont.step2-3,
.sr10-huen[class*="screen"].step3-1 .step-inner-cont.step3-1,
.sr10-huen[class*="screen"].step3-2 .step-inner-cont.step3-2,
.sr10-huen[class*="screen"].step4-1 .step-inner-cont.step4-1 {
  opacity: 1;
  visibility: unset;
  pointer-events: unset;
  transition: opacity 0.5s ease;
}
.sr10-huen [data-screen-target] {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.5s ease;
}
.sr10-huen [data-screen-target].active {
  opacity: 1;
  visibility: unset;
  pointer-events: unset;
  transition: opacity 0.5s ease;
}

/* 배경 */
.sr10-huen .showroom-background-area {
  position: absolute;
  width: 1920px;
  height: 1080px;
  top: 50%;
  left: 50%;
  z-index: 3;
}
.sr10-huen .showroom-background-area .showroom-background-inner {
  position: relative;
  width: inherit;
  height: inherit;
}
.sr10-huen .showroom-background-area [class*="showroom-background-layer"] {
  position: absolute;
  top: 0;
  left: 0;
  width: 1920px;
  height: 1080px;
  transform: scale(1);
  opacity: 0;
  visibility: hidden;
  background-position: left center;
  background-repeat: no-repeat;
}
.sr10-huen.default .showroom-background-area [class*="showroom-background-layer"] {
  transform: scale(1);
  filter: blur(10px);
  opacity: 0;
  visibility: hidden;
}
.sr10-huen.main .showroom-background-area .showroom-background-layer {
  transform: scale(1);
  -webkit-filter: blur(0px);
  filter: blur(0px);
  opacity: 1;
  visibility: unset;
  background-image: url("../../images/ko/showroom/sr10/bg-sr10-screen0-full.webp");
  background-size: 1620px auto;
  transition-delay: 0s;
  transition-duration: 1s;
  transition: opacity 0.5s ease;
  z-index: 0;
}
.sr10-huen.main .showroom-background-area .showroom-background-layer2 {
  transform: scale(1);
  opacity: 1;
  visibility: unset;
  background-image: url("../../images/ko/showroom/sr10/bg-sr10-screen0-full.webp");
  background-size: 1620px auto;
  transition: background-image 0.5s ease;
}
.sr10-huen.main[class*="sr-pointer-"] .showroom-background-layer {
  opacity: 0.4;
  /* background-image: url("../../images/ko/showroom/sr10/bg-sr10-screen0-full-opacity.webp"); */
}
.sr10-huen.main[class*="sr-pointer-"] .showroom-background-layer2 {
  z-index: 1;
  visibility: unset;
}
.sr10-huen.main.sr-pointer-1 .showroom-background-layer2 {
  opacity: 1;
  background-image: url("../../images/ko/showroom/sr10/bg-sr10-screen0-complex.webp");
  /* transition: opacity 0.5s ease; */
}
.sr10-huen.main.sr-pointer-2 .showroom-background-layer2 {
  opacity: 1;
  background-image: url("../../images/ko/showroom/sr10/bg-sr10-screen0-entrance.webp");
  /* transition: opacity 0.5s ease; */
}
.sr10-huen.main.sr-pointer-3 .showroom-background-layer2 {
  opacity: 1;
  background-image: url("../../images/ko/showroom/sr10/bg-sr10-screen0-parking.webp");
  /* transition: opacity 0.5s ease; */
}
.sr10-huen.main.sr-pointer-4 .showroom-background-layer2 {
  opacity: 1;
  background-image: url("../../images/ko/showroom/sr10/bg-sr10-screen0-community.webp");
  /* transition: opacity 0.5s ease; */
}
.sr10-huen.main.sr-pointer-5 .showroom-background-layer2 {
  opacity: 1;
  background-image: url("../../images/ko/showroom/sr10/bg-sr10-screen0-exterior.webp");
  /* transition: opacity 0.5s ease; */
}

.sr10-huen[class*="screen"]:not(.screen0) .showroom-background-area .showroom-background-layer {
  width: 2320px;
  height: 1480px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 1;
  visibility: unset;
  transition-delay: 0s;
  transition-duration: 1s;
  transition: opacity 0.5s ease;
}
.sr10-huen .showroom-background-dim {
  background-color: rgba(0, 0, 0, 0.4);
  opacity: 0;
  visibility: hidden;
  transition-duration: 0.5s;
}
.sr10-huen .showroom-background-dim.active {
  opacity: 1;
  visibility: unset;
  transition-duration: 0.5s;
  z-index: 3;
}
.sr10-huen.main .showroom-background-dim {
  background-color: rgba(0, 0, 0, 0.3);
  opacity: 0;
  visibility: unset;
  transition-delay: 0;
  transition-duration: 0.5s;
}

/* 포인터 */
.sr10-huen .sr-pointer.large .sr-pointer-pin {
  width: 24px;
  height: 24px;
}
.sr10-huen .sr-pointer.large::after {
  top: 78px;
}
.sr10-huen .sr-pointer.large:not(.active) .sr-pointer-pin {
  background-color: #aaa;
}
.sr10-huen .sr-pointer.blue.large .sr-pointer-layer .sr-pointer-layer-1 {
  background: radial-gradient(50% 50% at 50% 50%, rgba(0, 136, 255, 0) 55%, rgba(0, 136, 255, 0.3) 100%);
}
.sr10-huen .sr-pointer.blue.large.active .sr-pointer-layer-1 {
  animation-name: srPointerLargeLayer1;
  animation-duration: 0.9s;
  animation-delay: 0.4s;
}
.sr10-huen .sr-pointer.blue.large .sr-pointer-layer .sr-pointer-layer-2 {
  background: radial-gradient(50% 50% at 50% 50%, rgba(0, 136, 255, 0) 55%, rgba(0, 136, 255, 0.3) 100%);
}
.sr10-huen .sr-pointer.blue.large.active .sr-pointer-layer-2 {
  animation-name: srPointerLargeLayer2;
  animation-duration: 0.9s;
  animation-delay: 0.1s;
}
@keyframes srPointerLargeLayer1 {
  00% {
    transform: scale(0);
  }
  60% {
    opacity: 1;
  }
  100% {
    transform: scale(1.6);
    opacity: 0;
  }
}
@keyframes srPointerLargeLayer2 {
  0% {
    transform: scale(0);
  }
  60% {
    opacity: 1;
  }
  100% {
    transform: scale(1.8);
    opacity: 0;
  }
}
.sr10-huen .sr-pointer-wrap {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.sr10-huen .sr-pointer-wrap.sr-pointer-wrap1 {
  top: 250px;
  left: 717px;
}
.sr10-huen .sr-pointer-wrap.sr-pointer-wrap2 {
  top: 666px;
  left: 260px;
}
.sr10-huen .sr-pointer-wrap.sr-pointer-wrap3 {
  top: 533px;
  left: 355px;
}
.sr10-huen .sr-pointer-wrap.sr-pointer-wrap4 {
  top: 595px;
  left: 621px;
}
.sr10-huen .sr-pointer-wrap.sr-pointer-wrap5 {
  top: 678px;
  left: 907px;
}

.sr10-huen .sr-pointer-wrap.check-complete {
  transition-delay: 0s !important;
  transition-duration: 0s !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
.sr10-huen.default .sr-pointer-wrap {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.sr10-huen.default .sr-pointer-wrap.sr-pointer-wrap1 {
  top: 250px;
  left: 717px;
}
.sr10-huen.default .sr-pointer-wrap.sr-pointer-wrap2 {
  top: 666px;
  left: 260px;
}
.sr10-huen.default .sr-pointer-wrap.sr-pointer-wrap3 {
  top: 533px;
  left: 355px;
}
.sr10-huen.default .sr-pointer-wrap.sr-pointer-wrap4 {
  top: 595px;
  left: 621px;
}
.sr10-huen.default .sr-pointer-wrap.sr-pointer-wrap5 {
  top: 678px;
  left: 907px;
}
.sr10-huen.default .sr-pointer-wrap .sr-pointer-layer [class*="sr-pointer-layer-"] {
  -webkit-animation-play-state: paused;
  -moz-animation-play-state: paused;
  animation-play-state: paused;
}
.sr10-huen.main .sr-pointer-wrap {
  position: absolute;
  opacity: 1;
  visibility: unset;
  pointer-events: unset;
  -webkit-transition-delay: 1s;
  -moz-transition-delay: 1s;
  -o-transition-delay: 1s;
  transition-delay: 1s;
  -webkit-transition-duration: 1s;
  -moz-transition-duration: 1s;
  -o-transition-duration: 1s;
  transition-duration: 1s;
}
.sr10-huen.main .sr-pointer-wrap.sr-pointer-wrap1 {
  top: 250px;
  left: 717px;
}
.sr10-huen.main .sr-pointer-wrap.sr-pointer-wrap2 {
  top: 666px;
  left: 260px;
}
.sr10-huen.main .sr-pointer-wrap.sr-pointer-wrap3 {
  top: 533px;
  left: 355px;
}
.sr10-huen.main .sr-pointer-wrap.sr-pointer-wrap4 {
  top: 595px;
  left: 621px;
}
.sr10-huen.main .sr-pointer-wrap.sr-pointer-wrap5 {
  top: 678px;
  left: 907px;
}
/* .sr10-huen.main
  .sr-pointer-wrap
  .sr-pointer-layer
  [class*="sr-pointer-layer-"] {
  -webkit-animation-delay: 0s;
  -moz-animation-delay: 0s;
  animation-delay: 0s;
  -webkit-animation-play-state: running;
  -moz-animation-play-state: running;
  animation-play-state: running;
} */
.sr10-huen.main .sr-pointer-wrap .sr-pointer-inner {
  position: relative;
  z-index: 1;
}
.sr10-huen.main .sr-pointer-wrap .sr-pointer-tip-wrap {
  position: absolute;
  left: 50%;
  top: 78px;
  transform: translateX(-50%);
  border-radius: 24px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
  transition: border-radius 0.3s;
  cursor: pointer;
}
.sr10-huen.main .sr-pointer-wrap .sr-pointer-tip-wrap .sr-pointer-tip-inner {
  display: flex;
  flex-direction: column;
  position: relative;
  padding: 10px 20px;
  border-radius: 24px;
  background-color: rgb(255, 255, 255);
  transition: padding 0.3s ease, border-radius 0.3s;
}
.sr10-huen.main .sr-pointer-wrap .sr-pointer[aria-expanded="true"] + .sr-pointer-tip-wrap .sr-pointer-tip-inner {
  padding: 20px 16px 16px;
  border-radius: 16px;
  animation: shrink 0.2s forwards;
}
.sr10-huen.main .sr-pointer-wrap .sr-pointer[aria-expanded="true"] + .sr-pointer-tip-wrap {
  border-radius: 16px;
  z-index: 1;
}
@keyframes shrink {
  0% {
    padding: 20px 25px 35px;
  }
  100% {
    padding: 20px 16px 16px;
  }
}
.sr10-huen.main .sr-pointer-wrap .sr-pointer-tip-wrap .sr-pointer-tip-inner .box-text {
  position: relative;
  display: inline-block;
  white-space: nowrap;
  font-family: "Pretendard";
  line-height: 30px;
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.3px;
  color: #666;
  -moz-border-radius: 22px;
  border-radius: 22px;
}
.sr10-huen.main .sr-pointer-wrap .sr-pointer.active + .sr-pointer-tip-wrap .sr-pointer-tip-inner .box-text {
  color: #000;
}

.sr10-huen.main .sr-pointer-wrap .sr-pointer-tip-wrap .box-more {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 0;
  height: 0;
  opacity: 0;
  overflow: hidden;
  transition: width 0.3s ease, height 0.3s ease;
}
.sr10-huen.main .sr-pointer-wrap .sr-pointer[aria-expanded="true"] + .sr-pointer-tip-wrap .box-more {
  opacity: 1;
  width: 216px;
  height: auto;
  padding-top: 8px;
}
.sr10-huen.main .sr-pointer-wrap .sr-pointer-tip-wrap .box-more ul {
  width: 200px;
}
.sr10-huen.main .sr-pointer-wrap .sr-pointer-tip-wrap .box-more ul li {
  line-height: 44px;
  padding-left: 42px;
  font-weight: 600;
  font-size: 16px;
  text-align: left;
  background-size: 36px auto;
  background-repeat: no-repeat;
  background-position: left center;
}
.sr10-huen.main .sr-pointer-wrap .sr-pointer-tip-wrap .box-more ul li > .btn {
  position: relative;
  white-space: nowrap;
  padding-right: 22px;
  background-size: 20px auto;
}
.sr10-huen.main .sr-pointer-wrap .sr-pointer-tip-wrap .box-more ul li > .btn:after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  background: url("../../images/ko/showroom/sr10/icon-btn-arrow.png") no-repeat center center;
  background-size: 20px auto;
}
.sr10-huen.main .sr-pointer-wrap .sr-pointer-tip-wrap .box-more ul li > .btn:hover {
  font-weight: 700;
  color: var(--color-key);
}
.sr10-huen.main .sr-pointer-wrap .sr-pointer-tip-wrap .box-more ul li > .btn:hover:after {
  background: url("../../images/ko/showroom/sr10/icon-btn-arrow-hover.png") no-repeat center center;
  background-size: 20px auto;
}
/* .sr10-huen.main .sr-pointer-wrap .sr-pointer-tip-wrap .box-more .link-more {
  /* display: none;
  width: 200px;
  height: 48px;
  line-height: 48px;
  font-weight: 600;
  font-size: 18px;
  color: #fff;
  text-align: center;
  border-radius: 8px;
  background-color: var(--color-key);
}
.sr10-huen.main .sr-pointer-wrap .sr-pointer[aria-expanded="true"] + .sr-pointer-tip-wrap .box-more .link-more {
  display: block;
} */
.sr10-huen.main .sr-pointer-wrap .sr-pointer-tip-wrap1 .box-more ul li:first-child {
  background-image: url("../../images/ko/showroom/sr10/icon-pointer1-cctv.svg");
}
.sr10-huen.main .sr-pointer-wrap .sr-pointer-tip-wrap1 .box-more ul li:nth-child(2) {
  background-image: url("../../images/ko/showroom/sr10/icon-pointer1-apartment.svg");
}
.sr10-huen.main .sr-pointer-wrap .sr-pointer-tip-wrap1 .box-more ul li:nth-child(3) {
  background-image: url("../../images/ko/showroom/sr10/icon-pointer1-light.svg");
}
.sr10-huen.main .sr-pointer-wrap .sr-pointer-tip-wrap1 .box-more ul li:nth-child(4) {
  background-image: url("../../images/ko/showroom/sr10/icon-pointer1-guard.svg");
}
.sr10-huen.main .sr-pointer-wrap .sr-pointer-tip-wrap2 .box-more ul li:nth-child(1) {
  background-image: url("../../images/ko/showroom/sr10/icon-pointer2-safty-center.svg");
}
.sr10-huen.main .sr-pointer-wrap .sr-pointer-tip-wrap2 .box-more ul li:nth-child(2) {
  background-image: url("../../images/ko/showroom/sr10/icon-pointer2-id.svg");
}
.sr10-huen.main .sr-pointer-wrap .sr-pointer-tip-wrap3 .box-more ul li:nth-child(1) {
  background-image: url("../../images/ko/showroom/sr10/icon-pointer3-traffic.svg");
}
.sr10-huen.main .sr-pointer-wrap .sr-pointer-tip-wrap3 .box-more ul li:nth-child(2) {
  background-image: url("../../images/ko/showroom/sr10/icon-pointer3-car-entry.svg");
}
.sr10-huen.main .sr-pointer-wrap .sr-pointer-tip-wrap4 .box-more ul li:nth-child(1) {
  background-image: url("../../images/ko/showroom/sr10/icon-pointer4-app.svg");
}
.sr10-huen.main .sr-pointer-wrap .sr-pointer-tip-wrap5 .box-more ul li:nth-child(1) {
  background-image: url("../../images/ko/showroom/sr10/icon-pointer5-door.svg");
}
.sr10-huen.main .sr-pointer-wrap .sr-pointer-tip-wrap5 .box-more ul li:nth-child(2) {
  background-image: url("../../images/ko/showroom/sr10/icon-pointer5-nosign.svg");
}
.sr10-huen.main .sr-pointer-wrap .sr-pointer-tip-wrap .sr-pointer-tip-inner .triangle-top {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 16px;
  height: 12px;
  background-image: url("../../images/ko/showroom/sr10/icon-triangle-top.png");
  background-size: 16px auto;
  background-repeat: no-repeat;
}

/* 자동생성메뉴 */
.sr10-huen .showroom-content-mark {
  border: 0 !important;
}
.sr10-huen .service-step-wrap {
  opacity: 0;
  visibility: hidden;
  top: 52%;
  right: 48px;
  pointer-events: initial;
}
.sr10-huen[class*="screen"] .service-step-wrap {
  opacity: 1;
  visibility: unset;
  top: 50%;
  transition-duration: 0.5s;
}
.sr10-huen[class*="screen"] .service-step-wrap .service-step-inner {
  transition: height 0.5s ease;
}
.sr10-huen .service-step-wrap .title-step-top .title-top-logo {
  width: 72px;
  height: 20px;
  background: url("../../images/ko/showroom/sr10/img-logo-huen.png") no-repeat center center;
  background-size: 72px auto;
}
.sr10-huen .service-step-wrap .info {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.sr10-huen .service-step-wrap .info > p {
  padding-top: 16px;
  font-weight: 500;
  font-size: 18px;
}
.sr10-huen .service-step-wrap .info > ul {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 24px 20px;
  border-radius: 8px;
  background-color: #f6f6f6;
}
.sr10-huen .service-step-wrap .info ul li {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-left: 44px;
  background-size: 32px auto;
  background-repeat: no-repeat;
  background-position: left top;
}
.sr10-huen .service-step-wrap .info ul li:first-child {
  background-image: url(../../images/ko/showroom/sr10/icon-menu-safe.svg);
}
.sr10-huen .service-step-wrap .info ul li:nth-child(2) {
  background-image: url(../../images/ko/showroom/sr10/icon-menu-efficiency.svg);
}
.sr10-huen .service-step-wrap .info ul li:nth-child(3) {
  background-image: url(../../images/ko/showroom/sr10/icon-menu-security.svg);
}
.sr10-huen .service-step-wrap .info ul li strong {
  line-height: 24px;
  font-weight: 700;
  font-size: 18px;
}
.sr10-huen .service-step-wrap .info ul li p {
  font-weight: 500;
  font-size: 18px;
  color: #666;
}

/* item common */
.sr10-huen [class*="sr-clr-"] {
  width: 240px;
  height: 240px;
  border-radius: 100%;
}
.sr10-huen .sr-clr-wht {
  background-color: #fff;
}
.sr10-huen .sr-clr-blue {
  background-color: var(--color-key);
}
.sr10-huen .sr-list-clr-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease;
}
.sr10-huen .sr-list-clr-text.active {
  opacity: 1;
  visibility: unset;
  transition: opacity 0.5s ease;
}
.sr10-huen .sr-list-clr-text ul {
  display: flex;
  flex-direction: row;
  gap: 64px;
}
.sr10-huen .sr-list-clr-text ul li {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.sr10-huen .sr-list-clr-text:not(.type-show) ul li:first-child {
  transform: translateX(304px);
  transition: transform 0.5s ease;
}
.sr10-huen .sr-list-clr-text:not(.type-show) ul li:nth-child(2) {
  z-index: 1;
}
.sr10-huen .sr-list-clr-text:not(.type-show) ul li:last-child {
  transform: translateX(-304px);
  transition: transform 0.5s ease;
}
.sr10-huen .sr-list-clr-text.active:not(.type-show) ul li:first-child {
  transform: translateX(0);
}
.sr10-huen .sr-list-clr-text.active:not(.type-show) ul li:last-child {
  transform: translateX(-0);
}
.sr10-huen .sr-list-clr-text ul li span {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 4px;
}
.sr10-huen .sr-list-clr-text ul li em {
  font-weight: 700;
  font-size: 24px;
  color: #8bc6ff;
}
.sr10-huen .sr-list-clr-text ul li strong {
  font-weight: 700;
  font-size: 32px;
  color: #fff;
  line-height: 120%;
  letter-spacing: 0;
}
.sr10-huen .sr-bubble-tooltip {
  position: absolute;
  bottom: -62px;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  height: 48px;
  padding: 0 20px;
  font-weight: 700;
  font-size: 18px;
  text-align: center;
  border-radius: 24px;
  background-color: #fff;
}
.sr10-huen .sr-bubble-tooltip:before {
  content: "";
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 16px;
  height: 12px;
  background-image: url("../../images/ko/showroom/sr10/icon-triangle-top.png");
  background-size: 16px auto;
  background-repeat: no-repeat;
}
.sr10-huen .sr-bubble-tooltip.arr-btm:before {
  top: initial;
  left: calc(50% - 8px);
  bottom: -12px;
  transform: rotate(180deg);
}
.sr10-huen .popup-box::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  backdrop-filter: blur(40px);
  border-radius: 16px;
  background: rgba(34, 34, 34, 0.64);
  box-shadow: 0px 4px 40px rgba(0, 0, 0, 0.24);
}
.sr10-huen .popup-box {
  width: 1024px;
  height: 636px;
  left: 50%;
  top: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  transform: translate(-50%, -50%);
}

.sr10-huen .popup-complete {
  width: 832px;
  height: 666px;
}
.sr10-huen .popup-complete .complete-area {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.sr10-huen .popup-box-inner {
  position: relative;
  z-index: 2;
}
.sr10-huen .popup-box-inner p {
  margin-top: 64px;
  color: #fff;
  font-size: 24px;
  font-weight: 600;
  text-align: center;
}
.sr10-huen .popup-box-inner .detail {
  display: inline-block;
  margin-top: 24px;
  font-size: 20px;
  font-weight: 500;
  color: #c4c4c4;
}
.sr10-huen .popup-complete .complete-area .desc {
  padding-top: 344px;
  font-weight: 700;
  font-size: 24px;
  color: #fff;
}
.sr10-huen .popup-complete .complete-area .desc strong {
  color: #8bc6ff;
  font-weight: 700;
}
.sr10-huen .popup-complete .complete-area .extra {
  padding-top: 8px;
  font-weight: 500;
  font-size: 20px;
  color: #d9d9d9;
}
.sr10-huen .popup-complete .complete-area a {
  margin-top: 48px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 280px;
  height: 56px;
  font-weight: 700;
  font-size: 18px;
  color: #fff;
  background: rgba(255, 255, 255, 0.24);
  border-radius: 8px;
}

.sr10-huen[class*="screen"] .bottom-gray-tooltip-wrap .bottom-gray-text {
  font-weight: 600;
}
.sr10-huen[class*="screen"] .bottom-gray-tooltip-wrap .bottom-gray-text strong {
  font-weight: 600;
  color: #8bc6ff;
}
.sr10-huen[class*="screen"] .bottom-gray-tooltip-wrap.active {
  bottom: 80px;
  opacity: 1;
  visibility: unset;
  transition: opacity 0.5s, bottom 0.5s;
}
.sr10-huen[class*="screen"] .bottom-gray-tooltip-wrap.active .bottom-gray-text {
  display: block;
}
.sr10-huen[class*="screen"] .cctv-light {
  position: absolute;
  top: 81px;
  right: 91px;
  width: 1053px;
  height: 1019px;
  overflow: hidden;
  background-size: cover;
  animation: changeBackground 5s infinite;
  transform: rotate(90deg);
}
@keyframes changeBackground {
  0% {
    background-image: url(../../images/ko/showroom/sr10/bg-beam1.png);
  }
  25% {
    background-image: url(../../images/ko/showroom/sr10/bg-beam2.png);
  }
  50% {
    background-image: url(../../images/ko/showroom/sr10/bg-beam3.png);
  }
  75% {
    background-image: url(../../images/ko/showroom/sr10/bg-beam4.png);
  }
  100% {
    background-image: url(../../images/ko/showroom/sr10/bg-beam5.png);
  }
}
.sr10-huen[class*="screen"] .target-area {
  position: absolute;
  width: 144px;
  height: 144px;
  background: url(../../images/ko/showroom/sr10/img-targeting.png) no-repeat center center;
  background-size: 144px auto;
  transform: scale(0);
  transition: transform 0.5s ease 0s;
}
.sr10-huen[class*="screen"] .target-area.active {
  transform: scale(1);
}
.sr10-huen[class*="screen"] .img-bluetooth {
  position: absolute;
  width: 180px;
  height: 180px;
  border-radius: 100%;
}
.sr10-huen[class*="screen"] .img-bluetooth::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -90px;
  margin-left: -90px;
  width: 180px;
  height: 180px;
  box-sizing: content-box;
  opacity: 0.2;
  border-radius: 100%;
  transform: scale(0);
  background: var(--color-key);
  background: -webkit-radial-gradient(
    circle,
    rgba(0, 0, 0, 0) 0%,
    rgba(19, 70, 153, 0.2) 40%,
    rgba(29, 108, 235, 0.9) 100%
  );
  background: -moz-radial-gradient(
    circle,
    rgba(0, 0, 0, 0) 0%,
    rgba(19, 70, 153, 0.2) 40%,
    rgba(29, 108, 235, 0.9) 100%
  );
  background: -o-radial-gradient(circle, rgba(0, 0, 0, 0) 0%, rgba(19, 70, 153, 0.2) 40%, rgba(29, 108, 235, 0.9) 100%);
  background: radial-gradient(circle, rgba(0, 0, 0, 0) 0%, rgba(19, 70, 153, 0.2) 40%, rgba(29, 108, 235, 0.9) 100%);
}
.sr10-huen[class*="screen"] .img-bluetooth.active::before {
  -webkit-animation: srPointerLargeLayer1 1s ease-out 0.1s infinite forwards;
  -moz-animation: srPointerLargeLayer1 1s ease-out 0.1s infinite forwards;
  animation: srPointerLargeLayer1 1s ease-out 0.1s infinite forwards;
}
.sr10-huen[class*="screen"] .img-bluetooth:after {
  content: "";
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  box-sizing: content-box;
  background: #fff url(../../images/ko/showroom/sr10/img-bluetooth.svg) no-repeat center center;
  background-size: 60px auto;
  border: 6px solid #129cff;
  border-radius: 100%;
  transform: translate(-50%, -50%);
}
.sr10-huen[class*="screen"] .warning-text {
  position: absolute;
  height: 64px;
  line-height: 64px;
  padding: 0 24px;
  font-weight: 700;
  font-size: 20px;
  color: #fff;
  border-radius: 36px;
  background-color: #ff4554;
}
.sr10-huen[class*="screen"] .warning-text span {
  position: relative;
  display: inline-block;
  padding-left: 36px;
}
.sr10-huen[class*="screen"] .warning-text span:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  background-image: url(../../images/ko/showroom/sr10/icon-warning.svg);
  background-size: 28px auto;
  background-repeat: no-repeat;
}
.sr10-huen[class*="screen"] .approval-text {
  position: absolute;
  height: 64px;
  line-height: 64px;
  padding: 0 24px;
  font-weight: 700;
  font-size: 20px;
  color: #fff;
  border-radius: 36px;
  background-color: #1fb279;
}
.sr10-huen[class*="screen"] .approval-text span {
  position: relative;
  display: inline-block;
  padding-left: 36px;
}
.sr10-huen[class*="screen"] .approval-text span:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  background-image: url(../../images/ko/showroom/sr10/icon-approval.svg);
  background-size: 28px auto;
  background-repeat: no-repeat;
}
/* .sr10-huen[class*="screen"] .sr-bubble-talk {
  position: absolute;
  height: 90px;
  line-height: 90px;
  padding: 0 40px;
  font-weight: 600;
  font-size: 24px;
  text-align: center;
  border-radius: 100px;
  background-color: #fff;
}
.sr10-huen[class*="screen"] .sr-bubble-talk:before {
  content: "";
  position: absolute;
  width: 23px;
  height: 22px;
  background-image: url(../../images/ko/showroom/sr10/bg-bubble-tail.png);
  background-size: 23px auto;
  background-repeat: no-repeat;
} */
.sr10-huen[class*="screen"] .popup-center {
  flex-direction: column;
  width: 757px;
  height: 500px;
}

.sr10-huen[class*="screen"] .popup-center p {
  margin-top: 64px;
  font-weight: 600;
  font-size: 24px;
  color: #fff;
  text-align: center;
}
.sr10-huen[class*="screen"] .popup-center ul {
  display: flex;
  align-items: center;
  justify-content: center;
}
.sr10-huen[class*="screen"] .popup-center ul li:first-child {
  width: 144px;
  height: 144px;
  background: rgba(0, 0, 0, 0.24) url(../../images/ko/showroom/sr10/icon-alert.svg) no-repeat center center;
  background-size: 80px auto;
  border-radius: 100%;
}
.sr10-huen[class*="screen"] .popup-center ul li:nth-child(2) {
  position: relative;
  width: 106px;
  height: 25px;
  margin-right: 12px;
}
.sr10-huen[class*="screen"] .popup-center ul li:nth-child(2):before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 0;
  height: 3px;
  background: url(../../images/ko/showroom/sr10/bg-connecting-line.png) no-repeat left center;
}
.sr10-huen[class*="screen"] .popup-center ul li:nth-child(2) > span {
  position: absolute;
  top: 0;
  right: 0;
  width: 24px;
  height: 24px;
  border-radius: 100%;
  border: 2px solid #129cff;
  transform: scale(0);
}
.sr10-huen[class*="screen"] .popup-center.active ul li:nth-child(2) > span {
  transform: scale(1);
  transition: transform 0.5s ease 0.5s;
}
.sr10-huen[class*="screen"] .popup-center ul li:nth-child(2) > span:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 12px;
  border-radius: 100%;
  background: #129cff;
  transform: translate(-50%, -50%);
}
.sr10-huen[class*="screen"] .popup-center.active ul li:nth-child(2):before {
  animation: expandLine 0.3s forwards; /* 애니메이션 추가 */
}
@keyframes expandLine {
  to {
    width: 83px;
  }
}
.sr10-huen[class*="screen"] .popup-center ul li:last-child {
  width: 180px;
  height: 180px;
  background: url(../../images/ko/showroom/sr10/img-manager.svg) no-repeat center center;
  background-size: 180px auto;
  transform: scale(0);
}
.sr10-huen[class*="screen"] .popup-center.active ul li:last-child {
  animation: scaleUp 1s forwards; /* 애니메이션 추가 */
  animation-delay: 1s; /* 1초 후에 시작 */
}
@keyframes scaleUp {
  to {
    transform: scale(1); /* 최종 변형 */
  }
}

/* screen0 */
.sr10-huen.screen0 .showroom-background-area .showroom-background-layer {
  transition: opacity 0.5s ease;
}
.sr10-huen.screen0 .showroom-screen0-wrap {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.sr10-huen.screen0 .showroom-screen0-wrap {
  opacity: 1;
  visibility: unset;
  pointer-events: unset;
}
.sr10-huen.screen0 .showroom-screen0-wrap .showroom-step1-wrap {
  opacity: 1;
  visibility: unset;
  pointer-events: unset;
}
.wrap-online-showroom .sr10-huen.screen0 .showroom-screen0-wrap .bottom-gray-tooltip-wrap {
  left: calc((100% - 480px) / 2);
}
.sr10-huen.screen0.main .showroom-screen0-wrap .bottom-gray-tooltip-wrap.active {
  bottom: 80px;
  opacity: 1;
  visibility: unset;
  pointer-events: unset;
  transition-delay: 1s, 1s;
}
.sr10-huen.screen0.main .showroom-screen0-wrap .bottom-gray-tooltip-wrap .bottom-gray-text2 {
  display: block;
}

/* screen1 */
.sr10-huen.screen1.step1.step-intro .showroom-background-area .showroom-background-layer,
.sr10-huen.screen1.step1.step1-1 .showroom-background-area .showroom-background-layer {
  background-image: url(../../images/ko/showroom/sr10/bg-sr10-complex1-st1.webp);
  background-size: cover;
  background-position: center center;
}
.sr10-huen.screen1.step1.step1-2 .showroom-background-area .showroom-background-layer {
  background-image: url(../../images/ko/showroom/sr10/bg-sr10-complex1-st1-2-1.webp);
  background-size: cover;
  background-position: center center;
  transition: background-image 0.5s ease;
}
.sr10-huen.screen1.step1.step1-3 .showroom-background-area .showroom-background-layer {
  background-image: url(../../images/ko/showroom/sr10/bg-sr10-complex1-st1-3.webp);
  background-size: cover;
  background-position: center center;
  transition: background-image 0.5s ease;
}
.sr10-huen.screen1.step2.step-intro .showroom-background-area .showroom-background-layer,
.sr10-huen.screen1.step2.step2-1 .showroom-background-area .showroom-background-layer {
  background-image: url(../../images/ko/showroom/sr10/bg-sr10-complex2-st1.webp);
  background-size: cover;
  background-position: center center;
  transition: background-image 0.5s ease;
}
.sr10-huen.screen1.step2.step2-2 .showroom-background-area .showroom-background-layer {
  background-image: url(../../images/ko/showroom/sr10/bg-sr10-complex2-st2-1.webp);
  background-size: cover;
  background-position: center center;
  transition: background-image 0.5s ease;
}
.sr10-huen.screen1.step2.step2-3 .showroom-background-area .showroom-background-layer {
  background-image: url(../../images/ko/showroom/sr10/bg-sr10-complex2-st3.webp);
  background-size: cover;
  background-position: center center;
  transition: background-image 0.5s ease;
}
.sr10-huen.screen1.step3.step-intro .showroom-background-area .showroom-background-layer,
.sr10-huen.screen1.step3.step3-1 .showroom-background-area .showroom-background-layer {
  background-image: url(../../images/ko/showroom/sr10/bg-sr10-complex3-st1.webp);
  background-size: cover;
  background-position: center center;
  transition: background-image 0.5s ease;
}
.sr10-huen.screen1.step3.step3-2 .showroom-background-area .showroom-background-layer {
  background-image: url(../../images/ko/showroom/sr10/bg-sr10-complex3-st4.webp);
  background-size: cover;
  background-position: center center;
  transform: translate(-50%, -50%) scale(1.2);
  transition: transform 1s ease;
}
.sr10-huen.screen1.step1.step-intro .step-inner-cont.step-intro .cctv-area {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.sr10-huen.screen1.step1.step-intro .step-inner-cont.step-intro .img-cctv {
  background: #fff url(../../images/ko/showroom/sr10/img-cctv.svg) no-repeat center center;
  background-size: 165px auto;
  transform: scale(0);
}
.sr10-huen.screen1.step1.step-intro .step-inner-cont.step-intro .img-cctv.active {
  transform: scale(1);
  transition: transform 0.5s ease;
}
.sr10-huen.screen1.step1.step-intro .step-inner-cont.step-intro .bottom-gray-tooltip-wrap.active {
  bottom: 80px;
  opacity: 1;
  visibility: unset;
  pointer-events: unset;
  transition: all 0.5s;
}
.sr10-huen.screen1.step1 .showroom-step1-wrap .step1-1 .cctv-area {
  display: flex;
  position: absolute;
  top: 200px;
  right: 211px;
}
.sr10-huen.screen1.step1 .showroom-step1-wrap .step1-1 .cctv-area .img-cctv {
  display: inline-block;
  width: 165px;
  height: 104px;
  background: url(../../images/ko/showroom/sr10/img-cctv.svg) no-repeat center center;
  background-size: 165px auto;
  transition: transform 0.5s ease;
}
.sr10-huen.screen1.step1 .showroom-step1-wrap .step1-1 .stranger-area {
  position: absolute;
  top: 359px;
  left: 545px;
  width: 260px;
  height: 400px;
  background: url(../../images/ko/showroom/sr10/img-stranger.svg) no-repeat center center;
  background-size: 260px auto;
}
.sr10-huen.screen1.step1 .showroom-step1-wrap .step1-1 .target-area {
  top: 326px;
  left: 627px;
}
.sr10-huen.screen1.step1 .showroom-step1-wrap .step1-1 .warning-text {
  top: 250px;
  left: 574px;
}
.sr10-huen.screen1.step1 .showroom-step1-wrap .step1-1 .box-step1-1 {
  padding: 0 100px;
}
.sr10-huen.screen1.step1 .showroom-step1-wrap .step1-1 .box-step1-1 .list-cctv-situation {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 32px;
}
.sr10-huen.screen1.step1 .showroom-step1-wrap .step1-1 .box-step1-1 .list-cctv-situation li {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 160px;
  height: 160px;
  background-color: #fff;
  text-align: center;
  border-radius: 100%;
}
.sr10-huen.screen1.step1 .showroom-step1-wrap .step1-1 .box-step1-1 .list-cctv-situation li span {
  display: block;
  width: 88px;
  padding-top: 88px;
  line-height: 27px;
  font-weight: 600;
  font-size: 18px;
  color: #666;
  background-position: top center;
  background-repeat: no-repeat;
}
.sr10-huen.screen1.step1 .showroom-step1-wrap .step1-1 .box-step1-1 .list-cctv-situation li:nth-child(1) span {
  background-image: url(../../images/ko/showroom/sr10/icon-step1-intrusion.svg);
  background-size: 88px auto;
}
.sr10-huen.screen1.step1 .showroom-step1-wrap .step1-1 .box-step1-1 .list-cctv-situation li:nth-child(2) span {
  background-image: url(../../images/ko/showroom/sr10/icon-step1-fence.svg);
  background-size: 88px auto;
}
.sr10-huen.screen1.step1 .showroom-step1-wrap .step1-1 .box-step1-1 .list-cctv-situation li:nth-child(3) span {
  background-image: url(../../images/ko/showroom/sr10/icon-step1-stolen.svg);
  background-size: 88px auto;
}
.sr10-huen.screen1.step1 .showroom-step1-wrap .step1-1 .box-step1-1 .list-cctv-situation li:nth-child(4) span {
  background-image: url(../../images/ko/showroom/sr10/icon-step1-belongings.svg);
  background-size: 88px auto;
}
.sr10-huen.screen1.step1 .showroom-step1-wrap .step1-1 .box-step1-1 .list-cctv-situation li:nth-child(5) span {
  background-image: url(../../images/ko/showroom/sr10/icon-step1-fire.svg);
  background-size: 88px auto;
}
.sr10-huen.screen1.step1 .showroom-step1-wrap .step1-1 .box-step1-1 .list-cctv-situation li:nth-child(6) span {
  background-image: url(../../images/ko/showroom/sr10/icon-step1-fall.svg);
  background-size: 88px auto;
}
.sr10-huen.screen1.step1 .showroom-step1-wrap .step1-1 .box-step1-1 .list-cctv-situation li:nth-child(7) span {
  background-image: url(../../images/ko/showroom/sr10/icon-step1-parking.svg);
  background-size: 88px auto;
}
.sr10-huen.screen1.step1 .showroom-step1-wrap .step1-1 .box-step1-1 .list-cctv-situation + p {
  font-weight: 600;
  font-size: 24px;
  color: #fff;
  text-align: center;
}
.sr10-huen.screen1.step1 .showroom-step1-wrap .step1-2 .cctv-area {
  position: absolute;
  top: 224px;
  left: 514px;
  width: 160px;
  height: 190px;
  background-image: url(../../images/ko/showroom/sr10/img-skyview.svg);
  background-size: 160px auto;
  background-repeat: no-repeat;
}
.sr10-huen.screen1.step1
  .showroom-step1-wrap
  .step1-2
  .sr10-huen.screen1.step1
  .showroom-step1-wrap
  .step1-2
  .cctv-area
  .sr-bubble-tooltip.active {
  animation: fadeInOut 3.5s ease 1s;
}
@keyframes fadeInOut {
  0% {
    opacity: 0;
    visibility: hidden;
  }
  10% {
    opacity: 1;
    visibility: unset;
  }
  90% {
    opacity: 1;
    visibility: unset;
  }
  100% {
    opacity: 0;
    visibility: hidden;
  }
}
.sr10-huen.screen1.step1 .showroom-step1-wrap .step1-2 .cctv-area {
  opacity: 0;
  transition: opacity 0.5s ease;
}
.sr10-huen.screen1.step1 .showroom-step1-wrap .step1-2 .cctv-area.active {
  opacity: 1;
  transition: opacity 0.5s ease;
}
.sr10-huen.screen1.step1 .showroom-step1-wrap .step1-2 .tooltip1.active {
  transition-delay: 1s;
}
.sr10-huen.screen1.step1 .showroom-step1-wrap .step1-2 .tooltip3.active {
  transition-delay: 0s;
}
.sr10-huen.screen1.step1 .showroom-step1-wrap .step1-2 .cctv-area .sr-bubble-tooltip {
  bottom: initial;
  top: 0;
  left: 3px;
}
.sr10-huen.screen1.step1 .showroom-step1-wrap .step1-2 .cctv-light {
  top: 568px;
  right: 21px;
  transform: rotate(29deg);
  opacity: 0;
  transition: opacity 0.5s ease;
}
.sr10-huen.screen1.step1 .showroom-step1-wrap .step1-2 .cctv-light.active {
  opacity: 1;
  transition: opacity 0.5s ease;
}
/* .sr10-huen.screen1.step1 .showroom-step1-wrap .step1-2 .bg-change {
  width: 100%;
  height: 100%;
  background: url(../../images/ko/showroom/sr10/bg-sr10-complex1-st1-2-2.webp)
    no-repeat center center;
  background-size: cover;
} */
.sr10-huen.screen1.step1 .showroom-step1-wrap .step1-3 .cctv-area {
  position: absolute;
  top: 185px;
  left: 280px;
  width: 160px;
  height: 166px;
}
.sr10-huen.screen1.step1 .showroom-step1-wrap .step1-3 .cctv-area .img-cctv {
  width: 160px;
  height: 166px;
  background: url(../../images/ko/showroom/sr10/img-cctv-2.svg) no-repeat center center;
  background-size: 160px auto;
}
.sr10-huen.screen1.step1 .showroom-step1-wrap .step1-3 .cctv-area .sr-bubble-tooltip {
  bottom: 0;
  left: 11px;
}
.sr10-huen.screen1.step1 .showroom-step1-wrap .step1-3 .fire-area {
  position: absolute;
  top: 455px;
  left: 776px;
  width: 180px;
  height: 180px;
  background: url(../../images/ko/showroom/sr10/img-fire.png) no-repeat center center;
  background-size: 180px auto;
}
.sr10-huen.screen1.step1 .showroom-step1-wrap .step1-3 .cctv-light {
  position: absolute;
  top: 0;
  left: 156px;
  transform: rotate(-4deg);
}
.sr10-huen.screen1.step1 .showroom-step1-wrap .step1-3 .target-area {
  position: absolute;
  top: 32px;
  left: 4px;
  transition: transform 0.5s ease;
}
.sr10-huen.screen1.step2 .showroom-step2-wrap .step-intro .sr-list-clr-text.type-show.active:nth-of-type(1) {
  opacity: 1;
  animation: fadeOut 0.5s ease 3s;
}
@keyframes fadeOut {
  to {
    opacity: 0;
  }
}
.sr10-huen.screen1.step2 .showroom-step2-wrap .step-intro .sr-list-clr-text.type-show li {
  background-position: center center;
  background-repeat: no-repeat;
}
.sr10-huen.screen1.step2 .showroom-step2-wrap .step-intro .sr-list-clr-text.type-show:nth-of-type(1) li:first-child {
  background-image: url(../../images/ko/showroom/sr10/img-list-onepass.svg);
  background-size: 95px auto;
}
.sr10-huen.screen1.step2 .showroom-step2-wrap .step-intro .sr-list-clr-text.type-show:nth-of-type(1) li:nth-child(2) {
  background-image: url(../../images/ko/showroom/sr10/img-list-bell.svg);
  background-size: 120px auto;
}
.sr10-huen.screen1.step2 .showroom-step2-wrap .step-intro .sr-list-clr-text.type-show:nth-of-type(1) li:last-child {
  background-image: url(../../images/ko/showroom/sr10/img-list-ade.svg);
  background-size: 118px auto;
}
.sr10-huen.screen1.step2 .showroom-step2-wrap .step2-1 .onepass-area {
  position: absolute;
  top: 431px;
  left: 453px;
  width: 95px;
  height: 156px;
}
.sr10-huen.screen1.step2 .showroom-step2-wrap .step2-1 .onepass-area .img-onepass {
  height: 156px;
  background: url(../../images/ko/showroom/sr10/img-onepass.svg) no-repeat center center;
  background-size: 95px auto;
}
.sr10-huen.screen1.step2 .showroom-step2-wrap .step2-1 .img-person {
  position: absolute;
  top: 380px;
  left: 763px;
  width: 152px;
  height: 432px;
  background: url(../../images/ko/showroom/sr10/img-male.svg) no-repeat center center;
  background-size: 152px auto;
}
.sr10-huen.screen1.step2 .showroom-step2-wrap .step2-1 .sr-bubble-tooltip {
  bottom: 0;
  left: 5px;
}
.sr10-huen.screen1.step2 .showroom-step2-wrap .step2-1 .img-bluetooth {
  top: 440px;
  left: 543px;
}
.sr10-huen.screen1.step2 .showroom-step2-wrap .step2-1 .approval-text {
  top: 292px;
  left: 733px;
}
/* .sr10-huen.screen1.step2 .showroom-step2-wrap .step2-2 .bg {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 2320px;
  height: 1480px;
  background-image: url(../../images/ko/showroom/sr10/bg-sr10-complex2-st2-2.webp);
  background-size: cover;
  background-position: center center;
  transition: opacity 0.5s ease;
  transform: translate(-50%, -50%);
} */
.sr10-huen.screen1.step2 .showroom-step2-wrap .step2-2 .bell-area {
  position: absolute;
  top: 266px;
  left: 427px;
  width: 160px;
  height: 150px;
}
.sr10-huen.screen1.step2 .showroom-step2-wrap .step2-2 .bell-area .sr-bubble-tooltip {
  bottom: 0;
  left: 22px;
}
.sr10-huen.screen1.step2 .showroom-step2-wrap .step2-2 .bell-area .img-bell {
  position: relative;
  width: 100%;
  height: 80px;
  background: url(../../images/ko/showroom/sr10/img-bell.svg) no-repeat center center;
  background-size: 80px auto;
}
.sr10-huen.screen1.step2 .showroom-step2-wrap .step2-2 .bell-area .alert-area {
  position: absolute;
  z-index: -1;
  top: -76px;
  left: -39px;
  width: 240px;
  height: 240px;
}
.sr10-huen.screen1.step2 .showroom-step2-wrap .step2-2 .bell-area .alert-area .alert-active {
  display: block;
  width: 100%;
  height: 100%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(235, 29, 32, 0) 0%, rgba(235, 29, 32, 0.2) 100%);
  border-radius: 100%;
  transform: scale(0);
}
.sr10-huen.screen1.step2 .showroom-step2-wrap .step2-2 .bell-area .alert-area .alert-active.active {
  -webkit-animation: srPointerLargeLayer1 1s ease-out 0.1s infinite forwards;
  -moz-animation: srPointerLargeLayer1 1s ease-out 0.1s infinite forwards;
  animation: srPointerLargeLayer1 1s ease-out 0.1s infinite forwards;
}
.sr10-huen.screen1.step2 .showroom-step2-wrap .step2-2 .bell-area .alert-area .warning-text {
  bottom: -4px;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
}
.sr10-huen.screen1.step2 .showroom-step2-wrap .step2-2 .person-area {
  position: absolute;
  top: 472px;
  left: 665px;
  width: 190px;
  height: 540px;
}
.sr10-huen.screen1.step2 .showroom-step2-wrap .step2-2 .person-area .img-person {
  width: 100%;
  height: 100%;
  background: url(../../images/ko/showroom/sr10/img-grandpa.svg) no-repeat center center;
  background-size: 190px auto;
}
.sr10-huen.screen1.step2 .showroom-step2-wrap .step2-2 .person-area .sr-bubble-talk {
  top: -85px;
  left: 101px;
}
/* .sr10-huen.screen1.step2
  .showroom-step2-wrap
  .step2-2
  .person-area
  .sr-bubble-talk:before {
  bottom: -18px;
  left: 44px;
  transform: scaleX(-1);
} */
.sr10-huen.screen1.step2 .showroom-step2-wrap .step2-3 .aed-area {
  position: absolute;
  top: 322px;
  left: 664px;
  width: 120px;
  height: 367px;
}
.sr10-huen.screen1.step2 .showroom-step2-wrap .step2-3 .aed-area .img-aed {
  width: 100%;
  height: 100%;
  background: url(../../images/ko/showroom/sr10/img-aed.png) no-repeat center center;
  background-size: 120px auto;
}
.sr10-huen.screen1.step2 .showroom-step2-wrap .step2-3 .detail-area {
  position: absolute;
  top: 358px;
  left: 522px;
  width: 348px;
  height: 348px;
}
.sr10-huen.screen1.step2 .showroom-step2-wrap .step2-3 .detail-area .img-ade {
  display: block;
  width: 100%;
  height: 100%;
  border: 8px solid #ff4554;
  background: #fff url(../../images/ko/showroom/sr10/img-ade.svg) no-repeat center center;
  background-size: 152px auto;
  border-radius: 100%;
}
.sr10-huen.screen1.step2 .showroom-step2-wrap .step2-3 .detail-area .touch-hand {
  position: absolute;
  bottom: 35px;
  right: 88px;
  width: 95px;
  height: 108px;
  background: url(../../images/ko/showroom/sr10/img-touch-hand.svg) no-repeat center center;
  background-size: 95px auto;
}
.sr10-huen.screen1.step2 .showroom-step2-wrap .step2-3 .detail-area .active-ade {
  position: absolute;
  width: 348px;
  height: 348px;
  left: 50%;
  top: 50%;
  margin-top: -174px;
  margin-left: -174px;
  background: radial-gradient(50% 50% at 50% 50%, rgba(235, 29, 32, 0) 0%, rgba(235, 29, 32, 0.2) 100%);
  border-radius: 100%;
  transform: scale(0);
  z-index: -1;
}
.sr10-huen.screen1.step2 .showroom-step2-wrap .step2-3 .detail-area .active-ade.active {
  -webkit-animation: srPointerLargeLayer1 1s ease-out 0.1s infinite forwards;
  -moz-animation: srPointerLargeLayer1 1s ease-out 0.1s infinite forwards;
  animation: srPointerLargeLayer1 1s ease-out 0.1s infinite forwards;
}
.sr10-huen.screen1.step3 .showroom-step3-wrap .step-intro .sr-list-clr-text.type-show.active {
  opacity: 1;
  animation: fadeOut 0.5s ease 4s;
}
@keyframes fadeOut {
  to {
    opacity: 0;
  }
}
.sr10-huen.screen1.step3 .showroom-step3-wrap .step-intro .sr-list-clr-text.list-img li {
  background-position: center center;
  background-repeat: no-repeat;
}
.sr10-huen.screen1.step3 .showroom-step3-wrap .step-intro .sr-list-clr-text.list-img li:nth-child(1) {
  background-image: url(../../images/ko/showroom/sr10/img-list-light-bottom.svg);
  background-size: 82px auto;
}
.sr10-huen.screen1.step3 .showroom-step3-wrap .step-intro .sr-list-clr-text.list-img li:nth-child(2) {
  background-image: url(../../images/ko/showroom/sr10/img-list-light-top.svg);
  background-size: 132px auto;
}
.sr10-huen.screen1.step3 .showroom-step3-wrap .step3-1 .person-area {
  position: absolute;
  top: 427px;
  left: 856px;
  width: 152px;
  height: 432px;
}
.sr10-huen.screen1.step3 .showroom-step3-wrap .step3-1 .person-area .img-person {
  width: 100%;
  height: 100%;
  background: url(../../images/ko/showroom/sr10/img-student.svg) no-repeat center center;
  background-size: 152px auto;
}
.sr10-huen.screen1.step3 .showroom-step3-wrap .step3-1 .sr-bubble-talk {
  position: absolute;
  top: -90px;
  right: 72px;
  white-space: nowrap;
}
.sr10-huen.screen1.step3 .showroom-step3-wrap .step3-1 .sr-bubble-talk:before {
  left: auto;
  right: 56px;
  transform: scaleX(-1);
}
.sr10-huen.screen1.step3 .showroom-step3-wrap .step3-2 .light-area {
  position: absolute;
  top: 130px;
  left: 697px;
  width: 160px;
  height: 168px;
}
.sr10-huen.screen1.step3 .showroom-step3-wrap .step3-2 .light-area .img-light {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(../../images/ko/showroom/sr10/img-security-light.svg) no-repeat center bottom;
  background-size: 104px auto;
}
.sr10-huen.screen1.step3
  .showroom-step3-wrap
  .step3-2
  .light-area
  .img-light[data-screen-target="screen1-step3-step2-1"] {
  background: url(../../images/ko/showroom/sr10/img-security-light.svg) no-repeat center bottom;
  transition-delay: 1s;
}
.sr10-huen.screen1.step3
  .showroom-step3-wrap
  .step3-2
  .light-area
  .img-light[data-screen-target="screen1-step3-step2-3"] {
  background: url(../../images/ko/showroom/sr10/img-security-light-on.svg) no-repeat center bottom;
}
.sr10-huen.screen1.step3 .showroom-step3-wrap .step3-2 .light-area .sr-bubble-tooltip {
  bottom: initial;
  top: 0;
  left: 22px;
  transition-delay: 1s;
}
.sr10-huen.screen1.step3 .showroom-step3-wrap .step3-2 .light-area .img-spot-light {
  position: absolute;
  top: 114px;
  right: 94px;
  width: 376px;
  height: 500px;
  background: url(../../images/ko/showroom/sr10/img-spot-light.png) no-repeat center bottom;
}
.sr10-huen.screen1.step3 .showroom-step3-wrap .step3-2 .popup-box:not(.popup-complete) {
  flex-direction: column;
  width: 1020px;
  height: 504px;
  gap: 64px;
}
.sr10-huen.screen1.step3 .showroom-step3-wrap .step3-2 .popup-box ul {
  display: flex;
  flex-direction: row;
  gap: 46px;
}
.sr10-huen.screen1.step3 .showroom-step3-wrap .step3-2 .popup-box ul li {
  display: flex;
  width: 220px;
  height: 220px;
}
.sr10-huen.screen1.step3 .showroom-step3-wrap .step3-2 .popup-box ul li:nth-child(1) {
  background: url(../../images/ko/showroom/sr10/img-list-security-light1.svg) no-repeat center center;
  background-size: 220px auto;
}

.sr10-huen.screen1.step3 .showroom-step3-wrap .step3-2 .popup-box ul li:nth-child(2) {
  background: url(../../images/ko/showroom/sr10/img-list-security-light2.svg) no-repeat center center;
  background-size: 220px auto;
}
.sr10-huen.screen1.step3 .showroom-step3-wrap .step3-2 .popup-box ul li:nth-child(3) {
  background: url(../../images/ko/showroom/sr10/img-list-security-light3.svg) no-repeat center center;
  background-size: 220px auto;
}
.sr10-huen.screen1.step3 .showroom-step3-wrap .step3-2 .popup-box:not(.popup-complete) p {
  font-weight: 600;
  font-size: 24px;
  color: #fff;
  text-align: center;
}
/* .sr10-huen.screen1.step3 .showroom-step3-wrap .step3-2 .popup-complete .desc {
  background: url(../../images/ko/showroom/sr10/bg-complete-screen1.svg) no-repeat top center;
  background-size: 544px auto;
  } */

.sr10-huen.screen1.step4 .showroom-background-area .showroom-background-layer {
  background-image: url(../../images/ko/showroom/sr10/bg-sr10-screen1-complex1-st4-1.webp);
  background-size: contain;
}
.sr10-huen.screen1.step4 .popup-complete .desc {
  background: url(../../images/ko/showroom/sr10/bg-complete-screen1.svg) no-repeat top center;
  background-size: 544px auto;
}
.sr10-huen.screen1.step4.step4-1 .bottom-gray-tooltip-wrap {
  transition-delay: 1s;
}
.sr10-huen.screen1.step4.step4-1 .img-wallpad {
  position: absolute;
  top: 457px;
  left: 474px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 85px;
  height: 83px;
  background: url(../../images/ko/showroom/sr10/img-wallpad.svg) no-repeat center;
  background-size: contain;
  opacity: 1;
  visibility: unset;
}
.sr10-huen.screen1.step4.step4-1 .img-wallpad .warning.active {
  position: absolute;
  z-index: -1;
  display: inline-block;
  width: 240px;
  height: 240px;
  background: radial-gradient(circle, rgba(235, 29, 32, 0) 0%, rgba(235, 29, 32) 100%);
  border-radius: 50%;
  animation: warning-layer 1s ease-out 1s infinite both;
}
@keyframes warning-layer {
  0% {
    opacity: 0;
    transform: scale(0);
  }
  100% {
    opacity: 0.2;
    transform: scale(1);
  }
}
.sr10-huen.screen1.step4.step4-1 .sr-bubble-tooltip1 {
  position: absolute;
  top: 552px;
  left: 474px;
}

.sr10-huen.screen1.step4.step4-1 .img-sensor {
  position: absolute;
  top: 312px;
  left: 682px;
  display: inline-block;
  width: 52px;
  height: 32px;
  background: url(../../images/ko/showroom/sr10/img-sensor.svg) no-repeat center;
  background-size: contain;
}
.sr10-huen.screen1.step4.step4-1 .sr-bubble-tooltip2 {
  position: absolute;
  top: 242px;
  left: 655px;
}
.sr10-huen.screen1.step4.step4-1 .detail-area .warning-text {
  position: absolute;
  top: 572px;
  left: 373px;
  display: inline-block;
  margin-top: 24px;
}
.sr10-huen.screen1.step4.step4-1 .popup-box:not(.popup-complete) {
  width: 1123px;
  height: 802px;
}
.sr10-huen.screen1.step4.step4-1 [class^="step-sensor"] {
  position: relative;
  display: flex;
  justify-content: center;
}
.sr10-huen.screen1.step4.step4-1 [class^="step-sensor"] .name {
  display: inline-block;
  padding: 15px 24px;
  background-color: #333;
  color: #fff;
  border: 2px solid #129cff;
  border-radius: 200px;
  text-align: center;
  white-space: nowrap;
}
.sr10-huen.screen1.step4.step4-1 [class^="step-sensor"] .detail {
  margin-top: 8px;
  font-size: 16px;
  font-weight: 600;
  color: #999999;
}
.sr10-huen.screen1.step4.step4-1 [class^="step-sensor"] .items {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: scale(0);
  transition: transform 0.5s 0.5s;
}
.sr10-huen.screen1.step4.step4-1 [class^="step-sensor"] .items > i {
  display: block;
  width: 144px;
  height: 144px;
  background-color: #fff;
  background-repeat: no-repeat;
  background-position: center center;
  border-radius: 50%;
}
.sr10-huen.screen1.step4.step4-1 [class^="step-sensor"] .items .name {
  margin-top: 24px;
}
.sr10-huen.screen1.step4.step4-1 [class^="step-sensor"] > li {
  position: relative;
  transition: none;
}
.sr10-huen.screen1.step4.step4-1 [class^="step-sensor"] > li.active .items {
  transform: scale(1);
}
.sr10-huen.screen1.step4.step4-1 .step-sensor1 > li.active .line {
  width: 234px;
}
.sr10-huen.screen1.step4.step4-1 .step-sensor1 .line {
  position: absolute;
  top: 60px;
  left: 0;
  display: inline-block;
  width: 0;
  height: 24px;
  background: url(../../images/ko/showroom/sr10/img-line1.png) no-repeat left;
  background-size: 232px 24px;
  transition: width 0.5s;
}
.sr10-huen.screen1.step4.step4-1 .step-sensor1 > li:nth-child(1) .items > i {
  background-color: rgba(0, 0, 0, 0.24);
  background-image: url(../../images/ko/showroom/sr10/icon-alert.svg);
  background-size: 81px 81px;
}
.sr10-huen.screen1.step4.step4-1 .step-sensor1 > li:nth-child(2) {
  margin-left: -8px;
  padding-left: 231px;
}
.sr10-huen.screen1.step4.step4-1 .step-sensor1 > li:nth-child(2) .items > i {
  background-image: url(../../images/ko/showroom/sr10/icon-huen-sw.svg);
  background-size: 61px 81px;
}
.sr10-huen.screen1.step4.step4-1 .step-sensor1 > li:nth-child(3) {
  margin-left: -18px;
  padding-left: 231px;
}
.sr10-huen.screen1.step4.step4-1 .step-sensor1 > li:nth-child(3) .items > i {
  background-image: url(../../images/ko/showroom/sr10/icon-saftycenter.svg);
  background-size: 80px 80px;
}
.sr10-huen.screen1.step4.step4-1 .step-sensor2 {
  flex-direction: row-reverse;
  align-items: center;
  margin: 36px 8px 0 0;
}
.sr10-huen.screen1.step4.step4-1 .step-sensor2 .line .name {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease 0.5s;
}
.sr10-huen.screen1.step4.step4-1 .step-sensor2 > li.active .line .name {
  opacity: 1;
  visibility: unset;
}
.sr10-huen.screen1.step4.step4-1 .step-sensor2 > li:nth-child(1) .line::before {
  content: "";
  position: absolute;
  top: -126px;
  right: -46px;
  display: inline-block;
  width: 2px;
  height: 0;
  background: url(../../images/ko/showroom/sr10/img-line2-1.png) no-repeat right;
  background-size: 2px 156px;
}
.sr10-huen.screen1.step4.step4-1 .step-sensor2 > li:nth-child(1) .line::after {
  content: "";
  position: absolute;
  top: 17px;
  right: -44px;
  z-index: -1;
  width: 0;
  height: 24px;
  background: url(../../images/ko/showroom/sr10/img-line2-2.png) no-repeat right;
  background-size: 287px 24px;
}
.sr10-huen.screen1.step4.step4-1 .step-sensor2 > li:nth-child(1).active .line::before {
  height: 156px;
  transition: height 0.5s;
}
.sr10-huen.screen1.step4.step4-1 .step-sensor2 > li:nth-child(1).active .line::after {
  width: 287px;
  transition: width 0.5s 0.5s;
}
.sr10-huen.screen1.step4.step4-1 .step-sensor2 > li:nth-child(2) .items > i {
  width: 180px;
  height: 180px;
  background-image: url(../../images/ko/showroom/sr10/icon-guard.svg);
  margin: 0 88px 0 76px;
}
.sr10-huen.screen1.step4.step4-1 .step-sensor2 > li:nth-child(3) .name {
  background-color: #129cff;
  transition-delay: 0s;
}
.sr10-huen.screen1.step4.step4-1 .step-sensor2 > li:nth-child(3) .line::before {
  content: "";
  position: absolute;
  top: 30px;
  right: -83px;
  z-index: -1;
  display: inline-block;
  width: 0;
  height: 2px;
  background: url(../../images/ko/showroom/sr10/img-line3-1.png) no-repeat right;
  background-size: 316px 2px;
}
.sr10-huen.screen1.step4.step4-1 .step-sensor2 > li:nth-child(3) .line::after {
  content: "";
  position: absolute;
  bottom: 30px;
  left: -58px;
  display: inline-block;
  width: 24px;
  height: 0;
  background: url(../../images/ko/showroom/sr10/img-line3-2.png) no-repeat right;
  background-size: 24px 137px;
}
.sr10-huen.screen1.step4.step4-1 .step-sensor2 > li:nth-child(3).active .line::before {
  width: 316px;
  transition: width 0.5s;
}
.sr10-huen.screen1.step4.step4-1 .step-sensor2 > li:nth-child(3).active .line::after {
  height: 137px;
  transition: height 0.5s 0.5s;
}

.sr10-huen[class*="screen"] .warning-text.complete {
  background-color: #1fb279;
}
.sr10-huen[class*="screen"] .warning-text.complete span::before {
  background-image: url(../../images/ko/showroom/sr10/icon-approval.svg);
}
.sr10-huen .sr-person-sc1-1 {
  position: absolute;
  top: 374px;
  left: 725px;
  width: 320px;
  height: 492px;
  background-image: url(../../images/ko/showroom/sr10/img-person6.svg);
}
.sr10-huen .sr-person-sc1-2 {
  position: absolute;
  top: 387px;
  left: 790px;
  width: 152px;
  height: 432px;
  background-image: url(../../images/ko/showroom/sr10/img-person7.svg);
}
.sr10-huen .sr-person-sc1-3 {
  position: absolute;
  top: 363px;
  left: 950px;
  width: 190px;
  height: 456px;
  background-image: url(../../images/ko/showroom/sr10/img-person8.svg);
}
.sr10-huen .sr-person-sc3-1 {
  position: absolute;
  top: 457px;
  left: 1012px;
  width: 211px;
  height: 432px;
  background-image: url(../../images/ko/showroom/sr10/img-person5.svg);
}
.sr10-huen .sr-person-sc4-1 {
  position: absolute;
  top: 307px;
  left: 808px;
  width: 152px;
  height: 432px;
  background-image: url(../../images/ko/showroom/sr10/img-person2.svg);
}
.sr10-huen .sr-person-sc4-2 {
  position: absolute;
  top: 382px;
  left: 999px;
  width: 152px;
  height: 432px;
  background-image: url(../../images/ko/showroom/sr10/img-person3.svg);
}
.sr10-huen .sr-person-sc4-3 {
  position: absolute;
  top: 382px;
  left: 999px;
  width: 152px;
  height: 432px;
  background-image: url(../../images/ko/showroom/sr10/img-person4.svg);
}
.sr10-huen .sr-person-sc4-4 {
  position: absolute;
  top: 445px;
  left: 542px;
  width: 152px;
  height: 432px;
  background-image: url(../../images/ko/showroom/sr10/img-person4.svg);
}
.sr10-huen .sr-person-sc5-1 {
  position: absolute;
  top: 390px;
  left: 329px;
  width: 138px;
  height: 393px;
  background-image: url(../../images/ko/showroom/sr10/img-person1.svg);
}
.sr10-huen .sr-dispenser {
  position: absolute;
  top: 248px;
  left: 561px;
  width: 270px;
  height: 497px;
  background-image: url(../../images/ko/showroom/sr10/img-dispenser1.svg);
  background-repeat: no-repeat;
  background-size: contain;
}
.sr10-huen .sr-dispenser2 {
  background-image: url(../../images/ko/showroom/sr10/img-dispenser2.svg);
}
.sr10-huen .sr-light-beam {
  position: absolute;
  top: 391px;
  left: 0;
  width: 872px;
  height: 689px;
  background-image: url(../../images/ko/showroom/sr10/bg-screen4-beam.png);
  background-repeat: no-repeat;
  background-size: contain;
}
.sr10-huen .sr-mobile-app {
  position: absolute;
  top: 220px;
  left: 403px;
  width: 285px;
  height: 575px;
  background-image: url(../../images/ko/showroom/sr10/img-mobile-app.png);
  background-repeat: no-repeat;
  background-size: contain;
}
.sr10-huen .sr-security-center {
  position: absolute;
  top: 234px;
  left: 538px;
  width: 305px;
  height: 145px;
  background-image: url(../../images/ko/showroom/sr10/img-security-center.png);
  background-repeat: no-repeat;
  background-size: contain;
  transition: opacity 0.5s ease;
}
.sr10-huen .sr-block-item {
  position: absolute;
  top: 427px;
  left: 468px;
  width: 513px;
  height: 370px;
  background-image: url(../../images/ko/showroom/sr10/img-block.png);
  background-repeat: no-repeat;
  background-size: contain;
}
.sr10-huen.screen2.step1.step1-1 .showroom-background-area .showroom-background-layer {
  background-image: url(../../images/ko/showroom/sr10/bg-sr10-screen2-complex1-st1.webp);
  background-size: cover;
  background-position: center center;
  transition: opacity 0.5s ease;
}
.sr10-huen.screen2.step1.step1-1 .showroom-background-area .showroom-background-layer.active {
  transform: translate(calc(-50% + 100px), -50%) scale(1.1);
  transition: transform 1s ease;
}
.sr10-huen.screen2.step1.step1-1 [data-screen-target="screen2-step1-step1-1"] {
  transition-delay: 1s;
}
.sr10-huen.screen2.step2.step2-1 .showroom-background-area .showroom-background-layer {
  background-image: url(../../images/ko/showroom/sr10/bg-sr10-screen2-complex1-st2.webp);
  background-size: cover;
  background-position: center center;
  transition: opacity 0.5s ease;
}
.sr10-huen.screen2.step2.step2-1 [data-screen-target="screen2-step2-step1-1"].active {
  transition-delay: 1s;
}
.sr10-huen.screen2.step2.step2-1 .step-inner-cont.step1-1 {
  opacity: 1;
  visibility: unset;
  pointer-events: unset;
}
.sr10-huen.screen2.step2.step2-1 .popup-complete .desc {
  background: url(../../images/ko/showroom/sr10/bg-complete-screen1.svg) no-repeat top center;
  background-size: 544px auto;
}
.sr10-huen.screen4.step1.step1-1 .showroom-background-area .showroom-background-layer {
  background-image: url(../../images/ko/showroom/sr10/bg-sr10-screen3-complex1-st1.webp);
  background-size: cover;
  background-position: center center;
  transition: opacity 0.5s ease;
}
.sr10-huen.screen4.step1.step1-1 .sr-mobile-app {
  left: 527px;
  background-image: url(../../images/ko/showroom/sr10/img-mobile-app5.png);
}
.sr10-huen.screen4.step1.step1-1 .sr-mobile-app2 {
  background-image: url(../../images/ko/showroom/sr10/img-mobile-app6.png);
}
.sr10-huen.screen4.step1.step1-1 .sr-mobile-app3 {
  background-image: url(../../images/ko/showroom/sr10/img-mobile-app7.png);
}
.sr10-huen.screen4.step1.step1-1 .sr-mobile-app4 {
  background-image: url(../../images/ko/showroom/sr10/img-mobile-app8.png);
}
.sr10-huen.screen4.step1.step1-1 .warning-text.complete {
  top: 369px;
  left: 970px;
}
.sr10-huen.screen4.step1.step1-1 .popup-complete .desc {
  background: url(../../images/ko/showroom/sr10/bg-complete-screen1.svg) no-repeat top center;
  background-size: 544px auto;
}
.sr10-huen.screen3.step1.step1-1 .showroom-background-area .showroom-background-layer {
  background-image: url(../../images/ko/showroom/sr10/bg-sr10-screen4-complex1-st1.webp);
  background-size: cover;
  background-position: center center;
  transition: opacity 0.5s ease;
}
.sr10-huen.screen3.step1.step1-1 .target-area {
  top: 592px;
  left: 478px;
  transition-delay: 0s;
}
.sr10-huen.screen3.step1.step1-1 .sr-mobile-app2 {
  background-image: url(../../images/ko/showroom/sr10/img-mobile-app2.png);
}
.sr10-huen.screen3.step2.step2-1 .showroom-background-area .showroom-background-layer {
  background-image: url(../../images/ko/showroom/sr10/bg-sr10-screen4-complex1-st2.webp);
  background-size: cover;
  background-position: center center;
  transition: opacity 0.5s ease;
}
.sr10-huen.screen3.step2.step2-1 .sr-mobile-app3 {
  left: 553px;
  background-image: url(../../images/ko/showroom/sr10/img-mobile-app3.png);
}
.sr10-huen.screen3.step2.step2-1 .sr-mobile-app4 {
  left: 553px;
  background-image: url(../../images/ko/showroom/sr10/img-mobile-app4.png);
}
.sr10-huen.screen3.step2.step2-1 .sr-bubble-talk1 {
  top: 272px;
  left: 613px;
}
.sr10-huen.screen3.step2.step2-1 .sr-bubble-talk2 {
  top: 339px;
  left: 610px;
}
.sr10-huen.screen3.step2.step2-1 .warning-text {
  top: 333px;
  left: 723px;
}
.sr10-huen.screen3.step2.step2-1 .sr-person-sc4-2-1 {
  top: 382px;
  left: 352px;
}
.sr10-huen.screen3.step2.step2-1 .popup-complete .desc {
  background: url(../../images/ko/showroom/sr10/bg-complete-screen1.svg) no-repeat top center;
  background-size: 544px auto;
}

/* screen5 */
.sr10-huen.screen5.step1 .showroom-background-area .showroom-background-layer {
  background-image: url(../../images/ko/showroom/sr10/bg-sr10-exterior-st1.webp);
  background-size: contain;
  background-position: center center;
}

.sr10-huen.screen5.step2 .showroom-background-area .showroom-background-layer,
.sr10-huen.screen5.step2.step2-1 .showroom-background-area .showroom-background-layer {
  background-image: url(../../images/ko/showroom/sr10/bg-sr10-exterior-st2.webp);
  background-size: contain;
  background-position: center center;
}

.sr10-huen.screen5.step1.step-intro .step-inner-cont.step-intro .bottom-gray-tooltip-wrap.active {
  bottom: 80px;
  opacity: 1;
  visibility: unset;
  pointer-events: unset;
  transition: all 0.5s;
}

.sr10-huen.screen5.step1 .showroom-step1-wrap .step1-1 .stranger-area {
  position: absolute;
  top: 424px;
  left: 765px;
  width: 260px;
  height: 400px;
  background: url(../../images/ko/showroom/sr10/img-stranger-left.svg) no-repeat center center;
  background-size: 260px auto;
}

.sr10-huen.screen5.step1 .showroom-step1-wrap .step1-1 .warning-text {
  top: 336px;
  left: 747px;
}

.sr10-huen.screen5.step1 .showroom-step1-wrap .step1-1 .femal-area {
  position: absolute;
  top: 328px;
  left: 928px;
  width: 152px;
  height: 432px;
  background: url(../../images/ko/showroom/sr10/img-femal.svg) no-repeat center center;
  background-size: 152px auto;
}

.sr10-huen.screen5.step1 .showroom-step1-wrap .img-bluetooth {
  top: 406px;
  left: 558px;
}

.sr10-huen.screen5.step1 .showroom-step1-wrap .approval-text {
  top: 248px;
  left: 889px;
}

.sr10-huen.screen5.step2 .showroom-step2-wrap .step2-1 .motorcycle-area {
  position: absolute;
  top: 320px;
  left: 575px;
  width: 296px;
  height: 432px;
  background: url(../../images/ko/showroom/sr10/img-motorcycle.svg) no-repeat center center;
  background-size: 296px auto;
}

.sr10-huen.screen5.step2 .showroom-step2-wrap .step2-1 .warning-text {
  top: 232px;
  left: 575px;
}

.sr10-huen.screen5.step2 .showroom-step2-wrap .popup-box:not(.popup-complete) {
  flex-direction: column;
  width: 909px;
  height: 444px;
  gap: 64px;
}
.sr10-huen.screen5.step2 .showroom-step2-wrap .popup-box ul {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  gap: 46px;
}
.sr10-huen.screen5.step2 .showroom-step2-wrap .popup-box ul li {
  display: flex;
}
.sr10-huen.screen5.step2 .showroom-step2-wrap .popup-box ul li:nth-child(1) {
  width: 161px;
  height: 160px;
  background: url(../../images/ko/showroom/sr10/img-list-outside-bollard1.svg) no-repeat center center;
  background-size: 161px auto;
}

.sr10-huen.screen5.step2 .showroom-step2-wrap .popup-box ul li:nth-child(2) {
  width: 289px;
  height: 160px;
  background: url(../../images/ko/showroom/sr10/img-list-outside-bollard2.svg) no-repeat center center;
  background-size: 289px auto;
}
.sr10-huen.screen5.step2 .showroom-step2-wrap .popup-box:not(.popup-complete) p {
  font-weight: 600;
  font-size: 24px;
  color: #fff;
  margin-top: 64px;
}
.sr10-huen.screen5.step2 .showroom-step2-wrap .girl-area {
  position: absolute;
  top: 320px;
  left: 647px;
  width: 152px;
  height: 432px;
}
.sr10-huen.screen5.step2 .showroom-step2-wrap .girl-area .img-person {
  width: 100%;
  height: 100%;
  background: url(../../images/ko/showroom/sr10/img-girl.svg) no-repeat center center;
  background-size: 152px auto;
}
.sr10-huen.screen5.step2 .showroom-step2-wrap .girl-area .sr-bubble-talk {
  width: 373px;
  top: -105px;
  left: 76px;
}
/* .sr10-huen.screen5.step2
  .showroom-step2-wrap
  .girl-area
  .sr-bubble-talk:before {
  bottom: -18px;
  left: 44px;
  transform: scaleX(-1);
} */
.sr10-huen.screen5.step2 .showroom-step2-wrap .popup-complete .desc {
  background: url(../../images/ko/showroom/sr10/bg-complete-screen1.svg) no-repeat top center;
  background-size: 544px auto;
}

/* 견적 내기 : CCTV 배치 대기 영역 */
.sr-pricing.main .cctv-wrap .cctv-item:before,
.sr-pricing.main .cctv-wrap .cctv-item:after {
  display: none;
}
.sr-pricing .cctv-wrap-area {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
/* .sr-pricing .cctv-iframe-area {
  position: fixed;
  transform: translate(-50%, -50%);
} */
.sr-pricing .cctv-waiting-area {
  position: fixed;
  top: 50%;
  right: 380px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 112px;
  height: 400px;
  padding: 16px;
  transform: translateY(-50%);
  border-radius: 100px;
  border: 1px solid #fff;
  backdrop-filter: blur(100px);
  background: rgba(246, 246, 246, 0.75);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.5s ease, visibility 0.5s ease;
  z-index: 3;
}
.sr-pricing .cctv-waiting-area.active {
  opacity: 1;
  visibility: visible;
  pointer-events: unset;
  transition: opacity 0.5s ease, visibility 0.5s ease;
}
.sr-pricing .cctv-waiting-area.cloud {
  height: 208px;
}
.sr-pricing .cctv-waiting-area .cctv-list {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.sr-pricing.main .cctv-wrap .cctv-item {
  width: 80px;
  height: 80px;
  /* z-index: -1; */
}
.sr-pricing .cctv-wrap .cctv-item .cctv,
.sr-pricing .cctv-waiting-area .cctv-list .cctv {
  position: relative;
  width: 80px;
  height: 80px;
  border-radius: 100%;
  border: 3px solid var(--color-key);
  box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.2);
  background: #fff url(../../images/ko/showroom/pricing/img-srpr-cctv.jpg) no-repeat center center;
}
.sr-pricing .cctv-wrap .cctv-item .cctv {
  top: -3px;
  left: -3px;
  /* z-index: 6; */
}
.sr-pricing .cctv-wrap .cctv-item .cctv .btn-remove,
.sr-pricing .cctv-waiting-area .cctv-list .btn-remove {
  position: absolute;
  top: -3px;
  right: -3px;
  width: 30px;
  height: 30px;
  border-radius: 100%;
  background-color: var(--color-key);
}
.sr-pricing .cctv-wrap .cctv-item .cctv .btn-remove:before,
.sr-pricing .cctv-waiting-area .cctv-list .btn-remove:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 3px;
  background-color: #fff;
  transform: translate(-50%, -50%);
}
.sr-pricing .cctv-waiting-area .btn-add {
  position: relative;
  width: 80px;
  height: 80px;
  border-radius: 100%;
  border: 1px solid #dcdcdc;
  background-color: #f5f5f5;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.sr-pricing .cctv-waiting-area .btn-add.active {
  opacity: 1;
  visibility: visible;
  pointer-events: unset;
}
.sr-pricing .cctv-waiting-area .btn-add:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 24px;
  height: 2px;
  background-color: #353535;
}
.sr-pricing .cctv-waiting-area .btn-add:after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 2px;
  height: 24px;
  background-color: #353535;
}