@charset "UTF-8";

/* IMPORT */
@import '../css/common.css';

/* 기본박스 사이징 설정 */
body,
body::before,
body::after,
body *,
body *::before,
body *::after {
	box-sizing: border-box;
}

html, body {
	height: 100%;
}

/* CLEAR */
.clear:before, .clear:after {
	content:'';
	display: block;
	clear:both;
}

/* SR ONLY */
.sr-only {
	position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

:root {
	/* main color */
	--primary: #ED1F24;
	--primary-light: ;

	/* gray */
	--gray50: #FAFAFA;
	--gray100: #EEE;
	--gray200: #CCC;
	--gray300: #BDBDBD;
	--gray400: #9E9E9E;
	--gray500: #757575;
	--gray600: #616161;
	--gray700: #424242;
	--gray900: #212121;

	/* system */
	--error: #EF4034;
	--warning: #FF8400;
	--success: #388E3C;
	--info: #2B82E9;

	/* 배경옵션 */
	--bg-op30: no-repeat center/30px auto;
	--bg-op24: no-repeat center/24px auto;
	--bg-op20: no-repeat center/20px auto;
	--bg-op16: no-repeat center/16px auto;

}

/* reset */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
}
body * {
	font-size: 16px;
    line-height: 150%;
	color:#212121;
	font-family: "Pretendard GOV Variable", "Pretendard GOV", -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
}
html, body {height: 100%;}
html {
	letter-spacing: -0.02em;
	-webkit-text-size-adjust: none;
	text-size-adjust: none;
	height: 100%;
	font-family: "Pretendard GOV Variable", "Pretendard GOV", -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
	touch-callout:none;
	-webkit-touch-callout:none;
	user-select:none;
	-webkit-user-select:none;
	tap-highlight-color:rgba(0, 0, 0, 0);
	-webkit-tap-highlight-color:rgba(0, 0, 0, 0);
}
body {
	position: relative;
	width:100%;
	padding: 0;
	margin: 0;
	height: 100%;
	/* 최소 가로사이즈 */
	min-width:1400px !important;
	background:#fff;
	color: #212121;
	text-size-adjust:none;
	-webkit-text-size-adjust:none;
	word-wrap:break-word;
	word-break:break-all;
	letter-spacing: -2.5%;
	min-width: fit-content;
	font-family: "Pretendard GOV Variable", "Pretendard GOV", -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
}
ul,ol,li 		{padding: 0; margin: 0; list-style:none;}
a 				{text-decoration:none;}
table			{width:100%; border-spacing:0; border-collapse:collapse;}
th              {text-align:center;}
img, fieldset	{border:0;}

/* INPUT */
input[type=tel],
input[type=time],
input[type=text],
input[type=password],
input[type=search],
input[type=email],
input[type=file],
input[type=url],
input[type=number],
input[type=date] {
	padding: 0 14px;
	width:100%;
	font-size:14px;
	color: #212121;
	border: 1px solid #ccc;
    background:#fff;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    box-sizing: border-box;
	-webkit-box-sizing: border-box;
}
.input {
	padding: 0 14px;
	width: 100%;
	border: 1px solid #ccc;
	font-size: 14px;
	border-radius: 4px;
	-webkit-border-radius: 4px;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	appearance:none;
	-webkit-appearance: none;
	-moz-appearance: none;
}
input.input {
	height: 48px;
	appearance:none;
	-webkit-appearance: none;
}
textarea.input {height: 120px;}
.input::-webkit-input-placeholder {
    font-size: 14px;
    color: var(--gray400);
    letter-spacing: -0.5px;
}
textarea {
	padding: 14px!important;
	width: 100%;
	height: 260px;
	resize: none;
	border-radius: 4px;
	-webkit-border-radius: 4px;
	border:1px solid #9e9e9e;
}
input[readonly],
input[disabled]{
	font-size: 14px;
	color: var(--sub-text);
	background: var(--gray100);
}
textarea[readonly],
textarea[disabled]{
	font-size: 14px;
	color: var(--sub-text);
	background: var(--gray50);
}
.input:not(input[readonly]):focus {
	border: 1px solid var(--primary);
	box-shadow: 0 2px 4px rgba(0,0,0,0.3) 0 0 4px rgba(86,91,118,0.2);
	outline: none;
}
textarea::input-placeholder,
input::input-placeholder{
	color: #9E9E9E;
	font-size:14px;
	font-weight: 400;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	letter-spacing: -.5px;
	font-family: "Pretendard GOV Variable", "Pretendard GOV", -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
}
textarea::-webkit-input-placeholder,
input::-webkit-input-placeholder{
	color: #9E9E9E;
	font-size:14px;
	opacity: 1;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-moz-box-sizing: border-box;
	transition: all 0.5s;
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
	font-family: "Pretendard GOV Variable", "Pretendard GOV", -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
}
input:focus::-webkit-input-placeholder {opacity: 0;}
.termsWrap input[type=date]{
	padding:0 6px !important;
}
.termsWrap input[type="date"] {
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
}
.termsWrap input[type="date"]::-webkit-calendar-picker-indicator {
    background: transparent;
    color: transparent;
}

.input:focus,
input:focus,
select:focus,
textarea:focus {
	border: 1px solid var(--primary);
	box-shadow: 0 4px 4px rgba(0,0,0,.06), 0 0 5px rgba(57, 75, 178, .5);
}
select{
    padding: 0 14px;
    width: 100%;
    height: 48px;
    font-size: 14px;
    color:#212121;
    border:1px solid #9e9e9e;
    vertical-align:middle;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    background: url('../../../../images/arami/v2/userWeb/icon/ico_select.png') no-repeat 97% center / 16px auto;
    background-color: #fff;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    cursor:pointer;
}
.inlineBlock{
	display: inline-block;
}
.pointer{
	cursor: pointer;
}
.op-5{
	opacity: .5;
}
.op-3{
	opacity: .3;
}


/* LAYOUT */

.border-btm-1px 	{border-bottom: 1px solid #eeeeee;}
.relative			{position: relative;}
.mg-0           	{margin: 0 !important;}
.mt-4           	{margin-top: 4px;}
.mt-8           	{margin-top: 8px;}
.mt-12          	{margin-top: 12px;}
.mt-16          	{margin-top: 16px;}
.mt-24         		{margin-top: 24px;}
.mt-32         		{margin-top: 32px;}
.mt-40         		{margin-top: 40px;}
.mt-48         		{margin-top: 48px;}
.mt-80         		{margin-top: 80px;}
.mt-120        		{margin-top: 120px;}
.mb-0           	{margin-bottom: 0 !important;}
.mb-4           	{margin-bottom: 4px;}
.mb-8           	{margin-bottom: 8px;}
.mb-120           	{margin-bottom: 120px;}
.mb-12          	{margin-bottom: 12px;}
.mb-16          	{margin-bottom: 16px;}
.mb-24          	{margin-bottom: 24px;}
.mb-32          	{margin-bottom: 32px;}
.mb-40          	{margin-bottom: 40px;}
.mb-48          	{margin-bottom: 48px;}
.ml-8				{margin-left:8px;}
.ml-16				{margin-left:16px;}
.ml-32				{margin-left:32px;}
.mr-0				{margin-right:0 !important;}
.mr-4				{margin-right:4px;}
.mr-8				{margin-right:8px;}
.mr-16				{margin-right:16px;}
.mr-24				{margin-right:24px;}
.pd-0           	{padding: 0 !important;}
.pd-16 				{padding:0 16px !important;}
.pd-24 				{padding:24px;}
.pb-8           	{padding-bottom: 8px;}
.pb-16          	{padding-bottom: 16px;}
.pb-24          	{padding-bottom:24px;}
.pb-56          	{padding-bottom: 56px;}
.pb-120          	{padding-bottom: 120px;}
.pt-8           	{padding-top:8px;}
.pt-16          	{padding-top:16px;}
.pt-24          	{padding-top:24px;}
.pl-8          		{padding-left: 8px;}
.pl-16         		{padding-left: 16px;}
.pl-24         		{padding-left: 24px;}
.pr-0         		{padding-right: 0px !important;}
.pr-8         		{padding-right: 8px;}
.pr-16         		{padding-right: 16px;}
.pr-24         		{padding-right: 24px;}

.w-24 				{width: 24px; height: 24px; vertical-align: middle;}
.w-after-24::after 	{content: ''; width: 24px; height: 24px;}
.w-30 				{ width: 30px; height: 30px; vertical-align: middle;}
.w-after-30::after 	{content: ''; width: 30px; height: 30px;}
.w-20 				{width: 20px; height: 20px; vertical-align: middle;}
.w-after-20::after 	{content: ''; width: 20px; height: 20px;}
.middle				{vertical-align: middle !important;}

.wd-16 				{width: 16% !important;}
.wd-20 				{width: 20% !important;}
.wd-25 				{width: 25% !important;}
.wd-33 				{width: 33.3333% !important;}
.wd-40 				{width: 40% !important;}
.wd-48 				{width: 48% !important;}
.wd-50 				{width: 50% !important;}
.wd-60 				{width: 60% !important;}
.wd-70 				{width: 70% !important;}
.wd-80 				{width: 80% !important;}
.wd-100 			{width: 100%;}


/* TEXT */
.bd-8           	{font-size: 8px; font-weight: bold;}
.bd-12          	{font-size: 12px; font-weight: bold;}
.bd-14          	{font-size: 14px; font-weight: bold;}
.bd-15          	{font-size: 15px; font-weight: bold;}
.bd-16          	{font-size: 16px; font-weight: bold;}
.bd-18          	{font-size: 18px; font-weight: bold;}
.bd-20          	{font-size: 20px; font-weight: bold;}
.bd-24          	{font-size: 24px; font-weight: bold;}
.bd-32          	{font-size: 32px; font-weight: bold;}
.md-12          	{font-size:12px; font-weight: 500;}
.md-14          	{font-weight: 500!important;}
.md-16          	{font-size:16px; font-weight: 500;}
.md-18          	{font-size:18px; font-weight: 500;}
.md-20          	{font-size:20px; font-weight: 500;}
.md-24          	{font-size:24px; font-weight: 500;}
.sub-text       	{font-size: 12px; font-weight: 400; color: #616161;}
.sub-text-14    	{font-size: 14px; font-weight: 400; color: #616161;}
.sub-text-16    	{font-size: 16px; font-weight: 400; color: #616161;}
.sub-text-18    	{font-size: 18px; font-weight: 400; color: #616161;}
.sub-text-light 	{font-size: 14px; font-weight: 400; color: #9e9e9e;}
.text-hidden    	{display: inline-block; text-indent: -9999px;}
.t_left				{text-align: left !important;}
.t_center			{text-align: center !important;}
.t_right			{text-align: right !important;}
.flex_center		{justify-content: center;}

/* flex */
.flex           	{display: flex !important; align-items: center; gap:3%;}
.flex-sb        	{display: flex !important; justify-content: space-between; align-items: center; gap:3%;}
.flex-sb-top       	{display: flex; justify-content: space-between; align-items: top; gap:3%;}
.gap-mini       	{gap:8px !important}

/* 뱃지 */
.new::after{
	content: 'N';
	width: 16px;
	height: 16px;
	line-height:16px;
	text-align:center;
	display: inline-block;
	background: #C54831;
	color: #ffffff;
	font-size: 10px;
	font-weight: 500;
	border-radius: 100%;
	margin-left:4px;
	vertical-align: middle;
}
.required::after{
	content: '*';
	font-size: 15px;
	color: #C54831;
	margin-left:4px;
}


/* 버튼 */
button {
	border: 0;
	background: transparent;
	font-family: "Pretendard GOV Variable", "Pretendard GOV", -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
	cursor:pointer;
    margin: 0;
    padding: 0;
    letter-spacing: -0.02em;
}
.btnWrap{
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 8px;
}
.btn{
	width: 100%;
	height: 56px;
	border-radius: 4px;
	color: #fff;
	font-weight: bold;
	background: var(--primary);
}