@charset "utf-8";
@import "modal.css";
@import "font.css";

/* variable */
:root {
	--minWidth: 320px;
	--quickWidth: 104px;
	--header-height: 60px;
	--content-width: 920px;
	--display-height: 200px;
	--input-height: 70px;
	--z-header: 100;
	--z-aside: 99;
	--z-chatInput: 33;
	--z-notice: 44;
	--z-banner: 66;
	--z-display: 99;
	--chat-bottom: 20px;
	--banner-height: 0;
	--z-modal: 888888;
	--z-bridge: 111;
	/* colors */
	--grey00: #fff;
	--grey01: #dadee6;
	--grey111: #c6ccd7;
	--grey02: #f2f3f5;
	--grey03: #f7f8fa;
	--grey04: #fafbfc;
	--grey05: #9198a5;
	--grey06: #c4c9d4;
	--grey07: #a2a9b6;
	--grey08: #747a86;
	--grey09: #535353;
	--grey10: #464646;
	--grey11: #18191c;
	--grey12: #51555d;
	--grey13: #e9ecf2;
	--grey14: #1D1D1D;
	--grey15: #2a2a2a;
	--grey16: #343434;
	--grey17: #d2d6e0;
	--grey18: #3D4148;
	--grey19: #F5F6FA;
	--grey20: #EEF1F6;
	--grey21: #17191C;
	--grey22: #8F96A3;
	--grey23: #F9FAFB;
	--grey24: #a1a7b5;
	--grey25: #E8EBF2;
	--text: var(--grey21);
	--text_primary: #000000;
	--text_secondary: #747a86;
	--text_disabled: #51555d;
	--primary01: #005cc9;
	--primary02: #0c77ff;
	--primary03: #000000;
	--primary04: #1c6ce3;
	--primary05: #ecf2f9;
	--primary06: #0A74FF;
	--primary07: #0056C7;
	--secondary01: #e9ecf2;
	--secondary02: #c4c9d4;
	--errorColor01: #ff6060;
	--focus: var(--primary02);
	--titleBG: #1181f4;
	--bannerColor: #1181F4;
	--bannerColor1: #f49535;
	--bannerColor2: #9fa6b9;
	/* 프라임 유저 */
	--primeColor: #d2aa4e;
	--primeColor2: #A0730A;
	--primeBg: #FCFAF7;
	--primeBorder: #E0D8C1;
	--primeBorder2: #d3c69f;
	--background: var(--primary04);
	--border01: var(--grey01);
	--border02: var(--grey10);
	--hoverColor: var(--grey20);
	/* temp */
	--disabledColor2: #a1a7b5;
	--disabledColor1: #9198a5;
	--disabledColor: rgba(218, 222, 230, 0.6);
	--bg: #1181f4 url(../image/main/img__visual-02.png) calc(100% - 34px) 100% no-repeat;
	--vh: 100%;
}

@media screen and (max-width: 1165px) {
	--quickWidth: 80px;
}

@media screen and (max-width: 639px) {
	:root {
		--header-height: 48px;
	}
}