@charset "utf-8";

/*
Theme Name:     Astra Child
Theme URI:      http: //example.com/
Description:    Child theme for the Astra theme 
Author:         Your name here
Author URI:     http: //example.com/about/
Template:       astra
Version:        0.1.0
*/

/* ============================
   공통 전역 커스텀 CSS
============================ */

/* =========== 
기본 세팅
=========== */

:root {
   /* font 기본 세팅 */
   --font-family-jp: "Noto Sans JP", sans-serif !important;
   --line-height-body: 1.85; 
   --letter-spacing-jp: -0.015em;

   /* font size */
   --h1-size: 48px;
   --h2-size: 40px;
   --h3-size: 32px;
   --p-title: 24px;
   --p-body: 18px;
   --p-caption: 15px;

   /* font weight */
   --font-w-b : 800;
   --font-w-m : 500;
   --font-w-r : 400;

   /* 여백 */
  --space-unit: 8px;

  --space-xs: calc(var(--space-unit) * 2); /* 16px */
  --space-sm: calc(var(--space-unit) * 3); /* 24px */
  --space-md: calc(var(--space-unit) * 5); /* 40px */
  --space-lg: calc(var(--space-unit) * 6); /* 48px */

  --section-padding: 120px;

  /* width */
  --container-width: 1400px;

  /* color */
  --bagic-color: #3b4140;
  --mint-p : #50c2b8;
  --teal-c : #268896;
  --white-c : #ffffff;
  --what-h01-c : #4989ff;  
}
/* 기본 태그 적용 */
body {
  font-family: var(--font-family-jp);
  letter-spacing: var(--letter-spacing-jp);
  word-break: break-all;
  line-break: strict;
  text-align: justify;
  padding: 0;
  margin: 0;
  color: var(--bagic-color);
}

ul, ol {
  list-style: none;
  padding: 0;
  margin: 0;
}
.nobr {
   display: inline-block;
   white-space: nowrap; 
}

h1 { font-size: var(--h1-size); font-weight: var(--font-w-b); line-height: 1.3; margin-bottom: calc(var(--space-unit) * 4); }
h2 { font-size: var(--h2-size); font-weight: var(--font-w-b); line-height: 1.4; margin-bottom: calc(var(--space-unit) * 3); }
h3 { font-size: var(--h3-size); font-weight: var(--font-w-m); line-height: 1.4; margin-bottom: calc(var(--space-unit) * 2); }
.p_t { font-size: var(--p-title); font-weight: var(--font-w-m); }
p { font-size: var(--p-body); line-height: 1.8; }
.caption { font-size: var(--p-caption); color: #888; }

/* 섹션 공통 스타일 */
.section {
  padding-top: var(--section-padding);
  padding-bottom: var(--section-padding);
  overflow: hidden; 
}

.pc_view{
   display: block;
}

.mo_view{
   display: none;
}

img{
   width: 100%;
   height: auto;
}

/* color */
.c_mp {
    color: var(--mint-p);
}
/* 줄바꿈 */
.pc_br{
   display: block;
}


@media (max-width: 1300px) {
   .pc_br{
      display: none;
   }
}


@media (max-width: 1279px) {
   :root {
      --h1-size: 40px;     
      --h2-size: 34px;
      --h3-size: 26px;
      --p-title: 20px;
      --p-body: 17px;    
      --p-caption: 14px;
   }
   
   h1, h2, h3, .p_t , p , .caption {
      padding: 0 var(--space-xs);
   }
}

/* 태블릿 구간 - iPad 세로 및 소형 태블릿*/
@media (max-width: 1023px) {
    :root {
        --h1-size: 34px;     
        --h2-size: 28px;
        --h3-size: 22px;
        --p-title: 18px;
        --p-body: 16px;      
    }
}

/* 모바일 */
@media (max-width: 768px) {
    :root {
      --h1-size: 28px;     
      --h2-size: 24px;     
      --h3-size: 20px;     
      --p-title: 18px;     
      --p-caption: 12px;

      --section-padding: 48px;
    }

  .pc_view{
      display: none;
   }

   .mo_view{
      display: block;
   }
}