/* custom new Css */
:root {
   /* font 기본 세팅 */
   --font-family-kr:  'Noto Sans KR', sans-serif !important;
   --line-height-body: 1.6; 
   --letter-spacing-kr: -0.015em;

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

   /* font weight */
   --font-w-b : 800;
   --font-w-bm : 700;
   --font-w-sm : 600;
   --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-s-width: 1200px;
  --container-m-width: 1400px;
  --container-w-width: 1600px;

  /* color */
  --gray-01-c: #424242;
  --gray-02-c : #535558;
  --white-c : #ffffff;
  --orange-c : #f89223;
  --main-c : #4491d9;
  --sub-c-01 : #314378;
  --sub-c-02 : #203448;
  --sub-c-03 : #4b6890;
  --sub-c-04 : #392a2a;
  --sub-c-05 : #0f253a;
  --sub-c-06 : #61dcff;
}

/* 초기화 */
html {overflow-y:scroll}
body {
  font-family: var(--font-family-kr);
  letter-spacing: var(--letter-spacing-kr);
  color: var(--bagic-color);
  
  padding: 0;
  margin: 0;
}

h1 { font-size: var(--h1-size); font-weight: var(--font-w-sm); line-height: 1.3; }
h2 { font-size: var(--h2-size); font-weight: var(--font-w-bm); line-height: 1.3; }
h3 { font-size: var(--h3-size); font-weight: var(--font-w-m); line-height: 1.4;}
.p_t { font-size: var(--p-title); font-weight: var(--font-w-m);}
p { font-size: var(--p-body); line-height: 1.4;  font-weight: var(--font-w-r);}
.caption { font-size: var(--p-caption); font-weight: var(--font-w-r); color: #4b4a4b;}

a{
  text-decoration: none;
}

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

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

    &::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0.4em; 
        width: 30px;
        height: 30px;
        background-color: var(--main-c);
		mask-image: url('../img/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;
}

.w_color{
   color: var(--white-c)
}
.m_color{
	color: var(--main-c);
}
.sub_c{
   color: var(--sub-color);
}
.m_bg_w{
   background-color: var(--main-c);
   color: var(--white-c);
   border-radius: 45px;
}
sup {
   font-size: 0.45em;
   font-weight: bold;
}

.f_ari{
   font-family: 'Aritaburi';
   color: #d7a3af;
   font-weight: 400;
}
img{
   width: 100%;
   height: auto;
   -webkit-user-drag: none;
   user-select: none;
   -webkit-user-select: none;
}

.bg_c{
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

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

/* swiper button css */
.swiper-button-next,
.swiper-button-prev {
  position: absolute;
  top: 50%;
  width: 5%;
  max-width: 85px;
  height: 10%;
  max-height: 85px;
  margin: 0;
  z-index: 10;
  cursor: pointer;
  background-size: 95% auto;
  background-position: center;
  background-repeat: no-repeat;
  transition: opacity 0.5s;
}
.swiper-button-next:hover,
.swiper-button-prev:hover {
  opacity: 0.5;
}

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


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

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

/* 모바일 */
@media (max-width: 900px) {
    :root {
      --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;
   }

   .check_icon {
      padding-left: 30px;
      &::before {
         width: 20px;
         height: 20px;
      }
   }
}
@media (max-width: 480px) {
    :root {
      --rolling-header-size: 32px;
      --h1-size: 25px;     
      --h2-size: 21px;     
      --h3-size: 18px;     
      --p-title: 16px;
      --p-middle: 15px;
      --p-body: 14px;    
      --p-caption: 12px;

      --section-padding: 48px;
    }

  .pc_view{
      display: none;
   }

   .mo_view{
      display: none;
   }

   .sm_view{
      display: block;
   }

   .check_icon {
      padding-left: 30px;
      &::before {
         top: 0.3em; 
         width: 17px;
         height: 17px;
      }
   }
}
@media (max-width: 360px) {
    :root {
      --h1-size: 24px;     
      --h2-size: 20px;     
      --h3-size: 17px;     
      --p-title: 15px;
      --p-body: 13px;    
      --p-caption: 10px;
    }
}