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

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

/*
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
*/

:root {
   /* font 기본 세팅 */
   --font-family:  "Noto Sans CJK KR", sans-serif !important;
   --line-height-body: 1.6; 

   /* font size */
   --slide-h2-size: 56px;
   --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-bm : 600;
   --font-w-m : 500;
   --font-w-r : 400;
   --font-w-sr : 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-s-width: 1200px;
  --container-m-width: 1400px;
  --container-w-width: 1600px;

  /* color */
  --bagic-color: #404041;
  --main-c : #3a5fb1;
  --sub-c-01 : #ff9c28;
  --sub-c-02 : #00a14b;
  --sub-c-03 : #f19fb4;
  --sub-c-04 : #fbddb0;
  --sub-c-05 : #b3e0ef;
  --sub-c-06 : #444750;
  --white-c : #ffffff;
}

/* color */
.mc {
  color: var(--main-c);
}

.sc1 {
  color: var(--sub-c-01);
}
.sc2 {
  color: var(--sub-c-02);
}
.sc3 {
  color: var(--sub-c-03);
}
.sc4 {
  color: var(--sub-c-04);
}
.sc5 {
  color: var(--sub-c-05);
}
/* 기본 태그 적용 */
body {
  font-family: var(--font-family);
  color: var(--bagic-color);
  padding: 0;
  margin: 0;
}

ul, ol {
  list-style: none;
  padding: 0;
  margin: 0;
}
.nobr {
   display: inline-block;
   white-space: nowrap; 
}
strong{
  font-weight: var(--font-w-b);
}
b{
  font-weight: var(--font-w-bm);
}
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;  font-weight: var(--font-w-r);}
.caption { font-size: var(--p-caption); color: #888; }

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

.check_icon {
    position: relative;
    padding-left: 36px;

    &::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0.4em; 
        width: 25px;
        height: 25px;
        background-color: #3f94e4;
         mask-image: url('./assets/images/check_icon.png');
         mask-size: contain;
         mask-repeat: no-repeat;
         mask-position: center top;
    }
}



.pc_view{
   display: block;
}

.mo_view{
   display: none;
}
.mo_img_view{
   display: none;
}
.sm_view{
   display: none;
}

img{
   width: 100%;
   height: auto;
  -webkit-user-drag: none;
  user-drag: none;
  -webkit-user-select: none;
  user-select: none;
  pointer-events: none; 
}
.bg_c{
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}



/* 줄바꿈 */
.pc_br{
   display: block;
}


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


@media (max-width: 1279px) {
   :root {
      --slide-h2-size: 48px;
      --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 {
         --slide-h2-size: 40px;
        --h1-size: 34px;     
        --h2-size: 28px;
        --h3-size: 22px;
        --p-title: 18px;
        --p-body: 15px;      
    }
}

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

      --section-padding: 48px;
    }

  .pc_view{
      display: none;
   }

   .mo_view{
      display: block;
   }
   .mo_img_view{
      display: block;
   }

}
@media (max-width: 480px) {
    :root {
      --slide-h2-size: 28px;
      --h1-size: 25px;     
      --h2-size: 21px;     
      --h3-size: 18px;    
      --p-title: 16px;
      --p-body: 14px;    
      --p-caption: 10px;

      --section-padding: 48px;
    }

  .pc_view{
      display: none;
   }

   /* .mo_view{
      display: none;
   } */
/* 
   .sm_view{
      display: block;
   } */

}
@media (max-width: 360px) {
    :root {
      --h1-size: 24px;     
      --h2-size: 20px;     
      --h3-size: 17px;     
      --p-title: 15px;
      --p-body: 13px;    
      --p-caption: 9px;
    }
}