/* Root. */

:root {
	/* icon. */
	--icon_size: 24px;
	/* icon. */
	--scroll: 17px;
	/* font-size. */
	--body: 17px;
	--family: 'Roboto', sans-serif;
	/* font-size. */

	/* color. */
	--color: var(--black);
	--bg: var(--white);

	--white: #fff;
	--black: #0C1A20;

	--success: #58d714;
	--primary: #0093CD;
	--primary-200: #65b5d5;
	--primary-100: #e5f4fa;
	--gray: #808080;
	--gray-100: #f1f1f1;
	--gray-200: #dadada;

	--gold-400: #ffa900;

	--orange-400: #F5962C;
	--orange-700: #ED6D30;

	--red: rgb(231, 23, 23);
	--red-200: rgb(227, 74, 74);
	--red-100: rgb(236, 116, 116);
	/* color. */

	/* element */
	--box-shadow-sm: 1px 1px 17px rgba(68, 68, 68, 0.15);
	--box-shadow: 1px 1px 9px rgba(68, 68, 68, 0.4);
	--box-shadow-xl: 1px 1px 8px rgba(68, 68, 68, 0.75);

	/* btn.*/
	--btn_height: ;
	--btn_inner: ;
	--btn_color: ;
	--btn_font: ;
	--btn_bg: ;
	--btn_bd_size: ;
	--btn_bd_color: ;
	--btn_shadow: ;
	--btn__lh: 0px;
	/* btn.*/

	/* inner. */
	--inner_g: ;

	--bone: 30px;
	--bone_w: 1720px;
	--bone_size: max((100vw - var(--bone_w) - var(--scroll)) / 2, var(--bone));

	--viewport: 1200px;
	/* inner. */

	/* grid. */
	--grid_2: 2;
	--grid_3: 3;
	--grid_4: 4;
	/* grid. */
}

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

	/* Root. */

	:root {
		/* grid. */
		--grid_4: var(--grid_3);
		/* grid. */
	}

	/* Root. */

}

@media only screen and (max-width: 900px) {
	:root {
		--grid_3: var(--grid_2);
	}
}

@media only screen and (max-width: 600px) {
	:root {
		/* grid. */
		--grid_2: 1;
		/* grid. */
	}
}