@charset "UTF-8"; /* ═══════════════════════════════════════════════════════════════ common.css — 범용 유틸 클래스 + 공용 애니메이션(@keyframes) 로드: theme/design/head.sub.php ( 안, reset.css 뒤 / 섹션 CSS 앞) style.css · header.css · footer.css 에 흩어져 있던 것을 통합했다. - 표시 제어: .pc / .mobile / .tablet / .hide / .show / .flowhid … - 배치 유틸: .absol / .rltv / .flexrow / .flexcol / .absol_cover / .back_img … - 텍스트 유틸: .noto / .bold / .medium / .thin / .txct / .white / .lh … - 마퀴·슬라이드 공용: .image_sd* / .slide_y* / .flow_sd* / .swiper* - @keyframes 39종 (ddm·blk·marquee·scaleOpa·shake·line-*·spin 등) ★ 섹션 전용 스타일은 여기 넣지 않는다 (css/style.css 등 각 섹션 CSS 로). ═══════════════════════════════════════════════════════════════ */ /* ══ 디자인 토큰 (:root) ══ 디자이너 텍스트본(포션의 참고사항 txt 등)에서 추린 폰트·컬러를 여기에 등록한다. ★ style.css 가 아니라 이 파일이다 — style.css 는 메인 페이지에서만 로드되므로 거기 :root 를 두면 서브·게시판 페이지와 header.css/footer.css 에서 토큰이 미정의가 된다. common.css 는 head.sub.php 가 전 페이지에 싣는다. 등록 절차는 portion 스킬 참조. Pretendard 는 광역 카스케이드라 토큰 불필요. */ :root { /* 폰트 토큰 ([참고사항].txt 지정) — Pretendard 는 광역 카스케이드라 토큰 없음 */ --font-dnf: "DnfTemperedBlade", sans-serif; /* 던파 연단된 칼날 */ --font-mapo: "MapoHongdaeFreedom", sans-serif; /* Mapo홍대프리덤 */ --font-consolas: "Consolas", "Courier New", monospace; /* 메인 텍스트 스크램블 모션 */ --font-syncopate: "Syncopate", sans-serif; /* 매출 수치 */ /* 컬러 토큰 */ --color-point: #014190; /* 카드 타이틀 강조 파랑 */ --color-ivory: #fffae5; /* con05 우패널 배경 · 순수익 텍스트 */ } .flowhid { overflow: hidden; } .hide { display: none !important; } .hideopa { opacity: 0 !important; } .show { opacity: 1 !important; } @keyframes ddm3 { 0% { transform: scale(1); } 50% { transform: rotate(-8deg); } 65% { transform: scale(1.1); } 100% { transform: scale(1); } } @keyframes ddm4 { 0% { transform: scale(1); } 25% { transform: rotate(-2deg); } 50% { transform: scale(1.05); } 75% { transform: rotate(2deg); } 100% { transform: scale(1); } } @keyframes blk3 { 0% { opacity: 1; } 24% { opacity: 1; } 25% { opacity: 0; } 99% { opacity: 0; } 100% { opacity: 1; } } @keyframes rotate_image { 100% { transform: rotate(360deg); } } @keyframes scaleOpa { 100% { transform: scale(1.1); opacity: 0; } } @keyframes scaleOpa2 { 100% { transform: scale(1.4); opacity: 0; } } @keyframes ddm { 0% { transform: scale(1); } 50% { transform: matrix(1.05, 0.01, 0.01, 1.05, 0, -30); } 100% { transform: scale(1); } } @keyframes rotate_imageY { 0% { transform: rotateY(0); } 100% { transform: rotateY(360deg); } } @keyframes ddm2 { 0% { transform: scale(1); } 50% { transform: translateY(20px); } 75% { transform: scale(1.02); transform: translateY(10px); } 100% { transform: scale(1); transform: translateY(0px); } } @keyframes scaleOpa3 { 100% { transform: scale(1.3); opacity: 0; } } @keyframes smoke { 0% { transform: translateY(30%) scale(0.8); opacity: 0; } 20% { opacity: 1; } 100% { transform: translateY(-30%) scale(1.1); opacity: 0; } } .smoke { animation: smoke 4s infinite linear; } @keyframes light { 0%, 31%, 34%, 39%, 42%, 47% { opacity: 0; } 5%, 30%, 35%, 38%, 43%, 46% { opacity: 0.4; } 50%, 55%, 60%, 67%, 51%, 54%, 68%, 100% { opacity: 1; } 70% { opacity: 0.2; } } @keyframes marqueeX { from { transform: translateX(0); } to { transform: translateX(-100%); } } @keyframes marqueeX_r { from { transform: translateX(0); } to { transform: translateX(100%); } } @keyframes marqueeY { from { transform: translateY(0); } to { transform: translateY(-100%); } } @keyframes marqueeY_r { from { transform: translateY(0); } to { transform: translateY(100%); } } @keyframes opa { 0% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: 0; } } @keyframes shakeAndFall { 0% { transform: translate(0, -50%) rotate(0); opacity: 0; } } .shakeTwice { animation: shakeTwice 2s ease-in-out infinite; transform-origin: center; } .shakeTwices { animation: shakeTwices 2s ease-in-out infinite; transform-origin: center; } @keyframes shakeTwice { 0% { transform: rotate(0deg); } 10% { transform: rotate(5deg); } 20% { transform: rotate(-5deg); } 30% { transform: rotate(4deg); } 40% { transform: rotate(-4deg); } 50% { transform: rotate(0deg); } 100% { transform: rotate(0deg); } } @keyframes shakeTwices { 0% { transform: rotate(0deg); } 10% { transform: rotate(3deg); } 20% { transform: rotate(-3deg); } 30% { transform: rotate(2deg); } 40% { transform: rotate(-2deg); } 50% { transform: rotate(0deg); } 100% { transform: rotate(0deg); } } div.swiper-slide { display: flex; justify-content: center; align-items: center; flex-direction: column; } .swiper-wrapper.flow { pointer-events: none; transition-timing-function: linear; } .swiper-button-disabled { opacity: 0.3; } .noto { font-family: "Noto Serif", serif; } .notokr { font-family: "Noto Serif KR", serif; } .exbold { font-weight: 800; } .bold { font-weight: 700; } .sebold { font-weight: 600; } .medium { font-weight: 500; } .regular { font-weight: 400; } .flight { font-weight: 200; } .thin { font-weight: 100; } .animate-blk { animation: blk 1s infinite ease-in-out; } .scaleOpa { animation: scaleOpa infinite 2s; } .scaleOpa2 { animation: scaleOpa2 infinite 2s; } .light { animation: light infinite 5s; } .rotate_img { animation: rotate_image 10s infinite linear; } .white { color: white; } .txct { text-align: center; } .lh { line-height: 1.5; } /* reveal 대신 사용 start */ /* 왼쪽부터 나타나기 */ .clip_off02 { clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%); transition: all 0.8s; } /* 가운데에서 나타나기 */ .clip_off { clip-path: polygon(50% 0, 50% 0, 50% 100%, 50% 100%); transition: all 0.8s; } /* gsap에서 넣을 class */ .clip_on { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%) !important; } /* reveal 대신 사용 end */ .absol_cover { width: 100%; height: 100%; top: 0%; left: 0%; position: absolute; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: center; flex-direction: column; } .max_width { width: unset !important; max-width: 101%; } .back_img { background-repeat: no-repeat; background-size: cover; background-position: top center; } /* image_sd */ .image_sd_wrap { overflow: hidden; } .image_sd { animation: marqueeX 20s infinite linear; } .image_sd .absol { left: 100%; } .image_sd_r { animation: marqueeX_r 20s infinite linear; } .image_sd_r .absol { right: 100%; } /* image_sd end */ /* y_slide start */ .slide_y_wrap { height: 100%; display: flex; justify-content: center; align-items: center; top: 0%; overflow: hidden; } .slide_y { animation: marqueeY 20s infinite linear; } .slide_y img.absol { top: 100%; } .slide_y_r { animation: marqueeY_r 20s infinite linear; } .slide_y_r img.absol { bottom: 100%; } /* y_slide end */ /* flow_sd 가로 (여러 이미지 마퀴) start */ .flow_sd { width: 100%; display: flex; justify-content: flex-start; align-items: center; overflow: hidden; } .flow_sd_move { display: flex; justify-content: flex-start; align-items: center; animation: marqueeX 20s infinite linear; } .flow_sd_move_r { display: flex; justify-content: flex-start; align-items: center; animation: marqueeX_r 20s infinite linear; } .flow_sd_move_item { display: flex; justify-content: flex-start; align-items: center; } .flow_sd_move_item02 { left: 100%; } .flow_sd_move_item02_r { right: 100%; } .flow_sd_img { display: flex; justify-content: center; align-items: center; } /* flow_sd 가로 end */ /* flow_sd 세로 (여러 이미지 마퀴) start */ .flow_sd_y { height: 100%; display: flex; justify-content: flex-start; align-items: center; overflow: hidden; } .flow_sd_y_move { display: flex; justify-content: flex-start; align-items: center; animation: marqueeY 10s infinite linear; } .flow_sd_y_move_r { display: flex; justify-content: flex-start; align-items: center; animation: marqueeY_r 10s infinite linear; } .flow_sd_y_move_item { display: flex; justify-content: flex-start; align-items: center; flex-direction: column; } .flow_sd_y_move_item02 { top: 100%; } .flow_sd_y_move_item02_r { bottom: 100%; } .flow_sd_y_img { display: flex; justify-content: center; align-items: center; } /* flow_sd 세로 end */ /* swiper-arr */ .btn_arr { z-index: 2; cursor: pointer; } .arr_next { transform: rotateY(180deg); } /* swiper-arr */ iframe { width: 100%; height: 100%; } video { width: 100%; height: 100%; object-fit: cover; } .swiper-button-lock { display: none !important; } .swiper { margin: 0; z-index: 0; } b { font-weight: 700; } .obj > img { height: 100%; object-fit: cover; } .pc-mobile { display: flex !important; } .mobile-pc { display: none !important; } .pc { display: flex !important; } .pc-inline { display: inline !important; } /* .pc-inline 의 반대 — PC 에선 없고 모바일에서만 줄바꿈되는
용 (모바일 표시는 header.css 의 max-width:599px 블록에서) */ .mo-inline { display: none !important; } .tablet { display: none !important; } .mobile { display: none !important; } .absol { position: absolute; } .rltv { position: relative; } .flex { display: flex; justify-content: center; align-items: center; } .flexrow { display: flex; justify-content: center; align-items: center; flex-direction: row; } .flexcol { display: flex; justify-content: center; align-items: center; flex-direction: column; } @keyframes marquee3 { from { transform: translateX(0); } to { transform: translateX(-100%); } } @keyframes blk { 0% { opacity: 0; } 30% { opacity: 0; } 31% { opacity: 1; } 99% { opacity: 1; } 100% { opacity: 0; } } @keyframes ddm_m { 0% { transform: scale(1); } 50% { transform: matrix(1.05, 0.01, 0.01, 1.05, 0, -15); } 100% { transform: scale(1); } } @keyframes ddm_m_reverse { 0% { transform: scale(1); } 50% { transform: matrix(0.8, 0.01, 0.01, 0.8, 0, -5); } 100% { transform: scale(1); } } @keyframes blk2 { 0% { opacity: 0; } 49% { opacity: 0; } 50% { opacity: 1; } 99% { opacity: 1; } 100% { opacity: 0; } } @keyframes line-top { 0% { transform: translateY(0px); } 100% { transform: translateY(13px); } } /* 추가된 부분 */ @keyframes line-top-reverse { 0% { transform: translateY(13px); } 100% { transform: translateY(0px); } } @keyframes line-top-rotate { 0% { transform: translateY(13px) rotateZ(0deg); } 100% { transform: translateY(13px) rotateZ(45deg); } } /* 추가된 부분 */ @keyframes line-top-rotate-reverse { 0% { transform: translateY(13px) rotateZ(45deg); } 100% { transform: translateY(13px) rotateZ(0deg); } } @keyframes line-mid { 0% { transform: scale(1); } 100% { transform: scale(0); } } /* 추가된 부분 */ @keyframes line-mid-reverse { 0% { transform: scale(0); } 100% { transform: scale(1); } } @keyframes line-mid-invisible { 0% { transform: scale(0); } 100% { transform: scale(0); } } @keyframes line-bot { 0% { transform: translateY(0px); } 100% { transform: translateY(-13px); } } /* 추가된 부분 */ @keyframes line-bot-reverse { 0% { transform: translateY(-13px); } 100% { transform: translateY(0px); } } @keyframes line-bot-rotate { 0% { transform: translateY(-13px) rotateZ(0deg); } 100% { transform: translateY(-13px) rotateZ(135deg); } } /* 추가된 부분 */ @keyframes line-bot-rotate-reverse { 0% { transform: translateY(-13px) rotateZ(135deg); } 100% { transform: translateY(-13px) rotateZ(0deg); } } /* -------------------header 커스텀 시작------------------- */ @keyframes dropHeader { 0% { top: -5rem; } 100% { top: 0; } } @keyframes insertHeader { 0% { top: 0; } 100% { top: -7rem; } } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* 탭·토글 전환용 범용 페이드업 (display 토글로 새로 렌더될 때 자연스럽게 등장) */ @keyframes fadeUpSoft { 0% { opacity: 0; transform: translateY(1.2vw); } 100% { opacity: 1; transform: translateY(0); } } /* ══ 유튜브 파사드 (썸네일 + 재생버튼 → 클릭 시에만 iframe 주입) ══ 진입 시 유튜브를 아예 부르지 않아 초기 로딩이 가볍다. 클릭 주입은 js/script.js, 슬라이드 전환 시 iframe 제거는 js/slide.js. 부모(.xxx_video)는 position:relative + 고정 박스여야 파사드가 정확히 채워진다. 썸네일은 .absol_cover.obj 조합(위 유틸)으로 채우므로 _thumb 룰을 따로 두지 않는다. */ .video-facade { position: absolute; top: 0; left: 0; display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; overflow: hidden; cursor: pointer; } /* 재생버튼 = 둥근 사각 배지 + CSS 삼각형 */ .video-facade_play { position: relative; display: flex; justify-content: center; align-items: center; width: calc(var(--px) * 90); height: calc(var(--px) * 64); background: rgba(0, 0, 0, 0.65); border-radius: calc(var(--px) * 16); transition: background 0.2s; } .video-facade:hover .video-facade_play { background: #e60000; } .video-facade_play::after { content: ""; display: block; width: 0; height: 0; border-style: solid; border-width: calc(var(--px) * 13) 0 calc(var(--px) * 13) calc(var(--px) * 22); border-color: transparent transparent transparent #ffffff; margin-left: calc(var(--px) * 5); } /* 클릭 시 주입되는 iframe (파사드를 덮음) */ .video-facade_frame { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; } /* ══ 테이프 붙는 모션 (peel) ══ 같은 테이프 이미지 2겹을 접힘선(--fold) 기준으로 잘라, 한 장은 바닥에 붙은 채(.peel-main) 한 장은 거울처럼 뒤집어(.peel-flap) 들린 것처럼 보이게 한다. GSAP 이 --peel(0=붙음 ~ 1=떼짐) 하나만 움직이면 붙는/떼지는 모션이 된다. 기본값 0 = 원본 디자인과 100% 동일(평평·수평)이라 JS 가 안 돌아도 테이프는 멀쩡히 보인다. ※ .peel 을 붙이는 요소는 position 이 있어야 한다(absol 이거나 relative). */ .peel { --peel: 0; --fold: calc((1 - var(--peel)) * 100%); --tilt: -10deg; transform: rotate(calc(var(--peel) * var(--tilt))); transform-origin: 6% 50%; } /* 바닥에 붙은 부분 (접힘선 왼쪽). ★ absolute 가 아니라 **흘름에 남긴다** — 이미지 테이프처럼 부모에 크기가 박힌 경우만 있는 게 아니라, 라벨처럼 내용으로 크기가 정해지는 요소도 쓰기 때문. (둘 다 absolute 로 빼면 부모가 납작해버린다) */ .peel-main { position: relative; display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; clip-path: inset(0 calc(100% - var(--fold)) 0 0); } /* 떼져 말린 부분 (접힘선 오른쪽 → 뒤집어 왼쪽으로 접힘). 뒷면이므로 회색 — 필터를 레이어 자체에 걸어 이미지·배경·글자 전부 동일하게 처리한다. */ .peel-flap { position: absolute; top: 0; display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; clip-path: inset(0 0 0 var(--fold)); transform: scaleX(-1); left: calc(2 * var(--fold) - 100%); filter: grayscale(1) brightness(1.3) contrast(0.82); } /* 왼쪽 끝이 들리는 peel 변형 — 테이프의 자유단이 왼쪽(바깥)일 때 쓴다. 좌우 대칭이므로 --fold 진행방향·tilt 부호·회전축·두 clip-path 만 뒤집는다. (.peel-flap 의 scaleX(-1) 과 left 반사 공식은 좌/우 공통이라 그대로 둔다) */ .peel.peel_l { --fold: calc(var(--peel) * 100%); --tilt: 10deg; transform-origin: 94% 50%; } .peel.peel_l .peel-main { clip-path: inset(0 0 0 var(--fold)); } .peel.peel_l .peel-flap { clip-path: inset(0 calc(100% - var(--fold)) 0 0); } /* ── site-board-link — 관리자(admin/admin02) 전용 빠른 액션 링크 ── 게시판 연동 섹션(con05 매출 / con09 메뉴 / con18 매장) 우상단. ★ absol 로 띄운다 — 흐름에 두면 관리자에게만 콘텐츠가 밀려 내려가 비로그인 화면과 레이아웃이 달라 보인다(작업 시 혼동). 각 섹션에 position:relative 를 주고 그 기준으로 배치. relative 부여 전후 absol 자식 102개 전체 위치 이동 0건 실측 확인함. */ .site-board-link { position: absolute; top: 1vw; right: 1vw; z-index: 9999; display: flex; justify-content: flex-end; align-items: center; gap: 0.4vw; } .site-board-link a { display: flex; justify-content: center; align-items: center; padding: 0.5vw 0.9vw; background: #00d4ff; color: #000; font-size: 0.8vw; font-weight: 700; border-radius: 0.4vw; white-space: nowrap; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); } .site-board-link a.is-secondary { background: #fff; } @media (max-width: 599px) { .site-board-link { top: 2vw; right: 2vw; gap: 1.5vw; } .site-board-link a { padding: 1.6vw 2.8vw; font-size: 3.3vw; border-radius: 1.4vw; } }