@charset "utf-8";

:root {
	/*Common*/
	--header-hei: 11rem;
	--dep2-hei: 30rem;
	--spacing: 30px;
	--sub-visual-hei: 50rem;
	--sub-menu-hei: 5rem;

	/* color */
	--color-black: #212529;
	--color-white: #ffffff;
	--color-white2: #f8f8f8;
	--color-brand-main: #156512;
	--color-brand-sub: #798A44;
	--color-green0: #B5B0A1;
	--color-green1: #D7E3C3;
	--color-green2: #9EAE6C;
	--color-green3: #85926B;
	--color-green4: #8CAB8B;
	--color-green5: #105129;
	--color-brick1: #D7CFB4;
	--color-brick2: #E1A786;
	--color-brick3: #E18686;
	--color-brick4: #976446;
	--color-brick5: #54471A;
	--color-gray1: #F1F3F5;
	--color-gray2: #D4D4D4;
	--color-gray3: #868e96;
	--color-gray4: #495057;
	--color-gray5: #323232;

	/*  font-family */
	--font-Pretendard: 'Pretendard', sans-serif;
	--font-nexonlv1: 'NEXON Lv1 Gothic', sans-serif;
	--font-nexonlv2: 'NEXON Lv2 Gothic', sans-serif;
	--font-Elice: 'Elice DX Neolli', sans-serif;

	/* rem */
	--rem-13: 1.3rem;
	--rem-14: 1.4rem;
	--rem-15: 1.5rem;
	--rem-16: 1.6rem;
	--rem-17: 1.7rem;
	--rem-18: 1.8rem;
	--rem-19: 1.9rem;
	--rem-20: 2rem;
	--rem-22: 2.2rem;
	--rem-23: 2.3rem;
	--rem-24: 2.4rem;
	--rem-25: 2.5rem;
	--rem-26: 2.6rem;
	--rem-28: 2.8rem;
	--rem-30: 3rem;
	--rem-32: 3.2rem;
	--rem-34: 3.4rem;
	--rem-36: 3.6rem;
	--rem-40: 4rem;
	--rem-45: 4.5rem;
	--rem-50: 5rem;
	--rem-55: 5.5rem;
	--rem-60: 6rem;
	--rem-320: 32rem;
	--rem-360: 36rem;

	/* px */
	--px-base: 1320px;
	--px-base-main: 1600px;
	--px-14: 14px;
	--px-15: 15px;
	--px-16: 16px;
	--px-17: 17px;
	--px-18: 18px;
	--px-20: 20px;
	--px-25: 25px;
	--px-26: 26px;
	--px-30: 30px;


	/* font-weight */
	--font-lt: 100;
	--font-lg: 300;
	--font-rg: 400;
	--font-md: 500;
	--font-sb: 600;
	--font-bd: 700;
	--font-eb: 800;

	/* text-align */
	--text-ag-left: left;
	--text-ag-right: right;
	--text-ag-center: center;

	/* margin */
	--margin-top0: 0;
}

/* 모바일CSS */
@media screen and (max-width:1660px) {

	:root {
		/*Common*/
		--header-hei: 10rem;
		--dep2-hei: 30rem;
		--sub-menu-hei: 5rem;

		/* px */
		--px-base-main: calc(100% - var(--spacing)*2);
	}
}

@media screen and (max-width:1380px) {
	:root {
		/*Common*/
		--sub-visual-hei: 46rem;

		/* px */
		--px-base: calc(100% - var(--spacing)*2);
	}
}

@media screen and (max-width: 1100px) {
	:root {
		/*Common*/
		--header-hei: 9rem;
		--sub-visual-hei: 44rem;
		--spacing: 25px;
	}
}

@media screen and (max-width: 800px) {
	:root {
		/*Common*/
		--spacing: 20px;
		--sub-visual-hei: 42rem;
	}
}

@media screen and (max-width:640px) {
	:root {
		/*Common*/
		--sub-visual-hei: 40rem;
	}
}

@media screen and (max-width: 480px) {
	:root {

		/*Common*/
		--header-hei: 8rem;
		--spacing: 15px;
		--sub-visual-hei: 38rem;
	}
}