@charset "utf-8";

.promotion-wrap{
  font-family:'Pretendard', sans-serif;
}
.promotion-wrap div,
.promotion-wrap p,
.promotion-wrap h1,
.promotion-wrap h2,
.promotion-wrap span,
.promotion-wrap li{
  font-family:Pretendard !important;
}
.promo-header{
  width:100%;
  padding-top:60px;
  background: linear-gradient(0deg, #686B75 0%, #212121 100%);
}
.promo-header h1{
  color: #FFF;
  text-align: center; 
  font-size: 20px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  letter-spacing: -0.8px;
}
.promo-header h1 span{
  color: #FFE44C;   
  font-weight: 600;  
}
.promo-header p{
  color: #FFF;
  text-align: center; 
  font-size: 37px; 
  font-weight: 600;
  line-height: 36px;
  letter-spacing: -0.74px;
  padding:0 0 40px
}

.promo-header .menu-wrap{
  width:100%;
  display:inline-flex;
  justify-content:center;
  align-items:end;
  gap:8px;
}
.promo-header .menu-wrap .item{
  display: flex;
  width: 250px;
  height: 166px;
  padding: 30px 0px;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  box-sizing:border-box;
  border-radius: 18px 18px 0px 0px;
  background: linear-gradient(235deg, #FFF 9.17%, #E6ECF8 95.79%);
  box-shadow:0 -2px 4px rgba(0,0,0,.25);
}
.promo-header .menu-wrap .item .name{
  color: #2D4197;
  text-align: center; 
  font-size: 21px; 
  font-weight: 600;
  line-height: 120%; 
  letter-spacing: -0.42px;
}
.promo-header .menu-wrap .item svg path{
  fill:rgba(0,27,182,.75)
}
.promo-header .menu-wrap .item .name svg{ 
  margin:0 3px;
}
.promo-header .menu-wrap .item .name svg path{ 
  stroke:rgba(0,27,182,.75)
}
.promo-header .menu-wrap .item .name svg path{
  fill:rgba(0,27,182,.75); 
}
.promo-header .menu-wrap .item:nth-child(3){
  height:200px;
  padding-top:40px;
}
.promo-header .menu-wrap .item:nth-child(3) .name{
  font-size: 26px; 
}
.promo-header .menu-wrap .selected,
.promo-header .menu-wrap .item:hover{ 
  background: linear-gradient(228deg, #4175EE -2.84%, #0949DF 87%);
}
.promo-header .menu-wrap .selected .name,
.promo-header .menu-wrap .item:hover .name{
  color:#FFF
} 
.promo-header .menu-wrap .selected svg path,
.promo-header .menu-wrap .item:hover svg path{
  fill:#FFF; 
} 
.promo-header .menu-wrap .selected .name  svg path,
.promo-header .menu-wrap .item:hover .name svg path{
  stroke:#FFF
} 

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(25px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
} 

@keyframes slideInLeft {
  from { opacity: 0; transform: translateY(15px); }  /* 오른쪽 바깥 */
  to   { opacity: 1; transform: translateY(0); }
}

.fade-up {
  animation: fadeUp 0.3s ease-out forwards; 
  opacity: 0;
}

.slide-in{
  display:inline-block;          /* transform 적용 위해 */
  opacity:0;                     /* 처음엔 숨김 */
  animation:slideInLeft 0.35s   ease-out forwards;
  animation-delay:0.4s;          /* h1 올라온 뒤 살짝 늦게 */
}

/* 단어별 staggered 등장 */
.staggered-text {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px;
  text-align: center;
  margin-top: 12px;
}

.staggered-text span {
  opacity: 0;
  transform: translateY(20px);
  display: inline-block;
  animation: fadeUp 0.3s ease-out forwards;
}

/* 바운스 애니메이션 */
@keyframes bounce {
  0%   { transform: translateY(0); }
  30%  { transform: translateY(-6px); }
  60%  { transform: translateY(3px); }
  100% { transform: translateY(0); }
}

.icon {
  transition: transform 0.2s ease;
}

.item:hover .icon {
  animation: bounce 0.6s ease;
}

.promo-body{
  padding-top:10px; 
  background: linear-gradient(0deg, rgba(255, 255, 255, 0.00) 0%, rgba(0, 0, 0, .04) 100%);
  border-top:1px solid #f1f1f1;
  background-size:100% 50px;
  background-repeat:no-repeat
}
.promo-container{
  padding:110px 0;
}
.promo-container .inner{
  max-width:1150px;
  min-width:1000px;
  margin:0 auto;
}
.promo-container h3{
  text-align:Center;
  font-family: Pretendard;
  font-size: 48px;
  font-weight: 500;
  color: #2E2E2E;
  line-height: 125%;
  letter-spacing: -0.02em;
}
.promo-bg-blue{
  background:#F7F9FF
}
.promo-bg-gray{
  background:#FAFAFA
}
.promo-container h3 span{
  font-weight: 600; 
}
.promo-container p{
font-size:21px;
color:#777;
text-align:center;
margin-top:15px
}
.promo-container .prev-text{
  font-size:29px;
  color:#777;
  text-align:center;
  margin-bottom: 8px;
  letter-spacing:-0.03em;
  }
.promo-container .sub-tit{
  font-size:32px;
  color:#434343;
  text-align:center;
  margin-top: 60px;
  letter-spacing:-0.05em;
  }
.promo-container .img-ic{ 
  padding-top:65px;
  text-align:center; 
  }

  .promo-wms-box          { display:flex; width:1150px; border:1px solid #ddd;border-radius:20px ; font-family:sans-serif;margin-top:60px }
  .promo-wms-box .viewer       { width:850px; height:520px; overflow:hidden; background:#fff; border-radius:20px 0 0 20px;display:flex; align-items:center; justify-content:center; }
  .promo-wms-box .viewer img   { max-width:100%; max-height:100%; border-radius:20px 0 0 20px;display:flex;flex-direction: column;align-content:center;}
  .promo-wms-box .menu         { width:300px;list-style:none; margin:0; padding:50px 0; border-left:1px solid #eee;background:#f9f9f9;border-radius:0 20px 20px 0}
  .promo-wms-box .menu li      { padding:24px 24px; font-size:21px;cursor:pointer;color:#4d4d4d;  transition:background .2s; }
  .promo-wms-box .menu li:hover{ color:#363b41; }
  .promo-wms-box .menu li.active{ background:#363b41;color:#FFF; font-weight:600; }

  /* (선택) 부드러운 페이드 전환 */
  .fade-enter   { opacity:0; }
  .fade-leave   { opacity:1; transition:opacity .25s }

  .quick-consult{display:none}

.bn-footer{position:sticky;z-index:1000;bottom:0;left:0;height:70px;width:100%}
.bn-footer .inner{position:relative;display:flex;align-items:center;border-radius:12px 12px 0 0;width:1200px;margin:0 auto;padding:0 200px;box-sizing:border-box;background:#363b41;height:70px;height:100%;font-size:21px;font-weight:500;color:#fff;}
.bn-footer .inner .bt-sp-btn{position:absolute;right:200px;top:15px;width:260px}
.bn-footer .inner .bt-sp-btn > span {display:block;position:relative}
.bn-footer a, .bn-footer button{position:absolute;right:0;top:0;display:inline-flex;justify-content:center;align-items:center;width:150px;height:45px;background:#FFC83B;color:#36312B;font-size:18px;border-radius:35px;animation: slidein 5s linear infinite; animation-delay: 2s;animation-fill-mode: forwards}
.bn-footer a:hover, .bn-footer button:hover{filter: brightness(1.05);color:#111;animation:none}
.bn-footer a span, .bn-footer button span{display:inline-flex;justify-content:center;align-items:center;width:26px;height:26px;background:#FFF;border-radius:100%;margin-left:13px;}