@charset "UTF-8";

:root {
	/* color */
	--color-black: #000000;
	--color-white: #ffffff;
	--color-gray1: #8c8c8c;
	--color-gray2: #d2d2d2;
	--color-gray3: #e8e8e8;
	--color-gray4: #010100;
	--color-gray5: #b7b8c5;
	--color-gray6: #f3f2f2;
	--color-gray7: #dfe0e0;
	--color-gray8: #f2f3f3;
	--color-blue1: #4c87cf;
	--color-blue2: #d9e7fb;
	--color-navy : #0b0d3b;
	--color-red: #b61731;

	--color-gray-nav : #dedede;
	--color-navy-nav : #0b0d3b;

	--color-gnb-line-gray: #e6e6e6;
	--color-gnb-line-navy: #0b0d3b;

	--color-board-gray1: #d9d9d9;
	--color-board-gray2: #8c8c8c;
	--color-board-gray3: #f0f0f0;
	--color-board-gray4: #bbbbbb;


    /* webfont */
	--font-def: "Noto Sans KR", sans-serif;

	/* header */
	--header-height: 107px;
	--header-height-tb: 90px;
	--header-height-mo: 70px;

	--header-left-tb: 160px;
	--header-right-tb: 161px;
	--header-left-mo: 130px;
	--header-right-mo: 131px;

	/* footer */
	--footer-height: 210px;
	--footer-height-tb: 300px;
	--footer-height-mo: 360px;
}

* {margin:0; padding:0; box-sizing:border-box;}
*::before, *::after {box-sizing: border-box;}

html, body, div, span, applet, object, iframe,
p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	box-sizing:border-box;
	font-size: 100%;
	font: inherit;
}
body { 
    margin: 0;
    scroll-behavior: smooth;
}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section { 
    display: block;
}
ul, ol, li { 
    list-style: none; 
}
h1, h2, h3, h4, h5 { 
    font-weight: normal; 
    margin: 0; 
}
a, a:link, a:visited, a:hover, a:active, a:focus { 
    text-decoration: none; 
    color: inherit; 
}
button { 
    line-height: initial; 
    font-weight: normal; 
}
button, button:active, button:focus { 
    outline: 0; 
}
caption, legend { 
    position: absolute; 
    top: 0; 
    left: 0; 
    overflow: hidden; 
    width: 0; 
    height: 0; 
    margin: 0; 
    padding: 0; 
}
fieldset[disabled] input[type=checkbox], 
fieldset[disabled] input[type=radio],
input[type=checkbox].disabled, 
input[type=checkbox][disabled],
input[type=radio].disabled, 
input[type=radio][disabled] { 
    cursor: not-allowed; 
}
table { 
    border-collapse: collapse; 
    border-spacing: 0; 
}
select,textarea,input {
    outline:none; 
    border:none; 
    font-family: var(--font-def),sans-serif;
    -webkit-appearance: none;  
    -webkit-border-radius: 0;
}
input::-ms-clear {
    display:none;
}
blockquote, q { 
    quotes: none; 
}
blockquote:before, blockquote:after,
q:before, q:after { 
    content: ''; 
    content: none; 
}

/* 한글, 영문 폰트 적용 */
*:lang(ko) {font-family: var(--font-def),sans-serif;}
*:lang(en) {font-family: "OpenSans",sans-serif;}

/* ----- 기본 설정 ----- */
html {
	font-size: 14px;
}
body {
	font-family: var(--font-def);
	color: var(--color-def);
	font-size: 14px;
	line-height: 1.8em;
}
@media screen and (max-width: 768px) {
	body {
		font-size: 10px;
	}
}
.clear:after, .clear:before {
	content: "";
	display: block;
	visibility: hidden;
	clear: both;
}
.blind {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	border: 0;
	white-space: nowrap;
	clip: rect(0, 0, 0, 0);
}
.button {cursor: pointer;}

/* ----- 모바일 ----- */
.only_mo {
	display:none;
}
@media screen and (max-width: 768px) {
	.only_mo {
		display:block;
	}
}

/* ----- 컨테이너 ----- */
div[class^=container-] {
	position: relative;
	margin-left: auto;
	margin-right: auto;
}
.container-1400 {
	width: 1400px;
}
@media screen and (max-width: 1480px) {
	.container-1400 {
		width: 92.6%;
		min-width: 240px;
	}
}
.container-1280 {
	width: 1280px;
}
@media screen and (max-width: 1360px) {
	.container-1280 {
		width: 92.6%;
		min-width: 240px;
	}
}
.container-1200 {
	width: 1200px;
}
@media screen and (max-width: 1280px) {
	.container-1200 {
		width: 92.6%;
		min-width: 240px;
	}
}