@charset "utf-8";
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@100;200;300;400;500;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@100;200;300;400;500;600;700;800;900&display=swap');

@font-face {
    font-family: 'SUIT-Medium';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_suit@1.0/SUIT-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'MaruBuri';
	font-weight: 400;
    src: url(https://hangeul.pstatic.net/hangeul_static/webfont/MaruBuri/MaruBuri-Regular.eot);
    src: url(https://hangeul.pstatic.net/hangeul_static/webfont/MaruBuri/MaruBuri-Regular.eot?#iefix) format("embedded-opentype"), url(https://hangeul.pstatic.net/hangeul_static/webfont/MaruBuri/MaruBuri-Regular.woff2) format("woff2"), url(https://hangeul.pstatic.net/hangeul_static/webfont/MaruBuri/MaruBuri-Regular.woff) format("woff"), url(https://hangeul.pstatic.net/hangeul_static/webfont/MaruBuri/MaruBuri-Regular.ttf) format("truetype");
}

@font-face {
    font-family: 'MaruBuri';
	font-weight: 600;
    src: url(https://hangeul.pstatic.net/hangeul_static/webfont/MaruBuri/MaruBuri-SemiBold.eot);
    src: url(https://hangeul.pstatic.net/hangeul_static/webfont/MaruBuri/MaruBuri-SemiBold.eot?#iefix) format("embedded-opentype"), url(https://hangeul.pstatic.net/hangeul_static/webfont/MaruBuri/MaruBuri-SemiBold.woff2) format("woff2"), url(https://hangeul.pstatic.net/hangeul_static/webfont/MaruBuri/MaruBuri-SemiBold.woff) format("woff"), url(https://hangeul.pstatic.net/hangeul_static/webfont/MaruBuri/MaruBuri-SemiBold.ttf) format("truetype");
}

@font-face {
    font-family: 'MaruBuri';
	font-weight: 700;
    src: url(https://hangeul.pstatic.net/hangeul_static/webfont/MaruBuri/MaruBuri-Bold.eot);
    src: url(https://hangeul.pstatic.net/hangeul_static/webfont/MaruBuri/MaruBuri-Bold.eot?#iefix) format("embedded-opentype"), url(https://hangeul.pstatic.net/hangeul_static/webfont/MaruBuri/MaruBuri-Bold.woff2) format("woff2"), url(https://hangeul.pstatic.net/hangeul_static/webfont/MaruBuri/MaruBuri-Bold.woff) format("woff"), url(https://hangeul.pstatic.net/hangeul_static/webfont/MaruBuri/MaruBuri-Bold.ttf) format("truetype");
}

@font-face {
    font-family: 'MaruBuri';
	font-weight: 300;
    src: url(https://hangeul.pstatic.net/hangeul_static/webfont/MaruBuri/MaruBuri-Light.eot);
    src: url(https://hangeul.pstatic.net/hangeul_static/webfont/MaruBuri/MaruBuri-Light.eot?#iefix) format("embedded-opentype"), url(https://hangeul.pstatic.net/hangeul_static/webfont/MaruBuri/MaruBuri-Light.woff2) format("woff2"), url(https://hangeul.pstatic.net/hangeul_static/webfont/MaruBuri/MaruBuri-Light.woff) format("woff"), url(https://hangeul.pstatic.net/hangeul_static/webfont/MaruBuri/MaruBuri-Light.ttf) format("truetype");
}

@font-face {
    font-family: 'MaruBuri';
	font-weight: 200;
    src: url(https://hangeul.pstatic.net/hangeul_static/webfont/MaruBuri/MaruBuri-ExtraLight.eot);
    src: url(https://hangeul.pstatic.net/hangeul_static/webfont/MaruBuri/MaruBuri-ExtraLight.eot?#iefix) format("embedded-opentype"), url(https://hangeul.pstatic.net/hangeul_static/webfont/MaruBuri/MaruBuri-ExtraLight.woff2) format("woff2"), url(https://hangeul.pstatic.net/hangeul_static/webfont/MaruBuri/MaruBuri-ExtraLight.woff) format("woff"), url(https://hangeul.pstatic.net/hangeul_static/webfont/MaruBuri/MaruBuri-ExtraLight.ttf) format("truetype");
}

/*reset*/


:root {
	
	/*폰트*/
	--Pretendard : 'Pretendard';
	--MaruBuri : 'MaruBuri';

	/*폰트 사이즈*/
	--font-14 : 14px;
    --font-15 : 15px;
	--font-16 : 16px;
	--font-18 : 18px;
	--font-20 : 20px;
	--font-22 : 22px;
	--font-24 : 24px;
	--font-28 : 28px;
	--font-30 : 30px;
	--font-32 : 32px;
	--font-36 : 36px;
	--font-40 : 40px;
	--font-50 : 50px;
	--font-60 : 60px;

	/*마진, 패딩*/
	--gap-8 : 8px;
	--gap-16 : 16px;
	--gap-20 : 20px;
	--gap-24 : 24px;
	--gap-30 : 30px;
	--gap-32 : 32px;
	--gap-40 : 40px;
	--gap-50 : 50px;
	--gap-60 : 60px;
	--gap-64 : 64px;
	--gap-80 : 80px;
	--gap-100 : 100px;


	/*사이즈*/
	--n-20 : 20px;
	--n-24 : 24px;
	--n-30 : 30px;
	--n-32 : 32px;
	--n-36 : 36px;
	--n-40 : 40px;
	--n-42 : 42px;
	--n-48 : 48px;
	--n-50 : 50px;
	--n-54 : 54px;
	--n-60 : 60px;
	--n-64 : 64px;
	--n-70 : 70px;
	--n-75 : 75px;
	--n-80 : 80px;


	/*컬러*/
	--main-color : #55825E;
	--main-color-1 : #668F6E;
	--main-color-2 : #80A186;
	--main-color-3 : #BBCDBF;
	--main-color-4 : #DDE6DF;
	--main-color-5 : #779B7E;

	--main-rgb : 85,130,94;
	--main-rgb-1 : 119,155,126;
	--main-rgb-2 : 153,180,158;
	--main-rgb-3 : 187,205,191;
	--main-rgb-4 : 221,230,223;

	--sub-color : #709BAF;
	--sub-color-1 : #8DAFBF;
	--sub-color-2 : #A9C3CF;
	--sub-color-3 : #C6D7DF;
	--sub-color-4 : #E2EBEF;	

	--black : #000;
	--white : #fff;
	--sky-blue : #76A1B7;
	--light-green : #CCD9CE;
	--yellow : #FBAD17;

	--font-gray : #595757;
    --font-gray-1 : #595757;
	--font-gray-2 : #595757;
	--font-gray-3 : #595757;
	--font-gray-4 : #595757;
	--font-gray-5 : #595757;
	--font-gray-6 : #595757;
	/*--font-gray-1 : #7A7979;
	--font-gray-2 : #7A7979;
	--font-gray-3 : #BDBCBC;
	--font-gray-4 : #DEDDDD;
	--font-gray-5 : #9B9A9A;
	--font-gray-6 : #8B8A8A;*/
	
	--gray-6 : #666;
	--gray-9 : #999;
	--gray-a : #aaa;
	--gray-c : #ccc;
	--gray-d : #ddd;
	--gray-5 : #555;
	--gray-d9 : #D9D9D9;

	--begie : #F3EFE7;
	--begie-rgb : 243,239,231;
	--light-begie : #FBFAF8;



	/*기타*/
	--vh : 100vh;
	--nvh : calc(var(--vh, 1vh) * 100);
	--max-w : 1460px;
	--conts-w : 1200px;
	--small-w : 1000px;
	--min-w : 280px;
	--wide-w : 1920px;

	--headerH : calc(112px + 60px + var(--n-64));
	--headerH2 : calc(60px + (var(--n-64) * 2));
}


@media screen and (max-width: 1280px) {
	:root {
		--headerH : calc(80px + 50px + var(--n-64));
	}
}


@media screen and (max-width: 1200px) {
	:root {
		--headerH : calc(70px + 42px + var(--n-64));
	}
}

@media screen and (max-width: 1024px) {
	:root {
		--headerH : calc(var(--gap-60) + 60px + var(--n-32));
		--headerH2 : calc(60px + (var(--n-32) * 2));
	}
}


@media screen and (max-width: 768px) {
	:root {
		--font-14 : 12px;
        --font-15 : 13px;
		--font-16 : 14px;
		--font-18 : 16px;
		--font-20 : 18px;
		--font-22 : 20px;
		--font-24 : 22px;
		--font-28 : 25px;
		--font-30 : 26px;
		--font-32 : 28px;
		--font-36 : 30px;
		--font-40 : 32px;
		--font-50 : 38px;
		--font-60 : 46px;

		--gap-16 : 14px;
		--gap-20 : 16px;
		--gap-24 : 18px;
		--gap-30 : 25px;
		--gap-32 : 27px;
		--gap-40 : 32px;
		--gap-50 : 42px;
		--gap-60 : 52px;
		--gap-64 : 54px;
		--gap-80 : 62px;
		--gap-100 : 82px;

		--n-20 : 16px;
		--n-24 : 20px;
		--n-30 : 26px;
		--n-32 : 28px;
		--n-36 : 32px;
		--n-40 : 36px;
		--n-42 : 38px;
		--n-48 : 45px;
		--n-50 : 46px;
		--n-54 : 48px;
		--n-60 : 52px;
		--n-64 : 52px;
		--n-70 : 56px;
		--n-75 : 60px;
		--n-80 : 72px;

	}
}

@media screen and (max-width: 480px) {
	:root {
		--font-14 : 11px;
        --font-15 : 12px;
		--font-16 : 13px;
		--font-18 : 14px;
		--font-20 : 16px;
		--font-22 : 16px;
		--font-24 : 17px;
		--font-28 : 18px;
		--font-30 : 20px;
		--font-32 : 24px;
		--font-36 : 24px;
		--font-40 : 26px;
		--font-50 : 28px;
		--font-60 : 32px;

		--gap-8 : 5px;
		--gap-16 : 12px;
		--gap-20 : 14px;
		--gap-24 : 15px;
		--gap-30 : 20px;
		--gap-32 : 22px;
		--gap-40 : 28px;
		--gap-50 : 32px;
		--gap-60 : 36px;
		--gap-64 : 40px;
		--gap-80 : 52px;
		--gap-100 : 70px;

		--n-20 : 14px;
		--n-24 : 16px;
		--n-30 : 22px;
		--n-32 : 24px;
		--n-36 : 28px;
		--n-40 : 32px;
		--n-42 : 34px;
		--n-48 : 42px;
		--n-50 : 42px;
		--n-54 : 45px;
		--n-60 : 48px;
		--n-64 : 48px;
		--n-70 : 50px;
		--n-75 : 56px;
		--n-80 : 64px;

		--headerH : calc(var(--gap-60) + 35px + var(--n-32));
		--headerH2 : calc(35px + (var(--n-32) * 2));
	}
}


body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,textarea,p,blockquote,th,td,input,select,textarea,button,span{margin:0;padding:0; box-sizing:border-box !important; word-wrap:break-word; word-break:keep-all;}
html, body {outline:none;}
body {overflow-x:hidden;}
a:link {text-decoration:none;}
a:visited {text-decoration:none;}
a:hover {text-decoration:none; }
a:active {text-decoration:none;}
img{border:0px;}
li{list-style: none; word-wrap:break-word; word-break:keep-all;}
table{border-collapse:collapse;width:100%;}
address,caption,cite,code,dfn,em,var,h1,h2,h3,h4,h5,h6 {font-style:normal;font-weight:normal;}
caption,legend,caption *,legend *{position:absolute; left:-10000px; line-height:0; font-size:0;}
fieldset{border:solid 0px black;padding:0;}
button{border:none; background:none; cursor:pointer; outline:none;}
div {box-sizing:border-box !important; word-wrap:break-word; word-break:keep-all;}
dt, dd {word-wrap:break-word; word-break:keep-all;}


body,a,[type=text], [type=password], [type=file], [type=email], [type=number], [type=tel], [type="date"],select,h1, h2, h3, h4, h5, h6, pre,textarea, button{
font-family: 'Pretendard'; font-size:var(--font-16); color:var(--font-gray); font-weight:300; outline:0; line-height:1.5; letter-spacing:-0.2px; box-sizing:border-box !important;}

/*float 해제*/
.hid{display:none;}
.br {display:block;}


@media screen and (max-width: 1024px){}

@media screen and (max-width: 768px){
	body,a,[type=text], [type=password], [type=file], [type=email], [type=number], [type=tel], [type=date],select,h1, h2, h3, h4, h5, h6, pre,textarea, button{font-size:16px;}
}

@media screen and (max-width: 480px){
	body,a,[type=text], [type=password], [type=file], [type=email], [type=number], [type=tel], [type=date],select,h1, h2, h3, h4, h5, h6, pre,textarea, button{font-size:14px;}
}