@charset "euc-kr";

/* base.css
------------------------------------------------------ */

/* reset */
* { margin: 0; padding: 0; }
html, body { width: 100%; height: 100%; margin: 0; padding: 0; }
html { min-width: 360px; font-size: 10px; scroll-behavior: smooth; }
h1, h2, h3, h4, h5, h6 { font-size: 100%; font-weight: normal; }
fieldset, img { border: 0; }
dl, ul, li { list-style: none; }
img, input, select, textarea, button, label { font-family: inherit; font-size: inherit; color: inherit; vertical-align: middle; }
textarea { resize: none; }
label, button { border: 0; background-color: transparent; cursor: pointer; }
address, caption, cite, code, dfn, em, var { font-style: normal; font-weight: normal; }
caption, legend { display: none; }
table { width: 100%; font-size: inherit; border: 0; border-collapse: collapse; }
th, td { word-break: break-all; vertical-align: middle; }
select { -webkit-appearance: menulist-text; }
select { -webkit-appearance: text; }

/* ios input ±âº» ½ºÅ¸ÀÏ ÃÊ±âÈ­ */
input[type="submit"], input[type="button"], textarea, button { -webkit-appearance: none; -moz-appearance: none; }

/* ¿¡½ºÄÚ¾îµå¸² */
@font-face { font-family: 'scdream'; src: url('/comm/fonts/scdream4-webfont.woff') format('woff'); font-weight: 400; font-style: normal; }
@font-face { font-family: 'scdream'; src: url('/comm/fonts/scdream5-webfont.woff') format('woff'); font-weight: 500; font-style: normal; }
@font-face { font-family: 'scdream'; src: url('/comm/fonts/scdream6-webfont.woff') format('woff'); font-weight: 600; font-style: normal; }
@font-face { font-family: 'scdream'; src: url('/comm/fonts/scdream7-webfont.woff') format('woff'); font-weight: 700; font-style: normal; }

/* Pretendard */
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css");
@font-face { font-family: 'Pretendard'; src: url('/comm/fonts/Pretendard-Light.woff') format('woff'); font-weight: 300; font-style: normal; }
@font-face { font-family: 'Pretendard'; src: url('/comm/fonts/Pretendard-Regular.woff') format('woff'); font-weight: 400; font-style: normal; }
@font-face { font-family: 'Pretendard'; src: url('/comm/fonts/Pretendard-Medium.woff') format('woff'); font-weight: 500; font-style: normal; }
@font-face { font-family: 'Pretendard'; src: url('/comm/fonts/Pretendard-SemiBold.woff') format('woff'); font-weight: 600; font-style: normal; }
@font-face { font-family: 'Pretendard'; src: url('/comm/fonts/Pretendard-Bold.woff') format('woff'); font-weight: 700; font-style: normal; }

/* ½ºÆ÷Ä«ÇÑ»ê½º³×¿À */
@font-face { font-family: 'SpoqaHanSansNeo'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2108@1.1/SpoqaHanSansNeo-Thin.woff') format('woff'); font-weight: 100; font-style: normal; }
@font-face { font-family: 'SpoqaHanSansNeo'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2108@1.1/SpoqaHanSansNeo-Light.woff') format('woff'); font-weight: 300; font-style: normal; }
@font-face { font-family: 'SpoqaHanSansNeo'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2108@1.1/SpoqaHanSansNeo-Regular.woff') format('woff'); font-weight: 400; font-style: normal; }
@font-face { font-family: 'SpoqaHanSansNeo'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2108@1.1/SpoqaHanSansNeo-Medium.woff') format('woff'); font-weight: 500; font-style: normal; }
@font-face { font-family: 'SpoqaHanSansNeo'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2108@1.1/SpoqaHanSansNeo-Bold.woff') format('woff'); font-weight: 700; font-style: normal; }

/* ´À¸´´À¸´Ã¼ - ¿ä¾à ¸»µû¿ÈÇ¥ */
@font-face { font-family: 'SlowSlow'; src: url('/comm/fonts/SlowSlow.woff') format('woff'); font-weight: normal; font-style: normal; }

/* SUIT */
@import url("font.css");

/* default */
*, *:before, *:after { box-sizing: border-box; }
*:before, *:after { font-family: 'remixicon', 'SUIT', 'Roboto', 'Pretendard', sans-serif !important; }
* { margin: 0; padding: 0; border: 0; -webkit-tap-highlight-color: rgba(0,0,0,0); }
*:focus { outline: none; }
html, body { height: 100%; }
html { 
	scroll-behavior: smooth; 
}
body { 
	min-width: 360px;
	font-family: 'SUIT', 'Roboto', 'Pretendard', sans-serif;
	font-size: 1.6rem;
	font-weight: 400;
	color: var(--ged-color-gray6);
	letter-spacing: -0.04em;
	word-spacing: -0.02em;
	overflow-x: hidden;
	-webkit-overflow-scrolling: touch;
	-webkit-text-size-adjust: none;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: auto;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; }


/* iconfont */
i { position: relative; top: -0.1rem; line-height: 0; font-size: 1.16em; font-weight: 400 !important; vertical-align: middle; }

/* line */
hr { display: block; height: 0.1rem; background: var(--ged-color-gray2); border: 0; }

/* hidden */
.ir { 
	height: 0;
	line-height: 0;
	font-size: 0;
	overflow: hidden;
	text-indent: -10000px; 
}

/* varior */
:root { 
	--ged-color-black: #000;
	--ged-color-gray9: #141414;
	--ged-color-gray8: #212121;
	--ged-color-gray7: #424242;
	--ged-color-gray6: #666;
	--ged-color-gray5: #757575;
	--ged-color-gray4: #9e9e9e;
	--ged-color-gray3: #b5b5b5;
	--ged-color-gray2: #ccc;
	--ged-color-gray1: #e5e5e5;
	--ged-color-gray0: #f5f6f7;
	--ged-color-white: #fff;

	/* --ged-color-gradient: linear-gradient(120deg, #6581f1 16%, #26c7b6); */
	--ged-color-gradient: linear-gradient(120deg, #5e74ed 16%, #26c7b6);

	--ged-color-blue: #5e74ed;
	--ged-color-deepblue: #4169e1;
	--ged-color-darkblue: #8e9df2;
	/* --ged-color-lightblue: hsl(231 80% 65% / 0.5); */
	--ged-color-lightblue: #aeb9f6;
	/* --ged-color-whiteblue: hsl(231 80% 70% / 0.1); */
	--ged-color-whiteblue: #f1f3fd;

	--ged-color-blue7: #192254;
	--ged-color-blue6: #29388a;
	--ged-color-blue5: #3f56d4;
	--ged-color-blue4: #5e74ed;
	--ged-color-blue3: #7d90fa;
	--ged-color-blue2: #99a9ff;
	--ged-color-blue1: #b3bfff;
	--ged-color-blue0: #e6eaff;

	--ged-color-pink: #fd6888;
	/* --ged-color-lightpink: hsl(347 97% 70% / 0.5); */
	--ged-color-lightpink: #feb3c3;
	/* --ged-color-whitepink: hsl(347 97% 75% / 0.1); */
	--ged-color-whitepink: #fff3f6;

	--ged-color-lightgreen: #e2f3e3;
	/* --ged-color-green: #20b2aa; */
	/* --ged-color-green: #26c7b6; */
	--ged-color-green: #48bec5;
	--ged-color-darkgreen: #008b8b;

	--ged-color-pale-yellowgreen: #fcfff4;
	--ged-color-yellowgreen: #14cb61;

	--ged-color-red: #dc143c;
	--ged-color-darkred: #b22222;

	--ged-color-coral: #f08080;
	--ged-color-darkcoral: #cd5c5c;

	--ged-color-pale-lightyellow: #fafad2;
	--ged-color-pale-yellow: #eee8aa;
	--ged-color-pale-gold: #e6be8a;
	--ged-color-peru: #cd853f;

	--ged-color-hotpink : #ed5c95;
	--ged-color-hotpink-ls : #ed357b;
	--ged-color-hotpink-ds : #ed357b;

	--ged-color-peach : #f79c85;
	--ged-color-peach-ds : #f68773;

	--ged-color-yellow : #fece45;
	--ged-color-yellow-ds : #fec417;

	--ged-color-green : #34bbb0;
	--ged-color-green-ds : #00a9a2;


	/* layout component */
	--ged-alert: #f4f8ff;

	--ged-header-height: 9rem;
	--sr-footer-height: 6rem;

	--ged-coupon-down-bg: #ede9de;
}


/* -------- form -------- */

/* placeholder */
input::placeholder, 
select::placeholder, 
textarea::placeholder { 
	color: var(--ged-color-gray2); 
	letter-spacing: -0.04em;
}

/* focus */
input:focus,
select:focus,
textarea:focus { 
	border-color: var(--ged-color-blue1); 
}

/* search clear */
input::-ms-clear,
input::-ms-reveal {
	display: none;
	width: 0; height: 0;
}
input::-webkit-search-decoration,
input::-webkit-search-cancel-button,
input::-webkit-search-results-button,
input::-webkit-search-results-decoration {
	display: none;
}
input::-webkit-calendar-picker-indicator { 
	opacity: 0; 
}

/* default */
input,
select,
textarea { 
	display: inline-flex;
	align-items: center;
	max-width: 100%;
	font-family: inherit;
	font-size: inherit;
	color: var(--ged-color-gray6);
	border: 0.1rem solid var(--ged-color-gray2); 
}
input:not(input[type=checkbox], input[type=radio]),
select { 
	height: 5rem;
}
input[type=checkbox], 
input[type=radio] { 
	display: none;
	width: auto;
	max-width: auto;
}
input[type=checkbox] + label::before,
input[type=radio] + label::before { 
	display: inline-block;
	clear: both;
	position: relative; top: -0.1rem;
	margin: 0 0.4rem 0 0;
	line-height: 1;
	font-family: remixicon;
	font-size: 1.16em;
	font-weight: 400;
	vertical-align: middle;
}
input[type=checkbox] + label::before { 
	content: "\eb7f"; /* eb7e fill */
}
input[type=checkbox]:checked + label::before { 
	content: "\eb82"; /* eb85 line */
}
input[type=radio] + label::before { 
	content: "\eb7d"; /* eb7c fill */
}
input[type=radio]:checked + label::before { 
	content: "\eb80"; /* eb81 line */
}
input[type=file] { 
	position: absolute;
	width: 0;
	height: 0;
	padding: 0;
	overflow: hidden;
	border: 0;
}

/* input */
input { 
	padding: 0 1.6rem; 
}
input[readonly] { 
	color: var(--ged-color-gray6); 
}

/* select */
select { 
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	justify-content: flex-end;
	padding: 0 3.2rem 0 1.2rem;
	background: url("/images/comm/i_arrow_bottom.png") no-repeat calc(100% - 1.2rem) center;
	text-align: left; 
}
select::-ms-expand { 
	display: none;
}

/* textarea */
textarea { 
	padding: 1.2rem 1.6rem;
}

/* definition list */
dl {
	position: relative;
}
dl dt,
dl dd {
	display: inline-block;
}
dl dt:first-child,
dl dt:first-child + dd {
	margin-top: 0 !important;
}
dl dt {
	width: 8rem;
	text-align: justify;
	text-justify: distribute;
	text-justify: distribute-all-lines;
	text-align-last: justify;
	-moz-text-align-last: justify;
	-webkit-text-align-last: justify;
}
dl dd {
	width: calc(100% - 8rem);
}




/* ------------------------------------------------------

	@tbm tablet + mobile (max-width:1023px)

------------------------------------------------------ */
@media all and (max-width:1023px) { 

	:root { 
		/* layout */
		--ged-header-height: 7rem; 
	}

	/* -------- form -------- */

	/* default */
	input:not(input[type=checkbox], input[type=radio]),
	select { 
		height: 4rem;
	}

}




/* ------------------------------------------------------

	@m mobile (max-width:767px)

------------------------------------------------------ */
@media all and (max-width:767px) { 

	:root { 
		/* layout */
		--ged-header-height: 6rem; 
	}

	/* -------- form -------- */

	/* default */
	input, select, textarea { 
		font-size: 0.938em; 
	}

	/* definition list */
	dl dt, 
	dl dd { 
	}
	dl dt { 
		width: 7rem; 
	}
	dl dt::before { 
		margin-right: 0.4rem; 
	}

}
