@charset "UTF-8";

/* ═══════════════════════════════════════════════════════════════
   common.css — 범용 유틸 클래스 + 공용 애니메이션(@keyframes)

   로드: theme/design/head.sub.php (<head> 안, 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 {
  /* 브랜드 포인트색 — 시안(PSD) 빨강 #ff2724. 헤더 하단선(.header_line) · main 상단선(.main_hdline) · 퀵바 배경(.contact_service)
     · TOP 화살표(.quick_top) 가 이 토큰을 쓴다.
     ★ 비워두면 조용히 깨진다 — CSS 변수는 미정의 시 선언 자체가 무효가 되어
       background-color 가 초기값 transparent 로 떨어진다. */
  --color-point: #ff2724;
}

.flowhid {
  overflow: hidden;
}

.hide {
  display: none !important;
}

/* 콘텐츠 페이지(bbs/content.php) 본문 래퍼 — 블록으로 만든 서브페이지는 본문(co_content)이 비어 있어서
   하단에 빈 흰 박스(article#ctt: margin·padding)만 남는다 → 본문이 없으면 숨긴다.
   ★ `.container` 전체에 걸지 말 것 — head.php 가 게시판·로그인·회원가입 등 모든 bbs 페이지도 `.container` 로 감싼다.
   본문이 있는 콘텐츠 페이지(약관 등)는 content.skin.php 가 `.ctt_has_body` 를 붙여 그대로 보인다. */
.ctt_container:not(.ctt_has_body) {
  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;
}

/* ═══ 공통 타이틀 (subtitle · title · subtt) ═══
   섹션 헤드 3단 텍스트 — 시안 main·con02~con07 이 같은 규격을 반복한다 (PSD 실측).
   기본값 = 가운데정렬 · 흰색. 섹션 클래스에서는 color / text-align / font-size 정도만 덮어쓴다.
   마진·위치는 여기 넣지 않는다 (섹션마다 다르다 → 섹션 클래스).
   마크업: <p class="subtitle"> → <h2 class="title"> (강조는 <span class="red">) → <p class="subtt"> (강조는 <b>)
   ※ 값: subtitle 30 / title 60 / subtt 22 (px 는 PSD), line-height = 36 / 72 / 32 */
.subtitle {
  font-family: "esamanru";
  font-size: calc(var(--px) * 30);
  font-weight: 500;
  line-height: 1.9vw;
  letter-spacing: -0.1vw;
  color: #ffffff;
  text-align: center;
}

.title {
  font-family: "esamanru";
  font-size: calc(var(--px) * 60);
  font-weight: 700;
  line-height: 3.8vw;
  letter-spacing: -0.2vw;
  color: #ffffff;
  text-align: center;
}

.subtt {
  font-size: calc(var(--px) * 22);
  font-weight: 300;
  line-height: 1.7vw;
  color: #ffffff;
  text-align: center;
}

/* 타이틀 강조색 — 포인트 빨강 */
.red {
  color: var(--color-point);
}

/* ═══ 모션 유틸 (CSS 애니 — 흔들기·깜빡임 같은 단순 반복은 GSAP 말고 여기) ═══
   쓰는 법: 마크업 요소에 클래스만 붙인다. 속도·양은 요소 CSS 에서 animation-duration/delay 로 덮어도 된다.
   ★ 같은 요소를 GSAP 가 opacity/transform 으로 등장시키면 CSS 애니와 서로 덮는다 → 등장(GSAP)은 부모에, 루프(CSS)는 자식에 건다.
   ★ prefers-reduced-motion 분기를 두지 않는다(의도) — 기기의 모션 줄이기 설정과 무관하게 재생한다(모바일 미재생 사고 방지).
   기존 유틸도 그대로 쓴다: .smoke · .shakeTwice · .shakeTwices · .animate-blk · .scaleOpa(퍼지며 사라짐) · .light · .rotate_img
   새 keyframes 는 이름을 mo_ 로 시작해 이 블록 안에 추가한다. */
@keyframes mo_blink {
  0%, 50% { opacity: 1; }
  50.1%, 100% { opacity: 0; }
}

@keyframes mo_flash {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

@keyframes mo_breathe {
  0%, 100% { opacity: 0.75; }
  50% { opacity: 1; }
}

@keyframes mo_ring_spread {
  0% { transform: scale(1); opacity: 0.9; }
  100% { transform: scale(2.2); opacity: 0; }
}

@keyframes mo_float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-0.5vw); }
}

/* 점멸 — ON 0.6s / OFF 0.6s 대칭 steps (비대칭이면 불규칙하고 꺼지는 순간이 너무 짧게 느껴진다 — 댓글 2026-10-20) */
.mo_blink {
  animation: mo_blink 1.2s steps(1, end) infinite;
}

/* 부드러운 깜빡임 1 ↔ 0.3 */
.mo_flash {
  animation: mo_flash 1.5s ease-in-out infinite;
}

/* 은은하게 빛나는 숨쉬기 0.75 ↔ 1 */
.mo_breathe {
  animation: mo_breathe 2.8s ease-in-out infinite;
}

/* 퍼지며 사라지는 링 (scale 1 → 2.2) */
.mo_ring_spread {
  animation: mo_ring_spread 1.9s ease-out infinite;
}

/* 둥둥 */
.mo_float {
  animation: mo_float 3.8s ease-in-out infinite;
}
/* con02-m01 빛나는 모션 — 원 box-shadow 글로우 맥동 (정지값 blur30/α0.79 ↔ blur50/α1, 반주기 1.2s).
   blur 는 변수로 받는다: PC = calc(--px*N), 모바일은 섹션 CSS 가 vw 로 --mo-glow-min/max 를 재정의(--px 가 모바일에선 0.2배라 그대로 쓰면 글로우가 사라진다) */
@keyframes mo_glow_pulse {
  0%, 100% { box-shadow: 0 0 var(--mo-glow-min, calc(var(--px) * 30)) 0 rgba(255, 39, 36, 0.79); }
  50% { box-shadow: 0 0 var(--mo-glow-max, calc(var(--px) * 50)) 0 rgba(255, 39, 36, 1); }
}

/* con01-m02 은은하게 빛나는 모션 — 링 바깥 글로우 오버레이(::after)의 opacity 맥동 (0.15 ↔ 1, 반주기 1.2s) */
@keyframes mo_halo {
  0%, 100% { opacity: 0.15; }
  50% { opacity: 1; }
}

/* con07-m02 퍼지는 모션 — 점 둘레 링이 요소 자체 값(scale 1 · α .1/.3)에서 커지며 사라진다.
   0% 를 비워 두면 요소의 정지 상태가 시작값이 된다(mo_ring_spread 는 α .9 로 덮어써서 정적 링 농도와 어긋남). 위상은 요소 animation-delay 로 어긋낸다 */
@keyframes mo_ring_pulse {
  100% { transform: scale(1.7); opacity: 0; }
}

.mo_ring_pulse {
  animation: mo_ring_pulse 1.9s ease-out infinite;
}
/* ═══ 모션 유틸 end ═══ */

/* 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);
  }
}