@charset "UTF-8";

:root {
  /* Color */
  --color-primary: #db6414;
  --color-text-main: #323232;
  
  /* Typography */
  --fz-60: 60px;
  --fz-46: 46px;
  --fz-43: 43px;
  --fz-34: 34px;
  --fz-33: 33px;
  --fz-31: 31px;
  --fz-30: 30px;
  --fz-28: 28px;
  --fz-25: 25px;
  --fz-24: 24px;
  --fz-23: 23px;
  --fz-22: 22px;
  --fz-21: 21px;
  --fz-20: 20px;
  --fz-19: 19px;
  --fz-18: 18px;
  --fz-17: 17px;
  --fz-16: 16px;
  --fz-15: 15px;
  --fz-14: 14px;
  --fz-h2: var(--fz-60);
  --fz-h3: var(--fz-34);
  --fz-h4: var(--fz-25);
  /* --fz-h5: ; */
  --fz-desc: var(--fz-18);
  --ft-noto-serif: 'Noto Serif KR', serif;
  --ft-cormorant: 'Cormorant', serif;
  --ft-suit: 'SUIT', sans-serif;

  /* Spacing */
  --sec-padding: 200px;
}

/* Common */
  .mo{display: none !important;}
  .mo-ib{display: none !important;}
  .mo-if{display: none !important;}
  .mo-f{display: none !important;}
  .mo-g{display: none !important;}


/* ==========================================================================
   Sub Pages Common Layout (모든 서브페이지 공통 비주얼 영역 스타일)
   ========================================================================== */
/* 
  개별 서브 비주얼 배경 설정 예시 
  ㄴ배경 반복/크기는 공통 적용되므로 background-image 경로와 개별 position만 정의합니다.
  
  예시) 
    #sub71 .sec-sub-visual{
      background-image: url('../sub/img/sub71_visual.webp');
      background-position: center center; (기본값 center center 인 경우는 생략 가능)
    } 
*/

/* 전체 화면 레이아웃 (Flex 중앙 정렬, 604px 높이 고정 / 배경 반복 안함, 커버 사이즈, 센터 기본 적용) */
.sec-sub-visual { position: relative; width: 100%; height: 604px; display: flex; align-items: center; justify-content: center; text-align: center; overflow: hidden; background-repeat: no-repeat; background-size: cover; background-position: center center; }

/* 콘텐츠 컨테이너 (최대 가로 너비 제한 및 좌우 내부 여백) */
.sec-sub-visual .wrap { width: 92%; max-width: var(--container-max-width);}

/* 텍스트 정렬 제어용 박스 */
.sec-sub-visual .wrap .box { display: inline-block; overflow: hidden;}

/* 메인 영문 타이틀 (Cormorant 서체, 60px, 본문과의 수직 간격 35px) */
.sec-sub-visual .wrap .box h2 { font-family: var(--ft-cormorant); font-weight: 500; font-size: var(--fz-h2); color: #ffffff; line-height: normal; margin-bottom: 35px; font-variant-numeric: lining-nums;font-feature-settings: "lnum";}

/* 서브 한글 설명글 (SUIT 본문 서체 상속, 18px, 자간 및 행간 비율 제어) */
.sec-sub-visual .wrap .box .desc-wrap {overflow: hidden;}
.sec-sub-visual .wrap .box .desc-wrap .desc { font-weight: 400; font-size: var(--fz-desc); line-height: 1.89; color: #ffffff;}



/* ==========================================================================
   Tablet Resolution & Responsive (최하단 단일 미디어 쿼리 배치)
   ========================================================================== */
@media (max-width: 1024px) {
    :root {
        /* Typography */
        
        /*
        --fs-10: min(2.7vw, 10px);
        --fs-11: min(2.85vw, 11px);
        --fs-12: min(3.0vw, 12px);
        --fs-13: min(3.1vw, 13px);
        --fs-14: min(3.3vw, 14px);
        --fs-15: min(3.5vw, 15px);
        --fs-16: min(3.8vw, 16px);
        --fs-17: min(4.0vw, 17px);
        --fs-18: min(4.3vw, 18px);
        --fs-19: min(4.5vw, 19px);
        --fs-20: min(4.8vw, 20px);
        --fs-21: min(5.0vw, 21px);
        --fs-22: min(5.3vw, 22px);
        --fs-23: min(5.5vw, 23px);
        --fs-24: min(5.8vw, 24px);
        --fs-25: min(6.0vw, 25px); */

        --fz-10: min(2.1429vw, 10px);
        --fz-11: min(2.3214vw, 11px);
        --fz-12: min(2.5vw, 12px);
        --fz-13: min(2.6786vw, 13px);
        --fz-14: min(2.8571vw, 14px);
        --fz-15: min(3.0357vw, 15px);
        --fz-16: min(3.2143vw, 16px);
        --fz-17: min(3.5714vw, 17px);
        --fz-18: min(3.75vw, 18px);
        --fz-19: min(3.9286vw, 19px);
        --fz-20: min(4.1071vw, 20px);
        --fz-21: min(4.2857vw, 21px);
        --fz-22: min(4.4643vw, 22px);
        --fz-23: min(4.6429vw, 23px);
        --fz-24: min(4.8214vw, 24px);
        --fz-25: min(5.0vw, 25px);
        --fz-29: min(6.0714vw, 29px);
        --fz-30: min(5.8929vw, 30px);
        --fz-31: min(5.8929vw, 31px);
        --fz-33: min(5.8929vw, 33px);
        --fz-34: min(6.0714vw, 34px);
        --fz-43: min(7.7143vw, 43px);
        --fz-46: min(8.3143vw, 46px);
        --fz-47: min(8.7143vw, 47px);
        
        --fz-h2: var(--fz-47);
        --fz-h3: var(--fz-29);
        --fz-h4: var(--fz-20);
        --fz-desc: var(--fz-15);
        
        /* Spacing */
        --sec-padding: 80px;
    }

    /* Common */
    .pc{display: none !important;}
    .mo{display: block !important;}
    .mo-ib{display: inline-block !important;}
    .mo-if{display: inline-flex !important;}
    .mo-f{display: flex !important;}
    .mo-g{display: grid !important;}

    /* 공통 모바일 비주얼 높이 조절 */
    .sec-sub-visual {height: 100svh;}
    .sec-sub-visual .wrap .box h2 {margin-bottom: 20px;}
}