/*공통*/
@import url("reset.css");

:root {
	
	/*폰트*/
	--Pretendard : 'Pretendard';
	--HindMadurai : "Hind Madurai", sans-serif;

	/*폰트 사이즈*/
	--font-16 : 16px;
	--font-20 : 20px;
    --font-24 : 24px;
    --font-32 : 32px;

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


	/*사이즈*/
	--n-12 : 12px;
	--n-14 : 14px;
	--n-16 : 16px;
	--n-18 : 18px;
	--n-20 : 20px;
	--n-22 : 22px;
	--n-24 : 24px;
	--n-26 : 26px;
	--n-30 : 30px;
    --n-32 : 32px;
    --n-40 : 40px;
	--n-42 : 42px;
	--n-45 : 45px;
	--n-48 : 48px;
	--n-50 : 50px;
	--n-54 : 54px;
	--n-56 : 56px;
    --n-60 : 60px;
	--n-64 : 64px;
	--n-70 : 70px;
	--n-72 : 72px;
    --n-74 : 74px;
	--n-80 : 80px;


	/*컬러*/
	--white : #fff;
	--point-color : #81AA76;


	/*기타*/
	--vh : 100vh;
	--nvh : calc(var(--vh, 1vh) * 100);
	--max-w : 1260px;
	--min-w : 320px;
    --wide-w : 1920px;

    --charH : 78px;
    --charA : 85px;
    --charB : 113px;
	
	--footerH : 150px;

}

@media screen and (max-width: 1700px) {
	:root {
		--charH : 58px;
        --charA : 72px;
        --charB : 90px;
	}
}

@media screen and (max-width: 1320px) {
	:root {
		--charH : 42px;
        --charA : 58px;
        --charB : 65px;
	}
}

@media screen and (max-width: 1024px) {
	:root {
		--font-20 : 16px;
		--font-24 : 20px;
        --font-32 : 28px;
	}
}

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

	:root {
		--font-16 : 14px;
		--font-20 : 14px;
        --font-24 : 18px;
        --font-32 : 26px;

		--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;

		--charH : 36px;
        --charA : 42px;
        --charB : 52px;

		--footerH : 200px;

	}

}


@media screen and (max-width: 648px) {
	:root {
		--font-20 : 14px;
        --font-24 : 16px;
        --font-32 : 24px;

        --charH : 30px;
        --charA : 34px;
        --charB : 40px;
	}
}


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

	:root {
		--font-16 : 13px;
		--font-20 : 13px;
        --font-24 : 14px;
        --font-32 : 18px;

		--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;

		--charH : 22px;
        --charA : 24px;
        --charB : 24px;

		--footerH : 160px;
	}

}




#wrap {width:100%; position:relative; min-width:280px;}


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