@charset "UTF-8";
/* 백홈 DEFAULT CSS */

/* IMPORT */

/* 기본박스 사이징 설정 */
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: #0DA77A;
	--subY: #FFCB49;
	--subBl: #0095EB;

	/* 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: 14px;
	color:#212121;
	font-family: 'Noto Sans KR', sans-serif;
}
html, body {height: 100%;}
html {
	letter-spacing: -.5px;
	-webkit-text-size-adjust: none;
	text-size-adjust: none;
	height: 100%;
	font-family: 'Noto Sans KR', 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:320px !important;
	background:#fff;
	color: #212121;
	text-size-adjust:none;
	-webkit-text-size-adjust:none;
	word-wrap:break-word;
	word-break:break-all;
	letter-spacing: -0.25px;
	min-width: fit-content;
	font-family: 'Noto Sans KR', 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: #f5f5f5;
}
textarea[readonly],
textarea[disabled]{
	font-size: 14px;
	color: var(--sub-text);
	background: #FAFAFA;
}
.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: 'Noto Sans KR', 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: 'Noto Sans KR', sans-serif;
}
input:focus::-webkit-input-placeholder {opacity: 0;}

.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/icon/ico_dropdown_24.png') no-repeat 97% center / 24px auto;
    background-color: #fafafa;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    cursor:pointer;
}

.pointer{
	cursor: pointer;
}
.op-5{
	opacity: .5;
}
.op-3{
	opacity: .3;
}
.tabs{
	display: none;
}

/* LAYOUT */

.position-top {
	top: 50%;
	transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
}
.position-top-after::after,
.position-top-before::before {
	top: 50%;
	transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
}

.section			{padding:24px 16px;}
.section-mini		{padding:16px;}
.section-16 		{padding:0 16px;}
.section-8-16 		{padding:8 16px;}
.section-24 		{padding:0 24px;}
.border-btm 		{border-bottom: 6px solid #eeeeee;}
.border-btm-1px 	{border-bottom: 1px solid #eeeeee;}
.border-noline 		{border-bottom: 0!important;}

.mg-0           	{margin: 0 !important;}
.mt-2           	{margin-top: 2px;}
.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-56         		{margin-top: 56px !important;}
.mt-120        		{margin-top: 120px;}
.mr-8           	{margin-right: 8px;}
.mb-4           	{margin-bottom: 4px;}
.mb-8           	{margin-bottom: 8px;}
.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;}
.mb-120           	{margin-bottom: 120px;}
.pd-16 				{padding:16px;}
.pd-24 				{padding:24px;}
.pb-16          	{padding-bottom: 16px;}
.pb-24          	{padding-bottom:24px;}
.pb-56          	{padding-bottom: 56px;}
.pb-80          	{padding-bottom: 80px;}
.pb-120          	{padding-bottom: 120px;}
.pt-16          	{padding-top:16px;}
.pt-24          	{padding-top:24px;}
.pd-0           	{padding: 0 !important;}
.ml-32				{margin-left:32px;}
.ml-16				{margin-left:16px;}

.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%;}
.wd-20 				{width: 20%;}
.wd-25 				{width: 25%;}
.wd-33 				{width: 33.3333%;}
.wd-48 				{width: 48%;}
.wd-50 				{width: 50%;}
.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;}

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

/* 뱃지 */
.badge{
	padding:3px 8px;
	font-size: 10px;
	font-weight: bold;
	border-radius: 100px;
	display: inline-block;
}
.badge.green{
	background: var(--primary);
	color: #fff;
}
.badge.grey{
	background: #9e9e9e;
	color: #fff;
}
.badge.red{
	background: #e32222;
	color: #fff;
}
.badge.border{
	background: #fff;
	border:1px solid #eee;
	color: var(--primary);
}
.required::after{
	content: '*';
	font-size: 15px;
	color: #EF4034;
	margin-left:4px;
}

/* 버튼 */
button {
	border: 0;
	padding:0;
	background: transparent;
	font-family: 'Noto Sans KR', sans-serif;
	cursor:pointer;
}
.btn-40{
	width: 100%;
	height: 40px;
	border-radius: 4px;
	background: var(--primary);
	color: #fff;
	font-weight: bold;
}
.btn-48{
	width: 100%;
	height: 48px;
	border-radius: 4px;
	background: var(--primary);
	font-size: 16px;
	color: #fff;
	font-weight: bold;
}
.btn-border-48{
	width: 100%;
	height: 48px;
	border-radius: 4px;
	border:1px solid var(--primary);
	color: var(--primary);
	font-size: 16px;
	font-weight: bold;
}
.btn-56{
	width: 100%;
	height: 56px;
	border-radius: 4px;
	background: var(--primary);
	font-size: 16px;
	color: #fff;
	font-weight: bold;
}
.btn-border-56{
	width: 100%;
	height: 56px;
	border-radius: 4px;
	border:1px solid var(--primary);
	color: var(--primary);
	font-size: 16px;
	font-weight: bold;
}
.btn-border-g-56{
	width: 100%;
	height: 56px;
	border-radius: 4px;
	border:1px solid #ccc;
	color: #212121;
	font-size: 16px;
	font-weight: 500;
}
.btn-border-g-32{
	padding:6px 13px;
	border-radius: 100px;
	border:1px solid #ccc;
	color: #212121;
	font-size: 14px;
	font-weight: 500;
}
.btn-border-w-40{
	width: 100%;
	height: 40px;
	border-radius: 4px;
	border:1px solid #fff;
	color:#fff;
	background: transparent;
	font-weight: bold;
}
.btn-y-40{
	width: 100%;
	height: 40px;
	border-radius: 4px;
	background: var(--subY);
	font-weight: bold;
}
.btn-go-g-20{
	width:20px;
	height:20px;
	background: url("../images/icon/ico_go_g_24.png") var(--bg-op20);
}
.btm-btn{
	width: 100%;
	position: fixed;
	left:0;
	right:0;
	bottom:0;
	height: 56px;
	background: var(--primary);
	font-size: 16px;
	color: #fff;
	font-weight: bold;
}
.btm-btn-next::after{
	content: '';
    width: 24px;
    height: 24px;
    display: inline-block;
    vertical-align: middle;
    background: url(../images/icon/ico_forward_w_24.png) center right / 24px auto;
    position: absolute;
    top: 16px;
    right: 16px;
}
.schBtn{
	width:48px;
	height:48px;
	border-radius:4px;
	flex-shrink:0;
	background:var(--primary) url("../images/icon/ico_search_w_24.png") var(--bg-op24);
}
.btn-bf::before{
	content: '';
	display: inline-block;
	vertical-align: middle;
	margin-right: 4px;
}
.fixed-btn-wrap{
	position: fixed;
	bottom:0;
	left:0;
	right:0;
	width: 100%;
	padding:16px;
	display: flex;
	gap:8px;
}

/* 라디오버튼 */
input[type="radio"]{
	cursor: pointer;
}
input[type="radio"] + label {
	font-size: 18px;
	line-height: 2rem;
	padding: 0.2em 0.4em;
	position: relative;
}
input[type="radio"] {
	position: relative;
	vertical-align: middle;
	appearance: none;
	border: 3px solid #bdbdbd;
	border-radius: 50%;
	width:20px;
	height: 20px;
}
input[type="radio"]:checked {
	border: 3px solid var(--primary);
}
input[type="radio"]:checked::after{
	content: '';
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--primary);
	position: absolute;
	top:50%;
	/* transform:translateY(-50%); */
	left:50%;
	right:50%;
	margin:0 auto;
	transform: translate(-50%,-50%) scale(1);
}
input[type="radio"]:focus-visible {
	outline-offset: max(2px, 0.1em);
	outline: 1px solid #616161;
}


/* 체크박스 */
.chk-wrap span{
	margin-left:30px;
}
.chk-wrap input[type="checkbox"]{
	position: absolute;
	left:-3000%;
}
.chk-wrap input[type="checkbox"] + label{
	position: relative;
	cursor: pointer;
}
.chk-wrap input[type="checkbox"] + label:before{
	content: '';
	display: inline-block;
	width: 22px;
	height: 22px;
	border:1px solid #bdbdbd;
	background:#bdbdbd url("../images/icon/ico_chk-w20.png")no-repeat center / 20px auto;
	position: relative;
	top:3px;
	border-radius: 3px;
	margin:0 4px 0 0;
}
.chk-wrap input[type="checkbox"]:focus + label:before{
	/* outline: 2px solid #616161;
	outline-offset:1px;  */
}
.chk-wrap input[type="checkbox"]:checked + label:before{
	background: #616161;
	border-color: #616161;
}
.chk-wrap input[type="checkbox"] + label:before,
.chk-wrap input[type="checkbox"]:checked + label:after{
	content: '';
	width:20px;
	height:20px;
	position: absolute;
	left:0;
	top:0;
}
.chk-wrap input[type="checkbox"]:checked + label:after{
	content: '';
	width:20px;
	height:20px;
	position: absolute;
	left:0;
	top:0;
	background:var(--primary) url("../images/icon/ico_chk-w20.png")no-repeat center / 20px auto;
	border-radius: 3px;
}


/* 텍스트 줄이기 */
.text-line-1{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    word-wrap: break-word;
    display: -webkit-box;
    line-clamp:1;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}
.text-line-2{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    word-wrap: break-word;
    display: -webkit-box;
    line-clamp:2;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.inputBox .inputTit{
	font-weight: 500;
}
.inputBox{
	margin-bottom:16px;
}
.inputBox:last-child {
	margin-bottom:0 !important;
}
.flex-sb .inputBox:last-child {
	margin-bottom:16px !important;
}
.blue, .cert-time{
	color: #2B82E9;
}