* {
  /* 터치 시 번쩍이는 하이라이트 색상을 투명하게 변경 */
  -webkit-tap-highlight-color: transparent;
}

:root {
  /* --text-color1: #222222; */
}

section {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.using-size {
  width: 1050px;
  margin: 0px auto;
  /* overflow: hidden; */
}

/* fs, fw */
/* .fs-maintitle {
  font-size: 80px;
}

.fs-subtitle1 {
  font-size: 60px;
}

.fs-subtitle2 {
  font-size: 54px;
}

.fs-text1 {
  font-size: 50px;
}

.fs-text2 {
  font-size: 45px;
}

.fs-subtext1 {
  font-size: 40px;
}

.fs-subtext2 {
  font-size: 35px;
}

.fs-subtext3 {
  font-size: 30px;
} */

.fs-title-l {
  font-size: 80px;
}

.fs-title-m {
  font-size: 60px;
}

.fs-title-s {
  font-size: 54px;
}

/* .fs-text-xl {
  font-size: 50px;
} */

.fs-text-l {
  font-size: 45px;
}

.fs-text-m {
  font-size: 40px;
}

.fs-text-s {
  font-size: 35px;
}


/* 가장 작은 캡션용 */
.fs-caption {
  font-size: 20px;
}



.fw-bold {
  font-weight: 700;
}

.fw-semibold {
  font-weight: 600;
}

.fw-medium {
  font-weight: 500;
  /* 보통(regular)보다 살짝 두꺼운 놈 */
}

.fw-regular {
  font-weight: 400;
}

/* fs, fw 끝 */

/* 중고포스 시작 */
/* 소개 시작 */

.introduce-section {
  width: 100vw;
  height: calc(100vh - 130px);
  position: relative;
  background-color: #FBFBFB;
  min-height: 1200px;
}

.introduce-main-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.introduce-main-box {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

.introduce-main-text-box {
  text-align: left;
  position: relative;
  top: -60px;
}

.introduce-main-text-box h2 {
  margin-bottom: 16px;
}

.introduce-main-text-box p {
  font-size: 30px;
  line-height: 130%;
}

.introduce-main-img {
  width: 481px;
  height: 497px;
  margin: auto;
}

.introduce-main-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.introduce-card-box {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 36px;
  margin-bottom: 60px;
}

.introduce-card {
  width: 306px;
  height: 266px;
  border-radius: 24px;
  border: 1px solid #BCBCBC;
  background: #FFFFFF;
  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
}

.introduce-card-img {
  flex-shrink: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.introduce-card-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.introduce-main-caption {
  color: #979797;
  text-align: center;
  font-size: 30px;
}

.introduce-scroll-sign-box {
  position: absolute;
  bottom: 2em;
  left: 50%;
  translate: -50% 0;
}

.introduce-scroll-sign-text {
  color: #CDCDCD;
  text-align: center;
  font-size: 20px;
  font-weight: 300;
  letter-spacing: -0.8px;
  margin-bottom: 0.8em;
}

.introduce-scroll-signs {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  font: 20px;
}

.introduce-scroll-signs svg {
  width: 1em;
  height: 1em;
  rotate: 90deg;
}

.introduce-scroll-signs svg {
  width: 1em;
  height: 1em;
  rotate: 90deg;
}


@keyframes scroll-sign-motion1 {
  0% {
    transform: translateX(0);
  }

  10% {
    transform: translateX(1em);
  }

  50% {
    transform: translateX(1em);
  }

  100% {
    transform: translateX(0);
  }
}

@keyframes scroll-sign-motion2 {
  0% {
    transform: translateX(0);
  }

  20% {
    transform: translateX(1em);
  }

  50% {
    transform: translateX(1em);
  }

  90% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(0);
  }
}

@keyframes scroll-sign-motion3 {
  0% {
    transform: translateX(0);
  }

  30% {
    transform: translateX(1em);
  }

  50% {
    transform: translateX(1em);
  }

  80% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(0);
  }
}

.introduce-scroll-signs svg:nth-of-type(1) {
  color: #A7A7A7;
  position: relative;
  top: 0em;
  /* animation-delay: 1.0s; */
  animation-name: scroll-sign-motion3;
  animation-duration: 2s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

.introduce-scroll-signs svg:nth-of-type(2) {
  color: #D9D9D9;
  position: relative;
  top: -0.5em;
  /* animation-delay: 0.5s; */
  animation-name: scroll-sign-motion2;
  animation-duration: 2s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

.introduce-scroll-signs svg:nth-of-type(3) {
  color: #e9e9e9;
  position: relative;
  top: -1em;
  /* animation-delay: 0s; */
  animation-name: scroll-sign-motion1;
  animation-duration: 2s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

/* 소개 끝 */

/* 비교 시작 */

.compare-section {
  background: linear-gradient(180deg, #F0F6FF 0%, #FFF 52.88%, #F0F6FF 100%);
  padding-top: 163px;
  padding-bottom: 155px;
}

.compare-box {
  margin: auto;
}

.compare-box h2 {
  margin-bottom: 74px;
}

.compare-box h2 span {
  color: #1F88FF;
}

.compare-table-img {
  width: 984px;
  height: auto;
  margin: auto;
}

.compare-table-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.compare-bottom-section {
  height: 136px;
  background: linear-gradient(180deg, #F2F7FF 0%, #FFF 100%);
  margin-bottom: 428px;
}

/* 비교 끝 */

/* 중고포스 배너 시작 */

.promotion-pos-ad-banner-section {
  background-color: #000000;
}

.promotion-pos-ad-banner {
  margin: auto;
  max-width: 1920px;
  min-width: 1050px;
  width: 100vw;
  /* height: min(40.89vw, 785px);
  height: clamp(429px, 40.89vw, 785px); */
  height: 785px;
  /* background-image:
    linear-gradient(90deg, #000000 40%, #606060 60%, transparent 76%),
    url("https://16882298.com/img/products/promotion_pos/promotion_pos_banner.png"); */
  /* 846px 785px */

  /* 768px 1152px*/
  /* 1920-846 1074px */
  background-image:
    linear-gradient(90deg, #000000 calc(100% - 846px - 288px), #606060 calc(100% - 846px), transparent calc(100% - 460px)),
    url("https://16882298.com/img/products/promotion_pos/promotion_pos_banner.png");
  background-position: right center;
  background-repeat: no-repeat;
  background-size: cover, auto 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  overflow: hidden;
}

.promotion-pos-ad-banner-text-box {
  text-align: left;
  color: #FFFFFF;
  position: relative;
  /* margin: clamp(86px, 8.23vw, 158px) 0 0 clamp(13px, 1.20vw, 23px); */
  margin: 158px 0 0 23px;
}

.promotion-pos-ad-banner-text-box h3 {
  margin-bottom: 37px;
}

.promotion-pos-ad-banner-text-box p {
  font-size: 40px;

}

/* 중고포스 배너 끝 */

/* 업종별 포스 화면 시작 */
.various-pos-screen-section {
  padding-top: 188px;
  padding-bottom: 230px;
}

.various-pos-screen-textbox {
  margin-bottom: 94px;
}

.various-pos-screen-textbox h3 {
  margin-bottom: 55px;
}

.various-pos-screen-tabbox {
  display: flex;
  flex-direction: row;
  column-gap: 36px;
  justify-content: center;
  margin-bottom: 94px;
}

.various-pos-screen-tab {
  cursor: pointer;
  border-radius: 100px;
  background-color: #8E8E8E;
  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.30);
  color: #FCFCFC;
  text-align: center;
  font-size: 40px;
  padding: 32px 56px;
  transition: all 0.3s ease;
}

.various-pos-screen-tab:hover {
  /* background-color: #608ACA; */
  background-color: #477AC7;
}

/* vpst는 various-pos-screen-tab의 줄임말일뿐 */
.various-pos-screen-tab.vpst-active {
  background-color: #0065FF;
}

.various-pos-screen-tab-carousel-box {
  width: 100%;
  overflow: hidden;
}

.various-pos-screen-tab-carousel {
  display: flex;
  width: 100%;
  transition: transform 0.1s ease-in-out;
}

.various-pos-screen-tab-card {
  width: 100%;
  flex-shrink: 0;
}

.various-pos-screen-tab-card img {
  width: 100%;
  height: auto;
  display: block;
}

/* 업종별 포스 화면 끝 */

/* 맞춤 포스 시작 */
.tailored-pos-section {
  padding-bottom: 220px;
}

.tailored-pos-box:not(:last-child) {
  margin: auto;
  margin-bottom: 183px;
}

.tailored-pos-box h3 {
  margin-bottom: 60px;
}

.tailored-pos-box-img {
  margin: auto;
  margin-top: 80px;
}

/* tpbi는 tailored-pos-box-img 줄임말일뿐*/
.tailored-pos-box-img.tpbi-intuitive,
.tailored-pos-box-img.tpbi-auto-edducted,
.tailored-pos-box-img.tpbi-real-time-check {
  width: 1050px;
  height: auto;
}

.tailored-pos-box-img.tpbi-auto-edducted {
  margin-top: 280px;
}

.tailored-pos-box-img>img {
  width: 100%;
  height: 100%;
}

/* 카드들이 쌓일 컨테이너 */
.auto-edducted-ex-wrapper {
  position: relative;
}

/* 위치 잡는 박스 (Flex 제거 -> 카드를 겹치기 위해) */
.auto-edducted-ex-box {
  position: absolute;
  width: 176px;
  height: 80px;
  /* perspective: 1000px; */
  z-index: 10;
}

.auto-edducted-ex-box.auto-edducted-ex-pos {
  top: -200px;
  left: 230px;
}

.auto-edducted-ex-box.auto-edducted-ex-mobile {
  top: -200px;
  right: 60px;
}

/* 동적으로 생길 카드 디자인 */
.auto-edducted-ex {
  /* 카드 기본 스타일 */
  width: 176px;
  height: 80px;
  border-radius: 20px;
  background: #FFFFFF;
  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.15);

  /* 내용 정렬 */
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: bold;
  color: #222222;

  /* 애니메이션 필수 속성 */
  position: absolute;
  /* 겹치기 위해 */
  top: 0;
  left: 0;
  transform-origin: center bottom;
  /* 통통 튀는 맛 */
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  opacity: 0;
  /* 시작 위치: 위에서 작게 대기 */
  transform: translateY(-30px) scale(0.8);
}

/* 아이콘 스타일 */
.auto-edducted-ex-soldout {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 10px;
  font-size: 16px;
}

/* [상태별 스타일] */

/*  재고 넉넉할 때 */
.auto-edducted-ex.stock-normal .auto-edducted-ex-soldout {
  background-color: #4CAF50;
}

/* 재고 임박 (3개 이하) */
.auto-edducted-ex.stock-warning .auto-edducted-ex-soldout {
  background-color: #FF9800;
}

/* 품절  */
.auto-edducted-ex.stock-empty {
  color: #D32F2F;
}

.auto-edducted-ex.stock-empty .auto-edducted-ex-soldout {
  background-color: #D32F2F;
}

/* [애니메이션 동작 클래스] */

/* 등장 (제일 앞) */
.auto-edducted-ex.card-active {
  opacity: 1;
  transform: translateY(0) scale(1);
  z-index: 10;
}

/* 한 칸 뒤로 밀림 */
.auto-edducted-ex.card-prev-1 {
  opacity: 0.6;
  transform: translateY(50px) scale(0.9);
  z-index: 5;
  /* filter: brightness(0.95); */
}

/* 두 칸 뒤로 밀림 */
.auto-edducted-ex.card-prev-2 {
  opacity: 0.3;
  transform: translateY(100px) scale(0.8);
  z-index: 1;
  /* filter: brightness(0.90); */
}

/* 사라짐 (그 이상 쌓이면) */
.auto-edducted-ex.card-out {
  opacity: 0;
  transform: translateY(150px) scale(0.5);
}

/* 진동 효과 키프레임 */
/* @keyframes shake-alert {
  0% {
    transform: translateY(0) scale(1) rotate(0deg);
  }

  15% {
    transform: translateY(0) scale(1) rotate(-5deg) translateX(-5px);
  }

  30% {
    transform: translateY(0) scale(1) rotate(5deg) translateX(5px);
  }

  45% {
    transform: translateY(0) scale(1) rotate(-5deg) translateX(-5px);
  }

  60% {
    transform: translateY(0) scale(1) rotate(5deg) translateX(5px);
  }

  75% {
    transform: translateY(0) scale(1) rotate(-3deg) translateX(-3px);
  }

  100% {
    transform: translateY(0) scale(1) rotate(0deg);
  }
} */
@keyframes shake-alert {
  0% {
    transform: translateY(0) scale(1) rotate(0deg);
  }

  3% {
    transform: translateY(0) scale(1) rotate(-5deg) translateX(-5px);
  }

  6% {
    transform: translateY(0) scale(1) rotate(5deg) translateX(5px);
  }

  9% {
    transform: translateY(0) scale(1) rotate(-5deg) translateX(-5px);
  }

  12% {
    transform: translateY(0) scale(1) rotate(5deg) translateX(5px);
  }

  15% {
    transform: translateY(0) scale(1) rotate(-3deg) translateX(-3px);
  }

  18% {
    transform: translateY(0) scale(1) rotate(0deg);
  }

  27% {
    transform: translateY(0) scale(1) rotate(0deg);
  }

  30% {
    transform: translateY(0) scale(1) rotate(-5deg) translateX(-5px);
  }

  33% {
    transform: translateY(0) scale(1) rotate(5deg) translateX(5px);
  }

  36% {
    transform: translateY(0) scale(1) rotate(-5deg) translateX(-5px);
  }

  39% {
    transform: translateY(0) scale(1) rotate(5deg) translateX(5px);
  }

  42% {
    transform: translateY(0) scale(1) rotate(-3deg) translateX(-3px);
  }

  45% {
    transform: translateY(0) scale(1) rotate(0deg);
  }

  100% {
    transform: translateY(0) scale(1) rotate(0deg);
  }
}

/* 품절 카드에 붙을 클래스 */
.auto-edducted-ex.shake-effect {
  animation: shake-alert 3s cubic-bezier(0.36, 0.07, 0.19, 0.97) infinite;
  box-shadow: 0 0 15px rgba(211, 47, 47, 0.6);
}

/* 맞춤 포스 끝 */

/* 초기 비용 줄이고채널톡 버튼 시작*/

.reduce-cost-channel-talk-btn-section {
  padding-top: 127px;
}

.reduce-cost-channel-talk-btn {
  margin: auto;
  max-width: 1050px;
  width: 809px;
  margin: auto;
}

.reduce-cost-btn-text-box {
  position: relative;
}

.reduce-cost-btn-text {
  /* position: relative; */
  /* left: 0.375em; */
}

.reduce-cost-btn-svg1 {
  color: #FFFFFF;
  height: 0.625em;
  width: auto;
  object-fit: contain;
  position: absolute;
  translate: 100% 50%;
  top: 0;
  right: -0.4em;
}

.reduce-cost-btn-svg2 {
  color: #FFFFFF80;
  height: 0.625em;
  width: auto;
  object-fit: contain;
  position: absolute;
  translate: 100% 50%;
  top: 0;
  right: -0.8em;
}


/* 초기 비용 줄이고채널톡 버튼 끝*/

/* 구성품 시작 */
.component-section {
  padding-top: 154px;
  padding-bottom: 260px;
}

.component-title {
  margin-bottom: 116px;
}

.component-container {
  font-size: 39px;
  display: flex;
  flex-direction: row;
  /* align-items: flex-end; */
  height: 100%;
  text-wrap: nowrap;

}

.component-left {
  flex: 1;
}

.component-right {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  left: -80px;
}

.component-right-up {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  column-gap: 30px;
}

.component-right-down {
  position: relative;
  bottom: 50px;
  left: -10px;
}

.component-right-up-left {}

.component-right-up-right {}

.component-img {
  margin: auto;
  margin-bottom: 30px;
}

.component-img.ci-pos {}

.component-img.ci-toss-front {}

.component-img.ci-sinsinpay {}

.component-img.ci-recipt-printer {}


/* 구성품 끝 */

/* 추가 구성품 시작 */

.component-addon-section {
  margin-bottom: 120px;
}

.component-main-addon-title {
  margin-bottom: 134px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.component-main-addon-title-plus {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background-color: #F5F8FA;
  margin-right: 34px;
  font-size: 76px;
  color: #919BA5;
}

.component-main-addon-title-plus p {
  display: flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  position: relative;
  top: -5px;
}

.component-addon-box {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 24px;
  row-gap: 80px;
}

.component-addon-explain-box {
  margin-bottom: 46px;
}

.component-addon-name {
  display: inline-flex;
  align-items: center;
  margin-bottom: 24px;
}

.component-addon-recommend {
  border-radius: 32px;
  background: #294377;
  padding: 5px 21px;
  font-size: 32px;
  color: #FAFAFA;
  margin-right: 0.5625em;
}

.component-addon-card-img {
  aspect-ratio: 513/382;
  width: 100%;
  height: auto;
  background-color: #F9F9F9;
  position: relative;
  cursor: pointer;
  border-radius: 16px;
  box-sizing: border-box;
}

.component-addon-card-img>img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  margin: auto;
  transition: transform 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.2);
}

.component-addon-card-img:hover>img {
  transform: scale(1.2);
}

.magnifier {
  position: absolute;
  top: 30px;
  left: 30px;
  background-color: #294377;
  border-radius: 50%;
  box-sizing: border-box;
}

.magnifier img {
  width: 94%;
  height: 94%;
}

.addon-addexplain {
  position: absolute;
  font-size: 28px;
  color: #888888;
  bottom: 1.07em;
  right: 1.43em;
}

/* 추가 구성품 끝 */
/* 도입 절차 시작*/

.install-process-section {
  padding-bottom: 55px;
}

/* 도입 절차 끝 */

.only-PC {
  display: block;
}

.only-mobile {
  display: none;
}

@media screen and (max-width:768px) {
  .using-size {
    width: min(95vw, 380px);
    margin: 0px auto;
    /* overflow: hidden; */
  }


  .fs-title-l {
    /* font-size: 80px;  */
    font-size: 30px;
  }

  .fs-title-m {
    /* font-size: 60px; */
    font-size: min(7.5vw, 30px);
  }

  .fs-title-s {
    /* font-size: 54px; */
    font-size: min(6.25vw, 25px);
  }

  /* .fs-text-xl {
    font-size: 50px;
  } */

  .fs-text-l {
    /* font-size: 45px; */
    font-size: min(4.5vw, 18px);
  }

  .fs-text-m {
    /* font-size: 40px; */
    font-size: min(3.5vw, 14px);
  }

  .fs-text-s {
    /* font-size: 35px; */
    font-size: min(3.25vw, 13px);
  }

  /* 가장 작은 캡션용 */
  /* .fs-caption {
    font-size: 20px;
  } */


  /* 중고포스 시작 */
  /* 소개 시작 */

  .introduce-section {
    padding-top: min(10.5vw, 42px);
    padding-bottom: min(18vw, 72px);
    width: auto;
    height: auto;
    /* position: relative; */
    /* background-color: #FBFBFB; */
    min-height: auto;
  }

  .introduce-main-wrapper {
    /* display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center; */
  }

  .introduce-main-box {
    /* display: flex; */
    flex-direction: column;
    /* align-items: center;
    justify-content: center; */
  }

  .introduce-main-text-box {
    text-align: center;
    position: relative;
    top: 0px;
    margin-bottom: min(7.5vw, 30px);
  }

  .introduce-main-text-box h2 {
    margin-bottom: min(5vw, 20px);
  }

  .introduce-main-text-box p {
    font-size: min(4.5vw, 18px);
  }

  .introduce-main-img {
    width: min(53.75vw, 215px);
    height: min(55.75vw, 223px);
    /* margin: auto; */
  }

  .introduce-main-img img {
    /* width: 100%;
    height: 100%;
    object-fit: contain; */
  }

  .introduce-card-box {
    /* display: grid;
    grid-template-columns: repeat(3, 1fr); */
    column-gap: min(3.5vw, 14px);
    margin-bottom: min(6vw, 24px);
  }

  .introduce-card {
    width: min(29.5vw, 118px);
    height: min(25.25vw, 101px);
    border-radius: min(2.25vw, 9px);
    border: min(0.25vw, 1px) solid #BCBCBC;
    /* background: #FFFFFF; */
    box-shadow: 0 min(0.5vw, 2px) min(0.5vw, 2px) 0 rgba(0, 0, 0, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .introduce-card-img {
    /* flex-shrink: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center; */
  }

  .introduce-card-img img {
    width: 90%;
    height: 90%;
    /* object-fit: contain; */
  }

  .introduce-main-caption {
    /* color: #979797; */
    /* text-align: center; */
    font-size: min(2.75vw, 11px);
  }

  /* 소개 끝 */

  /* 비교 시작 */

  .compare-section {
    background: linear-gradient(180deg, #F0F6FF 0%, #FFF 52.88%, #F0F6FF 100%);
    padding-top: min(9.5vw, 38px);
    padding-bottom: min(4.25vw, 17px);
  }

  .compare-box {
    margin: auto;
  }

  .compare-box h2 {
    margin-bottom: min(5vw, 20px);
  }

  .compare-box h2 span {
    /* color: #1F88FF; */
  }

  .compare-table-img {
    width: min(91.25vw, 365px);
    /* height: auto;
    margin: auto; */
  }

  .compare-table-img img {
    /* width: 100%;
    height: 100%;
    object-fit: contain; */
  }

  .compare-bottom-section {
    height: min(15.25vw, 61px);
    background: linear-gradient(180deg, #F2F7FF 0%, #FFF 100%);
    margin-bottom: min(12.75vw, 51px);
  }

  /* 비교 끝 */

  /* 중고포스 배너 시작 */

  .promotion-pos-ad-banner-section {
    /* background-color: #000000; */
  }

  .promotion-pos-ad-banner {
    /* margin: auto; */
    max-width: 400px;
    min-width: 0;
    /* width: 100vw; */
    /* height: min(40.89vw, 785px);
  height: clamp(429px, 40.89vw, 785px); */
    height: min(69.5vw, 278px);
    /* background-image:
    linear-gradient(90deg, #000000 40%, #606060 60%, transparent 76%),
    url("https://16882298.com/img/products/promotion_pos/promotion_pos_banner.png"); */
    /* 846px 785px */

    /* 768px 1152px*/
    /* 1920-846 1074px */
    background-image:
      linear-gradient(90deg, #000000 calc(40%), transparent calc(60%)),
      url("https://16882298.com/img/products/promotion_pos/promotion_pos_banner_mobile.png");
    /* background-position: right center;
    background-repeat: no-repeat;
    background-size: cover, auto 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    overflow: hidden; */
  }

  .promotion-pos-ad-banner-text-box {
    text-align: left;
    /* color: #FFFFFF;
    position: relative; */
    /* margin: clamp(86px, 8.23vw, 158px) 0 0 clamp(13px, 1.20vw, 23px); */
    margin: min(7.25vw, 29px) 0 0 min(4.25vw, 17px);
  }

  .promotion-pos-ad-banner-text-box h3 {
    margin-bottom: min(2.5vw, 10px);
  }

  .promotion-pos-ad-banner-text-box p {
    font-size: min(3vw, 12px);

  }

  /* 중고포스 배너 끝 */

  /* 업종별 포스 화면 시작 */
  .various-pos-screen-section {
    padding-top: min(20vw, 80px);
    padding-bottom: min(15.5vw, 62px);
  }

  .various-pos-screen-textbox {
    margin-bottom: min(8vw, 32px);
  }

  .various-pos-screen-textbox h3 {
    margin-bottom: min(6.5vw, 26px);
  }

  .various-pos-screen-tabbox {
    /* display: flex;
    flex-direction: row; */
    column-gap: min(3.25vw, 13px);
    /* justify-content: center; */
    margin-bottom: min(8.25vw, 33px);
  }

  .various-pos-screen-tab {
    /* cursor: pointer; */
    border-radius: min(8.75vw, 35px);
    /* background-color: #8E8E8E; */
    box-shadow: 0 min(0.5vw, 2px) min(0.5vw, 2px) 0 rgba(0, 0, 0, 0.30);
    /* color: #FCFCFC; */
    /* text-align: center; */
    font-size: min(3.5vw, 14px);
    padding: min(3vw, 12px) min(5vw, 20px);
    /* transition: all 0.3s ease; */
  }

  .various-pos-screen-tab:hover {
    /* background-color: #608ACA; */
    /* background-color: #477AC7; */
  }

  /* vpst는 various-pos-screen-tab의 줄임말일뿐 */
  .various-pos-screen-tab.vpst-active {
    /* background-color: #0065FF; */
  }

  .various-pos-screen-tab-carousel-box {
    /* width: 100%;
    overflow: hidden; */
  }

  .various-pos-screen-tab-carousel {
    /* display: flex;
    width: 100%;
    transition: transform 0.1s ease-in-out; */
  }

  .various-pos-screen-tab-card {
    /* width: 100%;
    flex-shrink: 0; */
  }

  .various-pos-screen-tab-card img {
    /* width: 100%;
    height: auto;
    display: block; */
  }

  /* 업종별 포스 화면 끝 */

  /* 맞춤 포스 시작 */
  .tailored-pos-section {
    padding-bottom: min(14.25vw, 57px);
  }

  .tailored-pos-box:not(:last-child) {
    /* margin: auto; */
    margin-bottom: min(25.5vw, 102px);
  }

  .tailored-pos-box h3 {
    margin-bottom: min(7.25vw, 29px);
  }

  .tailored-pos-box-img {
    margin: auto;
    margin-top: min(7.5vw, 30px);
  }

  /* tpbi는 tailored-pos-box-img 줄임말일뿐*/
  .tailored-pos-box-img.tpbi-intuitive,
  .tailored-pos-box-img.tpbi-auto-edducted,
  .tailored-pos-box-img.tpbi-real-time-check {
    width: 100%;
    height: auto;
  }

  .tailored-pos-box-img.tpbi-auto-edducted {
    margin-top: min(32.5vw, 130px);
  }

  .tailored-pos-box-img>img {
    width: 100%;
    height: 100%;
  }

  /* 카드들이 쌓일 컨테이너 */
  .auto-edducted-ex-wrapper {
    position: relative;
  }

  /* 위치 잡는 박스 (Flex 제거 -> 카드를 겹치기 위해) */
  .auto-edducted-ex-box {
    /* position: absolute; */
    width: min(22.5vw, 90px);
    height: min(10vw, 40px);
    /* perspective: 1000px; */
    /* z-index: 10; */
  }

  .auto-edducted-ex-box.auto-edducted-ex-pos {
    top: calc(-1 * min(20vw, 80px));
    left: min(17.5vw, 70px);
  }

  .auto-edducted-ex-box.auto-edducted-ex-mobile {
    top: calc(-1 * min(20vw, 80px));
    right: min(2.5vw, 10px);
  }

  /* 동적으로 생길 카드 디자인 */
  .auto-edducted-ex {
    /* 카드 기본 스타일 */
    width: min(22.5vw, 90px);
    height: min(10vw, 40px);
    border-radius: min(2vw, 8px);
    background: #FFFFFF;
    box-shadow: 0px min(1vw, 4px) min(3vw, 12px) rgba(0, 0, 0, 0.15);

    /* 내용 정렬 */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: min(3vw, 12px);
    font-weight: bold;
    color: #222222;

    /* 애니메이션 필수 속성 */
    position: absolute;
    /* 겹치기 위해 */
    top: 0;
    left: 0;
    transform-origin: center bottom;
    /* 통통 튀는 맛 */
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    opacity: 0;
    /* 시작 위치: 위에서 작게 대기 */
    transform: translateY(calc(-1 * min(7.5vw, 30px))) scale(0.8);
  }

  /* 아이콘 스타일 */
  .auto-edducted-ex-soldout {
    width: min(3.5vw, 14px);
    height: min(3.5vw, 14px);
    border-radius: 50%;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: min(1vw, 4px);
    font-size: min(3vw, 12px);
  }

  /* [상태별 스타일] */

  /*  재고 넉넉할 때 */
  .auto-edducted-ex.stock-normal .auto-edducted-ex-soldout {
    background-color: #4CAF50;
  }

  /* 재고 임박 (3개 이하) */
  .auto-edducted-ex.stock-warning .auto-edducted-ex-soldout {
    background-color: #FF9800;
  }

  /* 품절  */
  .auto-edducted-ex.stock-empty {
    color: #D32F2F;
  }

  .auto-edducted-ex.stock-empty .auto-edducted-ex-soldout {
    background-color: #D32F2F;
  }

  /* [애니메이션 동작 클래스] */

  /* 등장 (제일 앞) */
  .auto-edducted-ex.card-active {
    opacity: 1;
    transform: translateY(0) scale(1);
    z-index: 10;
  }

  /* 한 칸 뒤로 밀림 */
  .auto-edducted-ex.card-prev-1 {
    opacity: 0.6;
    transform: translateY(min(5vw, 20px)) scale(0.9);
    z-index: 5;
    /* filter: brightness(0.95); */
  }

  /* 두 칸 뒤로 밀림 */
  .auto-edducted-ex.card-prev-2 {
    opacity: 0.3;
    transform: translateY(min(10vw, 40px)) scale(0.8);
    z-index: 1;
    /* filter: brightness(0.90); */
  }

  /* 사라짐 (그 이상 쌓이면) */
  .auto-edducted-ex.card-out {
    opacity: 0;
    transform: translateY(min(15vw, 60px)) scale(0.5);
  }

  /* 진동 효과 키프레임 */
  /* @keyframes shake-alert {
    0% {
      transform: translateY(0) scale(1) rotate(0deg);
    }

    15% {
      transform: translateY(0) scale(1) rotate(-5deg) translateX(calc(-1 * min(1.25vw, 5px)));
    }

    30% {
      transform: translateY(0) scale(1) rotate(5deg) translateX(min(1.25vw, 5px));
    }

    45% {
      transform: translateY(0) scale(1) rotate(-5deg) translateX(calc(-1 * min(1.25vw, 5px)));
    }

    60% {
      transform: translateY(0) scale(1) rotate(5deg) translateX(min(1.25vw, 5px));
    }

    75% {
      transform: translateY(0) scale(1) rotate(-3deg) translateX(calc(-1 * min(0.75vw, 3px)));
    }

    100% {
      transform: translateY(0) scale(1) rotate(0deg);
    }
  } */
  @keyframes shake-alert {
    0% {
      transform: translateY(0) scale(1) rotate(0deg);
    }

    3% {
      transform: translateY(0) scale(1) rotate(-5deg) translateX(calc(-1 * min(1.25vw, 5px)));
    }

    6% {
      transform: translateY(0) scale(1) rotate(5deg) translateX(min(1.25vw, 5px));
    }

    9% {
      transform: translateY(0) scale(1) rotate(-5deg) translateX(calc(-1 * min(1.25vw, 5px)));
    }

    12% {
      transform: translateY(0) scale(1) rotate(5deg) translateX(min(1.25vw, 5px));
    }

    15% {
      transform: translateY(0) scale(1) rotate(-3deg) translateX(calc(-1 * min(0.75vw, 3px)));
    }

    18% {
      transform: translateY(0) scale(1) rotate(0deg);
    }

    27% {
      transform: translateY(0) scale(1) rotate(0deg);
    }

    30% {
      transform: translateY(0) scale(1) rotate(-5deg) translateX(calc(-1 * min(1.25vw, 5px)));
    }

    33% {
      transform: translateY(0) scale(1) rotate(5deg) translateX(min(1.25vw, 5px));
    }

    36% {
      transform: translateY(0) scale(1) rotate(-5deg) translateX(calc(-1 * min(1.25vw, 5px)));
    }

    39% {
      transform: translateY(0) scale(1) rotate(5deg) translateX(min(1.25vw, 5px));
    }

    42% {
      transform: translateY(0) scale(1) rotate(-3deg) translateX(calc(-1 * min(0.75vw, 3px)));
    }

    45% {
      transform: translateY(0) scale(1) rotate(0deg);
    }

    100% {
      transform: translateY(0) scale(1) rotate(0deg);
    }
  }

  /* 품절 카드에 붙을 클래스 */
  .auto-edducted-ex.shake-effect {
    /* animation: shake-alert 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97) 2; */
    animation: shake-alert 3s cubic-bezier(0.36, 0.07, 0.19, 0.97) infinite;
    box-shadow: 0 0 min(3.75vw, 15px) rgba(211, 47, 47, 0.6);
  }

  /* 맞춤 포스 끝 */
  /*  */

  /* 초기 비용 줄이고채널톡 버튼 시작*/

  .reduce-cost-channel-talk-btn-section {
    padding-top: 30px;
  }

  .reduce-cost-channel-talk-btn {
    margin: auto;
    max-width: 400px;
    width: min(85vw, 340px);
    margin: auto;
  }

  .reduce-cost-btn-text-box {
    position: relative;
  }

  .reduce-cost-btn-text {
    /* position: relative; */
    /* left: 0.375em; */
  }

  .reduce-cost-btn-svg1 {
    color: #FFFFFF;
    height: 0.625em;
    width: auto;
    object-fit: contain;
    position: absolute;
    translate: 100% 50%;
    top: 0;
    right: -0.4em;
  }

  .reduce-cost-btn-svg2 {
    color: #FFFFFF80;
    height: 0.625em;
    width: auto;
    object-fit: contain;
    position: absolute;
    translate: 100% 50%;
    top: 0;
    right: -0.8em;
  }


  /* 초기 비용 줄이고채널톡 버튼 끝*/

  /* 구성품 시작 */
  .component-section {
    padding-top: min(13.5vw, 54px);
    padding-bottom: min(23vw, 92px);
  }

  .component-title {
    margin-bottom: min(8.75vw, 35px);
  }

  .component-container {
    font-size: min(3.5vw, 14px);
    display: flex;
    flex-direction: row;
    /* align-items: flex-end; */
    height: 100%;
    text-wrap: nowrap;

  }

  .component-left {
    flex: 1;
    position: relative;
    left: min(5vw, 20px);
  }

  .component-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    left: calc(-1 * min(5vw, 20px));
  }

  .component-right-up {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    column-gap: 0px;
  }

  .component-right-down {
    position: relative;
    bottom: 0px;
    left: 0px;
  }

  .component-right-up-left {}

  .component-right-up-right {}

  .component-img {
    margin: auto;
    margin-bottom: min(7.5vw, 30px);
  }

  .component-img.ci-pos {
    width: min(57vw, 228px);
    height: min(64vw, 256px);
  }

  .component-img.ci-toss-front {
    width: min(15.5vw, 62px);
    height: min(26vw, 104px);
  }

  .component-img.ci-sinsinpay {
    width: min(11.5vw, 46px);
    height: min(11.5vw, 46px);
  }

  .component-img.ci-recipt-printer {
    width: min(20vw, 80px);
    height: min(20.5vw, 82px);
  }

  .component-img.ci-pos img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .component-img.ci-toss-front img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .component-img.ci-sinsinpay img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .component-img.ci-recipt-printer img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }


  /* 구성품 끝 */

  /* 추가 구성품 시작 */

  .component-addon-section {
    margin-bottom: min(11vw, 44px);
  }

  .component-main-addon-title {
    margin-bottom: min(11.5vw, 46px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .component-main-addon-title-plus {
    width: min(7.5vw, 30px);
    height: min(7.5vw, 30px);
    border-radius: 50%;
    margin-right: min(3vw, 12px);
    font-size: min(7.5vw, 30px);
  }

  .component-main-addon-title-plus p {
    display: flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    position: relative;
    top: calc(-1 * min(0.25vw, 1px));
  }

  .component-addon-box {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: min(1.5vw, 6px);
    row-gap: min(7.5vw, 30px);
  }

  .component-addon-explain-box {
    margin-bottom: min(4.25vw, 17px);
  }

  .component-addon-name {
    display: inline-flex;
    align-items: center;
    margin-bottom: min(2vw, 8px);
  }

  .component-addon-recommend {
    border-radius: min(3vw, 12px);
    padding: min(0.5vw, 2px) min(2vw, 8px);
    font-size: min(3vw, 12px);
    margin-right: 0.5625em;
  }

  .component-addon-card-img {
    aspect-ratio: 513/382;
    width: 100%;
    height: auto;
    background-color: #F9F9F9;
    position: relative;
    cursor: pointer;
    border-radius: min(4vw, 16px);
    box-sizing: border-box;
  }

  .component-addon-card-img>img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    margin: auto;
    transition: transform 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.2);
  }

  .component-addon-card-img:hover>img {
    transform: scale(1.2);
  }

  .magnifier {
    width: min(6.5vw, 26px);
    height: min(6.5vw, 26px);
    top: min(2.5vw, 10px);
    left: min(2.5vw, 10px);
    border-radius: 50%;
  }

  .magnifier img {
    width: 94%;
    height: 94%;
  }

  .addon-addexplain {
    position: absolute;
    font-size: min(7vw, 28px);
    color: #888888;
    bottom: 1.07em;
    right: 1.43em;
  }

  /* 추가 구성품 끝 */
  /* 도입 절차 시작*/

  .install-process-section {
    padding-bottom: min(13.75vw, 55px);
  }

  /* 도입 절차 끝 */

  .only-PC {
    display: none;
  }

  .only-mobile {
    display: block;
  }
}