@charset "utf-8";

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

	/* color */
	--color-black: #000000;
	--color-white: #ffffff;
	--color-white2: #f8f8f8;
	--color-brand-main: #1D5260;
	--color-brand-sub: #ABC11A;
	--color-green1: #6A8610;
	--color-green2: #536530;
	--color-green4: #E6EAE0;
	--color-green3: #C4CDB7;
	--color-green5: #FCFFF7;
	--color-brown1: #654E2F;
	--color-gray1: #ADADAD;
	--color-gray2: #F6F6F6;
	--color-gray3: #D3D3D3;
	--color-gray4: #636363;
	--color-gray5: #7C7C7C;
	--color-orange: #E99043;
	--gradient-01: linear-gradient(to right, #173C9D, #00A0E9);
	--gradient-02: linear-gradient(to right, #00A0E9, #173C9D);

	/*  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-38: 3.8rem;
	--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;
		--spacing: 30px;
		--sub-visual-hei: 44rem;
		--sub-menu-hei: 5rem;

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

@media screen and (max-width:1380px) {
	:root {
		--px-base: 100%;

		/*Common*/
		--sub-visual-hei: 36rem;
		--spacing: 30px;

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

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

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

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

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

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