@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 { /* 폰트 — Pretendard 는 section 광역 카스케이드라 토큰 불필요 (weight 로만 제어) */ --font-paperlogy: "Paperlogy"; /* 컬러 */ --color-tit: #040000; --color-tel: #000000; } .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; } .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); } } /* ══ 홈페이지 준비중(임시 랜딩) — 미노출 요소 ══ 마크업은 삭제하지 않고 숨김만 한다. 정식 오픈 시 이 블록만 제거하면 복구됨. 대상: 헤더 / 헤더 퀵배너 / 하단 퀵문의바 / 푸터 */ .header, .header_quick, .contact_service, .footer, #hd_pop, .modal.prtd { display: none !important; }