.gp5 .custom-btn {
  display: inline-block;
  padding: 2px 8px;
  border: 1px solid #dadfe2;
  border-radius: 4px;
}

.gp5 .over-help-layout {
  width: 234px;
}

.gp5 .over-help-layout .header {
  height: 16px;
  background-image: url('../images/order/after-help-over1.png');
  background-repeat: no-repeat;
  background-position: center top;
}

.gp5 .over-help-layout .loop {
  width: 100%;
  padding: 10px 20px;
  background-image: url('../images/order/after-help-over2.png');
}

.gp5 .over-help-layout .bottom {
  height: 19px;
  background-image: url('../images/order/after-help-over3.png');
  background-repeat: no-repeat;
  background-position: center top;
}

.gp5 .cart-count {
  position: absolute;
  left: 17px;
  top: -5px;
  background-color: #f66161;
  padding: 1px 10px;
  border-radius: 10px;
  color: #fff;
  font-size: 14px;
}

.gp5 input::placeholder {
  color: #2f3438 !important;
  opacity: 0.2 !important;
}

.gp5 .underline {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 0;
  height: 2px;
  background-color: #47517d;
  transition: width 0.3s ease-in-out, left 0.3s ease-in-out;
}

/* 메인 탑배너 */
.gp5 header .top-ad {
  background-color: #138ff3;
  background-image: url('../images/main/top-ad1-bg.png');
}

.gp5 header .top-ad .center-conts {
  position: relative;
  margin: 0 auto;
  width: 1300px;
  height: 50px;
}

.gp5 header .top-ad .close-btn {
  position: absolute;
  right: 5px;
  top: 15px;
}
/* 메인 탑배너 */

/* 로고 & 서치바 */
.gp5 header .logo-customer {
  width: 1300px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 0;
}

.gp5 header .logo-customer .customer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

/* 통합검색 */
.gp5 header .logo-customer .customer li:nth-child(1) {
  margin-right: 8px;
}

.gp5 .input-with-icon {
  background: url('../images/icon/search.png') no-repeat left center;
  background-size: 19px;
  padding-left: 24px;
  width: 332px;
  height: 40px;
  border: none;
  border-bottom: 1px solid #dadfe2;
}
/* 로고 & 서치바 */

.gp5 nav {
  border-top: 1px solid #eaedef;
  border-bottom: 1px solid #eaedef;
}

.gp5 nav li.menu > a {
  font-size: 16px;
  font-weight: 400;
}

/* 메뉴 바 */
.gp5 .menu-container {
  display: flex;
  justify-content: space-between;
  position: relative;
  width: 100%;
  padding: 4px 0;
}

.gp5 .menu {
  padding: 15px 0 15px 26px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.gp5 .menu .remain-time {
  color: #47517d;
  font-size: 0.8em;
}

.gp5 .menu .bar-left {
  margin-left: 25px;
}

/* 메뉴오버시 밑줄 효과 */
.gp5 .menu > a {
  position: relative;
  text-decoration: none;
  color: black;
  padding-bottom: 4px;
}

.gp5 .menu > a::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 0;
  height: 2px;
  background-color: black;
  transition: width 0.3s ease, left 0.3s ease;
}

.gp5 .menu > a:hover::after {
  width: 100%;
  left: 0;
}



.gp5 .menu .bb {
  color: #47517d;
  font-weight: 600;
}

.gp5 .menu:nth-child(1) {
  padding-left: 0;
}




/* 서브메뉴 컨테이너 */
.gp5 .submenu-container {
  position: absolute;
  /* top: 59px; */
  left: 0;
  width: 100vw;              /* ✅ 화면 전체 */
  background-color: rgba(0, 0, 0, 0.5);
  display: block;
  opacity: 0;
  max-height: 0;
  z-index: 1000;
  overflow: hidden;
  transition: max-height 0.3s ease-in-out, opacity 0.3s ease-in-out;
}

/* ✅ 열렸을 때만 그림자 보이게 */
.gp5 .menu:hover > .submenu-container,
.gp5 .menu-container.submenu-open .menu > .submenu-container{
  overflow: visible;
}

/* ✅ menu1만 hover 오픈 (원하면 아예 제거하고 Vue로만 제어해도 됨) */
.gp5 .menu:hover .submenu-container{
  opacity: 1;
  max-height: 850px;
}



/* === 드롭다운: 화면 전체 폭으로 펼치기 (1300 컨테이너 밖으로) === */
.menu .submenu-container{
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;          /* ✅ 화면 전체 */
  right: auto;           /* 기존 right:0 무력화 */
  margin: 0;
  z-index: 1000;
}

/* === 흰 박스 자체도 화면 전체 === */
.menu .submenu{
  width: 100vw;          /* ✅ 흰 박스도 전체폭 */
  max-width: none;       /* ✅ 1300 제한 제거 */
  margin: 0;
  box-sizing: border-box;
  background-color: #fff;
  border-top: 1px solid #eaedef;

  /* ✅ 내용은 기존 1300 정렬 느낌 유지 (양쪽 패딩을 자동 계산) */
  padding: 20px max(16px, calc((100vw - 1300px) / 2));

  position: relative;
  z-index: 1;
  background: #fff;
  /* box-shadow: 0 14px 30px rgba(0,0,0,0.12) !important; */
  box-shadow: 0 18px 18px -18px rgba(0,0,0,0.1) !important;
}

/* 1) nav 자체를 위로 올려서 아래 섹션이 덮지 못하게 */
.gp5 .menu > .submenu-container::before{
  content:"";
  position:absolute;
  top:-14px;      /* ✅ 이만큼 위로 */
  left:0;
  width:100%;
  height:14px;    /* ✅ 브릿지 높이 */
  background:transparent;
}
/* 2) 컨테이너도 더 위로 + 그림자 잘림 방지 */
/* .gp5 .submenu-container{
  z-index: 6000 !important;
  overflow: visible !important;
  background: transparent !important;
  max-height: none !important;
} */

/* ✅ 전체상품 드롭다운 열려있을 때: 다른 메뉴들이 hover로 submenu 못 열게 차단 */
/* .gp5 .menu-container.submenu-open > .menu:not(#menu1){
  pointer-events: none;
} */

/* ✅ 기본: 닫혀있을 때는 클릭 통과 */
.gp5 .menu > .submenu-container{
  pointer-events: none;
}

/* ✅ hover로 열리는 메뉴(당일판/명함/책자 등) */
.gp5 .menu:hover > .submenu-container{
  pointer-events: auto;
}

/* ✅ Vue로 열리는 전체상품(menu1) */
.gp5 .menu-container.submenu-open #menu1 > .submenu-container{
  pointer-events: auto;
}





.gp5 .submenu-container .box-guide {
  background-color: #f7f7f7;
  padding-top: 30px;
}

.gp5 .submenu-container .box-guide .info1 {
  display: flex;
  justify-content: center;
  margin-bottom: 30px;
}

.gp5 .submenu-container .box-guide .info1 .align1 {
  margin-right: 20px;
  text-align: center;
}

.gp5 .submenu-container .box-guide .info1 .align2 {
  margin-left: 20px;
  text-align: center;
}

.gp5 .submenu-container .box-guide .info2 {
  padding: 0 40px;
}

.gp5 .submenu-container .box-guide .info2 table td:nth-child(1) {
  vertical-align: top;
}

.gp5 .submenu-container .box-guide .info2 .stitle {
  font-size: 14px;
  font-weight: 600;
}

.gp5 .submenu-container .box-guide .info2 table td span {
  color: #47517d;
}

.gp5 .submenu-container .box-guide .info2 .warning {
  color: #f66161;
}




.gp5 .submenu-container .submenu-all .columns {
  display: flex;
  gap: 5vw;
}

.groups-wrap {
  display: flex;
  gap: 4vw;
}


.gp5 .submenu-container .submenu-all .column-six {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
}


/* .gp5 .submenu-container .submenu-all .column-four {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
} */

.gp5 .submenu-container .submenu-all .columns li {
  border-left: 1px solid #eee;
  padding-left: 20px;
  height: auto;
  min-height: 180px;
}

.gp5 .submenu-container .submenu-today .column-four li,
.gp5 .submenu-container .submenu-namecard .column-five li,
.gp5 .submenu-container .submenu-book .column-four li,
.gp5 .submenu-container .submenu-all .column-six li,
.gp5 .submenu-container .submenu-all .column-six3 li,
.gp5 .submenu-container .submenu .column-four li {
  border-left: 1px solid #eee;
  padding-left: 20px;
  height: auto;
  min-height: 220px;
}

.gp5 .submenu-container .submenu-all .groups {
  margin-bottom: 30px;       /* 기존보다 줄이기 */
}

.gp5 hr {
  border: 1px solid #eee !important;
  display: none;
}





.gp5 .submenu-container .submenu-all .column-six li:nth-child(7) {
  border-left: none;
  padding-left: 0;
}

.gp5 .submenu-container .submenu-all .column-six li:nth-child(n+7):nth-child(-n+12) {
  height: 250px;
}

.gp5 .submenu-container .submenu-all .column-six3 {
  display: grid;
  grid-template-columns: 1fr 1fr 4fr;
}

.gp5 .submenu-container .submenu-all .column-six3 li {
  border-left: 1px solid #dadfe2;
  padding-left: 30px;
}

/* .gp5 .submenu-container .submenu-all .column-six3 li:nth-child(1) {
  border-left: none;
} */

.gp5 .submenu-container .submenu-all .column-six4 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 3fr;
}

.gp5 .submenu-container .submenu-all .column-six4 li {
  border-left: 1px solid #dadfe2;
  padding-left: 30px;
}

/* .gp5 .submenu-container .submenu-all .column-six4 li:nth-child(1) {
  border-left: none;
} */

.gp5 .submenu-container .submenu-all .column-six5 {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
}

.gp5 .submenu-container .submenu-all .column-six5 li {
  border-left: 1px solid #dadfe2;
  padding-left: 30px;
}

/* .gp5 .submenu-container .submenu-all .column-six5 li:nth-child(1) {
  border-left: none;
} */

.gp5 .submenu-container .submenu-today .column-four {
  display: grid;
  grid-template-columns: 1fr 1fr 2fr 387px;
}





.gp5 .submenu-container .submenu-today .column-four .digital-today .line {
  border-left: 1px dotted rgb(224, 224, 224);
  border-right: 1px dotted rgb(224, 224, 224);
  padding-left: 30px;
}

/* 메뉴 명함 */
.gp5 .submenu-container .submenu-namecard .column-five {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 387px;
}



.gp5 .submenu-container .submenu-namecard .column-five .pt .line {
  border-left: 1px dotted rgb(224, 224, 224);
  padding-left: 30px;
}

.gp5 .submenu-container .submenu-namecard .column-five a {
  line-height: 30px;
}

/* .gp5 .submenu-container .submenu-namecard .column-five li:nth-child(1) {
  border-left: none;
} */

/* 메뉴 책자 */
.gp5 .submenu-container .submenu-book .column-four {
  display: grid;
  grid-template-columns: 1fr 1fr 2fr 387px;
}

.gp5 .submenu-container .submenu-book .column-four a {
  line-height: 30px;
}

.gp5 .submenu-container .submenu-book .column-four li {
  border-left: 1px solid #dadfe2;
  padding-left: 30px;
}

/* .gp5 .submenu-container .submenu-book .column-four li:nth-child(1) {
  border-left: none;
  padding-left: 0;
} */

.gp5 .submenu-container .submenu-book .column-four .pt .line {
  border-left: 1px solid #dadfe2;
  padding-left: 30px;
}

/* 썸네일 이미지 오버시 확대 */
.gp5 .background-box {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  width: 304px;
  height: 304px;
  background-color: #f7f7f7;
  background-image: url('images/rect/1.png');
  background-size: 100%;
  background-position: center;
  background-repeat: no-repeat;
  transition: background-size 0.3s ease-in-out;
}

.background-box img {
    width: 100%;
    height: auto;
    -o-object-fit: contain;
    object-fit: contain;
    display: block;
}

.gp5 .main-best-img {
  justify-content: left;
  align-items: left;
  position: absolute;
  top: 0px;
  left: 16px;
  width: 46px;
  height: auto;
}

.gp5 .background-box:hover {
  background-size: 110%;
}

/* 푸터 */
.gp5 footer .part-one {
  width: 100%;
  height: 220px;
  background-color: #f7f7f7;
}

.gp5 footer .part-one .site-info {
  display: flex;
  width: 1300px;
  margin: 0 auto;
  justify-content: space-between;
}

.gp5 footer .part-one .site-info .phone {
  width: 334px;
  padding-top: 30px;
}

.gp5 footer .part-one .site-info .phone .title {
  font-size: 15px;
  margin-bottom: 20px;
  font-weight: 600;
}

.gp5 footer .part-one .site-info .phone .phone-number {
  display: block;
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 10px;
}

.gp5 footer .part-one .site-info .phone .working-day {
  font-size: 13px;
  color: #2f3438;
  margin-bottom: 10px;
}

.gp5 footer .part-one .site-info .phone .working-time {
  font-size: 13px;
  color: #2f3438;
  border-left: 1px solid #dadfe2;
  padding-left: 10px;
}

.gp5 footer .part-one .site-info .map {
  width: 632px;
  position: relative;
}

.gp5 footer .part-one .site-info .map .link {
  position: absolute;
  top: 30px;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  row-gap: 16px;
  align-items: center;
  border-left: 1px solid #dadfe2;
  border-right: 1px solid #dadfe2;
}

.gp5 footer .part-one .site-info .map .link a {
  display: flex;
  align-items: center;
  padding-left: 80px;
}

.gp5 footer .part-one .site-info .etc {
  width: 334px;
  position: relative;
}

.gp5 footer .part-one .site-info .etc .holder1 {
  position: absolute;
  left: 0;
  top: 30px;
  width: 420px;
  height: 154px;
}

.gp5 footer .part-one .site-info .etc .holder2 {
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  row-gap: 18px;
  align-items: center;
  justify-content: center;
}

.gp5 footer .part-one .site-info .etc .etcbtn {
  display: block;
  width: 254px;
  border: 1px solid #dadfe2;
  text-align: center;
  padding: 10px 20px;
}

.gp5 footer .part-two {
  width: 100%;
  min-height: 170px;
  background-color: #fff;
}

.gp5 footer .part-two .holder {
  width: 1300px;
  margin: 0 auto;
  padding-top: 30px;
  display: flex;
  justify-content: space-between;
}

.gp5 footer .part-two .holder .address {
  /* width: 966px; */
  font-size: 12px;
  color: #707070;
  line-height: 22px;
}

.gp5 footer .part-tow .holder .address .biz-no {
  display: inline-block;
  width: 100px;
  height: 20px;
  border: 1px solid #333;
  font-size: 12px;
}

.gp5 footer .part-two .holder .rules {
  color: #777;
  font-weight: 700;
}


/* sns */
.social-link {
  display: flex;
  justify-content: right;
  text-align: right;
  gap: 75px;
  margin-right: 54px;
}

/* img-box */
.footer-img-box {
  width: 100%;
  height: 100%;
  position: relative;
}

.footer-img-box img {
  position: absolute;
  inset: 0;
  object-fit: cover;
  transition: opacity .25s;
}

/* hover 이미지는 기본적으로 투명 */
.footer-img-box img.hover {
  opacity: 0;
}

/* hover 시 앞 이미지 보이게 */
.footer-img-box:hover img.hover {
  opacity: 1;
}

/* hover 시 기본 이미지 숨기기 */
.footer-img-box:hover img.default {
  opacity: 0;
}


.gp5 #the-dark {
  transition: opacity 0.5s ease, visibility 0s 0.5s;
}

/* 멤버쉽 정보 */
.gp5 .membership-info {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 394px;
  margin: 0 auto;
  background-color: #fff;
  border-radius: 10px;
}

.gp5 .membership-info .header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #707070;
}

.gp5 .membership-info .header .close {
  padding-right: 10px;
}

.gp5 .membership-info .header .title {
  flex: 1;
  font-size: 16px;
  font-weight: 600;
  padding: 12px 0;
  text-align: center;
  padding-left: 20px;
}

.gp5 .membership-info .conts {
  padding: 0 45px;
}

.gp5 .membership-info .conts .title {
  font-size: 16px;
  font-weight: 400;
  text-align: center;
  padding: 24px 0;
}

.gp5 .membership-info .conts .title .member {
  font-size: 18px;
}

.gp5 .membership-info .conts .welcome {
  text-align: center;
  margin-bottom: 40px;
}

.gp5 .membership-info .conts .warning {
  font-size: 16px;
  color: #f66161;
  margin-bottom: 15px;
}

.gp5 .membership-info .conts .a-btn {
  display: block;
  font-size: 16px;
  color: rgba(47, 52, 56, 0.7);
  border: 1px solid #d1d7dB;
  padding: 8px 0;
  border-radius: 10px;
  text-align: center;
  margin-bottom: 15px;
}

.gp5 .membership-info .conts .money {
  display: grid;
  grid-template-columns: 8fr 1fr;
  align-items: center;
  background-color: #f7f7f7;
  padding: 4px 12px;
  border-radius: 10px;
  margin-bottom: 10px;
}

.gp5 .membership-info .conts .money .price {
  font-size: 21px;
  color: #47517d;
  font-weight: 400;
}

.gp5 .membership-info .conts .money .label {
  color: #47517d;
}

.gp5 .membership-info .a-btn2 {
  display: block;
  background-color: #f7f7f7;
  text-align: center;
  padding: 10px 0;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}

/* 접수시간 안내 */
.gp5 .order-time-info {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 394px;
  margin: 0 auto;
  background-color: #fff;
  border-radius: 10px;
}

.gp5 .order-time-info .header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #707070;
  background-color: #47517d;
}

.gp5 .btn-layer-close {
  cursor: pointer;
}

.gp5 .order-time-info .header .title {
  flex: 1;
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  padding: 12px 0;
  text-align: left;
  padding-left: 20px;
  margin-left: 10px;
}

.gp5 .order-time-info .header .close {
  padding-right: 10px;
}

.gp5 .order-time-info .conts {
  display: grid;
  grid-template-columns: 1fr 1.8fr;
  padding: 14px 30px;
  row-gap: 14px;
}

.gp5 .order-time-info .conts .label {
  font-size: 16px;
  font-weight: 600;
}

.gp5 .order-time-info .conts .time {
  font-size: 16px;
}

.gp5 .order-time-info .conts .line {
  grid-column: span 2;
  border-bottom: 1px solid #dadfe2;
}

.gp5 .order-time-info .customer {
  background-color: #f7f7f7;
  padding: 10px 30px;
}

.gp5 .order-time-info .customer .holder {
  display: flex;
}

.gp5 .order-time-info .customer .holder .txt1,
.gp5 .order-time-info .customer .holder .txt2 {
  font-size: 16px;
  font-weight: 600;
}

.gp5 .order-time-info .customer .holder .txt2 {
  margin-left: 10px;
}

.gp5 .order-time-info .customer .holder .txt3 {
  margin-left: 10px;
}

.gp5 .order-time-info .customer .time-info {
  font-size: 13px;
  color: #2f3438;
  opacity: 0.9;
  line-height: 21px;
}

.gp5 .order-time-info .consult {
  text-align: center;
  padding: 25px 0 10px 0;
}

.gp5 .order-time-info .consult .txt {
  color: #47517d;
  font-weight: 600;
}

.gp5 .order-time-info .channel {
  padding: 0 30px;
}

.gp5 .order-time-info .channel .channel-btn {
  border: 1px solid #dadfe2;
  border-radius: 10px;
  text-align: center;
  padding: 10px 0;
  background-color: #ffe812;
  display: flex;
  align-items: center;
  justify-content: center;
}

.gp5 .order-time-info .channel .channel-btn img {
  width: 18px;
  height: 18px;
  margin-right: 6px;
}

.gp5 .order-time-info .channel .channel-btn .txt {
  font-size: 16px;
  color: #3c1e1e !important;
  font-weight: 600;
  margin-bottom: 3px;
}

/** 고객리뷰 리스트 **/
.gp5 .review-list {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 1240px;
  height: 634px;
  background-color: #fff;
  border-radius: 10px;
}

.gp5 .review-list .header {
  display: flex;
  align-items: center;
  justify-content: apace-between;
  padding: 10px 0;
  border-bottom: 1px solid #96999b;
}

.gp5 .review-list .header .title-holder {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.gp5 .review-list .thumbs {
  display: grid;
  grid-template-columns: repeat(4, 1fr) auto;
  padding: 20px;
  row-gap: 20px;
  height: 565px;
  overflow-y: auto;
}

/** 고객리뷰 보기 **/
.gp5 .review-view {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 1240px;
  background-color: #fff;
  border-radius: 10px;
}

.gp5 .review-view .out-title {
  position: relative;
}

.gp5 .review-view .out-title .holder {
  position: absolute;
  left: 0;
  top: -40px;
  color: #fff;
  display: flex;
  align-items: center;
}

.gp5 .review-view .out-title .holder .txt {
  font-size: 20px;
  font-weight: 600;
}

.gp5 .review-view .out-title .holder .txt2 {
  font-size: 20px;
  font-weight: 600;
  opacity: 0.5;
  margin: 0 5px;
}

.gp5 .review-view .out-title .holder .txt3 {
  font-size: 24px;
  font-weight: 600;
  opacity: 0.5;
}

.gp5 .review-view .header {
  display: flex;
  align-items: center;
  justify-content: apace-between;
  padding: 10px 0;
  border-bottom: 1px solid #96999b;
}

.gp5 .review-view .header .close {
  cursor: pointer;
}

.gp5 .review-view .header .title-holder {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.gp5 .review-view .header img.moa {
  opacity: 0.5;
}

.gp5 .review-view .body {
  display: flex;
}

.gp5 .review-view .body .photo {
  width: 772px;
  position: relative;
}

.gp5 .review-view .body .photo .prev:hover,
.gp5 .review-view .body .photo .next:hover {
  cursor: pointer;
  background-color: rgba(0, 0, 0, 0.4);
}

.gp5 .review-view .body .conts-holder {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.gp5 .review-view .body .conts-holder .texts {
  padding: 25px;
}

.gp5 .review-view .body .conts-holder .texts .title {
  font-size: 20px;
  font-weight: 600;
}

.gp5 .review-view .body .conts-holder .texts .order {
  margin-bottom: 12px;
}

.gp5 .review-view .body .conts-holder .texts .order .point {
  color: #2f3438;
  font-weight: 600;
  margin-right: 12px;
}

.gp5 .review-view .body .conts-holder .texts .order .user,
.gp5 .review-view .body .conts-holder .texts .order .dates {
  color: #2F3438;
  opacity: 0.7;
}

.gp5 .review-view .body .conts-holder .texts .order .cnt {
  color: #47517d;
}

.gp5 .review-view .body .conts-holder .texts .review-short {
  margin-bottom: 12px;
  font-size: 13px;
}

.gp5 .review-view .body .conts-holder .texts .review-short span {
  background-color: #eceff0;
  padding: 1px 6px;
  border-radius: 4px;
  margin-left: 4px;
}

.gp5 .review-view .body .conts-holder .texts .review-short span:nth-child(1) {
  margin-left: 0;
}

.gp5 .review-view .body .conts-holder .texts .order-spec {
  font-size: 13px;
  color: #2f3438;
  opacity: 0.9;
}

.gp5 .review-view .body .conts-holder .texts .line {
  border-top: 1px solid #707070;
}

.gp5 .review-view .body .conts-holder .texts .memo {
  font-size: 16px;
}

.gp5 .review-view .body .photo .prev {
  position: absolute;
  width: 38px;
  height: 38px;
  background-color: rgba(0, 0, 0, 0.1);
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  line-height: 34px;
  text-align: center;
}

.gp5 .review-view .body .photo .next {
  position: absolute;
  width: 38px;
  height: 38px;
  background-color: rgba(0, 0, 0, 0.1);
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  line-height: 34px;
  text-align: center;
}

.gp5 .review-view .body .thumbs {
  padding: 20px 25px;
}

.gp5 .review-view .body .thumbs .line {
  border-top: 1px solid #707070;
}

.gp5 .review-view .body .thumbs .thumb-img {
  display: flex;
  justify-content: space-between;
}

.gp5 .review-view .body .thumbs .thumb-img .box {
  width: 73px;
  height: 73px;
  background-color: #dadfe2;
  border-radius: 10px;
}

.gp5 .review-view .body .thumbs .thumb-img .item {
  border: 2px solid #fff;
  border-radius: 13px;
}

.gp5 .review-view .body .thumbs .thumb-img .item:hover {
  border: 2px solid #333;
}

.gp5 .review-view .navi {
  position: relative;
}

.gp5 .review-view .navi .holder {
  position: absolute;
  width: 100%;
  bottom: -50px;
  z-index: 2;
}

.gp5 .review-view .navi .holder .align {
  display: flex;
  justify-content: center;
  align-items: center;
}

.gp5 .review-view .navi .holder .align .btn-prev {
  margin-right: 20px;
}

.gp5 .review-view .navi .holder .align .btn-next {
  margin-left: 20px;
}

.gp5 .review-view .navi .holder .align .txt {
  font-size: 19px;
  color: #fff;
}

.gp5 .review-view .navi .holder .align .v-bar {
  font-size: 15px;
  font-weight: 600;
  margin: 0 20px;
  color: #fff;
}

/* 찜 리스트 */
.gp5 .zzim-list {
  width: 1300px;
  margin: 0 auto;
  background-color: #fff;
}

.gp5 .zzim-list .zzim-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 0;
  border-bottom: 1px solid #707070;
}

.gp5 .zzim-list .title {
  margin-left: 4px;
  font-size: 19px;
}

.gp5 .zzim-list .title2 {
  font-size: 17px;
  font-weight: 600;
}

.gp5 .zzim-list .btn-custom {
  border: 1px solid #dadfe2;
  padding: 5px 10px;
  border-radius: 4px;
}

.gp5 .zzim-list .thumb-list {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
}

.gp5 .zzim-list .thumb-list .holder {
  width: 249px;
}

.gp5 .zzim-list .thumb-list .holder .desc .title {
  font-size: 16px;
  font-weight: 600;
  padding-top: 14px;
  margin-bottom: 6px;
}

.gp5 .zzim-list .thumb-list .star-point {
  color: #2f3438;
}

.gp5 .zzim-list .thumb-list .ov-bar {
  margin: 0 5px;
  opacity: 0.3;
}

.gp5 .zzim-list .empty {
  height: 46px;
}

.gp5 .zzim-wrap100 {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100%;
  background-color: #fff;
  transform: translate(-50%, -50%);
}

/* 이벤트 */
.gp5 .event {
  width: 1300px;
  margin: 0 auto;
}

.gp5 .event .header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 40px 0;
}

.gp5 .event .header .title {
  font-size: 25px;
  font-weight: 500;
}

.gp5 .event .btn-list {
  display: flex;
  align-items: center;
  border: 1px solid #dadfe2;
  border-radius: 4px;
  padding: 12px 30px;
  font-size: 16px;
}

.gp5 .event .btn-list:hover {
  border-color: #47517d;
}

.gp5 .event .btn-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #dadfe2;
  border-radius: 4px;
  width: 50px;
  height: 50px;
  font-size: 16px;
  line-height: 50px;
  margin-left: 10px;
}

.gp5 .event .btn-arrow:hover {
  border-color: #47517d;
}

.gp5 .main_certificate {
  padding: 2px 6px;
  border: 1px solid #dadfe2;
  border-radius: 4px;
}

.gp5 .main_certificate:hover {
  background: #47517d;
  color: #fff !important;
}

.gp5 .etcbtn:hover {
  background: #47517d;
  color: #fff !important;
}





.gp5 .submenu-container .submenu-all .title.small-cate::after{
  content: " >";
  margin-left: 6px;
  font-size: 12px;
  font-weight: 500;
  opacity: 0.7;
}

.title.small-cate {
  font-size: 16px !important;   /* 기존 18px보다 작게 */

}

.submenu-container .sang-today .title.small-cate {
  font-size: 16px !important;   /* 기존 18px보다 작게 */
}

.submenu-container .column-four.large-cat .sang-today .title.small-cat {
  font-size: 16px !important;   /* 기존 18px보다 작게 */
}


.line {
  line-height: 24px !important;
}

.line a {
  font-size: 13px !important;
}



/* =========================
  ✅ 서브메뉴 공통 폰트(당일판~스티커 hover 모두)
========================= */

.gp5 .submenu-container .submenu .big-cate {
  font-size: 18px;
  font-weight: 700;
  margin: 16px 0 14px;
}


/* 1) 서브메뉴 타이틀: "명함 >" 같은 제목 */
.gp5 .submenu p.title.small-cate,
.gp5 .submenu p.title.small-cat{
  display: flex;
  align-items: center;
  font-size: 16px !important;
  font-weight: 600 !important;
  line-height: 1.1 !important;
  margin: 0 0 8px 0 !important;
  color: #191919;
}

/* 2) 타이틀 뒤에 > 붙이기 (당일판처럼 이미 아이콘+텍스트인 것도 같이) */
.gp5 .submenu p.title.small-cate::after,
.gp5 .submenu p.title.small-cat::after{
  content: " >";
  margin-left: 6px;
  font-size: 12px;
  font-weight: 500;
  opacity: 0.7;
}


.gp5 .submenu-container ul.submenu-rlink:nth-child(1) {
  display: flex;
  gap: 10px;
}

.gp5 .submenu-container ul.submenu-rlink:nth-child(1) li {
  border: 1px solid #ddd;
  border-radius: 12px;
  padding: 6px 12px;
  cursor: pointer;
}





/* 서브메뉴오버시 밑줄 효과 */
.gp5 .submenu a {
  position: relative;
  text-decoration: none;
  font-size: 13px;
  line-height: 24px !important;
  font-weight: 400 !important;
  /* color: #222; */
}

.gp5 .submenu-container .submenu-today .column-four .sang-today a,
.gp5 .submenu-container .submenu-today .column-four .digital-today a {
  line-height: 24px;
  color: #222;
}

.gp5 .submenu .pt a::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 0;
  height: 1px;
  background-color: black;
  transition: width 0.3s ease, left 0.3s ease;
}

.gp5 .submenu .pt a:hover::after {
  width: 100%;
  left: 0;
}


/* 4) 당일판처럼 줄간격을 div.line에만 주던거 대신 공통 유지 (원하면 삭제 가능) */
.gp5 .submenu .line{
  line-height: 24px !important;
}


.groups-end {
  display: flex;

}










/* =========================
  ✅ 명함 서브메뉴(오른쪽 2개 카드형) 최종
========================= */

/* 2링크 + (빈공간) + 오른쪽 카드 영역 */
.gp5 .submenu-container .submenu-namecard-simple .column-four{
  display: grid;
  grid-template-columns: 240px 240px 1fr; /* ✅ 오른쪽 카드들은 promo-wrap이 3번째(남는공간)에서 우측정렬 */
  align-items: start;
}

/* 링크 컬럼(pt)만 세로 라인 */
.gp5 .submenu-container .submenu-namecard-simple .column-four > .pt{
  min-height: 220px;
  padding-left: 24px;
  border-left: 1px solid #eee;
  box-sizing: border-box;
}

/* 첫번째 링크컬럼은 라인 제거 */
.gp5 .submenu-container .submenu-namecard-simple .column-four > .pt:first-child{
  border-left: none;
  padding-left: 0;
}

/* ✅ 이미지들 좌측 선 제거(= 카드 영역에는 border 없음) */
.gp5 .submenu-container .submenu-namecard-simple .promo-wrap{
  border-left: none !important;
  padding-left: 0 !important;

  /* ✅ 오른쪽 끝으로 모으기 */
  display: flex;
  justify-content: flex-end;
  gap: 24px;                /* 카드 간격 */
}

/* ✅ 카드 hover해도 변화 없게 */
.gp5 .submenu-container .submenu-namecard-simple .submenu-promo-card{
  display: block;
  text-decoration: none;
  color: inherit;
  width: 300px;             /* 카드 폭 고정 */
}
.gp5 .submenu-container .submenu-namecard-simple .submenu-promo-card:hover{
  color: inherit;
  transform: none;
}



.gp5 .submenu-container .submenu-namecard-simple .promo-title {
  font-size: 14px;
  font-weight: 600;
}

.gp5 .submenu-container .submenu-namecard-simple .promo-title, .gp5 .submenu-container .submenu-namecard-simple .promo-desc {
  line-height: 1.6;
}


/* ✅ 보더가 콘텐츠 높이까지만 오게 + 너무 길게 내려오는 것 방지 */
.gp5 .submenu-two-card .column-three{
  align-items: start;          /* 혹시 깨져있으면 유지 */
}

.gp5 .submenu-two-card .column-three > .pt{
  min-height: 0 !important;    /* ✅ 220px 제거(보더가 과하게 길어지는 핵심) */
  align-self: start;           /* ✅ grid stretch 방지 */
}

/* ✅ "맨 왼쪽 pt"도 보더 사라지지 않게 (기존 first-child none을 덮어씀) */
.gp5 .submenu-two-card .column-three > .pt:first-child{
  border-left: 1px solid #eee !important;
  padding-left: 24px !important;
}

/* ✅ 명함(submenu-namecard-simple)만: 보더 길이(세로) 과하게 내려오는 것 방지 */
.gp5 .submenu-container .submenu-namecard-simple .column-four > .pt{
  min-height: auto !important;   /* 기존 220px 무효화 */
}

/* ✅ 명함(submenu-namecard-simple)만: 맨 왼쪽 pt에도 border-left 나오게 */
.gp5 .submenu-container .submenu-namecard-simple .column-four > .pt:first-child{
  border-left: 1px solid #eee !important;  /* 기존 none 무효화 */
  padding-left: 24px !important;           /* 다른 pt들과 동일 정렬 */
}



.is-modal-open .gp5 nav:focus,
.is-modal-open .gp5 nav:focus-visible,
.is-modal-open .gp5 .menu > a:focus,
.is-modal-open .gp5 .menu > a:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}




/* =========================================================
   ✅ HeaderMenu.vue styles moved here (from component)
   - common.css 맨 아래에 두어 기존 규칙을 최종 override 하도록 함
========================================================= */

/* ===== (scoped였던) 상단 메뉴 컨테이너 기본 ===== */
.gp5 nav .menu-container{
  max-width: 1300px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 26.4px;

  /* 기존 common.css의 justify-content: space-between 을 무효화하고
     gap 기반 정렬(좌→우)로 맞춤 */
  justify-content: flex-start;

  position: relative;
  list-style: none;
  padding-left: 0;
  box-sizing: border-box;
  white-space: nowrap;
}

.gp5 nav .menu-container > .menu{
  position: static;
  padding: 0;
}

.gp5 nav .menu-container > .menu > a{
  display: flex !important;
  align-items: center;
  padding: 8px 0px;
  line-height: 1;
}

.gp5 nav .menu .bar-left{
  border-right: 1px solid #e3e3e3;
  height: 18px;
}

/* =========================
  ✅ (핵심) 전체상품 드롭다운 버그 픽스
========================= */

/* 서브메뉴 컨테이너 기본 */
.gp5 .submenu-container{
  position: absolute;
  left: 0;
  width: 100vw;
  background-color: rgba(0, 0, 0, 0.5);
  display: block;
  opacity: 0;
  max-height: 0;
  z-index: 1000;
  overflow: hidden;
  transition: max-height 0.3s ease-in-out, opacity 0.3s ease-in-out;
  pointer-events: none; /* 기본은 클릭 막기 */
}

/* ✅ Vue로 여는 전체상품(menu1) */
.gp5 .menu-container.submenu-open #menu1 > .submenu-container{
  opacity: 1;
  max-height: 850px;
  pointer-events: auto;
  overflow: visible;
}

/* 드롭다운 위치 */
.gp5 .menu .submenu-container{
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  margin: 0;
}

/* 흰 박스 */
.gp5 .menu .submenu{
  width: 100vw;
  max-width: none;
  margin: 0;
  box-sizing: border-box;
  background-color: #fff;
  border-top: 1px solid #eaedef;
  padding: 24px max(16px, calc((100vw - 1300px) / 2)) 36px;
  position: relative;
  z-index: 1;
  box-shadow: 0 18px 18px -18px rgba(0,0,0,0.1) !important;
}

/* nav 레이어 */
.gp5 nav{
  position: relative;
  z-index: 900;
}

/* =========================
  ✅ 공통 링크/타이포
========================= */
.gp5 .submenu p.title.small-cate,
.gp5 .submenu p.title.small-cat{
  display: flex;
  align-items: center;
  font-size: 16px !important;
  font-weight: 600 !important;
  line-height: 1.1 !important;
  margin: 0 0 8px 0 !important;
  color: #191919;
}
.gp5 .submenu p.title.small-cate::after,
.gp5 .submenu p.title.small-cat::after{
  content: " >";
  margin-left: 6px;
  font-size: 12px;
  font-weight: 500;
  opacity: 0.7;
}
.gp5 .submenu a{
  position: relative;
  text-decoration: none;
  font-size: 13px;
  line-height: 24px !important;
  font-weight: 400 !important;
}

/* =========================
  ✅ 책자~당일판: 우측 이미지 2장 레이아웃
========================= */
.gp5 .submenu-two-card .column-three{
  display: grid;
  grid-template-columns: 240px 240px 1fr; /* 좌/디지털/우카드 */
  align-items: start;
}

.gp5 .submenu-two-card .column-three > .pt{
  min-height: 220px;
  padding-left: 24px;
  border-left: 1px solid #eee;
  box-sizing: border-box;
}
.gp5 .submenu-two-card .column-three > .pt:first-child{
  border-left: none;
  padding-left: 0;
}

.gp5 .submenu-two-card .promo-wrap{
  border-left: none !important;
  padding-left: 0 !important;
  display: flex;
  justify-content: flex-end;
  gap: 24px;
}

.gp5 .submenu-two-card .submenu-promo-card{
  display: block;
  text-decoration: none;
  color: inherit;
  width: 300px;
}
.gp5 .submenu-two-card .submenu-promo-card:hover{
  color: inherit;
  transform: none;
}

.gp5 .submenu-two-card .promo-thumb{
  width: 300px;
  height: 180px;
  background: #f3f4f6;
  overflow: hidden;
  display: block;
  margin-bottom: 8px;
  border-radius: 14px;
}
.gp5 .submenu-two-card .promo-thumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.gp5 .submenu-two-card .promo-title{
  font-size: 14px;
  font-weight: 600;
}
.gp5 .submenu-two-card .promo-title,
.gp5 .submenu-two-card .promo-desc{
  line-height: 1.6;
}

/* =========================
  ✅ 명함 카드 레이아웃 유지
========================= */
.gp5 .submenu-container .submenu-namecard-simple .column-four{
  display: grid;
  grid-template-columns: 240px 240px 1fr;
  align-items: start;
}
.gp5 .submenu-container .submenu-namecard-simple .column-four > .pt{
  min-height: 220px;
  padding-left: 24px;
  border-left: 1px solid #eee;
  box-sizing: border-box;
}
.gp5 .submenu-container .submenu-namecard-simple .column-four > .pt:first-child{
  border-left: none;
  padding-left: 0;
}
.gp5 .submenu-container .submenu-namecard-simple .promo-wrap{
  border-left: none !important;
  padding-left: 0 !important;
  display: flex;
  justify-content: flex-end;
  gap: 24px;
}
.gp5 .submenu-container .submenu-namecard-simple .submenu-promo-card{
  display: block;
  text-decoration: none;
  color: inherit;
  width: 300px;
}
.gp5 .submenu-container .submenu-namecard-simple .promo-thumb{
  width: 300px;
  height: 180px;
  background: #f3f4f6;
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 8px;
}
.gp5 .submenu-container .submenu-namecard-simple .promo-thumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.gp5 .submenu-container .submenu-namecard-simple .promo-title{
  font-size: 14px;
  font-weight: 600;
}
.gp5 .submenu-container .submenu-namecard-simple .promo-title,
.gp5 .submenu-container .submenu-namecard-simple .promo-desc{
  line-height: 1.6;
}




/* =========================================================
   ✅ 서브메뉴 텍스트 hover 컬러 통일 + 밑줄 제거
   - 상업인쇄(big-cate), 명함(title), 일반명함(a) 등 모두 #138ff3
   - 기존 밑줄(::after) 효과 제거
   - common.css 맨 아래에 추가
========================================================= */

/* 0) (선택) 상단 메뉴(1뎁스) 밑줄 효과도 지우고 싶으면 같이 */
.gp5 .menu > a::after,
.gp5 .menu > a:hover::after{
  content: none !important;
  width: 0 !important;
  cursor: pointer;
}

/* 1) 서브메뉴 링크 밑줄 효과 제거 (현재 .gp5 .submenu .pt a::after 쓰고 있음) */
.gp5 .submenu .pt a::after,
.gp5 .submenu .pt a:hover::after{
  content: none !important;
  width: 0 !important;
  cursor: pointer;
}

/* 2) “title 뒤에 >” 도 hover시 파란색으로 */
.gp5 .submenu p.title.small-cate::after,
.gp5 .submenu p.title.small-cat::after{
  color: inherit; /* 부모 hover 색 따라가게 */
  cursor: pointer;
}

/* 3) 서브메뉴 내부: big-cate / title / link hover 시 컬러 통일 */
.gp5 .submenu-container .submenu .big-cate,
.gp5 .submenu-container .submenu p.title.small-cate,
.gp5 .submenu-container .submenu p.title.small-cat,
.gp5 .submenu-container .submenu a{
  transition: color .15s ease;
}

/* big-cate(상업인쇄/디지털인쇄/실사출력 등) hover */
.gp5 .submenu-container .submenu .big-cate:hover{
  color: #138ff3 !important;
  cursor: pointer;
}

/* title(명함/전단지/책자 같은 소카테 타이틀) hover */
.gp5 .submenu-container .submenu p.title.small-cate:hover,
.gp5 .submenu-container .submenu p.title.small-cat:hover{
  color: #138ff3 !important;
  cursor: pointer;
}

/* 링크(일반명함 등) hover */
.gp5 .submenu-container .submenu a:hover{
  color: #138ff3 !important;
  cursor: pointer;
  text-decoration: none !important; /* 혹시 브라우저 기본 underline 있으면 제거 */
}

/* 4) 외부링크 회색(link-muted)도 hover만큼은 파란색으로 */
.gp5 .submenu-container .submenu a.link-muted:hover{
  color: #138ff3 !important;
  cursor: pointer;
}


/* =========================================================
   ✅ 상업인쇄 / 디지털인쇄 탭 hover 스타일
   - hover: background #47517d / text #fff
   - active와 동일한 UX
========================================================= */







/* 탭 기본 */
.gp5 .submenu-container ul.submenu-rlink{
  display: flex;
  gap: 10px;
}
.gp5 .submenu-container ul.submenu-rlink li.inner-link-btn{
  border: 1px solid #ddd;
  border-radius: 12px;
  padding: 6px 12px;
  cursor: pointer;
  background: #fff;
  color: #333;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

/* ✅ 클릭(active) */
.gp5 .submenu-container ul.submenu-rlink li.inner-link-btn.active{
  background-color: #47517d !important;
  color: #fff !important;
  border-color: #47517d !important;
}

/* ✅ hover(마우스) */
.gp5 .submenu-container ul.submenu-rlink li.inner-link-btn.hover{
  background-color: #47517d !important;
  color: #fff !important;
  border-color: #47517d !important;
}