html,
body {
	font-size: 16px;
	font-family: "Pretendard Variable", Pretendard, 'Noto Sans KR', AppleGothic, sans-serif;
	line-height: 1.5;
	word-break: keep-all;
	word-wrap: break-word;
	overflow-x: hidden;
	color: #222;
}



/* @media (max-width: 1024px) {
	html, body {font-size:14px;}
}

@media (max-width: 768px) {
	html, body {font-size:13px;}
}

@media (max-width: 540px) {
	html, body {font-size:12px;}
} */



/**********************************************************************************
	align & position
**********************************************************************************/
.dp_f {display: -webkit-box; display: -ms-flexbox; display: flex;}
.dp_sb {display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between;}
.dp_c {-webkit-box-align: center; -ms-flex-align: center; align-items: center;}
.dp_wrap{-ms-flex-wrap: wrap; flex-wrap: wrap;}
.dp_cc {-webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: center;}
.dp_f_end {display:flex; justify-content:flex-end; align-items:center;}
.flex_end {justify-content: flex-end;}

.dp_gab4 {gap:4px;}
.dp_gap8 {gap:8px;}
.dp_gap10 {gap:10px;}
.dp_gap12 {gap:12px;}
.dp_gap20 {gap:20px;}

.dp_ib{display:inline-block !important;}
.dp_b {display:block !important;}
.p_r {position:relative !important;}
.p_a{position:absolute !important;}

.v_m {vertical-align:middle !important;}

.txt-l {text-align:left !important;}
.txt-r {text-align:right !important;}
.txt-c {text-align:center !important;}

.container {width:1280px; margin:0 auto;}
.container.subWrap {padding-bottom:120px;}


.normal {font-weight:500 !important;}
.bold {font-weight:600 !important;}
.bolder {font-weight:700 !important;}
.bolder2 {font-weight:800 !important;}
.bolder3 {font-weight:900 !important;}


/**********************************************************************************
	font-size
**********************************************************************************/
.f14{font-size:0.875rem;}
.f15{font-size:0.938rem;}
.f16{font-size:1rem;}
.f18{font-size:1.125rem;}
.f20{font-size:1.250rem;}
.f22{font-size:1.375rem;}
.f24{font-size:1.5rem;}
.f26{font-size:1.625rem;}
.f28{font-size:1.75rem;}
.f30{font-size:1.875rem;}
.f32{font-size:2rem;}
.f34{font-size:2.125rem;}
.f38{font-size:2.375rem;}
.f42{font-size:2.625rem;}
.f44{font-size:2.75rem;}
.f48{font-size:3rem;}
.f52{font-size:3.25rem;}
.f54{font-size:3.375rem;}
.f62{font-size:3.875rem;}
.f72{font-size:4.5rem;}
.f86{font-size:5.375rem;}


/**********************************************************************************
	margin & padding
**********************************************************************************/
.m-0{margin-top:0 !important;}
.m-4{margin-top: 4px;}
.m-8{margin-top: 8px;}
.m-1{margin-top: 10px;}
.m-12{margin-top: 12px;}
.m-20{margin-top: 20px;}
.m-24{margin-top: 20px;}
.m-28{margin-top: 28px;}
.m-32{margin-top: 32px;}
.m-36{margin-top: 36px;}
.m-40{margin-top: 40px !important;}
.m-45{margin-top: 45px;}
.m-60{margin-top: 60px;}
.m-80{margin-top: 80px;}
.m-72{margin-top: 72px;}
.m-100{margin-top: 100px;}

.m_0 {margin-bottom:0 !important;}
.m_4{margin-bottom: 4px;}
.m_8{margin-bottom: 8px;}
.m_10{margin-bottom: 10px;}
.m_12{margin-bottom: 12px;}
.m_20{margin-bottom: 20px;}
.m_24{margin-bottom: 20px;}
.m_28{margin-bottom: 28px;}
.m_32{margin-bottom: 32px;}
.m_36{margin-bottom: 36px;}
.m_45{margin-bottom: 45px;}
.m_60{margin-bottom: 60px;}
.m_80{margin-bottom: 80px;}
.m_72{margin-bottom: 72px;}
.m_100{margin-bottom: 100px;}

.p-12{padding-top: 12px;}
.p-20{padding-top: 20px;}
.p-24{padding-top: 20px;}
.p-28{padding-top: 28px;}
.p-36{padding-top: 36px;}
.p-45{padding-top: 45px;}
.p-60{padding-top: 60px;}
.p-80{padding-top: 80px;}
.p-72{padding-top: 72px;}
.p-100{padding-top: 100px;}

.p_0{padding-bottom: 0 !important;}
.p_10{padding-bottom: 10px;}
.p_12{padding-bottom: 12px;}
.p_20{padding-bottom: 20px;}
.p_24{padding-bottom: 20px;}
.p_28{padding-bottom: 28px;}
.p_36{padding-bottom: 36px;}
.p_45{padding-bottom: 45px;}
.p_60{padding-bottom: 60px;}
.p_80{padding-bottom: 80px;}
.p_72{padding-bottom: 72px;}
.p_100{padding-bottom: 100px;}

.b_0{border-bottom: 0 !important;}

/**********************************************************************************
	color
**********************************************************************************/
:root {
	--primary: #E6367F;
	--blk: #222; 
	--gry1: #707070; 
	--gry2: #878787;
	--wht: #fff;
	--black: #000;
}

.color-primary {color:#E6367F !important;}
.color-blk1 {color:#222 !important;}
.color-blk2 {color:#333 !important;}
.color-gry1 {color:#707070 !important;}
.color-gry2 {color:#878787 !important;}
.color-wht {color:#fff !important;}

::selection{color:#fff; background:var(--primary);}




/**********************************************************************************
	모달 검은막
**********************************************************************************/
.modal-dimmed {position:fixed; top:0; left:0; width:100%; height:100vh; background:rgba(11,19,30,.6); z-index:99991; display:none;}
.modal-dimmed2 {position:fixed; top:0; left:0; width:100%; height:100vh; background:rgba(0,0,0,0.5); /*background:rgba(255,255,255,.6);*/ z-index:99993; display:none;}




/**********************************************************************************
	radio
**********************************************************************************/


.checkbox,
.radio {
	outline: none !important;
	border: 0;
	border-radius: 0;
	-moz-border-radius: 0;
	-webkit-border-radius: 0;
	-moz-appearance: none;
	-webkit-appearance: none;
	appearance: none;
	margin:0 !important;/*bootstrap css 때문..*/
}


label,
.radio,
.checkbox {
	vertical-align: middle;
}

.label {
	display: inline-block;
}

label > span.label {
	cursor: pointer;
}

.radio,
.checkbox {
	position: relative !important;
	overflow: hidden;
	margin: 0;
	cursor: pointer;
}

.radio + label,
.checkbox + label {
	/*margin-left: 12px;*/
	line-height: 20px;
	cursor: pointer;
}

.radio:disabled + label,
.checkbox:disabled + label {
	color: var(--primary);
}

.radio {
	width: 20px;
	height: 20px;
}

.radio:before,
.checkbox:before {
	content: "";
	display: block;
	width: 20px;
	height: 20px;
	border: 1px solid rgba(34, 34, 34, 0.4);
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-transition: 0.2s border-color ease;
	transition: 0.2s border-color ease;
}

.radio:checked:before,
.checkbox:checked:before {
    border-color: var(--primary);
    -webkit-transition: 0.5s border-color ease;
    transition: 0.5s border-color ease;
}

.radio:disabled:before,
.checkbox:disabled:before {
    border-color: #ccc;
    background-color: #ccc;
}
.radio:after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	display: block;
	background-color: var(--primary);
	-webkit-transform-origin: 50% 50%;
	transform-origin: 50% 50%;
	-webkit-transform: translate(-50%, -50%) scale(0);
	transform: translate(-50%, -50%) scale(0);
}
.radio:before,
.radio:after {
	border-radius: 12px;
	-moz-border-radius: 12px;
	-webkit-border-radius: 12px;
}
.radio:after {
	width: 8px;
	height: 8px;
	-webkit-transform: translate(-50%, -50%) scale(0);
	transform: translate(-50%, -50%) scale(0);
}
.radio:checked:after {
    -webkit-animation: toggleOnRadio 0.2s ease forwards;
    animation: toggleOnRadio 0.2s ease forwards;
}

.checkbox:checked:after {
	content:'✔';
	display:block;
	width:100%;
	height:100%;
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%, -50%);
	text-align:center;
	color:var(--primary);
}


@-webkit-keyframes toggleOnRadio {
    0% {
        opacity: 0;
        -webkit-transform: translate(-50%, -50%) scale(0);
        transform: translate(-50%, -50%) scale(0);
    }
    70% {
        opacity: 1;
        -webkit-transform: translate(-50%, -50%) scale(1.2);
        transform: translate(-50%, -50%) scale(1.2);
    }
    100% {
        -webkit-transform: translate(-50%, -50%) scale(1);
        transform: translate(-50%, -50%) scale(1);
    }
}
@keyframes toggleOnRadio {
    0% {
        opacity: 0;
        -webkit-transform: translate(-50%, -50%) scale(0);
        transform: translate(-50%, -50%) scale(0);
    }
    70% {
        opacity: 1;
        -webkit-transform: translate(-50%, -50%) scale(1.2);
        transform: translate(-50%, -50%) scale(1.2);
    }
    100% {
        -webkit-transform: translate(-50%, -50%) scale(1);
        transform: translate(-50%, -50%) scale(1);
    }
}


i.help__ {font-size:1.25rem; color:var(--primary);}


.emoji-icon-inline {width:1.5rem; vertical-align:sub;}

.arrow_back {vertical-align: text-bottom;}