/* @import url(https://cdn.jsdelivr.net/gh/moonspam/NanumSquare@2.0/nanumsquare.css);
@font-face {
    font-family: 'titleFont';
    src: url(../source/font/PuradakGentleGothic.ttf);
    font-weight: normal;
    font-style: normal;
}  */

@font-face {
    font-family: 'SBAggroB';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2108@1.1/SBAggroB.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

/*Pretendard*/
@font-face {
    font-family: 'Pretendard';
    font-weight: 300;
    font-style: normal;
    src: url('../source/font/Pretendard-Light.eot');
    src: url('../source/font/Pretendard-Light.eot?#iefix') format('embedded-opentype'),
        url('../source/font/Pretendard-Light.woff2') format('woff2'),
        url('../source/font/Pretendard-Light.woff') format('woff'),
        url('../source/font/Pretendard-Light.ttf') format("truetype");
    font-display: swap;
}
@font-face {
    font-family: 'Pretendard';
    font-weight: 400;
    font-style: normal;
    src: url('../source/font/Pretendard-Regular.eot');
    src: url('../source/font/Pretendard-Regular.eot?#iefix') format('embedded-opentype'),
        url('../source/font/Pretendard-Regular.woff2') format('woff2'),
        url('../source/font/Pretendard-Regular.woff') format('woff'),
        url('../source/font/Pretendard-Regular.ttf') format("truetype");
    font-display: swap;
}
@font-face {
    font-family: 'Pretendard';
    font-weight: 500;
    font-style: normal;
    src: url('../source/font/Pretendard-Medium.eot');
    src: url('../source/font/Pretendard-Medium.eot?#iefix') format('embedded-opentype'),
        url('../source/font/Pretendard-Medium.woff2') format('woff2'),
        url('../source/font/Pretendard-Medium.woff') format('woff'),
        url('../source/font/Pretendard-Medium.ttf') format("truetype");
    font-display: swap;
}
@font-face {
    font-family: 'Pretendard';
    font-weight: 600;
    font-style: normal;
    src: url('../source/font/Pretendard-SemiBold.eot');
    src: url('../source/font/Pretendard-SemiBold.eot?#iefix') format('embedded-opentype'),
        url('../source/font/Pretendard-SemiBold.woff2') format('woff2'),
        url('../source/font/Pretendard-SemiBold.woff') format('woff'),
        url('../source/font/Pretendard-SemiBold.ttf') format("truetype");
    font-display: swap;
}
@font-face {
    font-family: 'Pretendard';
    font-weight: 700;
    font-style: normal;
    src: url('../source/font/Pretendard-Bold.eot');
    src: url('../source/font/Pretendard-Bold.eot?#iefix') format('embedded-opentype'),
        url('../source/font/Pretendard-Bold.woff2') format('woff2'),
        url('../source/font/Pretendard-Bold.woff') format('woff'),
        url('../source/font/Pretendard-Bold.ttf') format("truetype");
    font-display: swap;
}
@font-face {
    font-family: 'Pretendard';
    font-weight: 800;
    font-style: normal;
    src: url('../source/font/Pretendard-ExtraBold.eot');
    src: url('../source/font/Pretendard-ExtraBold.eot?#iefix') format('embedded-opentype'),
        url('../source/font/Pretendard-ExtraBold.woff2') format('woff2'),
        url('../source/font/Pretendard-ExtraBold.woff') format('woff'),
        url('../source/font/Pretendard-ExtraBold.ttf') format("truetype");
    font-display: swap;
}
@font-face {
    font-family: 'Pretendard';
    font-weight: 900;
    font-style: normal;
    src: url('../source/font/Pretendard-Black.eot');
    src: url('../source/font/Pretendard-Black.eot?#iefix') format('embedded-opentype'),
        url('../source/font/Pretendard-Black.woff2') format('woff2'),
        url('../source/font/Pretendard-Black.woff') format('woff'),
        url('../source/font/Pretendard-Black.ttf') format("truetype");
    font-display: swap;
}


/* 1. CSS 기본 작성 순서
 * 요소{
 *      0) z-index
 *
 *      1) 사이즈(가로, 세로, 마진, 패딩..)에 대한 내용
 *      
 *      2) 정렬(포지션, 플렉스..)에 대한 내용
 * 
 *      3) 스타일에 대한 내용
 * }
 */

/* 주석 작성 규칙
 * * 설명  *        - 스타일 그룹의 제목 
 * ** 설명 *        - 스타일 그룹 안의 각 요소 설명
 * ** (대상):설명 * - 스크립트 혹은 사용자가 직접 부여하는 클래스,(대상)에게만 사용 가능
 */

/* 기본값 */
/** 컬러 변수 */
:root{
    --bgColor: #F4F4F4;

    --mainGreen: #2A4A85;
    --mainBule: #52B2C8;
    --lineColor: #ddd;
    
    --fontLightColor: #646464;
    --fontThickColor: #3C3C3C;
    --fontWhite: #fff;
    --fontNonSetect: #888888;

    --whBG : #fff ;

   
    
}


/** 전체 기본값 */
body{
    width: 100vw;
    overflow-x: hidden;
    font-family:'Pretendard', 'Dotum', sans-serif;
    color: var(--fontThickColor);
}

button {  font-family:'Pretendard', 'NanumSquare', sans-serif;}

/* 화면 정렬 */
/** 콘텐츠 가로 정렬  */
.flexRow{
    display: flex;
    flex-direction: row;
}
/** 콘텐츠 세로 정렬 */
.flexCol{
    display: flex;
    flex-direction: column;
}
/** (아티클): 아티클중 나머지 전체 영역을 가짐 */
.flexFullArea{
    flex-grow: 1;
}

/* 애니메이션 속도 */
.anime{
    transition: .3s;
}

/* 요소 스타일 */
/** border box  */
div{box-sizing: border-box;}

/* 요소 정렬 */
/** position: 박스가 화면 정중앙 위치  */
.positionCenter{
    transform: translate(-50%, -50%);
    position: absolute;
    left: 50%;
    top: 50%;
}
/** flex: 박스 안 요소가 가운데 위치  */
.flexCenter{
    align-items: center;
    justify-content: center;
}

/* 폰트 스타일 */
/** 폰트 */
.title{font-family: 'titleFont', sans-serif;/*text-shadow: 0 0 15px #64646480;*/.

}
/** (*): 폰트 굵기 */
.light{ font-weight: 300;}
.normal{ font-weight: 400;}
.bold{ font-weight: 700;}
.bolder{ font-weight: 800;}
/** (*): 폰트 사이즈 */
h1, .titleL{font-size: 24pt;}
h2, .titleM{font-size: 21pt;}
h3, .titleS{font-size: 18pt;}
h4, .textL{font-size: 16pt;}
h5, .textM{font-size: 14pt;}
p, .textS{font-size: 12pt;}
address, .textSS{font-size: 10pt;}
/** (*): 폰트 정렬 */
.textCenter{text-align: center;}
.textRight{text-align: right;}
.textLeft{text-align: left;}
/** (*): 폰트 색상 */
.textColorG{color: var(--mainGreen);}
.textColorL{color: var(--fontLightColor);}
.textColorT{color: var(--fontThickColor);}
.textSelect{color: var(--fontWhite);}
.textNonSelect{color: var(--fontNonSetect);}
/** 폰트 클리어 */
a{text-decoration: none;color: var(--fontThickColor);}

/* 버튼 스타일 */
/** 콘텐츠 내 버튼 스타일 pc 모바일 등 */
button{cursor: pointer;  font-family:'Pretendard'}
/*** 녹색 버튼 */
.contentBtn_Color_G{
	height: 50px;
	padding: 0 20px;
	
  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 16px;
  font-weight: 700;

  box-sizing: border-box;
  border: none;
  border-radius: 3px;

  cursor: pointer;

  background-color: var(--mainGreen);
  color: #fff;
}

/*** 흰색 버튼 */
.contentBtn_Color_W{
height: 50px;
padding: 0 20px;

  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 16px;
  font-weight: 700;

  box-sizing: border-box;
  border: 1px solid #BBB;
  border-radius: 3px;

  cursor: pointer;

  background-color: #fff;
  color: var(--fontThickColor);
}
.contentBtn_Color_G:hover,
.contentBtn_Color_W:hover{
  box-shadow: 0 0 20px var(--mainGreen);
}