@charset "utf-8";
/* ==========================================================================
   web1 – site-popup.css (사이트 팝업 / 우측 퀵 배너 #quick-wrap)

   ⚠ 이름을 popup.css 로 두지 말 것. 그 파일은 이미 레이어·동의서·미리보기 팝업 데코레이터
     3종(user_layer_panel / user_agree_popup_panel / manager_preview_popup_panel)이 쓰는 창(窓)
     스타일시트다(#popup-wrapper / #popup-title / .table-basic 등 345줄). 여기 퀵배너 규칙을
     쓰면 그 세 화면이 통째로 깨진다 - 2026-09-04 실제로 덮어썼다가 되돌렸다.

   왜 별도 파일인가 (2026-09-04):
   팝업 마크업(user_001_freelancer_panel.jsp `#quick-wrap`)은 popuplist 가 있으면
   **모든 화면**에 출력되는데, 그 스타일은 main.css 에만 있었다. main.css 는
   `indexyn eq 'Y' and not mainLanding` 일 때만 로드되므로(그 조건은 랜딩의 흰 띠 때문에
   2026-08-25 에 생겼다 - 데코레이터 주석 참조), 서브페이지에서는 마크업만 나오고
   스타일이 없어 `position:static` 으로 푸터 아래에 전체 폭으로 깔렸다(실측: certVerify).

   그래서 팝업 규칙만 떼어 **무조건 로드**되는 파일로 옮긴다. main.css 의 원본은
   퍼블 산출물이라 손대지 않는다 - 값이 같아 중복돼도 렌더는 달라지지 않는다.
   ⚠ main.css 가 나중에 전 화면 로드로 바뀌면 이 파일은 지워야 한다(그때는 진짜 중복이다).
   ⚠ 값은 main.css 와 같아야 한다(치수를 퍼블이 고치면 여기도 같이 고친다). 딱 한 줄만 의도적으로
     다르다 - .swiper-pagination-current 를 .swiper-banner 안으로 좁혔다(아래 주석 참조).

   .swiper-banner / .swiper-btn 은 이름이 일반적이지만 실제 사용처는 팝업 마크업 3곳뿐이라
   (deco 2개 + previewPop) 전역에 두어도 다른 컴포넌트를 건드리지 않는다.
   ========================================================================== */

/* 기본 (>=1451px) */
#quick-wrap {position: fixed; right:0px; top:50%; z-index:1; transform: translate(0, -50%);}
.quick-right-item > a {position:relative; margin:6px 0; display:inline-block;}
.quick-right-item .btn-quick-swiper img {width:37px; height:143px;}
.quick-right-item a {display: block; transition: all 0.5s ease-in-out;}
.swiper-popup {right:-520px; top:50%; width:500px; border-radius: 40px 0 0 40px; padding:55px 30px 30px 30px; background:var(--white); z-index:5; position: fixed; box-shadow:rgba(0, 0, 0, 0.2) -4px 0px 12px -1px; box-sizing: border-box; transition: right 0.5s ease-in-out; transform: translate(0, -50%)}
.swiper-popup-inner {position: relative; overflow: hidden;}
.swiper-popup .swiper-close {width:15px; height:14px; right:40px; top:25px; position: absolute;}
.swiper-popup .swiper-close img {width:15px; height:14px;}
.swiper-banner {position: relative;}
.swiper-banner .swiper-slide a img {border-radius: 20px; width:440px; height:420px;}
.swiper-btn {display:flex; align-items: center; justify-content: center; gap:8px; width:100%; margin:15px 0 0 0; padding:0 0 5px 0;}
.swiper-banner .swiper-button-prev {width:34px; height:34px; background:var(--white) url(../../../files/web1/images/main/ban_prev_off.png) no-repeat center center; background-size:9px 12px; box-shadow: 2px 1px 5px rgba(62,62,62,0.1); border-radius: 100%; cursor: pointer;}
.swiper-banner .swiper-button-next {width:34px; height:34px; background:var(--white) url(../../../files/web1/images/main/ban_next_off.png) no-repeat center center; background-size:9px 12px; box-shadow: 2px 1px 5px rgba(62,62,62,0.1); border-radius: 100%; cursor: pointer;}
.swiper-banner .stop {width: 34px; height: 34px; background: var(--white) url(../../../files/web1/images/main/m_ban_stop.png) no-repeat center center; background-size: 9px 12px; display: block; box-shadow: 2px 1px 5px rgba(62, 62, 62, 0.1); border-radius: 100%;}
.swiper-banner .play {width: 34px; height: 34px; background: var(--white) url(../../../files/web1/images/main/m_ban_play.png) no-repeat center center; background-size: 9px 12px; display: none; box-shadow: 2px 1px 5px rgba(62, 62, 62, 0.1); border-radius: 100%;}
.swiper-banner .swiper-pagination {width:auto; text-align: center; position: relative; color:#666; margin-right:12px;}
.swiper-banner .swiper-pagination span {font-size:16px; color:#666;}
/* AI-MODIFIED: 2026-09-04 main.css 는 이 규칙이 전역(.swiper-pagination-current)이다. 여기서는
   .swiper-banner 안으로 좁힌다 - popup.css 는 전 화면에 실리는데, 전역 !important 를 그대로 두면
   랜딩의 .program-slide 페이지네이션(main.css .program-pagination)까지 색·굵기를 덮어쓴다.
   main.css 가 실리는 화면에서는 그쪽 전역 규칙이 그대로 이기므로 렌더는 달라지지 않는다. */
.swiper-banner .swiper-pagination-current {color:var(--color000) !important; font-weight: 500 !important;}
.swiper-popup.active {right:0;}

@media screen and (min-width: 1200px) and (max-width: 1450px) {
  #quick-wrap {position: fixed; right:0vw; top:50%; z-index:1; transform: translate(0, -50%);}
  .quick-right-item > a {position:relative; margin:0.429vw 0; display:inline-block;}
  .quick-right-item .btn-quick-swiper img {width:2.643vw; height:10.214vw;}
  .quick-right-item a {display: block; transition: all 0.5s ease-in-out;}
  .swiper-popup {right:-37.143vw; top:50%; width:35.714vw; border-radius: 2.857vw 0 0 2.857vw; padding:3.929vw 2.143vw 2.143vw 2.143vw; background:var(--white); z-index:5; position: fixed; box-shadow:rgba(0, 0, 0, 0.2) -0.286vw 0vw 0.857vw -0.071vw; box-sizing: border-box; transition: right 0.5s ease-in-out; transform: translate(0, -50%)}
  .swiper-popup-inner {position: relative; overflow: hidden;}
  .swiper-popup .swiper-close {width:1.071vw; height:1vw; right:2.857vw; top:1.786vw; position: absolute;}
  .swiper-popup .swiper-close img {width:1.071vw; height:1vw;}
  .swiper-banner {position: relative;}
  .swiper-banner .swiper-slide a img {border-radius: 1.429vw; width:31.429vw; height:30vw;}
  .swiper-btn {display:flex; align-items: center; justify-content: center; gap:0.571vw; width:100%; margin:1.071vw 0 0 0; padding:0 0 0.357vw 0;}
  .swiper-banner .swiper-button-prev {width:2.429vw; height:2.429vw; background:var(--white) url(../../../files/web1/images/main/ban_prev_off.png) no-repeat center center; background-size:0.643vw 0.857vw; box-shadow: 0.143vw 0.071vw 0.357vw rgba(62,62,62,0.1); border-radius: 100%; cursor: pointer;}
  .swiper-banner .swiper-button-next {width:2.429vw; height:2.429vw; background:var(--white) url(../../../files/web1/images/main/ban_next_off.png) no-repeat center center; background-size:0.643vw 0.857vw; box-shadow: 0.143vw 0.071vw 0.357vw rgba(62,62,62,0.1); border-radius: 100%; cursor: pointer;}
  .swiper-banner .stop {width: 2.429vw; height: 2.429vw; background: var(--white) url(../../../files/web1/images/main/m_ban_stop.png) no-repeat center center; background-size: 0.643vw 0.857vw; display: block; box-shadow: 0.143vw 0.071vw 0.357vw rgba(62, 62, 62, 0.1); border-radius: 100%;}
  .swiper-banner .play {width: 2.429vw; height: 2.429vw; background: var(--white) url(../../../files/web1/images/main/m_ban_play.png) no-repeat center center; background-size: 0.643vw 0.857vw; display: none; box-shadow: 0.143vw 0.071vw 0.357vw rgba(62, 62, 62, 0.1); border-radius: 100%;}
  .swiper-banner .swiper-pagination {width:auto; text-align: center; position: relative; color:#666; margin-right:0.857vw;}
  .swiper-banner .swiper-pagination span {font-size:1.143vw; color:#666;}
}

@media screen and (min-width: 900px) and (max-width: 1199px) {
  #quick-wrap {position: fixed; right:0vw; top:50%; z-index:1; transform: translate(0, -50%);}
  .quick-right-item > a {position:relative; margin:0.5vw 0; display:inline-block;}
  .quick-right-item .btn-quick-swiper img {width:3.086vw; height:11.927vw;}
  .quick-right-item a {display: block; transition: all 0.5s ease-in-out;}
  .swiper-popup {right:-43.369vw; top:50%; width:41.701vw; border-radius: 3.336vw 0 0 3.336vw; padding:4.587vw 2.502vw 2.502vw 2.502vw; background:var(--white); z-index:5; position: fixed; box-shadow:rgba(0, 0, 0, 0.2) -0.334vw 0vw 1.001vw -0.083vw; box-sizing: border-box; transition: right 0.5s ease-in-out; transform: translate(0, -50%)}
  .swiper-popup-inner {position: relative; overflow: hidden;}
  .swiper-popup .swiper-close {width:1.251vw; height:1.168vw; right:3.336vw; top:2.085vw; position: absolute;}
  .swiper-popup .swiper-close img {width:1.251vw; height:1.168vw;}
  .swiper-banner {position: relative;}
  .swiper-banner .swiper-slide a img {border-radius: 1.668vw; width:36.697vw; height:35.029vw;}
  .swiper-btn {display:flex; align-items: center; justify-content: center; gap:0.667vw; width:100%; margin:1.251vw 0 0 0; padding:0 0 0.417vw 0;}
  .swiper-banner .swiper-button-prev {width:2.836vw; height:2.836vw; background:var(--white) url(../../../files/web1/images/main/ban_prev_off.png) no-repeat center center; background-size:0.751vw 1.001vw; box-shadow: 0.167vw 0.083vw 0.417vw rgba(62,62,62,0.1); border-radius: 100%; cursor: pointer;}
  .swiper-banner .swiper-button-next {width:2.836vw; height:2.836vw; background:var(--white) url(../../../files/web1/images/main/ban_next_off.png) no-repeat center center; background-size:0.751vw 1.001vw; box-shadow: 0.167vw 0.083vw 0.417vw rgba(62,62,62,0.1); border-radius: 100%; cursor: pointer;}
  .swiper-banner .stop {width: 2.836vw; height: 2.836vw; background: var(--white) url(../../../files/web1/images/main/m_ban_stop.png) no-repeat center center; background-size: 0.751vw 1.001vw; display: block; box-shadow: 0.167vw 0.083vw 0.417vw rgba(62, 62, 62, 0.1); border-radius: 100%;}
  .swiper-banner .play {width: 2.836vw; height: 2.836vw; background: var(--white) url(../../../files/web1/images/main/m_ban_play.png) no-repeat center center; background-size: 0.751vw 1.001vw; display: none; box-shadow: 0.167vw 0.083vw 0.417vw rgba(62, 62, 62, 0.1); border-radius: 100%;}
  .swiper-banner .swiper-pagination {width:auto; text-align: center; position: relative; color:#666; margin-right:1.001vw;}
  .swiper-banner .swiper-pagination span {font-size:1.334vw; color:#666;}
}