/* ===================================================================== 가방을부탁해 새 홈페이지 공통 css (2026-10 리뉴얼) - 모든 이름은 gbp- 로 시작 (예전 화면 css 와 섞이지 않게) - 휴대폰: 767px 이하 / 머리말 두 줄: 1079px 이하 ===================================================================== */ :root { --gbp-ink: #17202A; --gbp-sub: #4A5563; --gbp-mute: #6B7682; --gbp-ph: #8A949E; --gbp-line: #E3E8EE; --gbp-field: #CFD8E0; --gbp-sky: #F3F8FB; --gbp-sky2: #E5F6FD; --gbp-sky3: #CFE3EE; --gbp-band: #D4E9F9; --gbp-gray: #F3F5F7; --gbp-blue: #00ADEF; --gbp-navy: #123A55; --gbp-link: #0369A1; --gbp-deep: #0C4A6E; --gbp-red: #C62828; --gbp-kakao: #FEE500; --gbp-wechat: #07C160; --gbp-font: 'Noto Sans KR', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif; --gbp-font-jua: 'Jua', 'Noto Sans KR', sans-serif; --gbp-font-story: 'Gowun Batang', serif; } .gbp-l-chn { --gbp-font: 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Noto Sans SC', 'Noto Sans KR', sans-serif; --gbp-font-jua: 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif; --gbp-font-story: 'Songti SC', 'SimSun', serif; } /* ---------- 새 페이지 바탕 ---------- */ html { -webkit-text-size-adjust: 100%; } body.gbp-new { margin: 0; background: #FFFFFF; color: var(--gbp-ink); font-family: var(--gbp-font); font-size: 16px; line-height: 1.6; word-break: keep-all; overflow-wrap: break-word; } /* 바탕 규칙은 :where() 로 감싸 우선순위 0 → 각 칸의 class 규칙이 항상 이김 */ :where(.gbp-new) *, :where(.gbp-new) *::before, :where(.gbp-new) *::after { box-sizing: border-box; } :where(.gbp-new) img { max-width: 100%; height: auto; } :where(.gbp-new) :where(h1, h2, h3, h4, p, ul, ol, dl, dd, figure) { margin: 0; } :where(.gbp-new) :where(ul, ol) { padding: 0; } :where(.gbp-new) a { color: var(--gbp-link); } :where(.gbp-new) a:hover { color: #075985; } :where(.gbp-new) :where(button, input, select, textarea) { font-family: inherit; } :where(.gbp-new) :where(input, textarea)::placeholder { color: var(--gbp-ph); } /* 중국어는 글자 사이에서 줄을 바꿔야 함 (keep-all 이면 긴 문장이 넘침) */ body.gbp-l-chn, .gbp-l-chn .gbp-hd, .gbp-l-chn .gbp-ft__in { word-break: normal; line-break: strict; } .gbp-main { display: block; } .gbp-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .gbp-skip { position: absolute; left: -9999px; top: 0; z-index: 1000; background: var(--gbp-navy); color: #FFFFFF !important; padding: 10px 16px; font-size: 15px; text-decoration: none; } .gbp-skip:focus { left: 8px; top: 8px; } .gbp-mo { display: none; } @media (max-width: 767px) { .gbp-pc { display: none !important; } .gbp-mo { display: inline; } } /* PC(1080px 이상)에서만 줄바꿈 — 글에는 {brpc} 로 씀 (영어 PC, 10월 20일). 휴대폰·태블릿에서는 그냥 띄어쓰기 */ .gbp-brpc { display: none; } @media (min-width: 1080px) { .gbp-brpc { display: inline; } } /* 줄이 나뉘지 않는 한 덩어리 — 글에는 [[…]] 로 씀 (중국어 휴대폰, 10월 20일). 첫 줄에 다 안 들어가면 통째로 다음 줄로. 휴대폰(767px 이하)에서만 — 태블릿·PC 화면은 그대로 */ @media (max-width: 767px) { .gbp-keep { white-space: nowrap; } } /* ---------- 버튼 (알약 모양 없음: 모서리 8px) ---------- */ .gbp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 48px; padding: 12px 24px; border-radius: 8px; border: 0; font-family: var(--gbp-font); font-size: 17px; font-weight: 800; line-height: 1.3; text-decoration: none !important; text-align: center; cursor: pointer; white-space: nowrap; } .gbp-btn--book { background: var(--gbp-blue); color: var(--gbp-navy) !important; } .gbp-btn--book:hover { background: #12B7F5; color: var(--gbp-navy) !important; } .gbp-btn--kakao { background: var(--gbp-kakao); color: #191919 !important; } .gbp-btn--kakao:hover { background: #F5DC00; color: #191919 !important; } .gbp-btn--wechat { background: var(--gbp-wechat); color: #FFFFFF !important; } .gbp-btn--chat { background: var(--gbp-navy); color: #FFFFFF !important; } /* 카카오톡·위챗 버튼: 글자 앞 로고 (사장님이 보내 주신 앱 아이콘에서 말풍선만 남김) */ .gbp-btn--kakao::before, .gbp-btn--wechat::before { content: ""; flex: 0 0 auto; width: 22px; height: 22px; background: center / contain no-repeat; } .gbp-btn--kakao::before { background-image: url(../img/icon-kakao-bubble.png); } .gbp-btn--wechat::before { background-image: url(../img/icon-wechat-glyph.png); } /* 위챗 버튼 글자는 모든 화면에서 '로고 + JejuBagGo' 한 가지 (휴대폰 맨 위 버튼만 로고만) */ .gbp-btn--white { background: #FFFFFF; color: var(--gbp-navy) !important; border: 1.5px solid #FFFFFF; font-weight: 700; } .gbp-btn--line { background: #FFFFFF; color: var(--gbp-link) !important; border: 1.5px solid var(--gbp-blue); } .gbp-btn--line:hover { background: var(--gbp-sky2); } /* 머리말 위챗 버튼: 위챗 로고 + 위챗 아이디 JejuBagGo (휴대폰은 로고만) */ .gbp-btn-wechat { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 10px 15px; border-radius: 8px; background: var(--gbp-wechat); color: #FFFFFF !important; text-decoration: none !important; line-height: 1.2; white-space: nowrap; font-family: var(--gbp-font); } .gbp-btn-wechat img { display: block; width: 22px; height: 22px; flex: 0 0 auto; } .gbp-btn-wechat span { font-size: 15px; font-weight: 800; } /* ---------- 머리말 ---------- */ .gbp-hd { position: relative; z-index: 50; background: #FFFFFF; border-bottom: 1px solid #E3EBF1; font-family: var(--gbp-font); } .gbp-hd *, .gbp-ft *, .gbp-dock * { box-sizing: border-box; } .gbp-hd__in { max-width: 1168px; margin: 0 auto; padding: 12px 24px; display: flex; align-items: center; justify-content: space-between; gap: 24px; } .gbp-hd__logo { display: block; flex: 0 0 auto; } .gbp-hd__logo img { display: block; height: 58px; width: auto; max-width: none; } .gbp-hd--main .gbp-hd__in, .gbp-p-main .gbp-ft__in { max-width: 1208px; } .gbp-hd__nav { display: flex; align-items: center; gap: 28px; font-size: 17px; font-weight: 500; } .gbp-hd__nav a { color: var(--gbp-navy); text-decoration: none; line-height: 1.5; padding: 4px 0; border-bottom: 2px solid transparent; letter-spacing: 0; text-transform: none; } .gbp-hd__nav a:hover { color: var(--gbp-link); } .gbp-hd__nav a.is-on { color: var(--gbp-link); font-weight: 700; border-bottom-color: #00AEEF; } .gbp-hd__nav .gbp-hd__navbook { display: none; } .gbp-hd__right { display: flex; align-items: center; gap: 16px; flex: 0 0 auto; } .gbp-hd__lang { margin: 0; font-size: 15px; color: #35556B; white-space: nowrap; } .gbp-hd__lang a { color: #35556B; text-decoration: none; } .gbp-hd__lang a:hover { color: var(--gbp-link); text-decoration: underline; } .gbp-hd__lang a.is-on { color: var(--gbp-navy); font-weight: 700; } .gbp-hd__book { font-size: 16px; padding: 12px 22px; min-height: 0; } .gbp-hd__menu { display: none; } @media (max-width: 1179px) { .gbp-hd__nav { gap: 20px; font-size: 16px; } .gbp-hd__right { gap: 12px; } } /* 영어 하위 페이지: 메뉴 글자가 길어서, 위챗 버튼(로고+JejuBagGo)과 한 줄에 들어가도록 메뉴 사이 간격만 조금 좁힘 */ @media (min-width: 1180px) { .gbp-l-eng .gbp-hd:not(.gbp-hd--main) .gbp-hd__nav { gap: 22px; } } @media (min-width: 1080px) and (max-width: 1179px) { .gbp-l-eng .gbp-hd:not(.gbp-hd--main) .gbp-hd__nav { gap: 12px; } } @media (max-width: 1079px) { .gbp-hd__in { flex-wrap: wrap; padding: 14px 16px 0; gap: 0 12px; } .gbp-hd__logo img { height: 42px; } .gbp-hd__right { gap: 10px; } .gbp-hd__lang { font-size: 14px; } .gbp-btn-wechat { padding: 8px 11px; gap: 6px; } .gbp-btn-wechat span { font-size: 14px; } .gbp-hd__book { font-size: 14px; padding: 9px 16px; } .gbp-hd__nav { order: 3; flex: 0 0 100%; justify-content: space-between; gap: 0; font-size: 15px; margin-top: 4px; } .gbp-hd__nav a { padding: 10px 0 10px; } .gbp-hd__nav .gbp-hd__home { display: none; } /* 메인: 메뉴 버튼으로 여닫음 (휴대폰 메인 시안) */ .gbp-hd--main .gbp-hd__in { padding-bottom: 10px; } .gbp-hd--main .gbp-hd__book { display: none; } .gbp-hd--main .gbp-hd__menu { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border: 1px solid #DCE6EE; background: #FFFFFF; border-radius: 8px; cursor: pointer; } .gbp-hd--main .gbp-hd__nav { display: none; flex-direction: column; align-items: stretch; margin-top: 10px; border-top: 1px solid var(--gbp-line); } .gbp-hd--main.is-open .gbp-hd__nav { display: flex; } .gbp-hd--main .gbp-hd__nav a { padding: 14px 4px; font-size: 17px; border-bottom: 1px solid var(--gbp-line); } .gbp-hd--main .gbp-hd__nav .gbp-hd__navbook { display: block; margin: 12px 0 4px; text-align: center; background: var(--gbp-blue); color: var(--gbp-navy); font-weight: 800; border-radius: 8px; border: 0; } } @media (max-width: 767px) { .gbp-hd__logo img { height: 40px; } .gbp-btn-wechat { padding: 9px 10px; } .gbp-btn-wechat span { display: none; } /* 휴대폰: 위챗 로고만 */ .gbp-hd__lang { font-size: 13px; } } @media (max-width: 359px) { .gbp-hd__lang { display: none; } } /* 영어 하위 페이지 · 폭 360~374 휴대폰: 'Book now'가 길어 맨 위 줄이 1px 넘쳐 로고가 혼자 한 줄을 쓰던 것 → 버튼 사이 간격과 버튼 옆 여백만 조금 좁힘 */ @media (max-width: 374px) { .gbp-l-eng .gbp-hd:not(.gbp-hd--main) .gbp-hd__right { gap: 8px; } .gbp-l-eng .gbp-hd:not(.gbp-hd--main) .gbp-hd__book { padding-left: 13px; padding-right: 13px; } } /* 영어·중국어 하위 페이지 · 폭 374 이하 휴대폰(글자 확대 포함): 메뉴 5개가 서로 붙어 보이지 않도록 메뉴 글자만 화면 폭에 맞춰 조금 줄임 */ @media (max-width: 374px) { .gbp-l-eng .gbp-hd:not(.gbp-hd--main) .gbp-hd__nav, .gbp-l-chn .gbp-hd:not(.gbp-hd--main) .gbp-hd__nav { font-size: clamp(12px, 4.1vw, 15px); } } /* ---------- 꼬리말 ---------- */ .gbp-ft { background: var(--gbp-gray); font-family: var(--gbp-font); } .gbp-ft__in { max-width: 1168px; margin: 0 auto; padding: 32px 24px; font-size: 14px; color: var(--gbp-sub); line-height: 1.8; word-break: keep-all; } .gbp-ft p { margin: 0; font-size: 14px; color: var(--gbp-sub); line-height: 1.8; } .gbp-ft a { color: var(--gbp-sub); text-decoration: none; } .gbp-ft a:hover { text-decoration: underline; } .gbp-ft__top { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 12px; } .gbp-ft__top img { display: block; height: 40px; width: auto; } .gbp-ft .gbp-ft__partner { color: var(--gbp-navy); font-size: 15px; font-weight: 700; } .gbp-ft p.gbp-ft__name { font-weight: 700; color: var(--gbp-ink); } .gbp-ft p.gbp-ft__name + p { margin-top: 4px; } .gbp-ft p.gbp-ft__ch { margin-top: 10px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 18px; } .gbp-ft p.gbp-ft__ch a { color: var(--gbp-navy); font-size: 15px; font-weight: 700; display: inline-flex; align-items: center; gap: 6px; text-decoration: none; } .gbp-ft p.gbp-ft__ch a:hover { text-decoration: underline; } .gbp-ft p.gbp-ft__ch img { display: block; width: 22px; height: 22px; } /* 꼬리말 언어 선택 (휴대폰 맨 위 언어 선택이 숨겨지는 좁은 화면에서도 항상 보임) */ .gbp-ft p.gbp-ft__lang { margin-top: 10px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; } .gbp-ft p.gbp-ft__lang > span:first-child { margin-right: 8px; } .gbp-ft p.gbp-ft__lang a { color: var(--gbp-navy); font-size: 15px; font-weight: 500; } .gbp-ft p.gbp-ft__lang a.is-on { font-weight: 800; } .gbp-ft p.gbp-ft__copy { margin-top: 8px; font-size: 13px; } @media (max-width: 767px) { .gbp-ft__in { padding: 24px 16px 28px; font-size: 13px; } .gbp-ft p { font-size: 13px; } .gbp-ft .gbp-ft__partner { font-size: 14px; } .gbp-ft p.gbp-ft__ch { gap: 4px 16px; } .gbp-ft p.gbp-ft__ch a { font-size: 14px; } .gbp-ft p.gbp-ft__lang a { font-size: 14px; } .gbp-ft p.gbp-ft__copy { font-size: 12px; } } /* ---------- 휴대폰 메인: 아래에 붙는 버튼 줄 ---------- */ .gbp-dock { display: none; } @media (max-width: 767px) { .gbp-dock { display: grid; grid-template-columns: 1fr 1.4fr; gap: 8px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; background: #FFFFFF; border-top: 1px solid #DCE6EE; padding: 10px 84px calc(12px + env(safe-area-inset-bottom)) 16px; /* 오른쪽 84px: 채팅 버튼 자리 */ } .gbp-dock .gbp-btn { min-height: 0; padding: 13px 8px; gap: 5px; font-size: 16px; width: 100%; } .gbp-dock .gbp-btn--kakao, .gbp-dock .gbp-btn--wechat, .gbp-dock .gbp-btn--chat { font-weight: 700; } /* 로고가 들어가도 좁은 휴대폰(360)에서 버튼 가장자리에 붙지 않도록: 로고 20px, 카카오 글자 15px */ .gbp-dock .gbp-btn--kakao::before, .gbp-dock .gbp-btn--wechat::before { width: 20px; height: 20px; } .gbp-dock .gbp-btn--kakao { font-size: 15px; } /* 10월 20일 사장님 확인: 예약하기가 가장 크게 — 중국어는 위챗을 로고만, 영어는 예약하기 하나 (채팅은 오른쪽 아래 채팅 버튼) */ .gbp-dock.gbp-dock--chn { grid-template-columns: 56px 1fr; } .gbp-dock.gbp-dock--eng { grid-template-columns: 1fr; } .gbp-dock .gbp-dock__wechat { padding-left: 0; padding-right: 0; gap: 0; } .gbp-dock .gbp-dock__wechat::before { width: 24px; height: 24px; } .gbp-dock--chn .gbp-btn--book, .gbp-dock--eng .gbp-btn--book { font-size: 18px; font-weight: 800; } .gbp-p-main .gbp-ft { padding-bottom: 76px; } } /* ---------- 페이지 틀 ---------- */ .gbp-wrap { max-width: 1168px; margin: 0 auto; padding-left: 24px; padding-right: 24px; } .gbp-wrap--narrow { max-width: 928px; } @media (max-width: 767px) { .gbp-wrap { padding-left: 16px; padding-right: 16px; } } /* 하위 페이지 머리 칸 (하늘색 띠) */ .gbp-hero { background: var(--gbp-sky); border-bottom: 1px solid var(--gbp-line); } .gbp-hero__in { max-width: 1168px; margin: 0 auto; padding: 56px 24px 44px; } .gbp-hero__kicker { margin: 0 0 10px; font-size: 15px; font-weight: 700; color: var(--gbp-link); } .gbp-hero h1 { margin: 0; font-size: 40px; line-height: 1.3; font-weight: 800; color: var(--gbp-ink); } .gbp-hero__lead { margin: 16px 0 0; font-size: 18px; line-height: 1.75; color: var(--gbp-sub); max-width: 760px; } @media (max-width: 767px) { .gbp-hero__in { padding: 32px 16px 28px; } .gbp-hero__kicker { margin-bottom: 6px; font-size: 14px; } .gbp-hero h1 { font-size: 28px; line-height: 1.35; } .gbp-hero__lead { margin-top: 12px; font-size: 16px; line-height: 1.7; text-wrap: balance; } /* 휴대폰: 줄 길이를 고르게 */ } /* 번호 달린 칸 제목: ① 사이즈별 요금 */ .gbp-h2 { display: flex; align-items: center; gap: 12px; margin: 0 0 28px; } .gbp-h2__num { flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%; background: var(--gbp-sky2); color: var(--gbp-link); font-weight: 800; font-size: 17px; display: flex; align-items: center; justify-content: center; } .gbp-h2 h2 { margin: 0; font-size: 28px; font-weight: 800; line-height: 1.35; color: var(--gbp-ink); } @media (max-width: 767px) { .gbp-h2 { gap: 10px; margin-bottom: 18px; } .gbp-h2__num { width: 30px; height: 30px; font-size: 15px; } .gbp-h2 h2 { font-size: 22px; } } /* 상자 */ .gbp-card { background: #FFFFFF; border: 1px solid var(--gbp-line); border-radius: 16px; } @media (max-width: 767px) { .gbp-card { border-radius: 14px; } } /* 맨 아래 띠: 가방은 부탁하고, 제주 여행은 가볍게 */ .gbp-band { background: var(--gbp-band); } .gbp-band__in { max-width: 1168px; margin: 0 auto; padding: 48px 24px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; } .gbp-band__title { margin: 0; font-size: 26px; font-weight: 800; color: var(--gbp-navy); line-height: 1.4; } .gbp-band__sub { margin: 6px 0 0; font-size: 16px; color: var(--gbp-navy); } .gbp-band__btns { display: flex; flex-wrap: wrap; gap: 12px; } .gbp-band__btns .gbp-btn { padding: 14px 28px; font-size: 17px; } @media (max-width: 767px) { .gbp-band__in { padding: 32px 16px; display: block; } .gbp-band__title { font-size: 21px; } .gbp-band__sub { font-size: 15px; } .gbp-band__btns { margin-top: 20px; gap: 10px; flex-wrap: nowrap; } .gbp-band__btns .gbp-btn { flex: 1; padding: 13px 0; font-size: 16px; } } /* 도움 상자: 조회가 안 되나요? / 원하는 답이 없나요? */ .gbp-help { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; border: 1px solid var(--gbp-line); border-radius: 16px; padding: 24px 28px; } .gbp-help__title { margin: 0; font-size: 20px; font-weight: 800; color: var(--gbp-ink); } .gbp-help__text { margin: 4px 0 0; font-size: 16px; color: var(--gbp-sub); } .gbp-help .gbp-btn { font-size: 16px; padding: 13px 24px; } @media (max-width: 767px) { .gbp-help { display: block; border-radius: 14px; padding: 18px; } .gbp-help__title { font-size: 18px; } .gbp-help__text { font-size: 15px; line-height: 1.7; } .gbp-help .gbp-btn { display: flex; width: 100%; margin-top: 14px; } } /* 입력칸 */ .gbp-label { display: block; margin: 0 0 8px; font-size: 17px; font-weight: 700; color: var(--gbp-ink); } .gbp-input, .gbp-select { display: block; width: 100%; height: 56px; padding: 0 16px; font-size: 18px; color: var(--gbp-ink); border: 1.5px solid var(--gbp-field); border-radius: 10px; background: #FFFFFF; font-family: var(--gbp-font); } .gbp-input:focus, .gbp-select:focus { outline: none; border-color: var(--gbp-blue); box-shadow: 0 0 0 3px rgba(0, 173, 239, .18); } .gbp-select { padding-right: 44px; appearance: none; -webkit-appearance: none; -moz-appearance: none; font-weight: 700; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%234A5563' stroke-width='2'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; } @media (max-width: 767px) { .gbp-label { font-size: 16px; margin-bottom: 6px; } .gbp-input, .gbp-select { height: 54px; padding-left: 14px; font-size: 17px; } } /* 접고 펴는 질문 (FAQ) */ .gbp-qa { border: 1px solid var(--gbp-line); border-radius: 14px; background: #FFFFFF; } .gbp-qa + .gbp-qa { margin-top: 12px; } .gbp-qa > summary { list-style: none; cursor: pointer; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 20px 24px; font-size: 18px; font-weight: 700; line-height: 1.55; color: var(--gbp-ink); } .gbp-qa > summary::-webkit-details-marker { display: none; } .gbp-qa > summary::after { content: ''; flex: 0 0 auto; width: 12px; height: 12px; margin-top: 8px; border-right: 2.5px solid var(--gbp-link); border-bottom: 2.5px solid var(--gbp-link); transform: rotate(45deg); transition: transform .15s; } .gbp-qa[open] > summary::after { transform: rotate(-135deg); margin-top: 12px; } .gbp-qa__a { padding: 0 24px 22px; font-size: 17px; line-height: 1.8; color: #333F4B; } .gbp-qa__a p + p { margin-top: 8px; } @media (max-width: 767px) { .gbp-qa > summary { padding: 16px 16px; font-size: 16px; } .gbp-qa__a { padding: 0 16px 18px; font-size: 15px; line-height: 1.75; } } /* 표 */ .gbp-table { width: 100%; border-collapse: collapse; font-size: 16px; } .gbp-table th, .gbp-table td { border-bottom: 1px solid var(--gbp-line); padding: 14px 16px; text-align: left; vertical-align: top; } .gbp-table th { background: var(--gbp-sky); font-weight: 700; color: var(--gbp-ink); } /* 빨강은 꼭 필요한 곳에만 */ .gbp-red { color: var(--gbp-red); } /* 미리보기 안내 띠 (숨은 주소에서만) */ .gbp-preview-bar { background: #FFF4CC; color: #5B4A00; font-size: 14px; font-weight: 700; text-align: center; padding: 8px 16px; font-family: var(--gbp-font); } .gbp-preview-bar span { margin-left: 12px; font-weight: 500; } .gbp-preview-bar a { color: #5B4A00; } /* ===================================================================== 메인(홈) — 시안 HomeV(PC 1280) / HomeVm(휴대폰 390) ===================================================================== */ .gbp-main-page { color: #123A55; } .gbp-main-jua { font-family: var(--gbp-font-jua); font-weight: 400; } .gbp-l-chn .gbp-main-jua, .gbp-l-chn .gbp-main-page .gbp-main-trips__tab { font-weight: 700; } .gbp-main-page a { color: #0072AE; } .gbp-main-page strong { font-weight: 700; color: #123A55; } .gbp-m-brmo { display: none; } /* 휴대폰 전용 덩어리 (한국어 HomeVm 문구) — 글 한 줄은 공통 .gbp-pc / .gbp-mo 를 씀 */ .gbp-main-mo-block { display: none; } .gbp-main-wrap { max-width: 1208px; margin: 0 auto; padding: 0 24px; } .gbp-main-page .gbp-btn { line-height: 1.6; } .gbp-main-sec { padding: 80px 0 24px; } .gbp-main-page .gbp-main-kicker { margin: 0 0 6px; font-size: 22px; color: #0072AE; } .gbp-main-h2 { font-size: 42px; line-height: 1.6; color: #123A55; text-wrap: balance; } .gbp-main-page .gbp-main-sub { margin-top: 6px; font-size: 18px; color: #35556B; } .gbp-main-more { font-size: 17px; font-weight: 700; text-decoration: none; white-space: nowrap; } .gbp-main-more:hover { text-decoration: underline; } .gbp-main-btn-white { background: #FFFFFF; color: #123A55 !important; font-weight: 700; } .gbp-main-btn-white:hover { background: #F3F8FB; } /* 체크 표시 목록 */ .gbp-main-checks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; } .gbp-main-checks li { display: flex; gap: 10px; align-items: flex-start; } .gbp-main-checks__i { flex: 0 0 auto; margin-top: 4px; } /* ---------- 첫 화면 ---------- */ .gbp-main-hero { background: #D4E9F9; } .gbp-main-hero__in { max-width: 1208px; margin: 0 auto; padding: 44px 24px 0; text-align: center; } .gbp-main-hero__title { margin: 0; font-family: var(--gbp-font-jua); font-weight: 400; font-size: 68px; line-height: 1.2; color: #123A55; text-wrap: balance; } .gbp-l-chn .gbp-main-hero__title { font-weight: 700; } .gbp-main-hero__lead { margin: 14px auto 0; max-width: 720px; font-size: 20px; line-height: 1.7; font-weight: 500; } .gbp-main-hero__sub { margin: 4px auto 0; max-width: 720px; font-size: 17px; line-height: 1.7; color: #35556B; } .gbp-main-hero__btns { display: flex; justify-content: center; gap: 12px; margin-top: 26px; } .gbp-main-hero__btns .gbp-btn { font-size: 18px; padding: 15px 32px; min-height: 0; } .gbp-main-hero__btns .gbp-main-btn-white { padding: 15px 30px; } .gbp-main-movie { background: #D4E9F9; } .gbp-main-movie__v, .gbp-main-movie__still { display: block; width: 100%; height: auto; aspect-ratio: 1663 / 989; object-fit: cover; } .gbp-main-movie__still { display: none; } @media (prefers-reduced-motion: reduce) { .gbp-main-movie__v { display: none; } .gbp-main-movie__still { display: block; } } /* ---------- 경로 3칸 + 요금 ---------- */ .gbp-main-routes { position: relative; max-width: 1208px; margin: -112px auto 0; padding: 0 24px; } .gbp-main-routes__box { background: #FFFFFF; border: 1px solid #DCE6EE; border-radius: 16px; display: grid; grid-template-columns: repeat(3, 1fr) 270px; } .gbp-main-route { padding: 26px 26px 24px; } .gbp-main-route + .gbp-main-route { border-left: 1px solid #E3E8EE; } .gbp-main-route__t { font-size: 24px; line-height: 1.6; } .gbp-main-route__d { margin-top: 8px; font-size: 15px; color: #35556B; line-height: 1.6; } .gbp-main-from { padding: 22px 24px; background: #E1F5FD; border-radius: 0 16px 16px 0; display: flex; flex-direction: column; justify-content: center; gap: 10px; } .gbp-main-from__label { font-size: 15px; color: #35556B; } .gbp-main-from__price { margin-top: 4px; font-size: 30px; font-weight: 800; line-height: 1.2; } .gbp-main-from__price span { font-size: 16px; font-weight: 500; color: #35556B; } .gbp-main-from__btn { width: 100%; font-size: 17px; padding: 13px 0; min-height: 0; } /* ---------- 이용 방법 ---------- */ .gbp-main-how { padding-top: 88px; } .gbp-main-steps { display: grid; grid-template-columns: 1fr 40px 1fr 40px 1fr; gap: 16px; margin-top: 30px; align-items: start; } .gbp-main-steps__arrow { margin-top: 104px; } .gbp-main-step { display: flex; flex-direction: column; align-items: center; text-align: center; } .gbp-main-step__img { width: 100%; height: 230px; background: #EEF6FC; border-radius: 12px; display: flex; align-items: center; justify-content: center; overflow: hidden; } .gbp-main-step__img img { display: block; max-width: 84%; max-height: 200px; width: auto; height: auto; } .gbp-main-step__img--c img { max-height: 210px; } .gbp-main-step__img--m img { width: 100%; height: 100%; max-width: none; max-height: none; object-fit: cover; } .gbp-main-step__title { margin: 18px 0 4px; font-size: 28px; line-height: 1.6; } .gbp-main-step__num { display: block; margin-bottom: 6px; font-size: 30px; line-height: 1; color: #0072AE; } .gbp-main-step__desc { font-size: 17px; color: #35556B; } /* ---------- 요금 ---------- */ .gbp-main-price__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; } .gbp-main-sizes__imgs { margin-top: 32px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; align-items: end; } .gbp-main-sizes__imgs > div { display: flex; justify-content: center; } .gbp-main-sizes__imgs img { display: block; width: auto; max-width: 100%; } .gbp-main-sizes__imgs img.gbp-main-sizes__img1 { height: 120px; } .gbp-main-sizes__imgs img.gbp-main-sizes__img2 { height: 150px; } .gbp-main-sizes__imgs img.gbp-main-sizes__img3 { height: 176px; } .gbp-main-sizes__imgs img.gbp-main-sizes__img4 { height: 186px; } .gbp-main-sizes__txts { border-top: 3px solid #123A55; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; text-align: center; padding-top: 18px; } .gbp-main-sizes__name { font-size: 32px; line-height: 1.1; } .gbp-main-sizes__price { margin-top: 6px; font-size: 28px; font-weight: 800; color: #0072AE; line-height: 1.6; } .gbp-main-sizes__same { margin-top: 2px; font-size: 15px; color: #35556B; word-break: keep-all; } /* 영어는 글이 길어 '당일 요금'과 '크기'를 두 줄로 */ .gbp-l-eng .gbp-main-sizes__dot { display: none; } .gbp-l-eng .gbp-main-sizes__part { display: block; } .gbp-main-price__note { margin-top: 22px; font-size: 15px; color: #35556B; text-align: center; } .gbp-main-extra { margin-top: 26px; background: #EEF6FC; border-radius: 16px; padding: 18px 28px 18px 18px; display: flex; align-items: center; gap: 22px; } .gbp-main-extra + .gbp-main-extra { margin-top: 14px; } .gbp-main-extra__mid { flex: 1 1 auto; min-width: 0; } .gbp-main-extra__t { font-size: 24px; line-height: 1.3; } .gbp-main-extra__d { margin-top: 2px; font-size: 16px; color: #35556B; } .gbp-main-udo__img { display: block; width: 140px; height: auto; flex: 0 0 auto; } .gbp-main-udo__fee { flex: 0 0 auto; text-align: right; } .gbp-main-udo__label { font-size: 15px; color: #35556B; } .gbp-main-udo__price { margin-top: 2px; font-size: 26px; font-weight: 800; line-height: 1.6; } .gbp-main-udo__note { margin-top: 2px; font-size: 14px; color: #35556B; } .gbp-main-group__badge { width: 140px; flex: 0 0 auto; text-align: center; } .gbp-main-group__big { font-size: 50px; line-height: 1; color: #0072AE; } .gbp-main-group__small { margin-top: 4px; font-size: 15px; font-weight: 700; } .gbp-main-group__foreign { margin-top: 2px; font-size: 14px; color: #35556B; } .gbp-main-group__btn { flex: 0 0 auto; font-size: 17px; padding: 13px 22px; min-height: 0; } /* ---------- 여행 탭 ---------- */ .gbp-main-trips__grid { display: grid; grid-template-columns: 400px 1fr; gap: 28px; margin-top: 28px; align-items: stretch; } .gbp-main-trips__tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; align-content: start; } .gbp-main-page .gbp-main-trips__tab { padding: 14px 10px; border: 1px solid #DCE6EE; background: #FFFFFF; color: #123A55; border-radius: 8px; cursor: pointer; font-size: 20px; line-height: 1.25; text-align: center; font-family: var(--gbp-font-jua); } .gbp-main-page .gbp-main-trips__tab:hover { border-color: #00ADEF; } .gbp-main-page .gbp-main-trips__tab.is-on, .gbp-main-page .gbp-main-trips__tab[aria-selected="true"] { background: #00ADEF; border-color: #00ADEF; color: #123A55; } .gbp-main-trips__tab:focus-visible { outline: 3px solid #0072AE; outline-offset: 2px; } .gbp-main-trips__panels { display: flex; } .gbp-main-trip { flex: 1 1 auto; background: #EEF6FC; border-radius: 16px; padding: 32px 34px; display: grid; grid-template-columns: minmax(0, 1fr) 300px; column-gap: 28px; grid-template-rows: 1fr auto auto auto 1fr; grid-template-areas: ". img" "title img" "list img" "book img" ". img"; } .gbp-main-trip[hidden] { display: none; } .gbp-main-trip:focus-visible { outline: 3px solid #0072AE; outline-offset: 2px; } .gbp-main-trip__title { grid-area: title; font-size: 38px; line-height: 1.25; } /* 여행 그림 (10월 20일): '빈손으로 여행' 그림처럼 칸을 꽉 채움 — 그림 자체가 하늘·땅까지 그려진 세로 15:16 그림 */ .gbp-main-trip__img { grid-area: img; align-self: center; height: 320px; background: #DCEEFA; border-radius: 12px; overflow: hidden; } .gbp-main-trip__img img { display: block; width: 100%; height: 100%; object-fit: cover; } .gbp-main-page .gbp-main-trip__list { grid-area: list; margin-top: 16px; font-size: 17px; } .gbp-main-trip__book { grid-area: book; justify-self: start; margin-top: 24px; font-size: 17px; padding: 13px 26px; min-height: 0; } /* ---------- 원칙 + 후기 ---------- */ .gbp-main-principles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 26px; } .gbp-main-principle { border: 2px solid #D4E9F9; border-radius: 16px; padding: 28px 26px; } .gbp-main-principle__k { font-family: var(--gbp-font-jua); font-size: 22px; color: #0072AE; } .gbp-main-principle__t { margin-top: 6px; font-size: 30px; line-height: 1.3; text-wrap: balance; } .gbp-main-principle__d { margin-top: 12px; font-size: 16px; color: #35556B; } .gbp-main-principle__d strong { font-size: 20px; } .gbp-main-reviews { margin-top: 20px; background: #EEF6FC; border-radius: 16px; padding: 26px 28px; } .gbp-main-reviews__head { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; } .gbp-main-reviews__count { font-size: 30px; line-height: 1.6; } .gbp-main-reviews__count span { color: #0072AE; } .gbp-main-reviews__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 16px; } .gbp-main-page a.gbp-main-rcard { display: block; background: #FFFFFF; border-radius: 12px; padding: 20px 22px; text-decoration: none; color: #123A55; border: 1px solid transparent; } .gbp-main-page a.gbp-main-rcard:hover { border-color: #00ADEF; } .gbp-main-rcard__name { font-size: 24px; line-height: 1.3; } .gbp-main-rcard__sub { margin-top: 4px; font-size: 15px; color: #35556B; } .gbp-main-rcard__go { margin-top: 14px; font-size: 16px; font-weight: 700; color: #0072AE; } /* ---------- 이야기 ---------- */ .gbp-main-story__in { max-width: 1208px; margin: 0 auto; padding: 88px 24px; display: grid; grid-template-columns: minmax(0, 1fr) 440px; column-gap: 56px; grid-template-rows: 1fr auto auto auto auto 1fr; grid-template-areas: ". img" "kicker img" "quote img" "body img" "ch img" ". img"; } .gbp-main-story__kicker { grid-area: kicker; font-size: 16px; font-weight: 700; color: #0072AE; line-height: 1.6; } .gbp-main-story__quote { grid-area: quote; margin: 16px 0 0; padding: 0; } .gbp-main-story__quote p { font-family: var(--gbp-font-story); font-weight: 700; font-size: 32px; line-height: 1.55; color: #123A55; } .gbp-main-page .gbp-main-story__img { grid-area: img; align-self: center; margin: 0; background: #EEF6FC; border-radius: 16px; padding: 30px; display: flex; align-items: center; justify-content: center; } .gbp-main-story__img img { display: block; width: 100%; height: auto; } .gbp-main-story__body { grid-area: body; margin-top: 24px; font-family: var(--gbp-font-story); font-size: 18px; line-height: 1.95; color: #35556B; display: flex; flex-direction: column; gap: 14px; } .gbp-main-story__ch { grid-area: ch; margin-top: 28px; border-top: 1px solid #D4E9F9; padding-top: 22px; } .gbp-main-story__cht { font-size: 17px; font-weight: 700; color: #123A55; } /* 공식 채널 5개: 3개 / 2개 두 줄 */ .gbp-main-story__chbtns { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; margin-top: 12px; } .gbp-main-page .gbp-main-story__chbtns a { grid-column: span 2; display: flex; align-items: center; justify-content: center; gap: 8px; background: #FFFFFF; border: 1.5px solid #00ADEF; color: #123A55; text-decoration: none; font-size: 17px; font-weight: 800; padding: 11px 8px; border-radius: 8px; text-align: center; } .gbp-main-page .gbp-main-story__chbtns a:nth-child(n+4) { grid-column: span 3; } .gbp-main-story__chbtns img { display: block; width: 24px; height: 24px; flex: 0 0 auto; } .gbp-main-page .gbp-main-story__chbtns a:hover { background: #E5F6FD; } /* ---------- 예약 전 확인 + 아래 띠 ---------- */ .gbp-main-final { background: #D4E9F9; } .gbp-main-final__in { max-width: 1208px; margin: 0 auto; padding: 52px 24px; display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; } .gbp-main-check { background: #FFFFFF; border-radius: 16px; padding: 26px 28px; } .gbp-main-check__t { font-size: 26px; line-height: 1.6; } .gbp-main-page .gbp-main-check__list { margin-top: 14px; font-size: 16px; } .gbp-main-check__list .gbp-main-checks__i { margin-top: 3px; } .gbp-main-check__help { margin-top: 14px; font-size: 15px; color: #35556B; } .gbp-main-final__title { font-size: 42px; line-height: 1.25; } .gbp-main-final__btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; } .gbp-main-final__btns .gbp-btn { font-size: 18px; padding: 15px 30px; min-height: 0; } .gbp-main-final__btns .gbp-btn--kakao, .gbp-main-final__btns .gbp-btn--chat, .gbp-main-final__btns .gbp-btn--wechat { font-weight: 700; padding: 15px 28px; } /* ===================================================================== 중간 폭 (태블릿 768~1079) ===================================================================== */ @media (max-width: 1079px) { .gbp-main-hero__title { font-size: 56px; } .gbp-main-routes { margin-top: -80px; } .gbp-main-routes__box { grid-template-columns: repeat(3, 1fr); } .gbp-main-from { grid-column: 1 / -1; border-radius: 0 0 16px 16px; flex-direction: row; align-items: center; justify-content: space-between; } .gbp-main-from__btn { width: auto; padding: 13px 28px; } .gbp-main-route + .gbp-main-route { border-left: 1px solid #E3E8EE; } .gbp-main-route { border-bottom: 1px solid #E3E8EE; } .gbp-main-steps { grid-template-columns: 1fr 28px 1fr 28px 1fr; gap: 10px; } .gbp-main-steps__arrow { width: 28px; } .gbp-main-step__title { font-size: 24px; } .gbp-main-sizes__dot { display: none; } .gbp-main-sizes__part { display: block; } .gbp-main-trips__grid { grid-template-columns: 1fr; } .gbp-main-trips__tabs { grid-template-columns: repeat(4, minmax(0, 1fr)); } .gbp-main-page .gbp-main-trips__tab { font-size: 18px; } .gbp-main-trip { grid-template-columns: minmax(0, 1fr) 260px; } .gbp-main-trip__img { height: 280px; } .gbp-main-principle__t { font-size: 26px; } .gbp-main-reviews__grid { grid-template-columns: repeat(2, 1fr); } .gbp-main-story__in { grid-template-columns: minmax(0, 1fr) 320px; column-gap: 36px; } .gbp-main-story__quote p { font-size: 28px; } .gbp-main-final__in { grid-template-columns: 1fr; gap: 28px; } .gbp-main-final__title { font-size: 36px; text-align: center; } .gbp-main-final__btns { justify-content: center; } } @media (max-width: 900px) { .gbp-main-routes__box { grid-template-columns: 1fr; } .gbp-main-route + .gbp-main-route { border-left: 0; } .gbp-main-principles { grid-template-columns: 1fr; } .gbp-main-principle__t br { display: none; } .gbp-main-udo__img { width: 110px; } } /* ===================================================================== 휴대폰 (390 시안) ===================================================================== */ @media (max-width: 767px) { .gbp-m-brmo { display: inline; } .gbp-m-brpc { display: none; } .gbp-main-mo-block { display: block; } .gbp-main-wrap { padding: 0 16px; } .gbp-main-sec { padding: 36px 0 8px; } .gbp-main-page .gbp-main-kicker { margin-bottom: 2px; font-size: 16px; } .gbp-main-h2 { font-size: 26px; } .gbp-main-page .gbp-main-sub { margin-top: 2px; font-size: 14px; } .gbp-main-more { font-size: 14px; } .gbp-main-hero__in { padding: 26px 16px 0; } .gbp-main-hero__title { font-size: 36px; line-height: 1.25; } .gbp-l-eng .gbp-main-hero__title { font-size: 30px; } .gbp-main-hero__lead { margin-top: 10px; font-size: 16px; line-height: 1.6; text-wrap: balance; } /* 휴대폰: 두 줄 길이를 고르게 */ .gbp-main-hero__sub { font-size: 15px; line-height: 1.6; } .gbp-main-hero__btns { display: none; } .gbp-main-routes { margin: -36px 12px 0; padding: 0; } .gbp-main-routes__box { grid-template-columns: 1fr; border-radius: 14px; } .gbp-main-route { padding: 14px 16px; border-bottom: 1px solid #E3E8EE; } .gbp-main-route + .gbp-main-route { border-left: 0; } .gbp-main-route__t { font-size: 19px; } .gbp-main-route__d { margin-top: 2px; font-size: 14px; } .gbp-main-from { grid-column: auto; padding: 14px 16px; border-radius: 0 0 14px 14px; flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; } .gbp-main-from__label { font-size: 13px; } .gbp-main-from__price { margin-top: 0; font-size: 22px; line-height: 1.3; } .gbp-main-from__price span { font-size: 14px; } .gbp-main-from__btn { flex: 0 0 auto; width: auto; font-size: 16px; padding: 12px 20px; } .gbp-main-how { padding-top: 40px; } .gbp-main-steps { display: flex; flex-direction: column; gap: 12px; margin-top: 14px; } .gbp-main-steps__arrow { display: none; } .gbp-main-step { flex-direction: row; align-items: center; gap: 14px; text-align: left; } .gbp-main-step__img { flex: 0 0 110px; width: 110px; height: 96px; } .gbp-main-step__img img { max-width: 90%; max-height: 82px; } .gbp-main-step__img--c img { max-height: 84px; } .gbp-main-step__img--m img { max-width: none; max-height: none; } .gbp-main-step__txt { min-width: 0; } .gbp-main-step__title { margin: 0; font-size: 21px; } .gbp-main-step__num { display: inline; margin: 0; font-size: 21px; line-height: 1.3; } .gbp-main-step__desc { margin-top: 2px; font-size: 14px; } .gbp-main-price__head { display: block; } .gbp-main-price__head .gbp-main-more { display: none; } .gbp-main-sizes__imgs { margin-top: 16px; gap: 6px; } .gbp-main-sizes__imgs img.gbp-main-sizes__img1 { height: 64px; } .gbp-main-sizes__imgs img.gbp-main-sizes__img2 { height: 80px; } .gbp-main-sizes__imgs img.gbp-main-sizes__img3 { height: 94px; } .gbp-main-sizes__imgs img.gbp-main-sizes__img4 { height: 100px; } .gbp-main-sizes__txts { gap: 6px; padding-top: 10px; } .gbp-main-sizes__name { font-size: 22px; } .gbp-main-sizes__price { margin-top: 2px; font-size: 16px; } .gbp-main-sizes__same { margin-top: 0; font-size: 12px; line-height: 1.6; } .gbp-main-price__note { display: none; } .gbp-main-extra { margin-top: 14px; border-radius: 12px; padding: 12px 14px; gap: 10px; flex-wrap: nowrap; justify-content: space-between; } .gbp-main-extra + .gbp-main-extra { margin-top: 8px; } .gbp-main-extra__t { font-size: 18px; line-height: 1.6; } .gbp-main-extra__d { margin-top: 0; font-size: 13px; } .gbp-main-udo__img { display: none; } .gbp-main-udo__label { font-size: 13px; } .gbp-main-udo__price { margin-top: 0; font-size: 18px; } .gbp-main-udo__note { margin-top: 0; font-size: 12px; } .gbp-main-group { position: relative; } .gbp-main-group__badge { order: 2; width: auto; } .gbp-main-group__big { font-size: 26px; } .gbp-main-group__small { display: none; } .gbp-main-group__foreign { font-size: 12px; } .gbp-main-group__btn { display: none; } .gbp-main-trips__grid { margin-top: 14px; gap: 10px; } .gbp-main-trips__tabs { grid-template-columns: 1fr 1fr; gap: 6px; } .gbp-main-page .gbp-main-trips__tab { padding: 11px 6px; font-size: 16px; } .gbp-main-trip { border-radius: 14px; padding: 18px 16px; grid-template-columns: minmax(0, 1fr) 104px; column-gap: 10px; grid-template-rows: auto auto; grid-template-areas: "title img" "list list"; } .gbp-main-trip__title { align-self: center; font-size: 24px; } .gbp-main-trip__img { width: 104px; height: 104px; border-radius: 10px; } .gbp-main-page .gbp-main-trip__list { margin-top: 12px; font-size: 15px; gap: 8px; } .gbp-main-trip__list li { gap: 8px; } .gbp-main-trip__book { display: none; } .gbp-main-principles { gap: 8px; margin-top: 14px; } .gbp-main-principle { border-radius: 12px; padding: 14px 16px; } .gbp-main-principle__k { font-family: var(--gbp-font); font-size: 13px; font-weight: 700; } .gbp-main-principle__t { margin-top: 2px; font-size: 20px; line-height: 1.6; } .gbp-main-principle__d { margin-top: 2px; font-size: 14px; } .gbp-main-principle__d strong { font-size: 14px; } .gbp-main-reviews { margin-top: 10px; border-radius: 12px; padding: 14px 16px; } .gbp-main-reviews__head { align-items: center; } .gbp-main-reviews__count { font-size: 20px; } .gbp-main-reviews__grid { grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; } .gbp-main-page a.gbp-main-rcard { border-radius: 10px; padding: 11px 13px; } .gbp-main-rcard__name { font-size: 18px; line-height: 1.6; } .gbp-main-rcard__sub { display: none; } .gbp-main-rcard__go { margin-top: 2px; font-size: 13px; } .gbp-main-story__in { display: block; padding: 40px 16px 8px; } .gbp-main-story__kicker { font-size: 13px; } .gbp-main-story__quote { margin-top: 10px; } .gbp-main-story__quote p { font-size: 21px; } .gbp-main-page .gbp-main-story__img { margin-top: 14px; border-radius: 14px; padding: 18px; } .gbp-main-story__img img { width: 220px; } .gbp-main-story__body { margin-top: 10px; font-size: 16px; line-height: 1.9; gap: 10px; } .gbp-main-story__ch { margin-top: 18px; padding-top: 16px; } .gbp-main-story__cht { font-size: 15px; } .gbp-main-story__chbtns { gap: 8px; margin-top: 10px; } .gbp-main-page .gbp-main-story__chbtns a { font-size: 15px; padding: 10px 4px; gap: 6px; } .gbp-main-story__chbtns img { width: 20px; height: 20px; } .gbp-main-final { margin-top: 32px; } .gbp-main-final__in { display: block; padding: 26px 16px; } .gbp-main-check { border-radius: 14px; padding: 16px; } .gbp-main-check__t { font-size: 21px; } .gbp-main-page .gbp-main-check__list { margin-top: 10px; font-size: 15px; gap: 6px; } .gbp-main-check__list li { gap: 8px; } .gbp-main-check__mo { list-style: none; margin-top: 10px; padding: 0; font-size: 15px; } .gbp-main-check__mo li { padding-left: .85em; text-indent: -.85em; } .gbp-main-check__mo li + li { margin-top: 6px; } .gbp-main-check__help { margin-top: 10px; font-size: 13px; } .gbp-main-final__title { margin-top: 18px; font-size: 28px; line-height: 1.3; text-align: center; } .gbp-main-final__btns { display: none; } /* ---- 영어 휴대폰 (10월 19일 사장님 확인 10곳): 제목은 한 줄로, 좁은 칸은 위아래로 ---- 글자 크기는 화면 폭에 맞춰 줄었다 늘었다 함 (넓은 휴대폰에서는 원래 크기 그대로) */ .gbp-l-eng .gbp-main-h2 { font-size: clamp(19px, calc(7vw - 3px), 26px); } /* 9. 경로 제목 */ .gbp-l-eng .gbp-main-route__t { font-size: clamp(16px, calc(6.6vw - 4px), 19px); } /* 10. 최저가 상자: 가격 → 아래에 꽉 찬 예약 버튼 */ .gbp-l-eng .gbp-main-from { flex-direction: column; align-items: stretch; gap: 10px; } .gbp-l-eng .gbp-main-from__label { font-size: 14px; } .gbp-l-eng .gbp-main-from__price { font-size: 24px; } .gbp-l-eng .gbp-main-from__btn { width: 100%; } /* 8. 이용 방법 단계: 그림을 조금 줄이고 제목 한 줄 */ .gbp-l-eng .gbp-main-step { gap: 12px; } .gbp-l-eng .gbp-main-step__img { flex-basis: clamp(90px, 28vw, 110px); width: clamp(90px, 28vw, 110px); } .gbp-l-eng .gbp-main-step__title, .gbp-l-eng .gbp-main-step__num { font-size: clamp(17px, 5.8vw, 21px); } /* 6. 우도: 제목 → 설명 → 보관료 줄 (위아래로) */ .gbp-l-eng .gbp-main-udo { flex-direction: column; align-items: stretch; gap: 4px; } .gbp-l-eng .gbp-main-udo .gbp-main-extra__d { font-size: 14px; line-height: 1.6; } .gbp-l-eng .gbp-main-udo__fee { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; column-gap: 10px; margin-top: 6px; padding-top: 8px; border-top: 1px solid #D4E9F9; text-align: left; } .gbp-l-eng .gbp-main-udo__label { font-size: 14px; } .gbp-l-eng .gbp-main-udo__price { grid-column: 2; grid-row: 1; font-size: 20px; line-height: 1.4; } .gbp-l-eng .gbp-main-udo__note { grid-column: 1 / -1; font-size: 13px; } /* 5. 단체 할인 20% 왼쪽 */ .gbp-l-eng .gbp-main-group__badge { order: 0; } /* 4. 여행 탭: 글자 길이만큼 칸을 잡아 한 줄로 */ .gbp-l-eng .gbp-main-trips__tabs { display: flex; flex-wrap: wrap; } .gbp-l-eng .gbp-main-page .gbp-main-trips__tab { flex: 1 1 auto; padding: 11px 12px; white-space: nowrap; } /* 3. 원칙 제목 */ .gbp-l-eng .gbp-main-principle__t { font-size: clamp(15px, calc(6.1vw - 4.4px), 20px); } /* 2. 후기: '전체 보기'를 제목 아래로, 이야기 머리말 한 줄 */ .gbp-l-eng .gbp-main-reviews__head { flex-direction: column; align-items: flex-start; gap: 0; } .gbp-l-eng .gbp-main-story__kicker { font-size: clamp(12px, 3.75vw, 13px); } /* 1. 맨 아래 띠 제목 */ .gbp-l-eng .gbp-main-final__title { font-size: clamp(24px, 8vw, 28px); } /* ---- 중국어 휴대폰 (10월 20일 사장님 확인) ---- 12·13. 이용 방법 1단계 설명 한 줄, 2단계는 '小路，' 뒤 줄바꿈: 그림을 조금 줄이고(110→84~110px) 설명 글자 14→13.5px */ .gbp-l-chn .gbp-main-step { gap: 12px; } .gbp-l-chn .gbp-main-step__img { flex-basis: clamp(84px, calc(100vw - 280px), 110px); width: clamp(84px, calc(100vw - 280px), 110px); } .gbp-l-chn .gbp-main-step__desc { font-size: 13.5px; } } /* 중국어 휴대폰 (폭 340~767, 10월 20일): 글자를 화면 폭에 맞춰 조금 줄여 한 줄로 · 이야기 줄 수 줄이기 (넓은 휴대폰에서는 원래 크기 그대로. 폭 328처럼 글자를 크게 해 둔 휴대폰은 원래 크기 그대로 두고 쉼표 뒤에서 줄바꿈) */ @media (min-width: 340px) and (max-width: 767px) { /* 14. 경로 '机场 → 住宿' 설명 한 줄 */ .gbp-l-chn .gbp-main-route__d { font-size: clamp(12.5px, calc((100vw - 58px) / 23.9), 14px); } /* 11. 여행 칸 안내 문장 한 줄 */ .gbp-l-chn .gbp-main-trips .gbp-main-sub { font-size: clamp(12.5px, calc((100vw - 32px) / 26.3), 14px); } /* 7·8·9. 여행 탭 목록 한 줄 (칸 양옆 여백 16→14px, 체크 표시와 글 사이 8→6px). 글자가 작아져 두 줄 글 끝에 한두 글자만 남지 않게 두 줄 길이를 고르게 */ .gbp-l-chn .gbp-main-trip { padding-left: 14px; padding-right: 14px; } .gbp-l-chn .gbp-main-trip__list li { gap: 6px; } .gbp-l-chn .gbp-main-page .gbp-main-trip__list { font-size: clamp(13.5px, calc((100vw - 86px) / 20.3), 15px); } .gbp-l-chn .gbp-main-trip__list li > span:not(:has(.gbp-keep)) { text-wrap: pretty; } /* 6. 이야기 글: 문단 줄 수 4→3, 3→2 */ .gbp-l-chn .gbp-main-story__body { font-size: clamp(14.5px, calc((100vw - 32px) / 22.3), 16px); } } /* 공식 채널 버튼 (10월 19일): 폭 409 이하 휴대폰에서는 윗줄 3개(블로그·인스타그램·스레드) 칸 너비를 글자 길이에 맞춰 나눔 → 'Instagram'·'인스타그램' 글자가 테두리에 닿지 않게. 아랫줄 2개는 지금처럼 반반 */ @media (max-width: 409px) { .gbp-main-story__chbtns { display: flex; flex-wrap: wrap; row-gap: 0; } .gbp-main-story__chbtns::after { content: ""; order: 1; flex: 0 0 100%; } .gbp-main-page .gbp-main-story__chbtns a { flex: 1 1 auto; } .gbp-main-page .gbp-main-story__chbtns a:nth-child(n+4) { order: 2; flex: 1 1 0; margin-top: 8px; } } @media (max-width: 359px) { .gbp-main-hero__title { font-size: 31px; } .gbp-main-page .gbp-main-story__chbtns a { font-size: 14px; } } /* ---- 영어 PC (10월 20일 사장님 확인): 제목·버튼 글자 한 줄 ---- */ @media (min-width: 1080px) { /* 경로 3칸: 가운데(Accommodation → Accommodation) 칸을 조금 넓게, 칸 안 여백 26 → 18px, 제목 24 → 20px */ .gbp-l-eng .gbp-main-routes__box { grid-template-columns: 1fr 1.24fr 1fr 270px; } .gbp-l-eng .gbp-main-route { padding-left: 18px; padding-right: 18px; } .gbp-l-eng .gbp-main-route__t { font-size: clamp(16px, calc(2.97vw - 15.9px), 20px); } /* 여행 탭: 왼쪽 칸 400 → 440px, 글자 20 → 17px (가장 긴 'Same-day delivery in Jeju' 한 줄) */ .gbp-l-eng .gbp-main-trips__grid { grid-template-columns: 440px 1fr; } .gbp-l-eng .gbp-main-page .gbp-main-trips__tab { font-size: 17px; padding-left: 6px; padding-right: 6px; } /* 후기 칸 작은 글 (Reviews from international guests) */ .gbp-l-eng .gbp-main-page a.gbp-main-rcard { padding-left: 16px; padding-right: 16px; } .gbp-l-eng .gbp-main-rcard__sub { font-size: clamp(13px, calc(1.58vw - 4.6px), 14px); } /* 이야기 첫 문장 4 → 3줄 */ .gbp-l-eng .gbp-main-story__quote p { font-size: clamp(23px, calc(4.66vw - 26.4px), 30px); } } @media (min-width: 1080px) and (max-width: 1207px) { /* 좁은 PC */ .gbp-l-eng .gbp-main-page a.gbp-main-rcard { padding-left: 12px; padding-right: 12px; } } /* ---- 영어 PC 2차 (10월 20일 사장님 확인) ---- */ @media (min-width: 1080px) { /* 이용 방법 3단계 설명: 'Leave your luggage at Jeju Airport 1F Gate 1' 한 줄 → 글 칸만 양옆으로 16px 씩 넓힘 (그림·화살표 자리는 그대로). 좁은 PC 에서는 글자를 조금 줄여 같은 줄바꿈 유지 */ .gbp-l-eng .gbp-main-step__txt { align-self: stretch; margin-left: -16px; margin-right: -16px; } .gbp-l-eng .gbp-main-step__desc { font-size: clamp(15px, calc(1.6159vw - 1.83px), 17px); } /* 여행 탭 설명 3줄 → 2줄: 글 칸 266 → 334px 탭과 설명 칸 사이 28 → 16px, 칸 안 양옆 여백 34 → 20px, 글과 그림 사이 28 → 18px, 그림 폭 300 → 284px(높이 320 그대로), ✓ 와 글 사이 10 → 8px */ .gbp-l-eng .gbp-main-trips__grid { column-gap: 16px; } .gbp-l-eng .gbp-main-trip { padding-left: 20px; padding-right: 20px; grid-template-columns: minmax(0, 1fr) 284px; column-gap: 18px; } .gbp-l-eng .gbp-main-trip__list li { gap: 8px; } /* 줄 길이를 고르게 (예: 'leave it at the front / desk' 처럼 어색하게 끊기지 않게) — 줄 수는 늘지 않음 */ .gbp-l-eng .gbp-main-trip__list li > span { text-wrap: balance; } /* 칸이 넓어져도 제목이 'Same-day delivery in / Jeju' 처럼 끊기지 않게 ('Same-day / delivery in Jeju' 그대로) */ .gbp-l-eng .gbp-main-trip__title { text-wrap: balance; } } /* ---- 중국어 PC (10월 20일 사장님 확인) ---- */ @media (min-width: 1080px) { /* 이용 방법 2단계 '不租车旅行、骑行、偶来小路，都轻轻松松。' 한 줄 — 영어와 같은 방식(글 칸만 양옆 16px 씩 넓힘, 좁은 PC 는 글자 조금 줄임) */ .gbp-l-chn .gbp-main-step__txt { align-self: stretch; margin-left: -16px; margin-right: -16px; } .gbp-l-chn .gbp-main-step__desc { font-size: clamp(15px, calc(1.6159vw - 1.83px), 17px); } /* 여행 탭 설명 한 줄: 글 칸 306 → 404px 탭 칸 400 → 370px(탭 글자 6자 120px 이라 여유 있음), 탭과 설명 칸 사이 28 → 16px, 칸 안 양옆 여백 34 → 20px, 글과 그림 사이 28 → 18px, 그림 폭 300 → 284px(높이 320 그대로), ✓ 와 글 사이 10 → 8px — 영어와 같은 칸 모양 */ .gbp-l-chn .gbp-main-trips__grid { grid-template-columns: 370px 1fr; column-gap: 16px; } .gbp-l-chn .gbp-main-trip { padding-left: 20px; padding-right: 20px; grid-template-columns: minmax(0, 1fr) 284px; column-gap: 18px; } .gbp-l-chn .gbp-main-trip__list li { gap: 8px; } /* 좁은 PC 에서 두 줄이 될 때 끝줄에 글자 한두 개만 남지 않게 (예: '…一次预 / 约。') — 줄 수는 늘지 않음 */ .gbp-l-chn .gbp-main-trip__list li > span { text-wrap: balance; } /* 이야기 첫 문장 3 → 2줄: '…漂亮的' 뒤 줄내림 + 32 → 27px (사장님 PC 의 중국어 글꼴 SimSun 은 따옴표 “ ” 도 한 글자 폭이라, 첫 줄 23자 폭이 넉넉히 들어가게. 좁은 PC 는 화면 폭에 맞춰 줄임) */ .gbp-l-chn .gbp-main-story__quote p { font-size: clamp(21px, calc(4.0984vw - 22.99px), 27px); } } /* 중국어: 좁은 PC(1080~1189px)에서는 {brpc} 줄내림을 쓰지 않음 — 칸이 좁아 앞 줄이 다 안 들어가면 '台，' 처럼 글자 한두 개만 남는 줄이 생김 (이야기 첫 문장은 글자 크기가 화면 폭에 맞춰 줄어 첫 줄이 늘 들어가므로 줄내림 유지) */ @media (min-width: 1080px) and (max-width: 1189px) { .gbp-l-chn .gbp-brpc { display: none; } .gbp-l-chn .gbp-main-story__quote .gbp-brpc { display: inline; } } /* ===================================================================== 이용안내 (gbp-guide-) — 시안 '이용안내 A안 (PC)' 기준 휴대폰(767px 이하)은 같은 글을 위아래로, 그림은 왼쪽 작은 칸 ===================================================================== */ .gbp-guide-hero .gbp-guide-hero__in { padding: 48px 24px 40px; display: flex; flex-wrap: wrap; align-items: center; gap: 24px 40px; } .gbp-guide-hero__text { flex: 1 1 560px; min-width: 0; } .gbp-guide-hero__img { flex: 0 1 380px; display: flex; justify-content: center; } .gbp-guide-hero__img img { display: block; width: 100%; max-width: 380px; height: auto; } /* 이 페이지 목차 */ .gbp-guide-toc { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; } .gbp-guide-toc a { background: #FFFFFF; border: 1px solid var(--gbp-sky3); color: var(--gbp-ink); text-decoration: none; font-size: 15px; font-weight: 500; padding: 10px 18px; border-radius: 8px; line-height: 1.5; } .gbp-guide-toc a:hover { border-color: var(--gbp-blue); color: var(--gbp-link); } /* 칸 */ .gbp-guide-sec { max-width: 1168px; margin: 0 auto; padding: 56px 24px 16px; scroll-margin-top: 12px; } .gbp-guide-sec--first { padding-top: 64px; } .gbp-guide-sec--links { padding: 48px 24px 64px; } .gbp-guide .gbp-h2 { margin-bottom: 24px; } .gbp-guide #reserve .gbp-h2 { margin-bottom: 28px; } .gbp-guide .gbp-guide-h2--tight { margin-bottom: 20px; } /* 1 예약 방법: 4단계 */ .gbp-guide-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; } .gbp-guide-step { background: #FFFFFF; border: 1px solid var(--gbp-line); border-radius: 16px; padding: 16px 16px 24px; } .gbp-guide-step__img { height: 156px; background: var(--gbp-sky); border-radius: 12px; display: flex; align-items: center; justify-content: center; margin-bottom: 18px; } .gbp-guide-step__img img { display: block; width: auto; height: auto; max-height: 128px; max-width: 86%; object-fit: contain; } .gbp-guide-step__label { margin: 0 8px; font-size: 13px; font-weight: 700; color: var(--gbp-link); } .gbp-guide-step h3 { margin: 8px; font-size: 20px; font-weight: 700; line-height: 1.4; color: var(--gbp-ink); } .gbp-guide-step__text { margin: 0 8px; font-size: 16px; color: var(--gbp-sub); } .gbp-guide-info { margin: 16px 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; background: var(--gbp-sky); border-radius: 16px; padding: 22px 24px; } .gbp-guide-info dt { margin: 0; font-size: 14px; font-weight: 400; color: var(--gbp-sub); } .gbp-guide-info dd { margin: 4px 0 0; } .gbp-guide-info dd strong { display: block; font-size: 17px; font-weight: 700; color: var(--gbp-ink); line-height: 1.5; } .gbp-guide-info dd span { display: block; margin-top: 2px; font-size: 14px; color: var(--gbp-sub); } .gbp-guide-warn { margin: 14px 0 0; font-size: 15px; color: var(--gbp-red); font-weight: 500; } /* 2 픽업·배송 안내 */ .gbp-guide-chips { list-style: none; margin: 0 0 24px; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; } .gbp-guide-chips li { display: inline-flex; align-items: center; gap: 8px; background: var(--gbp-sky2); color: var(--gbp-deep); font-size: 15px; font-weight: 700; padding: 9px 16px; border-radius: 4px; line-height: 1.5; text-wrap: balance; } .gbp-guide-chips svg { flex: 0 0 auto; } .gbp-guide-routes { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; } .gbp-guide-route { background: #FFFFFF; border: 1px solid var(--gbp-line); border-radius: 16px; padding: 16px 16px 26px; display: flex; flex-direction: column; gap: 16px; } .gbp-guide-route__img { height: 210px; background: var(--gbp-sky); border-radius: 12px; display: flex; align-items: center; justify-content: center; } .gbp-guide-route__img img { display: block; width: auto; height: auto; max-height: 182px; max-width: 86%; object-fit: contain; } .gbp-guide-route h3 { margin: 4px 10px 0; font-size: 22px; font-weight: 800; line-height: 1.4; color: var(--gbp-ink); } .gbp-guide-box { background: var(--gbp-sky); border-radius: 12px; padding: 14px 16px; } .gbp-guide-route .gbp-guide-box { margin: 0 10px; } .gbp-guide-box__label { margin: 0; font-size: 14px; color: var(--gbp-sub); } .gbp-guide-box__value { margin: 2px 0 0; font-size: 17px; font-weight: 700; color: var(--gbp-ink); } .gbp-guide-box__note { margin: 4px 0 0; font-size: 14px; color: var(--gbp-sub); } .gbp-guide-list { margin: 0; padding-left: 20px; font-size: 16px; color: #333F4B; display: flex; flex-direction: column; gap: 8px; } .gbp-guide-route .gbp-guide-list { margin: 0 10px; } /* 3 우도 짐보관소 */ .gbp-guide-udo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 36px; background: #FFFFFF; border: 1px solid var(--gbp-line); border-radius: 16px; padding: 16px 30px 16px 16px; } .gbp-guide-udo__img { flex: 0 0 300px; height: 190px; background: var(--gbp-sky); border-radius: 12px; display: flex; align-items: center; justify-content: center; } .gbp-guide-udo__img img { display: block; width: auto; height: auto; max-height: 160px; max-width: 88%; object-fit: contain; } .gbp-guide-udo__body { flex: 1 1 360px; min-width: 0; } .gbp-guide-udo__body h3 { margin: 0 0 8px; font-size: 20px; font-weight: 700; line-height: 1.4; color: var(--gbp-ink); } .gbp-guide-udo__how { margin: 0; font-size: 16px; font-weight: 700; color: var(--gbp-ink); } .gbp-guide-udo__body ol { margin: 8px 0 0; padding-left: 20px; font-size: 16px; line-height: 1.6; color: #333F4B; display: flex; flex-direction: column; gap: 6px; } .gbp-guide-udo__warn { margin: 8px 0 0; font-size: 15px; line-height: 1.6; color: var(--gbp-red); } .gbp-guide-udo__fee { flex: 0 0 auto; margin-left: auto; text-align: right; } .gbp-guide-udo__fee-label { margin: 0; font-size: 14px; color: var(--gbp-sub); } .gbp-guide-udo__fee-num { margin: 2px 0 0; font-size: 30px; font-weight: 800; color: var(--gbp-link); line-height: 1.4; } .gbp-guide-udo__fee-note { margin: 4px 0 0; font-size: 14px; line-height: 1.5; color: var(--gbp-sub); } /* 4 제주항 짐배송 */ .gbp-guide-port { background: #FFFFFF; border: 1px solid var(--gbp-line); border-radius: 16px; padding: 16px; display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 24px; align-items: center; } .gbp-guide-port__img { height: 210px; background: var(--gbp-sky); border-radius: 12px; display: flex; align-items: center; justify-content: center; } /* 여행 그림은 흰 바탕으로 만들어져 있어 하늘색 칸에 겹쳐 곱하기로 바탕을 지움 */ .gbp-guide-port__img img { display: block; width: auto; height: auto; max-height: 182px; max-width: 86%; object-fit: contain; mix-blend-mode: multiply; } .gbp-guide-port__body { display: flex; flex-direction: column; gap: 14px; padding-right: 10px; min-width: 0; } .gbp-guide-port__body h3 { margin: 0; font-size: 22px; font-weight: 800; line-height: 1.4; color: var(--gbp-ink); } /* 다른 페이지로 */ .gbp-guide-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; } .gbp-guide-links a { display: block; text-decoration: none; color: var(--gbp-ink); border: 1px solid var(--gbp-line); border-radius: 16px; padding: 24px 26px; } .gbp-guide-links a:hover { border-color: var(--gbp-sky3); background: #F8FBFD; } .gbp-guide-links__small { display: block; font-size: 14px; color: var(--gbp-sub); } .gbp-guide-links__big { display: block; margin-top: 4px; font-size: 20px; font-weight: 800; color: var(--gbp-link); } /* 중국어 아래 띠: 버튼 3개 (휴대폰은 위챗 버튼을 아랫줄 전체 폭으로) */ .gbp-guide-band3 { flex-wrap: wrap; } @media (max-width: 767px) { .gbp-guide-band3 .gbp-btn--wechat { flex: 1 0 100%; } } /* ---------- 태블릿 (768~1079px) ---------- */ @media (min-width: 768px) and (max-width: 1079px) { .gbp-guide-hero .gbp-guide-hero__in { flex-wrap: nowrap; } .gbp-guide-hero__img { flex: 0 0 260px; } .gbp-guide-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } .gbp-guide-routes { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } .gbp-guide-route h3 { font-size: 20px; } } /* ---------- 휴대폰 (767px 이하) ---------- */ @media (max-width: 767px) { .gbp-guide-hero .gbp-guide-hero__in { padding: 32px 16px 28px; gap: 20px; } .gbp-guide-hero__text { flex: 1 1 100%; } .gbp-guide-hero__img { flex: 1 1 100%; } .gbp-guide-hero__img img { max-width: 240px; } .gbp-guide-toc { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 20px; } .gbp-guide-toc a { text-align: center; padding: 10px 6px; } .gbp-guide-sec { padding: 36px 16px 8px; } .gbp-guide-sec--first { padding-top: 36px; } .gbp-guide-sec--links { padding: 28px 16px 40px; } .gbp-guide .gbp-h2, .gbp-guide #reserve .gbp-h2 { margin-bottom: 18px; } .gbp-guide .gbp-guide-h2--tight { margin-bottom: 14px; } .gbp-guide-steps { grid-template-columns: minmax(0, 1fr); gap: 10px; } .gbp-guide-step { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 14px; align-items: center; padding: 14px; border-radius: 14px; } .gbp-guide-step__img { height: 84px; margin: 0; } .gbp-guide-step__img img { max-height: 70px; max-width: 84%; } .gbp-guide-step__label { margin: 0; } .gbp-guide-step h3 { margin: 2px 0 4px; font-size: 18px; } .gbp-guide-step__text { margin: 0; font-size: 15px; line-height: 1.6; } .gbp-guide-info { grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 16px; border-radius: 14px; } .gbp-guide-info dd strong { font-size: 16px; } .gbp-guide-warn { font-size: 14px; } .gbp-guide-chips { gap: 8px; margin-bottom: 18px; } .gbp-guide-chips li { font-size: 14px; padding: 8px 12px; } .gbp-guide-routes { grid-template-columns: minmax(0, 1fr); gap: 12px; } .gbp-guide-route { padding: 14px 14px 20px; gap: 14px; border-radius: 14px; } .gbp-guide-route__img { height: 170px; } .gbp-guide-route__img img { max-height: 150px; } .gbp-guide-route h3 { margin: 2px 4px 0; font-size: 20px; } .gbp-guide-route .gbp-guide-box { margin: 0 4px; } .gbp-guide-box__value { font-size: 16px; } .gbp-guide-list { font-size: 15px; line-height: 1.65; } .gbp-guide-route .gbp-guide-list { margin: 0 4px; } .gbp-guide-udo { display: block; padding: 14px; border-radius: 14px; } .gbp-guide-udo__img { height: 170px; } .gbp-guide-udo__img img { max-height: 140px; } .gbp-guide-udo__body { margin-top: 16px; padding: 0 4px; } .gbp-guide-udo__body h3 { font-size: 19px; } .gbp-guide-udo__how { font-size: 15px; } .gbp-guide-udo__body ol { font-size: 15px; } .gbp-guide-udo__warn { font-size: 14px; } .gbp-guide-udo__fee { margin: 14px 4px 0; padding-top: 12px; border-top: 1px solid var(--gbp-line); text-align: left; } .gbp-guide-udo__fee-num { font-size: 26px; } .gbp-guide-udo__fee-note { font-size: 13px; } .gbp-guide-port { grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 14px; border-radius: 14px; } .gbp-guide-port__img { height: 170px; } .gbp-guide-port__img img { max-height: 150px; } .gbp-guide-port__body { padding: 0 4px; } .gbp-guide-port__body h3 { font-size: 20px; } .gbp-guide-links { grid-template-columns: minmax(0, 1fr); gap: 10px; } .gbp-guide-links a { padding: 18px; border-radius: 14px; } .gbp-guide-links__big { margin-top: 2px; font-size: 18px; } /* ---- 영어 휴대폰 (10월 20일 사장님 확인): 큰 제목·중간 제목 한 줄 ---- 글자 크기는 화면 폭에 맞춰 줄었다 늘었다 함 (넓은 휴대폰에서는 원래 크기) */ .gbp-l-eng .gbp-guide .gbp-h2 h2 { font-size: clamp(18px, calc(7.7vw - 5.8px), 22px); } /* 예약 단계: 'STEP 1'과 제목은 칸 전체 폭에, 그림과 설명은 그 아래 나란히 */ .gbp-l-eng .gbp-guide-step { grid-template-areas: "label label" "title title" "img text"; row-gap: 0; } .gbp-l-eng .gbp-guide-step__body { display: contents; } .gbp-l-eng .gbp-guide-step__img { grid-area: img; } .gbp-l-eng .gbp-guide-step__label { grid-area: label; } .gbp-l-eng .gbp-guide-step h3 { grid-area: title; margin: 2px 0 10px; } .gbp-l-eng .gbp-guide-step__text { grid-area: text; } /* 픽업·배송 카드 제목, 제주항 카드 제목: 카드 양옆 여백을 14 → 10px 로 */ .gbp-l-eng .gbp-guide-route, .gbp-l-eng .gbp-guide-port { padding-left: 10px; padding-right: 10px; } .gbp-l-eng .gbp-guide-route h3 { font-size: clamp(16px, calc(7.6vw - 5.3px), 20px); } .gbp-l-eng .gbp-guide-port__body h3 { font-size: clamp(16px, calc(7.1vw - 4.6px), 20px); } .gbp-l-eng .gbp-guide-udo__how { font-size: clamp(14px, calc(5.75vw - 4.2px), 15px); } } /* 아래 띠 제목: 휴대폰에서만 쉼표 뒤에서 줄 바꿈 (휴대폰 시안과 같게) */ @media (min-width: 768px) { .gbp-guide-br { display: none; } } /* ---- 영어 PC (10월 20일 사장님 확인): 제목·중간 제목 한 줄 ---- */ /* '(WeChat, KakaoTalk or email).' 을 한 줄에 (칸이 좁은 1080~1167px PC 와 휴대폰은 제외) */ @media (min-width: 768px) and (max-width: 1079px), (min-width: 1168px) { .gbp-nobr { white-space: nowrap; } } @media (min-width: 1080px) { /* 예약 단계: 글 양옆 여백 8px 없앰 → 제목 한 줄, 설명 줄 수 줄임 */ .gbp-l-eng .gbp-guide-step__label, .gbp-l-eng .gbp-guide-step__text { margin-left: 0; margin-right: 0; } .gbp-l-eng .gbp-guide-step h3 { margin-left: 0; margin-right: 0; } /* 픽업·배송 카드: 안쪽 여백을 줄이고 제목·상자 글자를 가장 긴 글에 맞춤 */ .gbp-l-eng .gbp-guide-route { padding-left: 12px; padding-right: 12px; } .gbp-l-eng .gbp-guide-route h3 { margin-left: 4px; margin-right: 4px; font-size: 18.5px; } .gbp-l-eng .gbp-guide-route .gbp-guide-box, .gbp-l-eng .gbp-guide-route .gbp-guide-list { margin-left: 4px; margin-right: 4px; } .gbp-l-eng .gbp-guide-route .gbp-guide-box { padding-left: 14px; padding-right: 14px; } .gbp-l-eng .gbp-guide-route .gbp-guide-box__value { font-size: 15px; } /* 우도 빨간 안내 한 줄 */ .gbp-l-eng .gbp-guide-udo__warn { font-size: 14.4px; } } @media (min-width: 1080px) and (max-width: 1167px) { /* 좁은 PC */ .gbp-l-eng .gbp-guide-step h3 { font-size: 18px; } .gbp-l-eng .gbp-guide-route h3 { font-size: 16.5px; } .gbp-l-eng .gbp-guide-route .gbp-guide-box__value { font-size: 13.5px; } } /* ---- 영어 PC 2차 (10월 20일 사장님 확인) ---- */ @media (min-width: 1080px) { /* 첫 화면 목차 4칸 한 줄: 글 칸 폭 700px 유지 (좁은 PC 에서는 오른쪽 그림이 줄어듦), 목차 칸 안 여백 18 → 13px */ .gbp-l-eng .gbp-guide-hero .gbp-guide-hero__in { flex-wrap: nowrap; } .gbp-l-eng .gbp-guide-hero__text { flex: 1 0 700px; } .gbp-l-eng .gbp-guide-toc a { padding-left: 13px; padding-right: 13px; } /* 예약 4단계 칸 안 여백 16 → 12px (STEP 3 설명 6 → 5줄) */ .gbp-l-eng .gbp-guide-step { padding-left: 12px; padding-right: 12px; } /* 상담 시간 안내 'Requests after hours …' 한 줄: 세 칸 폭을 글 길이에 맞춤, 상자 여백 24 → 18px, 칸 사이 16 → 12px */ .gbp-l-eng .gbp-guide-info { grid-template-columns: auto auto auto; column-gap: 12px; padding-left: 18px; padding-right: 18px; } } /* ---- 중국어 PC (10월 20일 사장님 확인) ---- */ /* STEP 2 '（微信、KakaoTalk或电子邮件）' 묶음은 중국어 PC 에서만 (태블릿은 지금 줄바꿈 그대로) */ @media (min-width: 768px) and (max-width: 1079px) { .gbp-l-chn .gbp-nobr { white-space: normal; } } @media (min-width: 1080px) { /* 예약 4단계: 칸 안 여백 16 → 12px, 설명 글자 16 → 15px (STEP 1 3 → 2줄, STEP 2 '（微信、KakaoTalk或电子邮件）' 한 줄, STEP 3 '确认。' 뒤 줄내림 다음 문장이 '相同，' 까지 한 줄) */ .gbp-l-chn .gbp-guide-step { padding-left: 12px; padding-right: 12px; } .gbp-l-chn .gbp-guide-step__label, .gbp-l-chn .gbp-guide-step__text, .gbp-l-chn .gbp-guide-step h3 { margin-left: 0; margin-right: 0; } .gbp-l-chn .gbp-guide-step__text { font-size: 15px; } /* 픽업·배송 3칸 안내 문장: 2줄 → 1줄 (칸 안 여백 16 → 12px, 제목·상자·목록 양옆 10 → 4px, 목록 글자 16 → 14px) */ .gbp-l-chn .gbp-guide-route { padding-left: 12px; padding-right: 12px; } .gbp-l-chn .gbp-guide-route h3 { margin-left: 4px; margin-right: 4px; } .gbp-l-chn .gbp-guide-route .gbp-guide-box, .gbp-l-chn .gbp-guide-route .gbp-guide-list { margin-left: 4px; margin-right: 4px; } .gbp-l-chn .gbp-guide-route .gbp-guide-list { font-size: 14px; } /* 좁은 PC 에서 두 줄이 될 때 끝줄에 글자 한두 개만 남지 않게 — 줄 수는 늘지 않음 */ .gbp-l-chn .gbp-guide-route .gbp-guide-list li { text-wrap: balance; } } /* ---- 영어·중국어 PC 3차 (10월 20일 사장님 확인): 상담 시간·예약 가능 기간·사전 예약가를 한 상자 안 3구역 → 상자 3개로 ---- */ @media (min-width: 1080px) { .gbp-l-eng .gbp-guide-info, .gbp-l-chn .gbp-guide-info { background: none; border-radius: 0; padding: 0; column-gap: 10px; } .gbp-l-eng .gbp-guide-info > div, .gbp-l-chn .gbp-guide-info > div { background: var(--gbp-sky); border-radius: 16px; padding: 18px 16px; } /* 영어: 'Requests after hours are answered from 8 a.m. the next day' 한 줄 유지 — 굵은 글 17 → 16px, 작은 글 14 → 13.5px */ .gbp-l-eng .gbp-guide-info dd strong { font-size: 16px; } .gbp-l-eng .gbp-guide-info dd span { font-size: 13.5px; } } /* ---- 영어 휴대폰 (10월 20일 사장님 확인): 목차 '3 Udo luggage storage' 한 줄 (칸 안 여백 6→2px, 글자는 폭에 맞춰) ---- */ @media (max-width: 767px) { .gbp-l-eng .gbp-guide-toc a { padding-left: 2px; padding-right: 2px; font-size: clamp(13px, calc((100vw - 52px) / 21.4), 15px); } } /* ---- 한국어 휴대폰 (10월 20일 사장님 확인): 첫 화면 안내 4→3줄 (글자 16px → 폭에 맞춰) ---- */ @media (max-width: 767px) { .gbp-l-kor .gbp-guide-hero .gbp-hero__lead { font-size: clamp(13.5px, calc((100vw - 32px) / 23.9), 16px); } } /* ===================================================================== 요금 (gbp-price-) — 시안 '요금 A안' PC(1280) · 휴대폰(390) 기준 ===================================================================== */ .gbp-price-pc { display: inline; } .gbp-price-mo { display: none; } /* 이 페이지 목차 */ .gbp-price-toc { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; } .gbp-price-toc a { background: #FFFFFF; border: 1px solid var(--gbp-sky3); color: var(--gbp-ink); text-decoration: none; font-size: 15px; font-weight: 500; padding: 10px 18px; border-radius: 8px; line-height: 1.5; } .gbp-price-toc a:hover { border-color: var(--gbp-blue); color: var(--gbp-link); } /* 칸 */ .gbp-price-sec { max-width: 1168px; margin: 0 auto; padding: 56px 24px 16px; scroll-margin-top: 12px; } .gbp-price-sec--first { padding-top: 64px; } .gbp-price-sec--links { padding: 48px 24px 64px; } /* 1 사이즈별 요금: 카드 4장 */ .gbp-price-sizes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } .gbp-price-card { background: #FFFFFF; border: 1px solid var(--gbp-line); border-radius: 16px; padding: 16px 16px 24px; } .gbp-price-card__img { height: 196px; background: var(--gbp-sky); border-radius: 12px; display: flex; align-items: flex-end; justify-content: center; gap: 4px; padding-bottom: 18px; margin-bottom: 16px; } .gbp-price-card__img img { display: block; width: auto; max-width: none; } .gbp-price-card--s .gbp-price-card__c { height: 112px; } .gbp-price-card--s .gbp-price-card__b { height: 84px; } .gbp-price-card--m .gbp-price-card__c { height: 132px; } .gbp-price-card--m .gbp-price-card__b { height: 100px; } .gbp-price-card--l .gbp-price-card__c { height: 150px; } .gbp-price-card--l .gbp-price-card__b { height: 126px; } .gbp-price-card--xl .gbp-price-card__c { height: 168px; } .gbp-price-card--xl .gbp-price-card__b { height: 146px; } .gbp-price-card__size { margin: 0; padding: 0 8px; font-size: 34px; font-weight: 800; color: var(--gbp-deep); line-height: 1; } .gbp-price-card__price { padding: 0 8px; } .gbp-price-card__adv-label { margin: 12px 0 0; font-size: 15px; color: var(--gbp-sub); } .gbp-price-card__adv { margin: 0; font-size: 30px; font-weight: 800; color: var(--gbp-link); line-height: 1.3; } .gbp-price-card__same { margin: 4px 0 0; font-size: 16px; color: var(--gbp-sub); } .gbp-price-card__same strong { color: var(--gbp-ink); font-weight: 700; white-space: nowrap; } .gbp-price-card__spec { border-top: 1px solid var(--gbp-line); margin: 16px 8px 0; padding-top: 16px; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 16px; row-gap: 12px; align-items: baseline; } .gbp-price-card__spec dt { font-size: 15px; font-weight: 700; color: var(--gbp-sub); } .gbp-price-card__spec dd { margin: 0; font-size: 19px; font-weight: 800; color: var(--gbp-ink); line-height: 1.3; } .gbp-price-card__inch { display: block; } .gbp-price-card__cm { display: block; margin-top: 2px; font-size: 15px; font-weight: 400; color: var(--gbp-sub); line-height: 1.4; } /* 영어는 글이 길어서 PC 칸에서도 '캐리어' 값이 한 줄에 들어가도록 조금 줄임 */ @media (min-width: 768px) { .gbp-l-eng .gbp-price-card__spec { column-gap: 12px; } .gbp-l-eng .gbp-price-card__spec dd { font-size: 18px; } } .gbp-price-mo-note { display: none; } /* 단체 할인 */ .gbp-price-group { margin-top: 16px; background: var(--gbp-sky2); border-radius: 16px; padding: 22px 26px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 26px; align-items: center; grid-template-areas: "num title btn" "num text btn" "num note btn"; } .gbp-price-group__num { grid-area: num; margin: 0; font-size: 44px; font-weight: 800; color: var(--gbp-link); line-height: 1; white-space: nowrap; } .gbp-price-group__title { grid-area: title; margin: 0; font-size: 22px; font-weight: 800; line-height: 1.4; color: var(--gbp-ink); } .gbp-price-group__text { grid-area: text; margin: 4px 0 0; font-size: 16px; color: #333F4B; } .gbp-price-group__note { grid-area: note; margin: 2px 0 0; font-size: 14px; color: var(--gbp-sub); } .gbp-price-group .gbp-price-group__btn { grid-area: btn; font-size: 16px; padding: 13px 22px; } /* 기타물품 */ .gbp-price-etc { margin-top: 16px; border: 1px solid var(--gbp-line); border-radius: 16px; padding: 24px 24px 26px; } .gbp-price-etc__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 20px; margin-bottom: 18px; } .gbp-price-etc__head h3 { margin: 0; font-size: 22px; font-weight: 800; color: var(--gbp-ink); } .gbp-price-etc__head p { margin: 0; font-size: 16px; color: var(--gbp-sub); } .gbp-price-etc__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 10px; } .gbp-price-etc__list li { background: var(--gbp-sky); border-radius: 12px; padding: 12px 6px 10px; display: flex; flex-direction: column; align-items: center; gap: 8px; } .gbp-price-etc__img { height: 86px; display: flex; align-items: center; justify-content: center; } .gbp-price-etc__img img { display: block; width: auto; height: auto; max-height: 80px; max-width: 80px; object-fit: contain; } .gbp-price-etc__name { font-size: 15px; font-weight: 700; color: var(--gbp-ink); text-align: center; line-height: 1.4; } .gbp-price-etc__note { margin: 16px 0 0; font-size: 15px; color: #333F4B; } /* 무게·보관료 등 */ .gbp-price-info { margin-top: 16px; background: var(--gbp-sky); border-radius: 16px; padding: 22px 26px; display: flex; flex-direction: column; gap: 10px; font-size: 16px; color: #333F4B; } .gbp-price-info p { margin: 0; } .gbp-price-info strong { color: var(--gbp-ink); font-weight: 700; } .gbp-price-info a, .gbp-price-refund__note a { font-weight: 700; } /* 2 취소·환불 */ .gbp-price-refund { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } .gbp-price-refund__card { background: #FFFFFF; border: 1px solid var(--gbp-line); border-radius: 16px; padding: 24px; } .gbp-price-refund__card--zero { background: #FDECEC; border-color: #F5B5B5; } .gbp-price-refund__when { margin: 0; font-size: 16px; color: var(--gbp-sub); } .gbp-price-refund__rate { margin: 6px 0 0; font-size: 34px; font-weight: 800; color: var(--gbp-link); line-height: 1.2; } .gbp-price-refund__card--zero .gbp-price-refund__rate { color: var(--gbp-red); } .gbp-price-refund__what { margin: 2px 0 0; font-size: 15px; color: #333F4B; } .gbp-price-refund__note { margin: 14px 0 0; font-size: 15px; color: var(--gbp-sub); } /* 다른 페이지로 */ .gbp-price-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; } .gbp-price-links a { display: block; text-decoration: none; color: var(--gbp-ink); border: 1px solid var(--gbp-line); border-radius: 16px; padding: 24px 26px; } .gbp-price-links a:hover { border-color: var(--gbp-sky3); background: #F8FBFD; } .gbp-price-links__small { display: block; font-size: 14px; color: var(--gbp-sub); } .gbp-price-links__big { display: block; margin-top: 4px; font-size: 20px; font-weight: 800; color: var(--gbp-link); } /* 중국어 아래 띠: 버튼 3개 (휴대폰은 위챗 버튼을 아랫줄 전체 폭으로) */ .gbp-price-band3 { flex-wrap: wrap; } @media (max-width: 767px) { .gbp-price-band3 .gbp-btn--wechat { flex: 1 0 100%; } } /* ---------- 태블릿 (768~1079px) ---------- */ @media (min-width: 768px) and (max-width: 1079px) { .gbp-price-sizes { grid-template-columns: repeat(2, minmax(0, 1fr)); } .gbp-price-refund { grid-template-columns: repeat(2, minmax(0, 1fr)); } .gbp-price-etc__list { grid-template-columns: repeat(5, minmax(0, 1fr)); } } /* ---------- 휴대폰 (767px 이하) : 시안 '요금 A안 (휴대폰)' ---------- */ @media (max-width: 767px) { .gbp-price-pc { display: none; } .gbp-price-mo { display: inline; } .gbp-price-toc { display: flex; flex-wrap: nowrap; gap: 8px; margin-top: 20px; } .gbp-price-toc a { flex: 1 1 0; text-align: center; padding: 10px 4px; } .gbp-price-sec { padding: 36px 16px 8px; } .gbp-price-sec--first { padding-top: 36px; } .gbp-price-sec--links { padding: 28px 16px 40px; } .gbp-price-sizes { grid-template-columns: minmax(0, 1fr); gap: 10px; } .gbp-price-card { border-radius: 14px; padding: 14px 16px 16px; display: grid; grid-template-columns: 108px minmax(0, 1fr) auto; column-gap: 14px; align-items: center; grid-template-areas: "img size price" "spec spec spec"; } .gbp-price-card__img { grid-area: img; width: 108px; height: 92px; margin: 0; gap: 2px; padding-bottom: 8px; } .gbp-price-card--s .gbp-price-card__c { height: 56px; } .gbp-price-card--s .gbp-price-card__b { height: 42px; } .gbp-price-card--m .gbp-price-card__c { height: 64px; } .gbp-price-card--m .gbp-price-card__b { height: 48px; } .gbp-price-card--l .gbp-price-card__c { height: 72px; } .gbp-price-card--l .gbp-price-card__b { height: 60px; } .gbp-price-card--xl .gbp-price-card__c { height: 80px; } .gbp-price-card--xl .gbp-price-card__b { height: 70px; } .gbp-price-card__size { grid-area: size; padding: 0; font-size: 26px; } .gbp-price-card__price { grid-area: price; padding: 0; text-align: right; line-height: 1.3; } .gbp-price-card__adv-label { display: none; } .gbp-price-card__adv { font-size: 21px; } .gbp-price-card__same { margin-top: 4px; font-size: 14px; } .gbp-price-card__spec { grid-area: spec; margin: 14px 0 0; padding-top: 12px; column-gap: 14px; row-gap: 6px; line-height: 1.45; } .gbp-price-card__spec dt { font-size: 14px; } .gbp-price-card__spec dd { font-size: 16px; line-height: 1.45; } .gbp-price-card__inch { display: inline; } .gbp-price-card__cm { display: inline; margin: 0; font-size: 14px; white-space: nowrap; } .gbp-price-card__inch::after { content: " ·"; } .gbp-price-mo-note { display: block; margin: 10px 0 0; font-size: 14px; color: var(--gbp-sub); } .gbp-price-group { border-radius: 14px; padding: 16px; column-gap: 14px; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "num title" "num text" "btn btn" "note note"; } .gbp-price-group__num { font-size: 32px; } .gbp-price-group__title { font-size: 18px; line-height: 1.3; } .gbp-price-group__text { margin-top: 2px; font-size: 14px; line-height: 1.5; } .gbp-price-group .gbp-price-group__btn { display: flex; width: 100%; margin-top: 12px; font-size: 15px; padding: 11px 0; min-height: 0; } .gbp-price-group__note { margin-top: 8px; font-size: 13px; line-height: 1.5; } .gbp-price-etc { border-radius: 14px; padding: 18px 14px; } .gbp-price-etc__head { display: block; margin-bottom: 14px; } .gbp-price-etc__head h3 { font-size: 19px; } .gbp-price-etc__head p { margin-top: 4px; font-size: 14px; } .gbp-price-etc__list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .gbp-price-etc__list li { padding: 10px 4px 8px; gap: 6px; } .gbp-price-etc__img { height: 70px; } .gbp-price-etc__img img { max-height: 64px; max-width: 72px; } .gbp-price-etc__name { font-size: 14px; } .gbp-price-etc__note { margin-top: 14px; font-size: 14px; } .gbp-price-info { margin-top: 12px; border-radius: 14px; padding: 18px; font-size: 15px; } .gbp-price-refund { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .gbp-price-refund__card { border-radius: 14px; padding: 16px; } .gbp-price-refund__when { font-size: 14px; } .gbp-price-refund__rate { margin-top: 4px; font-size: 28px; } .gbp-price-refund__what { font-size: 14px; } .gbp-price-refund__note { margin-top: 12px; font-size: 14px; } .gbp-price-links { grid-template-columns: minmax(0, 1fr); gap: 10px; } .gbp-price-links a { padding: 18px; border-radius: 14px; } .gbp-price-links__big { margin-top: 2px; font-size: 18px; } } /* 아래 띠 제목: 휴대폰에서만 쉼표 뒤에서 줄 바꿈 (휴대폰 시안과 같게) */ @media (min-width: 768px) { .gbp-price-br { display: none; } } /* ---- 영어 PC (10월 20일 사장님 확인): 기타 물건 이름 한 줄 (Shopping bag · Clothing (coat) · Tangerine box) ---- */ @media (min-width: 1080px) { .gbp-l-eng .gbp-price-etc__list { gap: 6px; } .gbp-l-eng .gbp-price-etc__list li { padding-left: 2px; padding-right: 2px; } } @media (min-width: 1080px) and (max-width: 1199px) { .gbp-l-eng .gbp-price-etc__name { font-size: 13.6px; } } /* ---- 영어 휴대폰 (10월 20일 사장님 확인): 제목·목차·단체 안내·기타 물건 이름·취소 기준 칸 한 줄, 취소 안내 2줄 (글자는 화면 폭에 맞춰 조금 줄어듦. 넓은 휴대폰에서는 원래 크기) ---- */ @media (max-width: 767px) { .gbp-l-eng.gbp-p-price .gbp-hero h1 { font-size: min(28px, calc((100vw - 32px) / 14.1)); } .gbp-l-eng .gbp-price-toc a { flex: 1 1 auto; font-size: clamp(13px, calc((100vw - 64px) / 18.9), 15px); } .gbp-l-eng .gbp-price-etc { padding-left: 12px; padding-right: 12px; } .gbp-l-eng .gbp-price-etc__list { column-gap: 6px; } .gbp-l-eng .gbp-price-etc__list li { padding-left: 1px; padding-right: 1px; } .gbp-l-eng .gbp-price-etc__name { font-size: clamp(12.5px, calc((100vw - 74px) / 22.35), 14px); } .gbp-l-eng .gbp-price-refund__card { padding-left: 12px; padding-right: 12px; } .gbp-l-eng .gbp-price-refund__when { font-size: clamp(12.5px, calc((100vw - 90px) / 18.2), 14px); } .gbp-l-eng .gbp-price-refund__note { font-size: clamp(12.5px, calc((100vw - 32px) / 26.3), 14px); } .gbp-l-eng .gbp-price-info p { text-wrap: pretty; } /* 'Bike case' 끝에 'fee.' 한 단어만 남지 않게 */ } @media (min-width: 340px) and (max-width: 767px) { .gbp-l-eng .gbp-price-group__note { font-size: clamp(12px, calc((100vw - 64px) / 24.1), 13px); } /* 단체 할인 아래 문의 안내 한 줄 */ } /* 아주 좁은 휴대폰(폭 339 이하)은 취소 안내 첫 문장이 한 줄에 안 들어가 'reasons.' 뒤 줄바꿈을 하지 않음 */ @media (max-width: 339px) { .gbp-l-eng .gbp-price-refund__note .gbp-m-brmo { display: none; } } /* ---- 한국어 휴대폰 (10월 20일 사장님 확인): 취소 안내 '기준입니다.' 뒤 줄바꿈 → 둘째 문장이 한 줄에 들어가게 (14px → 폭에 맞춰) ---- */ @media (max-width: 767px) { .gbp-l-kor .gbp-price-refund__note { font-size: clamp(13px, calc((100vw - 32px) / 23.95), 14px); } } /* ---------- FAQ (자주 묻는 질문) ---------- */ .gbp-new .gbp-faq-cats { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; } .gbp-new .gbp-faq-cat { display: inline-flex; align-items: center; padding: 10px 18px; border-radius: 8px; background: #FFFFFF; color: var(--gbp-ink) !important; border: 1px solid var(--gbp-sky3); font-size: 15px; font-weight: 500; line-height: 1.5; text-decoration: none !important; cursor: pointer; } .gbp-new .gbp-faq-cat:hover { border-color: var(--gbp-blue); } .gbp-new .gbp-faq-cat.is-on { background: var(--gbp-blue); color: var(--gbp-navy) !important; border-color: var(--gbp-blue); font-weight: 700; } .gbp-new .gbp-faq-list { padding-top: 40px; padding-bottom: 24px; } .gbp-new .gbp-faq-count { margin: 0 0 8px; font-size: 15px; color: var(--gbp-sub); } .gbp-new .gbp-faq-group[hidden] { display: none; } .gbp-new .gbp-faq-gh { margin: 36px 0 0; padding: 0 6px 12px; font-size: 24px; font-weight: 800; line-height: 1.4; color: var(--gbp-ink); border-bottom: 2px solid var(--gbp-ink); } /* 질문 한 줄 (기본 gbp-qa 상자 모양을 목록 모양으로) */ .gbp-new .gbp-faq-list .gbp-faq-qa { border: 0; border-bottom: 1px solid var(--gbp-line); border-radius: 0; background: none; } .gbp-new .gbp-faq-list .gbp-faq-qa + .gbp-faq-qa { margin-top: 0; } .gbp-new .gbp-faq-list .gbp-faq-qa > summary { align-items: flex-start; gap: 14px; padding: 20px 6px; font-size: 18px; font-weight: 700; line-height: 1.6; } .gbp-new .gbp-faq-list .gbp-faq-qa > summary::after { display: none; } .gbp-new .gbp-faq-list .gbp-faq-qa > summary:focus-visible { outline: 3px solid rgba(0, 173, 239, .45); outline-offset: 2px; border-radius: 6px; } .gbp-new .gbp-faq-num { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; background: var(--gbp-sky2); color: var(--gbp-link); font-weight: 800; font-size: 15px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; } .gbp-new .gbp-faq-q { flex: 1 1 auto; min-width: 0; } .gbp-new .gbp-faq-sign { flex: 0 0 auto; width: 24px; text-align: center; font-size: 24px; line-height: 1.2; font-weight: 400; color: var(--gbp-link); } .gbp-new .gbp-faq-sign::before { content: '+'; } .gbp-new .gbp-faq-qa[open] .gbp-faq-sign::before { content: '\2212'; } .gbp-new .gbp-faq-list .gbp-faq-a { padding: 0 6px 24px 50px; font-size: 17px; line-height: 1.8; color: #333F4B; } .gbp-new .gbp-faq-a p { margin: 0; background: var(--gbp-sky); border-radius: 12px; padding: 16px 20px; } .gbp-new .gbp-faq-a p + p { margin-top: 8px; } /* 파손 보상 기준 칸 */ .gbp-new .gbp-faq-dmg-wrap { padding-top: 24px; padding-bottom: 8px; } .gbp-new .gbp-faq-dmg { padding: 28px 30px; display: grid; grid-template-columns: 440px 1fr; gap: 36px; align-items: center; scroll-margin-top: 16px; } .gbp-new .gbp-faq-dmg__fig { position: relative; width: 440px; max-width: 100%; aspect-ratio: 440 / 400; } .gbp-new .gbp-faq-dmg__fig img { position: absolute; left: 27.95%; top: 6.25%; width: 43.86%; height: auto; display: block; } .gbp-new .gbp-faq-dmg__fig svg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; } .gbp-new .gbp-faq-dmg__fig text { font-family: var(--gbp-font); font-size: 16px; font-weight: 700; fill: var(--gbp-ink); } .gbp-new .gbp-faq-dmg__kicker { margin: 0; font-size: 15px; font-weight: 700; color: var(--gbp-link); } .gbp-new .gbp-faq-dmg h2 { margin: 6px 0 0; font-size: 28px; font-weight: 800; line-height: 1.35; color: var(--gbp-ink); } .gbp-new .gbp-faq-dmg__lead { margin: 10px 0 0; font-size: 17px; line-height: 1.7; color: var(--gbp-sub); } .gbp-new .gbp-faq-dmg__list { margin: 18px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 14px; } .gbp-new .gbp-faq-dmg__list li { display: flex; gap: 12px; align-items: flex-start; } .gbp-new .gbp-faq-dmg__t { margin: 0; font-size: 18px; font-weight: 800; line-height: 1.5; color: var(--gbp-ink); } .gbp-new .gbp-faq-dmg__d { margin: 2px 0 0; font-size: 16px; line-height: 1.6; color: var(--gbp-sub); } /* 원하는 답이 없나요? */ .gbp-new .gbp-faq-helpwrap { padding-top: 32px; padding-bottom: 64px; } .gbp-new .gbp-faq-helpwrap .gbp-help { padding: 26px 28px; } .gbp-new .gbp-faq-helpbtns { display: flex; flex-wrap: wrap; gap: 10px; } @media (max-width: 1023px) { .gbp-new .gbp-faq-dmg { grid-template-columns: minmax(0, 1fr); gap: 24px; } .gbp-new .gbp-faq-dmg__fig { width: 100%; max-width: 440px; margin: 0 auto; } } @media (max-width: 767px) { .gbp-new .gbp-faq-cats { gap: 8px; margin-top: 20px; } .gbp-new .gbp-faq-cat { padding: 8px 13px; font-size: 14px; } .gbp-new .gbp-faq-list { padding-top: 28px; padding-bottom: 16px; } .gbp-new .gbp-faq-count { font-size: 14px; } .gbp-new .gbp-faq-gh { margin-top: 30px; padding: 0 2px 10px; font-size: 20px; } .gbp-new .gbp-faq-group:first-of-type .gbp-faq-gh { margin-top: 20px; } .gbp-new .gbp-faq-list .gbp-faq-qa > summary { gap: 10px; padding: 16px 2px; font-size: 16px; line-height: 1.55; } .gbp-new .gbp-faq-num { width: 26px; height: 26px; font-size: 13px; } .gbp-new .gbp-faq-sign { width: 20px; font-size: 22px; } .gbp-new .gbp-faq-list .gbp-faq-a { padding: 0 2px 18px; font-size: 15px; line-height: 1.75; } .gbp-new .gbp-faq-a p { padding: 14px 16px; } .gbp-new .gbp-faq-dmg-wrap { padding-top: 16px; } .gbp-new .gbp-faq-dmg { padding: 18px 16px 22px; gap: 18px; } .gbp-new .gbp-faq-dmg h2 { font-size: 22px; } .gbp-new .gbp-faq-dmg__kicker { font-size: 14px; } .gbp-new .gbp-faq-dmg__lead { font-size: 15px; } .gbp-new .gbp-faq-dmg__t { font-size: 16px; } .gbp-new .gbp-faq-dmg__d { font-size: 14px; } .gbp-new .gbp-faq-dmg__list .gbp-faq-num { margin-top: 0; } .gbp-new .gbp-faq-helpwrap { padding-top: 24px; padding-bottom: 40px; } .gbp-new .gbp-faq-helpwrap .gbp-help { padding: 18px; } .gbp-new .gbp-faq-helpbtns { margin-top: 14px; } .gbp-new .gbp-faq-helpbtns .gbp-btn { flex: 1 1 100%; margin-top: 0; } } /* 중국어: 한국어용 줄바꿈(keep-all)을 풀어 글자 단위로 줄바꿈 */ .gbp-new.gbp-l-chn.gbp-p-faq .gbp-main { word-break: normal; } /* ---- 영어 PC (10월 20일 사장님 확인): 첫 화면 안내 첫 문장 한 줄 + 'Tap a question …' 은 다음 줄 ---- */ @media (min-width: 1080px) { .gbp-l-eng .gbp-faq-hero .gbp-hero__lead { max-width: none; font-size: clamp(15.5px, calc(1.5654vw - 1.02px), 17.5px); } .gbp-l-eng .gbp-faq-hero .gbp-hero__lead .gbp-m-brmo { display: inline; } } /* ---- 중국어 PC (10월 20일 사장님 확인): 첫 화면 안내 '…相关解答。' 뒤 줄내림 ---- */ @media (min-width: 1080px) { .gbp-l-chn .gbp-faq-hero .gbp-hero__lead .gbp-m-brmo { display: inline; } } /* ---- 한국어 PC (10월 20일 사장님 확인): 첫 화면 안내 '…답을 모았습니다.' 뒤 줄내림 ---- */ @media (min-width: 1080px) { .gbp-l-kor .gbp-faq-hero .gbp-hero__lead .gbp-m-brmo { display: inline; } } /* ---- 영어 휴대폰 (10월 20일 사장님 확인): 'Frequently asked questions'·'When damage is not covered' 한 줄 ---- */ @media (max-width: 767px) { .gbp-l-eng .gbp-faq-hero h1 { font-size: min(28px, calc((100vw - 32px) / 14)); } .gbp-l-eng.gbp-new .gbp-faq-dmg h2 { font-size: min(22px, calc((100vw - 66px) / 14.4)); } } /* ---- 한국어 휴대폰 (10월 20일 사장님 확인): 보상 제외 3번 설명 한 줄 (설명 글자 14px → 폭에 맞춰) ---- */ @media (max-width: 767px) { .gbp-l-kor.gbp-new .gbp-faq-dmg__d { font-size: clamp(13px, calc((100vw - 104px) / 19.6), 14px); } } /* ---------- 숙소 사장님 안내 (한국어만) ---------- */ .gbp-new .gbp-partner-hero { background: var(--gbp-band); } .gbp-new .gbp-partner-hero__in { max-width: 1208px; margin: 0 auto; padding: 48px 24px 52px; } .gbp-new .gbp-partner-hero h1 { margin: 0; font-family: var(--gbp-font-jua); font-weight: 400; font-size: 52px; line-height: 1.25; color: var(--gbp-ink); } .gbp-new .gbp-partner-hero p { margin: 12px 0 0; font-size: 19px; line-height: 1.6; color: #35556B; } .gbp-new .gbp-partner { max-width: 1208px; margin: 0 auto; padding: 72px 24px 96px; } .gbp-new .gbp-partner-h2 { margin: 0; font-family: var(--gbp-font-jua); font-weight: 400; font-size: 40px; line-height: 1.3; color: var(--gbp-ink); } .gbp-new .gbp-partner-h2--gap { margin-top: 64px; } .gbp-new .gbp-partner-sub { margin: 6px 0 0; font-size: 18px; line-height: 1.6; color: #35556B; } /* 1. 명함 앞·뒤 + 이유 */ .gbp-new .gbp-partner-cards { display: flex; gap: 28px; margin-top: 26px; align-items: flex-start; } .gbp-new .gbp-partner-cardwrap { flex: 0 0 auto; } .gbp-new .gbp-partner-cardlabel { margin: 0 0 8px; font-size: 14px; font-weight: 700; color: #35556B; } .gbp-new .gbp-partner-card { width: 396px; height: 220px; border-radius: 10px; display: flex; flex-direction: column; justify-content: space-between; } .gbp-new .gbp-partner-card--front { background: #FFFFFF; border: 1px solid #C9DCE9; padding: 22px 24px; } .gbp-new .gbp-partner-card--front img { display: block; height: 64px; width: auto; align-self: flex-start; } .gbp-new .gbp-partner-card__t { margin: 0; font-size: 19px; font-weight: 800; line-height: 1.5; color: var(--gbp-ink); } .gbp-new .gbp-partner-card__s { margin: 2px 0 0; font-size: 14px; line-height: 1.5; color: #35556B; } .gbp-new .gbp-partner-card__c { margin: 6px 0 0; font-size: 13px; line-height: 1.5; color: #35556B; } .gbp-new .gbp-partner-card--back { background: var(--gbp-blue); padding: 16px 20px; } .gbp-new .gbp-partner-card__bt { margin: 0; font-size: 14px; font-weight: 800; line-height: 1.5; color: var(--gbp-navy); } .gbp-new .gbp-partner-qrs { display: flex; justify-content: space-between; } .gbp-new .gbp-partner-qr { display: flex; flex-direction: column; align-items: center; gap: 6px; } .gbp-new .gbp-partner-qr svg { display: block; width: 92px; height: 92px; background: #FFFFFF; border-radius: 4px; } .gbp-new .gbp-partner-qr span { font-size: 13px; font-weight: 800; line-height: 1.3; color: var(--gbp-navy); } .gbp-new .gbp-partner-why { flex: 1 1 auto; min-width: 0; align-self: stretch; background: #EEF6FC; border-radius: 14px; padding: 20px 22px; font-size: 16px; line-height: 1.6; color: #35556B; } .gbp-new .gbp-partner-why p { margin: 8px 0 0; } .gbp-new .gbp-partner-why p.gbp-partner-why__t { margin: 0; font-size: 17px; font-weight: 700; color: var(--gbp-navy); } /* 2. 예약과 연락은 손님께서 직접 */ .gbp-new .gbp-partner-two { margin-top: 18px; display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } .gbp-new .gbp-partner-box { border: 2px solid var(--gbp-band); border-radius: 16px; padding: 24px 26px; } .gbp-new .gbp-partner-box__t { margin: 0; font-family: var(--gbp-font-jua); font-size: 25px; line-height: 1.4; color: var(--gbp-ink); } .gbp-new .gbp-partner-box__d { margin: 8px 0 0; font-size: 17px; line-height: 1.7; color: #35556B; } /* 3. 숙소에서 맡기고 받을 때 */ .gbp-new .gbp-partner-s3 { margin-top: 64px; } .gbp-new .gbp-partner-checks { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-direction: column; gap: 14px; font-size: 18px; line-height: 1.6; color: var(--gbp-ink); } .gbp-new .gbp-partner-checks li { display: flex; gap: 10px; align-items: flex-start; } .gbp-new .gbp-partner-checks svg { flex: 0 0 auto; margin-top: 3px; } .gbp-new .gbp-partner-checks strong { font-weight: 800; } .gbp-new .gbp-partner-kakao { margin-top: 22px; padding: 13px 24px; } @media (max-width: 1179px) { .gbp-new .gbp-partner-cards { flex-wrap: wrap; } .gbp-new .gbp-partner-why { flex: 1 1 100%; } } @media (max-width: 767px) { .gbp-new .gbp-partner-hero__in { padding: 32px 16px 34px; } .gbp-new .gbp-partner-hero h1 { font-size: 32px; line-height: 1.3; } .gbp-new .gbp-partner-hero p { margin-top: 10px; font-size: 16px; line-height: 1.7; } .gbp-new .gbp-partner { padding: 40px 16px 56px; } .gbp-new .gbp-partner-h2 { font-size: 27px; line-height: 1.35; } .gbp-new .gbp-partner-h2--gap { margin-top: 44px; } .gbp-new .gbp-partner-sub { font-size: 16px; line-height: 1.7; } .gbp-new .gbp-partner-cards { gap: 18px; margin-top: 20px; } .gbp-new .gbp-partner-cardwrap { flex: 1 1 100%; } .gbp-new .gbp-partner-card { width: 100%; max-width: 396px; height: auto; min-height: 200px; gap: 14px; } .gbp-new .gbp-partner-card--front { padding: 18px 20px; } .gbp-new .gbp-partner-card--front img { height: 54px; } .gbp-new .gbp-partner-card--back { padding: 14px 16px 16px; } .gbp-new .gbp-partner-qr svg { width: 84px; height: 84px; } .gbp-new .gbp-partner-why { padding: 18px; font-size: 15px; line-height: 1.7; } .gbp-new .gbp-partner-two { grid-template-columns: 1fr; gap: 12px; margin-top: 16px; } .gbp-new .gbp-partner-box { padding: 18px; border-radius: 14px; } .gbp-new .gbp-partner-box__t { font-size: 21px; } .gbp-new .gbp-partner-box__d { font-size: 16px; } .gbp-new .gbp-partner-s3 { margin-top: 44px; } .gbp-new .gbp-partner-checks { margin-top: 16px; gap: 12px; font-size: 16px; line-height: 1.7; } .gbp-new .gbp-partner-checks svg { width: 20px; height: 20px; margin-top: 4px; } .gbp-new .gbp-partner-kakao { display: flex; width: 100%; margin-top: 18px; } } /* ===================================================================== 배송조회 (조회 화면 · 결과 화면) — 시안 Tracking / MobileTracking + 기능 페이지(배송조회·후기) 아래 띠의 PC·휴대폰 버튼 바꿔 보이기 ===================================================================== */ /* 아래 띠: PC 는 '요금 보기', 휴대폰은 '카카오톡 문의' */ .gbp-band__btns .gbp-fn-mo { display: none; } @media (max-width: 767px) { .gbp-band__btns .gbp-fn-pc { display: none; } .gbp-band__btns .gbp-fn-mo { display: inline-flex; font-weight: 700; } } /* ---------- 조회 화면 ---------- */ .gbp-trk-search { padding-top: 40px; padding-bottom: 24px; } .gbp-trk-box { padding: 32px; display: grid; grid-template-columns: 440px 1fr; gap: 44px; align-items: center; } .gbp-trk-van { background: var(--gbp-sky); border-radius: 12px; height: 340px; display: flex; align-items: center; justify-content: center; } .gbp-trk-van img { width: 360px; max-width: 86%; height: auto; display: block; } .gbp-trk-info { background: var(--gbp-sky); border-radius: 12px; padding: 16px 20px; margin-bottom: 26px; } .gbp-trk-info p { font-size: 16px; line-height: 1.75; color: #333F4B; } .gbp-trk-info p + p { margin-top: 4px; } .gbp-trk-info strong { color: var(--gbp-ink); } .gbp-trk-form .gbp-trk-label2 { margin-top: 18px; } .gbp-trk-submit { display: flex; width: 100%; height: 58px; margin-top: 24px; border-radius: 10px; font-size: 19px; } .gbp-trk-helpwrap { padding-top: 8px; padding-bottom: 56px; } @media (max-width: 1023px) { .gbp-trk-box { grid-template-columns: 1fr 1fr; gap: 28px; padding: 24px; } .gbp-trk-van { height: 280px; } } @media (max-width: 767px) { .gbp-trk-search { padding-top: 24px; padding-bottom: 8px; } .gbp-trk-box { display: block; border: 0; border-radius: 0; padding: 0; } .gbp-trk-van { height: 176px; } .gbp-trk-van img { width: 250px; max-width: 80%; } .gbp-trk-info { margin: 16px 0 0; background: #FFFFFF; border: 1px solid var(--gbp-line); padding: 14px 16px; } .gbp-trk-info p { font-size: 15px; line-height: 1.7; } .gbp-trk-info p + p { margin-top: 10px; } .gbp-trk-info strong { display: block; } .gbp-trk-form { margin-top: 22px; } .gbp-trk-form .gbp-trk-label2 { margin-top: 16px; } .gbp-trk-submit { height: 56px; margin-top: 20px; font-size: 18px; } .gbp-trk-helpwrap { padding-top: 20px; padding-bottom: 36px; } } /* ---------- 결과 화면 ---------- */ .gbp-trk-res { padding-top: 32px; padding-bottom: 8px; } .gbp-trk-sum { padding: 24px 28px; } .gbp-trk-sum__grid { display: grid; grid-template-columns: 1fr 1fr 1.2fr 1.5fr; gap: 24px; align-items: start; margin: 0; } .gbp-trk-sum__item dt { margin: 0 0 6px; font-size: 15px; font-weight: 400; color: var(--gbp-sub); } .gbp-trk-sum__item dt label { font-weight: 400; } .gbp-trk-sum__item dd { margin: 0; min-height: 52px; display: flex; align-items: center; font-size: 20px; font-weight: 800; word-break: break-all; } .gbp-trk-sum__date dd { display: block; } .gbp-trk-sum .gbp-select { height: 52px; font-size: 18px; } .gbp-trk-sum__foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--gbp-line); } .gbp-trk-sum__foot p { font-size: 16px; color: var(--gbp-sub); } .gbp-trk-sum__btn { flex: 0 0 auto; width: 240px; height: 54px; border-radius: 10px; font-size: 18px; } .gbp-trk-gap { height: 48px; } .gbp-trk-steps-wrap { padding-top: 36px; padding-bottom: 8px; } .gbp-trk-date { font-size: 26px; font-weight: 800; line-height: 1.4; color: var(--gbp-ink); } .gbp-trk-steps { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } /* 10월 20일: 4칸 → 3칸 ('접수완료' 지움) */ .gbp-trk-step { background: var(--gbp-gray); border: 2px solid var(--gbp-line); border-radius: 12px; padding: 16px 8px; text-align: center; color: #7A848E; } .gbp-trk-step__dot { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; margin: 0 auto 6px; border-radius: 50%; background: #FFFFFF; border: 2px solid #D5DCE3; font-size: 17px; font-weight: 800; } .gbp-trk-step__lab { display: block; font-size: 18px; font-weight: 700; line-height: 1.3; } .gbp-trk-step.is-on { background: var(--gbp-sky2); border-color: #7FD4F5; color: var(--gbp-link); } .gbp-trk-step.is-on .gbp-trk-step__dot { border-color: var(--gbp-blue); font-size: 18px; } .gbp-trk-step.is-on .gbp-trk-step__lab { font-weight: 800; } .gbp-trk-panels { padding-top: 24px; padding-bottom: 64px; } .gbp-trk-panels__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: start; } .gbp-trk-panel { padding: 22px; } .gbp-trk-panel h3 { font-size: 20px; font-weight: 800; line-height: 1.4; color: var(--gbp-ink); } .gbp-trk-panel__place { display: block; font-size: 0.9em; font-weight: 700; } /* 10월 20일: 제목 아래 줄에 (장소) */ .gbp-trk-panel__sub { margin-top: 2px !important; font-size: 15px; color: var(--gbp-sub); } .gbp-trk-photos { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 16px; } .gbp-trk-photos--3 { grid-template-columns: repeat(3, 1fr); } .gbp-trk-photos a { display: block; aspect-ratio: 1 / 1; border-radius: 10px; overflow: hidden; background: #EEF2F5; } .gbp-trk-photos img { display: block; width: 100%; height: 100%; object-fit: cover; } .gbp-trk-panel__time { margin-top: 12px !important; font-size: 15px; color: var(--gbp-sub); text-align: center; } .gbp-trk-memo { margin-top: 12px; background: var(--gbp-sky); border-radius: 10px; padding: 12px 14px; font-size: 16px; line-height: 1.7; color: #333F4B; } .gbp-trk-memo strong { color: var(--gbp-ink); } .gbp-trk-memo p { display: inline; } .gbp-trk-none { margin-top: 16px !important; border: 1.5px dashed var(--gbp-field); border-radius: 12px; padding: 36px 12px; text-align: center; font-size: 16px; color: var(--gbp-mute); } @media (max-width: 1023px) { .gbp-trk-sum__grid { grid-template-columns: 1fr 1fr; } .gbp-trk-panels__grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 767px) { .gbp-trk-res { padding-top: 20px; } .gbp-trk-sum { padding: 6px 16px 16px; } .gbp-trk-sum__grid { display: block; } .gbp-trk-sum__item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--gbp-line); } .gbp-trk-sum__item dt { margin: 0; } .gbp-trk-sum__item dd { min-height: 0; font-size: 17px; text-align: right; } .gbp-trk-sum__date { display: block; border-bottom: 0; padding-bottom: 0; } .gbp-trk-sum__date dt { margin: 2px 0 6px; } .gbp-trk-sum .gbp-select { font-size: 17px; } .gbp-trk-sum__foot { display: block; margin-top: 8px; padding-top: 0; border-top: 0; } .gbp-trk-sum__foot p { font-size: 14px; } .gbp-trk-sum__btn { display: flex; width: 100%; margin-top: 14px; font-size: 17px; } .gbp-trk-steps-wrap { padding-top: 24px; } .gbp-trk-date { font-size: 22px; } .gbp-trk-steps { gap: 6px; margin-top: 14px; } .gbp-trk-step { border-radius: 10px; padding: 10px 2px; } .gbp-trk-step__dot { width: 30px; height: 30px; margin-bottom: 4px; font-size: 14px; } .gbp-trk-step.is-on .gbp-trk-step__dot { font-size: 15px; } .gbp-trk-step__lab { font-size: 15px; } .gbp-trk-panels { padding-top: 16px; padding-bottom: 40px; } .gbp-trk-panels__grid { display: flex; flex-direction: column; align-items: stretch; gap: 12px; } .gbp-trk-panel { padding: 16px; } .gbp-trk-panel h3 { font-size: 18px; } .gbp-trk-panel__sub { font-size: 14px; } .gbp-trk-photos { margin-top: 12px; } .gbp-trk-photos--3 { grid-template-columns: repeat(2, 1fr); } /* 10월 20일 사장님 확인: 픽업·도착 사진도 한 줄 2장 (가방 사진과 같은 크기, PC는 그대로) */ .gbp-trk-panel__time { margin-top: 10px !important; font-size: 14px; } .gbp-trk-memo { margin-top: 10px; font-size: 15px; } .gbp-trk-none { margin-top: 12px !important; padding: 28px 12px; font-size: 15px; } } /* ---- 영어 PC (10월 20일 사장님 확인): 조회 안내 두 문장을 각각 한 줄로 (그림 칸 440 → 330px) ---- */ @media (min-width: 1024px) { .gbp-l-eng .gbp-trk-box { grid-template-columns: 330px 1fr; gap: 32px; } .gbp-l-eng .gbp-trk-info { padding-left: 16px; padding-right: 16px; } .gbp-l-eng .gbp-trk-info p { font-size: 15.5px; } } /* 첫 화면 안내 'Enter the booker's name …' 한 줄 (글 칸 폭 760px 제한을 풂) */ @media (min-width: 1080px) { .gbp-l-eng.gbp-p-tracking .gbp-hero__lead { max-width: none; } } /* ---- 영어 휴대폰 (10월 20일 사장님 확인): '조회가 안 되나요?' 안내 4→3줄 (글자는 화면 폭에 맞춰 15px에서 조금 줄어듦) 폭 339 이하(글자를 크게 해 둔 휴대폰)는 그대로 ---- */ @media (min-width: 340px) and (max-width: 767px) { .gbp-l-eng.gbp-p-tracking .gbp-help { padding-left: 14px; padding-right: 14px; } .gbp-l-eng.gbp-p-tracking .gbp-help__text { font-size: clamp(13px, calc((100vw - 62px) / 21.6), 15px); } } /* ===================================================================== 후기 — 시안 Review / MobileReview ===================================================================== */ .gbp-rev-h1 span { color: var(--gbp-link); } .gbp-hero__lead.gbp-rev-lead { max-width: 880px; } .gbp-rev-tabs { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; } .gbp-rev-tabs a { background: #FFFFFF; color: var(--gbp-ink); border: 1px solid var(--gbp-sky3); font-weight: 500; font-size: 15px; line-height: 1.5; padding: 10px 18px; border-radius: 8px; text-decoration: none; } .gbp-rev-tabs a:hover { border-color: var(--gbp-blue); color: var(--gbp-ink); } .gbp-rev-tabs a.is-on { background: var(--gbp-blue); border-color: var(--gbp-blue); color: var(--gbp-navy); font-weight: 700; } .gbp-rev-list { padding-top: 40px; padding-bottom: 56px; } .gbp-rev-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } .gbp-rev-item { min-width: 0; } .gbp-rev-card { display: block; text-decoration: none; color: var(--gbp-ink) !important; border: 1px solid var(--gbp-line); border-radius: 14px; overflow: hidden; background: #FFFFFF; } .gbp-rev-card:hover { border-color: #9FD9F2; } .gbp-rev-card:hover .gbp-rev-card__title { text-decoration: underline; } .gbp-rev-card__img { position: relative; display: flex; align-items: center; justify-content: center; aspect-ratio: 1 / 1; overflow: hidden; } .gbp-rev-card__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } .gbp-rev-card__badge { position: absolute; left: 10px; top: 10px; z-index: 1; background: #FFFFFF; color: var(--gbp-link); font-size: 13px; font-weight: 700; line-height: 1.6; padding: 2px 8px; border-radius: 6px; } .gbp-rev-card__body { display: block; padding: 12px 14px 14px; } .gbp-rev-card__title { display: block; font-size: 17px; font-weight: 700; line-height: 1.45; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .gbp-rev-card__open { display: block; margin-top: 2px; font-size: 14px; color: var(--gbp-sub); } .gbp-rev-admin { margin-top: 6px !important; font-size: 13px; text-align: center; } .gbp-rev-admin a { color: var(--gbp-sub); margin: 0 4px; } .gbp-rev-empty { padding: 48px 0; text-align: center; font-size: 17px; color: var(--gbp-sub); } .gbp-rev-write { margin-top: 24px !important; text-align: right; } .gbp-rev-pager { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; margin-top: 36px; } .gbp-rev-pager a, .gbp-rev-pager span { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border-radius: 8px; text-decoration: none; font-size: 16px; border: 1px solid var(--gbp-field); color: var(--gbp-ink); background: #FFFFFF; } .gbp-rev-pager a:hover { border-color: var(--gbp-blue); color: var(--gbp-ink); } .gbp-rev-pager a.is-on { border-color: var(--gbp-blue); color: var(--gbp-navy); background: var(--gbp-blue); font-weight: 800; } .gbp-rev-pager span.is-gap { border: 0; color: var(--gbp-sub); background: transparent; width: 28px; } .gbp-rev-pager span.is-off { color: #B8C4CF; border-color: var(--gbp-line); } @media (max-width: 1023px) { .gbp-rev-grid { grid-template-columns: repeat(3, 1fr); gap: 16px; } } @media (max-width: 767px) { .gbp-rev-tabs { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; margin-top: 20px; } .gbp-rev-tabs a { grid-column: span 2; display: flex; align-items: center; justify-content: center; text-align: center; padding: 10px 6px; } .gbp-l-kor .gbp-rev-tabs a:nth-child(n+4) { grid-column: span 3; } /* 전체·블로그·인스타그램 / 유튜브·외국 고객님 후기 */ .gbp-l-eng .gbp-rev-tabs a:nth-child(2), .gbp-l-chn .gbp-rev-tabs a:nth-child(2) { grid-column: span 4; } /* 전체·외국 고객 / 블로그·인스타그램·유튜브 */ .gbp-rev-list { padding-top: 24px; padding-bottom: 40px; } .gbp-rev-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; } .gbp-rev-card { border-radius: 12px; } .gbp-rev-card__img svg { width: 34px; height: 34px; } .gbp-rev-card__badge { left: 8px; top: 8px; font-size: 12px; } .gbp-rev-card__body { padding: 10px 12px 12px; } .gbp-rev-card__title { font-size: 15px; } .gbp-rev-card__open { font-size: 13px; } .gbp-rev-pager { margin-top: 28px; } .gbp-rev-pager .gbp-rev-pager__end { display: none; } /* 휴대폰: ‹ 1 2 3 4 5 › 만 (시안과 같게, 한 줄) */ .gbp-rev-pager a, .gbp-rev-pager span { width: 40px; height: 40px; font-size: 15px; } .gbp-rev-pager span.is-gap { width: 20px; } } @media (max-width: 380px) { .gbp-rev-pager { gap: 4px; } .gbp-rev-pager a, .gbp-rev-pager span { width: 36px; height: 40px; } } /* ---- 영어 PC (10월 20일 사장님 확인): 안내 두 문장을 각각 한 줄로 ('Tap a review …' 는 다음 줄) ---- */ @media (min-width: 1080px) { .gbp-l-eng .gbp-rev-lead .gbp-m-brmo { display: inline; } } /* ---- 영어 휴대폰 (10월 20일 사장님 확인): 후기 제목 한 줄, 안내 첫 문장 2줄 (글자는 화면 폭에 맞춰 조금 줄어듦) ---- */ @media (max-width: 767px) { .gbp-l-eng.gbp-p-review .gbp-hero h1 { font-size: min(28px, calc((100vw - 32px) / 12.4)); } .gbp-l-eng .gbp-rev-lead { font-size: min(16px, calc((100vw - 32px) / 21.2)); } } /* ===================================================================== 예약 첫 화면 — 시안 Reservation / MobileReservation ① 부분 ===================================================================== */ .gbp-res-hero .gbp-hero__in { padding-bottom: 48px; display: grid; grid-template-columns: 1fr auto; column-gap: 24px; grid-template-areas: "k b" "h b" "s b"; align-items: end; } .gbp-res-hero .gbp-hero__kicker { grid-area: k; } .gbp-res-hero h1 { grid-area: h; } .gbp-res-hero .gbp-res-sub { grid-area: s; } .gbp-res-btn { grid-area: b; align-self: end; font-size: 20px; padding: 18px 64px; border-radius: 10px; } .gbp-res-rules { padding-top: 40px; padding-bottom: 56px; } .gbp-res-rules__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .gbp-res-rule { padding: 28px; display: flex; gap: 20px; align-items: center; } .gbp-res-rule__icon { flex: 0 0 auto; width: 84px; height: 84px; border-radius: 14px; background: var(--gbp-sky); display: flex; align-items: center; justify-content: center; } .gbp-res-rule__tag { font-size: 16px; font-weight: 800; color: var(--gbp-link); } .gbp-res-rule__big { margin-top: 2px !important; font-size: 24px; font-weight: 800; line-height: 1.35; color: var(--gbp-ink); } .gbp-res-rule__text { margin-top: 8px !important; font-size: 16px; line-height: 1.7; color: var(--gbp-sub); } @media (max-width: 1023px) { .gbp-res-btn { padding: 16px 40px; } .gbp-res-rule { padding: 22px; } .gbp-res-rule__big { font-size: 21px; } } @media (max-width: 767px) { .gbp-res-hero .gbp-hero__in { display: block; padding-bottom: 28px; } .gbp-res-btn { display: flex; width: 100%; margin-top: 20px; padding: 16px 0; font-size: 19px; } .gbp-res-hero .gbp-res-sub { margin-top: 12px; font-size: 15px; } .gbp-res-rules { padding-top: 24px; padding-bottom: 36px; } .gbp-res-rules__grid { grid-template-columns: 1fr; gap: 12px; } .gbp-res-rule { padding: 18px; gap: 14px; align-items: flex-start; border-radius: 14px; } .gbp-res-rule__icon { width: 56px; height: 56px; border-radius: 12px; } .gbp-res-rule__icon svg { width: 34px; height: 34px; } .gbp-res-rule__tag { font-size: 15px; } .gbp-res-rule__big { font-size: 19px; line-height: 1.4; } .gbp-res-rule__text { margin-top: 6px !important; font-size: 15px; line-height: 1.65; } /* 중국어 (10월 20일): '…6点前，' 뒤 줄바꿈 → 폭 328 휴대폰에서도 첫 줄이 한 줄에 들어가게 아주 조금 줄임 */ .gbp-l-chn .gbp-res-rule__text { font-size: 14.8px; } }