@charset "utf-8";

/* 색상 변수 값 
* 매직 넘버 40 - 명도 대비 3:1
* 매직 넘버 50 - 명도 대비 4.5:1
* 매직 넘버 70 - 명도 대비 7:1
* 매직 넘버 90 - 명도 대비 15:1
*/

:root {
	--white: #fff;
	--black: #000;
	
	/* 주조색 : primary */
	--primary: #2458D1;
	--primary-2: #F0F6FF;
	--primary-5: #E5F0FE;
	--primary-10: #BFD7F6;
	--primary-20: #83B4F3;
	--primary-30: #5D99E7;
	--primary-40: #398CDF;
	--primary-60: #0B50D0;
	--primary-70: #093E9A;
	--primary-80: #00274D;
	--primary-90: #2C446D;
	--primary-95: #4E6386;	
/* 보조색 : secondary */
	--secondary: #FF5244;
	--secondary-2: #FFF1F1;	
	--secondary-5: #FFF0F2;
	--secondary-10: #FFE3E7;
	--secondary-20: #FACBD0;
	--secondary-30: #F79EA8;
	--secondary-40: #FF7C86;
	--secondary-60: #BA2317;
	--secondary-70: #063A74;
	--secondary-80: #830522;
	--secondary-90: #611023;
	--secondary-95: #955A68;
	/* 강조색 : point */
	--point: #ff5244;
	--point-5: #FBEFF0;
	--point-10: #F5D6D9;
	--point-20: #EBADB2;
	--point-30: #E0858C;
	--point-40: #D65C66;
	--point-60: #AB2B36;
	--point-70: #7A1F26;
	--point-80: #521419;
	--point-90: #310C0F;
	--point-95: #21080A;
	/* 회색계열 : gray */
	--gray-5: #F4F5F6;
	--gray-10: #E6E8EA;
	--gray-20: #CDD1D5;
	--gray-30: #c7c7c7;
	--gray-40: #8A949E;
	--gray-50: #6D7882;
	--gray-60: #58616A;
	--gray-70: #464C53;
	--gray-80: #33363D;
	--gray-90: #1E2124;
	--gray-95: #131416;
	/* 위험 - 빨강계열 : danger */
	--danger: #ee402e;
	--danger-5: #FEECF0;
	--danger-10: #FCD4DE;
	--danger-20: #F799B1;
	--danger-30: #F36689;
	--danger-40: #EF3E5E;
	--danger-60: #ee402e;
	--danger-70: #8D0023;
	--danger-80: #5E0018;
	--danger-90: #2F000C;
	/* 노랑계열 : warning */
	--warning: #FFB724;
	--warning-5: #FFF8E9;
	--warning-10: #FFEAC1;
	--warning-20: #FFE2A7;
	--warning-30: #FFD47C;
	--warning-40: #FFC550;
	--warning-50: #a2844f;
	--warning-60: #98690A;
	--warning-70: #66490E;
	--warning-80: #4D370B;
	--warning-90: #332507;
	/* 녹색계열 : success */
	--success: #088a7c;
	--success-5: #EEF7F0;
	--success-10: #CEE9D4;
	--success-20: #B2DCBB;
	--success-30: #8CCA99;
	--success-40: #33A14B;
	--success-60: #006E18;
	--success-70: #005312;
	--success-80: #00370C;
	--success-90: #002207;
	/* 피링계열 : information */
	--information: #2768FF;
	--information-5: #E9F0FF;
	--information-10: #D4E1FF;
	--information-20: #A9C3FF;
	--information-30: #7DA4FF;
	--information-40: #5286FF;
	--information-60: #1F53CC;
	--information-70: #173E99;
	--information-80: #405169;
	--information-90: #0C1F4D;
	--font-family-sans-serif: 'Pretendard GOV', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
	--font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

}

/* 초기화 ----------------------------------------------------------------------- */

html { font-size:62.5%; scroll-behavior: smooth; }

html, body, div, span, object, iframe, 
h1, h2, h3, h4, h5, h6,
p, blockquote, pre,
a, abbr, address, big, cite, code,
del, dfn, em, font, img, ins, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, 
fieldset, form, label, legend, 
table, caption, tbody, tfoot, thead, tr, th, td,
ul, li , dl, dt, dd, p, section, input, select,
header, bottom, :after, :before, * { margin:0; padding:0; border:0; box-sizing:border-box; } /* vertical-align: baseline; outline: 0; ie 외 브라우저 포커싱 사라지는 문제로 제거 */

ul, ol { list-style:none; padding:0; margin:0; }

em, i { font-style:normal; }
a { text-decoration:none; display:inline-block; }

* html { height:1px; }

h1, .h1 {  line-height:1.2; }
h2, .h2 { font-size:3.6rem; line-height:1.2; }
h3, .h3 { font-size:3rem; line-height:1.2; margin-bottom: 1.5rem }
h4, .h4 { font-size:2.4rem; line-height:1.2; }
h5, .h5 { font-size:2rem; line-height:1.2; }
h6, .h6 { font-size:1.8rem; line-height:1.2; }

.h1, .h2, .h3, .h4, .h5, .h6 { font-weight:700; }

p, span, div { line-height:1.5; }

body { font-size:1.7rem; font-family:var(--font-family-sans-serif); color:#333; letter-spacing:-0.5px;  }

input, select, option, textarea, button { font-size:100%; margin:0; padding:0; }

label, .media { cursor: pointer; margin: 0; }
input:disabled ~ label { cursor: inherit; }

.skip { display:none; }

.skiplabel,
.labelskip,
.sr-only { position:absolute; left:-1000px; top:0; width:0; height:0; font-size:0; line-height:0; }

.clear{ display:block; float:none; clear:both; height:0; width:100%; font-size:0 !important; line-height:0 !important; overflow:hidden; margin:0 !important; padding:0 !important; }


hr, caption, legend { display:none; }

address, cite { font-style:normal;}


.clear{ display:block; float:none; clear:both; height:0; width:100%; font-size:0 !important; line-height:0 !important; overflow:hidden; margin:0 !important; padding:0 !important; }


fieldset, img, abbr, acronym { border:0 none; margin:0; padding:0; }
table {	border-collapse:separate; border-spacing:0;	border:0 none; }
ins { text-decoration:none; }
del { text-decoration:line-through; }
blockquote:before, blockquote:after, q:before, q:after { content:""; }
blockquote,q { quotes:"" ""; }

img { vertical-align:top; border:none; }

label, select, input, textarea { vertical-align:middle; padding: 0 10px; }

button, 
input[type=submit] { cursor:pointer; }

table { width:100%; border:0; border-spacing:0; border-collapse:collapse; }



a { display:inline-block; color:inherit; text-decoration:none; /*padding:3px 0 ;*/ }
input:focus,
button:focus,
a:focus { outline:.2rem solid; }

.underline { text-decoration:underline; text-underline-offset:.3rem; }

/* ------------------------------------------------------------- */


.input-group { display:flex; }

/* 목록 ----------------------------------------------------------------- */
.info-list {  }
.info-list > li { position:relative; padding-left:1.2rem; margin-bottom:.8rem; }
.info-list.demical > li::before { position:absolute; top:0; left:0; content:'•'; }
.info-list.dashed > li::before { position:absolute; top:0; left:0; content:'-'; }


/* 배경 ----------------------------------------------------------------- */
.bg-white { background-color:var(--white); }
.bg-black { background-color:var(--black); }
.bg-primary { background-color: var(--primary) !important; }
.bg-light { background-color:var(--gray-5); }



/* 폰트 컬러 ----------------------------------------------------------------- */
.white { color:var(--white); }
.black { color:var(--black); }
.blue { color: var(--primary) !important; }
.red { color: var(--point) !important; }
.green { color: var(--success) !important; }



/* 너비 ----------------------------------------------------------------- */
.wd5 { width:5% !important; }
.wd8 { width:8% !important; }
.wd10 { width:10% !important; }
.wd15 { width:15% !important; }
.wd20 { width:20% !important; }
.wd25 { width:25% !important; }
.wd30 { width:30% !important; }
.wd35 { width:35% !important; }
.wd40 { width:40% !important; }
.wd45 { width:45% !important; }
.wd50 { width:50% !important; }
.wd60 { width:60% !important; }
.wd70 { width:70% !important; }
.wd80 { width:80% !important; }
.wd90 { width:90% !important; }

.wd-full { width:100%; }
.wd-auto { width:auto; }

@media (max-width:76.8rem){
	.wd5 { width:15% !important; }
	.wd8 { width:18% !important; }
	.wd10 { width:25% !important; }
	.wd20 { width:30% !important; }
	
	.wd768-full { width:100% !important; }
}

@media (max-width:425px){
	.wd425-full { width:100% !important; }
}

@media (max-width:375px){
	.wd375-full { width:100% !important; }
}


/* 여백 ----------------------------------------------------------------- */

/* 마진 ----------------------------------------------------------------- */
/* m : top, bottom, left, right ---------------------------------------- */
/* mt : margin-top ----------------------------------------------------- */
/* mb : margin-bottom -------------------------------------------------- */
/* ml : margin-left ---------------------------------------------------- */
/* mr : margin-right --------------------------------------------------- */
/* mx : margin-left, margin-right -------------------------------------- */
/* my : margin-top, margin-bottom -------------------------------------- */

/* 패딩 ----------------------------------------------------------------- */
/* p : top, bottom, left, right ---------------------------------------- */
/* pt : padding-top ----------------------------------------------------- */
/* pb : padding-bottom -------------------------------------------------- */
/* pl : padding-left ---------------------------------------------------- */
/* pr : padding-right --------------------------------------------------- */
/* px : padding-left, padding-right -------------------------------------- */
/* py : padding-top, padding-bottom -------------------------------------- */

.m-0 { margin: 0 !important; }

.mt-0,
.my-0 { margin-top: 0 !important; }

.mr-0,
.mx-0 { margin-right: 0 !important; }

.mb-0,
.my-0 { margin-bottom: 0 !important; }

.ml-0,
.mx-0 { margin-left: 0 !important; }

.m-2 { margin: .2rem !important; }

.mt-2,
.my-2 { margin-top: .2rem !important; }

.mr-2,
.mx-2 { margin-right: .2rem !important; }

.mb-2,
.my-2 { margin-bottom: .2rem !important; }

.ml-2,
.mx-2 { margin-left: .2rem !important; }

.m-4 { margin: .4rem !important; }

.mt-4,
.my-4 { margin-top: .4rem !important; }

.mr-4,
.mx-4 { margin-right: .4rem !important; }

.mb-4,
.my-4 { margin-bottom: .4rem !important; }

.ml-4,
.mx-4 { margin-left: .4rem !important; }

.m-8 {
    margin: .8rem !important;
}

.mt-8,
.my-8 {
    margin-top: .8rem !important;
}

.mr-8,
.mx-8 {
    margin-right: .8rem !important;
}

.mb-8,
.my-8 {
    margin-bottom: .8rem !important;
}

.ml-8,
.mx-8 {
    margin-left: .8rem !important;
}

.m-12 {
    margin: 1.2rem !important;
}

.mt-12,
.my-12 {
    margin-top: 1.2rem !important;
}

.mr-12,
.mx-12 {
    margin-right: 1.2rem !important;
}

.mb-12,
.my-12 {
    margin-bottom: 1.2rem !important;
}

.ml-12,
.mx-12 {
    margin-left: 1.2rem !important;
}

.m-16 {
    margin: 1.6rem !important;
}

.mt-16,
.my-16 {
    margin-top: 1.6rem !important;
}

.mr-16,
.mx-16 {
    margin-right: 1.6rem !important;
}

.mb-16,
.my-16 {
    margin-bottom: 1.6rem !important;
}

.ml-16,
.mx-16 {
    margin-left: 1.6rem !important;
}

.m-20 {
    margin: 2rem !important;
}

.mt-20,
.my-20 {
    margin-top: 2rem !important;
}

.mr-20,
.mx-20 {
    margin-right: 2rem !important;
}

.mb-20,
.my-20 {
    margin-bottom: 2rem !important;
}

.ml-20,
.mx-20 {
    margin-left: 2rem !important;
}

.m-24 {
    margin: 2.4rem !important;
}

.mt-24,
.my-24 {
    margin-top: 2.4rem !important;
}

.mr-24,
.mx-24 {
    margin-right: 2.4rem !important;
}

.mb-24,
.my-24 {
    margin-bottom: 2.4rem !important;
}

.ml-24,
.mx-24 {
    margin-left: 2.4rem !important;
}

.m-32 {
    margin: 3.2rem !important;
}

.mt-32,
.my-32 {
    margin-top: 3.2rem !important;
}

.mr-32,
.mx-32 {
    margin-right: 3.2rem !important;
}

.mb-32,
.my-32 {
    margin-bottom: 3.2rem !important;
}

.ml-32,
.mx-32 {
    margin-left: 3.2rem !important;
}

.m-40 {
    margin: 4rem !important;
}

.mt-40,
.my-40 {
    margin-top: 4rem !important;
}

.mr-40,
.mx-40 {
    margin-right: 4rem !important;
}

.mb-40,
.my-40 {
    margin-bottom: 4rem !important;
}

.ml-40,
.mx-40 {
    margin-left: 4rem !important;
}

.m-48 {
    margin: 4.8rem !important;
}

.mt-48,
.my-48 {
    margin-top: 4.8rem !important;
}

.mr-48,
.mx-48 {
    margin-right: 4.8rem !important;
}

.mb-48,
.my-48 {
    margin-bottom: 4.8rem !important;
}

.ml-48,
.mx-48 {
    margin-left: 4.8rem !important;
}

.m-56 {
    margin: 5.6rem !important;
}

.mt-56,
.my-56 {
    margin-top: 5.6rem !important;
}

.mr-56,
.mx-56 {
    margin-right: 5.6rem !important;
}

.mb-56,
.my-56 {
    margin-bottom: 5.6rem !important;
}

.ml-56,
.mx-56 {
    margin-left: 5.6rem !important;
}

.m-64 {
    margin: 6.4rem !important;
}

.mt-64,
.my-64 {
    margin-top: 6.4rem !important;
}

.mr-64,
.mx-64 {
    margin-right: 6.4rem !important;
}

.mb-64,
.my-64 {
    margin-bottom: 6.4rem !important;
}

.ml-64,
.mx-64 {
    margin-left: 6.4rem !important;
}

.m-72 {
    margin: 7.2rem !important;
}

.mt-72,
.my-72 {
    margin-top: 7.2rem !important;
}

.mr-72,
.mx-72 {
    margin-right: 7.2rem !important;
}

.mb-72,
.my-72 {
    margin-bottom: 7.2rem !important;
}

.ml-72,
.mx-72 {
    margin-left: 7.2rem !important;
}

.m-80 {
    margin: 8rem !important;
}

.mt-80,
.my-80 {
    margin-top: 8rem !important;
}

.mr-80,
.mx-80 {
    margin-right: 8rem !important;
}

.mb-80,
.my-80 {
    margin-bottom: 8rem !important;
}

.ml-80,
.mx-80 {
    margin-left: 8rem !important;
}

.p-0 {
    padding: 0px !important;
}

.pt-0,
.py-0 {
    padding-top: 0px !important;
}

.mr-0,
.px-0 {
    padding-right: 0px !important;
}

.pb-0,
.py-0 {
    padding-bottom: 0px !important;
}

.pl-0,
.px-0 {
    padding-left: 0px !important;
}

.p-2 {
    padding: .2rem !important;
}

.pt-2,
.py-2 {
    padding-top: .2rem !important;
}

.mr-2,
.px-2 {
    padding-right: .2rem !important;
}

.pb-2,
.py-2 {
    padding-bottom: .2rem !important;
}

.pl-2,
.px-2 {
    padding-left: .2rem !important;
}

.p-4 {
    padding: .4rem !important;
}

.pt-4,
.py-4 {
    padding-top: .4rem !important;
}

.mr-4,
.px-4 {
    padding-right: .4rem !important;
}

.pb-4,
.py-4 {
    padding-bottom: .4rem !important;
}

.pl-4,
.px-4 {
    padding-left: .4rem !important;
}

.p-8 {
    padding: .8rem !important;
}

.pt-8,
.py-8 {
    padding-top: .8rem !important;
}

.mr-8,
.px-8 {
    padding-right: .8rem !important;
}

.pb-8,
.py-8 {
    padding-bottom: .8rem !important;
}

.pl-8,
.px-8 {
    padding-left: .8rem !important;
}

.p-12 {
    padding: 1.2rem !important;
}

.pt-12,
.py-12 {
    padding-top: 1.2rem !important;
}

.mr-12,
.px-12 {
    padding-right: 1.2rem !important;
}

.pb-12,
.py-12 {
    padding-bottom: 1.2rem !important;
}

.pl-12,
.px-12 {
    padding-left: 1.2rem !important;
}

.p-16 {
    padding: 1.6rem !important;
}

.pt-16,
.py-16 {
    padding-top: 1.6rem !important;
}

.mr-16,
.px-16 {
    padding-right: 1.6rem !important;
}

.pb-16,
.py-16 {
    padding-bottom: 1.6rem !important;
}

.pl-16,
.px-16 {
    padding-left: 1.6rem !important;
}

.p-20 {
    padding: 2rem !important;
}

.pt-20,
.py-20 {
    padding-top: 2rem !important;
}

.mr-20,
.px-20 {
    padding-right: 2rem !important;
}

.pb-20,
.py-20 {
    padding-bottom: 2rem !important;
}

.pl-20,
.px-20 {
    padding-left: 2rem !important;
}

.p-24 {
    padding: 2.4rem !important;
}

.pt-24,
.py-24 {
    padding-top: 2.4rem !important;
}

.mr-24,
.px-24 {
    padding-right: 2.4rem !important;
}

.pb-24,
.py-24 {
    padding-bottom: 2.4rem !important;
}

.pl-24,
.px-24 {
    padding-left: 2.4rem !important;
}

.p-32 {
    padding: 3.2rem !important;
}

.pt-32,
.py-32 {
    padding-top: 3.2rem !important;
}

.mr-32,
.px-32 {
    padding-right: 3.2rem !important;
}

.pb-32,
.py-32 {
    padding-bottom: 3.2rem !important;
}

.pl-32,
.px-32 {
    padding-left: 3.2rem !important;
}

.p-40 {
    padding: 4rem !important;
}

.pt-40,
.py-40 {
    padding-top: 4rem !important;
}

.mr-40,
.px-40 {
    padding-right: 4rem !important;
}

.pb-40,
.py-40 {
    padding-bottom: 4rem !important;
}

.pl-40,
.px-40 {
    padding-left: 4rem !important;
}

.p-48 {
    padding: 4.8rem !important;
}

.pt-48,
.py-48 {
    padding-top: 4.8rem !important;
}

.mr-48,
.px-48 {
    padding-right: 4.8rem !important;
}

.pb-48,
.py-48 {
    padding-bottom: 4.8rem !important;
}

.pl-48,
.px-48 {
    padding-left: 4.8rem !important;
}

.p-56 {
    padding: 5.6rem !important;
}

.pt-56,
.py-56 {
    padding-top: 5.6rem !important;
}

.mr-56,
.px-56 {
    padding-right: 5.6rem !important;
}

.pb-56,
.py-56 {
    padding-bottom: 5.6rem !important;
}

.pl-56,
.px-56 {
    padding-left: 5.6rem !important;
}

.p-64 {
    padding: 6.4rem !important;
}

.pt-64,
.py-64 {
    padding-top: 6.4rem !important;
}

.mr-64,
.px-64 {
    padding-right: 6.4rem !important;
}

.pb-64,
.py-64 {
    padding-bottom: 6.4rem !important;
}

.pl-64,
.px-64 {
    padding-left: 6.4rem !important;
}

.p-72 {
    padding: 7.2rem !important;
}

.pt-72,
.py-72 {
    padding-top: 7.2rem !important;
}

.mr-72,
.px-72 {
    padding-right: 7.2rem !important;
}

.pb-72,
.py-72 {
    padding-bottom: 7.2rem !important;
}

.pl-72,
.px-72 {
    padding-left: 7.2rem !important;
}

.p-80 {
    padding: 8rem !important;
}

.pt-80,
.py-80 {
    padding-top: 8rem !important;
}

.mr-80,
.px-80 {
    padding-right: 8rem !important;
}

.pb-80,
.py-80 {
    padding-bottom: 8rem !important;
}

.pl-80,
.px-80 {
    padding-left: 8rem !important;
}