@charset "utf-8";

@import url("fonts.css");

:root {
	--color-init: #212121;
	/*--color-point1: #1B3F94;*/
	--color-point1: #0A31A8;
	--color-point2: #3F71F2;
	--color-point3: #5837A2;
	--color-darkblue: #112656;
	--font-init: 'Pretendard';
	--font-eng: 'Poppins';
	--bg-init: #F1F4F9;
}


/*=====================
Reset
=====================*/
body { -webkit-font-smoothing: antialiased;}
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, input, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video, button { margin: 0; padding: 0; border: 0}
div, span, article, section, header, footer, aside, p, ul, li, fieldset, legend, label, a, nav, form { box-sizing: border-box;}
form, fieldset, button { border: none;}
ul, dl, ol, li, dt, dd { list-style: none}
img { max-width: 100%; vertical-align: middle; padding: 0; margin: 0; border: 0;}
article, aside, figcaption, figure, footer, header, hgroup, main, nav, section, address { display: block}
address	{ font-weight: normal; font-style: normal}
em, i { font-style: normal}
hr { display: none; height: 0; border: 0; margin: 0; padding: 0;}
blockquote, q { quotes: none;}
blockquote::before, blockquote::after, q::before, q::after{ content: ''; content: none;}
/*object, embed, video { max-width: 100%;}*/
h1, h2, h3, h4, h5, h6, strong	{ font-weight: 700}
table { width: 100%;  border-collapse: collapse; border-spacing: 0;}
legend, caption { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0}

a:link, a:visited { text-decoration: none; color: var(--color-init)}
a:hover { cursor: pointer;}
a:hover, a:focus, a:active { text-decoration: none;}
a:focus, img:focus, input:focus, button:focus, select:focus, textarea:focus { outline: 0;}

object, embed, video { max-width: 100%;}
button { font-family: 'Pretendard', 'Malgun Gothic', '맑은 고딕', Dotum, '돋움', sans-serif; cursor: pointer; border: 0; background: transparent}

input, textarea, select { font-family: 'Pretendard', 'Malgun Gothic', '맑은 고딕', Dotum, '돋움', sans-serif; font-size: 16px; color: var(--color-init);}

select { -webkit-appearance:none; -moz-appearance:none; -o-appearance:none; appearance:none;}
select::-ms-expand { display:none}

input::placeholder { color: #666; opacity: 1; font-weight: 400}
input::-webkit-input-placeholder{ color: #666; font-weight: 400}
input:-ms-input-placeholder { color: #666; font-weight: 400}
input:-mos-input-placeholder { color: #666; font-weight: 400}

textarea::placeholder { color: #999 !important; font-weight: 400}
textarea::-webkit-input-placeholder { color: #999 !important; font-weight: 400} 
textarea:-ms-input-placeholder { color: #999 !important; font-weight: 400}
textarea:-mos-input-placeholder{ color: #999 !important; font-weight: 400}

/* input type number 화살표 없애기
	input::-webkit-inner-spin-button,input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
	input[type=number]{-moz-appearance:textfield}
*/
input[type="number"]::-webkit-outer-spin-button, 
input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0;}

input[type="file"]:focus,
input[type="checkbox"]:focus,
input[type="radio"]:focus { outline: 0; outline-offset: 0}

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;}
.sr-only-focusable:active, .sr-only-focusable:focus { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal;}
 

/*----------------------------
Font-style
----------------------------*/
.underline { text-decoration: underline !important}


/*----------------------------
Font-Family
----------------------------*/
.esa { font-family: 'EsaManru' !important} /* 300, 500, 700*/
.ptd { font-family: 'Pretendard' !important}


/*----------------------------
Font-size
----------------------------*/
.fs11 { font-size: 11px !important;}
.fs12 { font-size: 12px !important;}
.fs13 { font-size: 13px !important;}
.fs14 { font-size: 14px !important;}
.fs15 { font-size: 15px !important;}
.fs16 { font-size: 16px !important;}
.fs17 { font-size: 17px !important;}
.fs18 { font-size: 18px !important;}
.fs19 { font-size: 19px !important;}
.fs20 { font-size: 20px !important;}
.fs22 { font-size: 22px !important;}
.fs24 { font-size: 24px !important;}


/*----------------------------
Font-Weight
----------------------------*/
.bold4 { font-weight: 400 !important}
.bold5 { font-weight: 500 !important}
.bold6 { font-weight: 600 !important}
.bold7 { font-weight: 700 !important}
.bold8 { font-weight: 800 !important}
.bold9 { font-weight: 900 !important}
.normal { font-weight: normal !important}


/*----------------------------
Color
----------------------------*/
.c-base { color: var(--color-base) !important}
.c-blue { color: #3c74de !important}
.c-indigo { color: #6610f2 !important}
.c-purple { color: #6f42c1 !important}
.c-pink { color: #d63384 !important}
.c-red { color: #dc3545 !important}
.c-orange { color: #fb5b0d !important}
.c-yellow { color: #ffc107 !important}
.c-green { color: #198754 !important}
.c-teal { color: #20c997 !important}
.c-cyan { color: #0dcaf0 !important}
.c-white { color: #fff !important}
.c-gray9 { color: #999 !important}
.c-gray { color: #6c757d !important}
.c-gray-dark { color: #343a40 !important}
.c-primary { color: var(--color-base) !important}
.c-secondary { color: #6c757d !important}
.c-success { color: #198754 !important}
.c-info { color: #0dcaf0 !important}
.c-warning { color: #ffc107 !important}
.c-danger { color: #dc3545 !important}
.c-light { color: #f8f9fa !important}
.c-dark { color: #212529 !important}
.c-balck { color: #000 !important}


/*----------------------------
Letter-spacing
----------------------------*/
.ls0 { letter-spacing: 0 !important}


/*----------------------------
Background
----------------------------*/
.bg-init { background: #F0F6FB}


/*----------------------------
Display
----------------------------*/
.d-none { display: none !important;}
.d-block { display: block !important;}
.d-inblock { display: inline-block !important;}

.t-center { text-align: center !important}
.t-left { text-align: left !important}
.t-right { text-align: right !important}

.d-flex { display: flex !important}
.d-flex-center { display: flex; align-items: center; justify-content: center}
.d-flex-hcenter { display: flex; align-items: center;}
.d-flex-wcenter { display: flex; justify-content: center}

.ai-start { align-items: flex-start!important}
.ai-center { align-items: center !important}
.ai-end { align-items: flex-end!important}

.jc-start { justify-content: flex-start !important}
.jc-center { justify-content: center !important}
.jc-end { justify-content: flex-end!important}

.f-nowrap { flex-wrap: nowrap !important}
.flex1 { flex: 1 !important}

.gap0 { gap: 0 !important}
.gap5 { gap: 5px !important}
.gap10 { gap: 10px !important}
.gap15 { gap: 15px !important}
.gap20 { gap: 20px !important}


/*----------------------------
Width
----------------------------*/
.w-auto { width: auto !important;}
.w50p { width: 50% !important;}
.w100p { width: 100% !important;}

.w100 { width: 100px !important;}
.w200 { width: 200px !important;}
.w300 { width: 300px !important;}
.w400 { width: 400px !important;}
.w500 { width: 500px !important;}
.w600 { width: 600px !important;}


/*----------------------------
Height
----------------------------*/
.h100p { height: 100% !important}
.h100v { height: 100vh !important}


/*----------------------------
Margin
----------------------------*/
.m-auto { margin-left: auto; margin-right: auto}
.m0{ margin:0 !important;}
.m3{ margin:3px !important;}
.m5{ margin:5px !important;}
.m10{ margin:10px !important;}
.m20{ margin:20px !important;}
.m30{ margin:30px !important;}
.m40{ margin:40px !important;}
.m50{ margin:50px !important;}

.mt0 { margin-top: 0px !important;}
.mt1 { margin-top: 1px !important;}
.mt2 { margin-top: 2px !important;}
.mt3 { margin-top: 3px !important;}
.mt5 { margin-top: 5px !important;}
.mt8 { margin-top: 8px !important;}
.mt10 { margin-top: 10px !important;}
.mt12 { margin-top: 12px !important;}
.mt15 { margin-top: 15px !important;}
.mt20 { margin-top: 20px !important;}
.mt22 { margin-top: 22px !important;}
.mt23 { margin-top: 23px !important;}
.mt25 { margin-top: 25px !important;}
.mt30 { margin-top: 30px !important;}
.mt35 { margin-top: 35px !important;}
.mt40 { margin-top: 40px !important;}
.mt50 { margin-top: 50px !important;}

.ml-auto { margin-left: auto !important}
.ml0{ margin-left:0 !important}
.ml2{ margin-left:2px !important}
.ml3{ margin-left:3px !important;}
.ml5{ margin-left:5px !important;}
.ml7{ margin-left:7px !important;}
.ml10{ margin-left:10px !important;}
.ml15{ margin-left:15px !important;}
.ml20{ margin-left:20px !important;}
.ml30{ margin-left:30px !important;}
.ml33{ margin-left:33px !important;}
.ml40{ margin-left:40px !important;}
.ml50{ margin-left:50px !important}
.ml55{ margin-left:55px !important}
.ml60{ margin-left:60px !important}
.ml80{ margin-left:80px !important}
.ml100{ margin-left:100px !important}
.ml150{ margin-left:150px !important;}
.ml190{ margin-left:190px !important;}

.mr0{ margin-right:0 !important}
.mr1{ margin-right:1px !important}
.mr3{ margin-right:3px !important;}
.mr5{ margin-right:5px !important;}
.mr6{ margin-right:6px !important;}
.mr7{ margin-right:7px !important;}
.mr8{ margin-right:8px !important;}
.mr10{ margin-right:10px !important;}
.mr15{ margin-right:15px !important;}
.mr27{ margin-right:27px !important;}
.mr20{ margin-right:20px !important;}
.mr30{ margin-right:30px !important;}
.mr40{ margin-right:40px !important;}
.mr50{ margin-right:50px !important;}
.mr60{ margin-right:60px !important;}
.mr43{ margin-right:43px !important;}

.mb0{ margin-bottom:0 !important}
.mb3{ margin-bottom:3px !important;}
.mb5{ margin-bottom:5px !important;}
.mb7{ margin-bottom:7px !important;}
.mb10{ margin-bottom:10px !important}
.mb15{ margin-bottom:15px !important}
.mb20{ margin-bottom:20px !important}
.mb25{ margin-bottom:25px !important}
.mb30{ margin-bottom:30px !important}
.mb40{ margin-bottom:40px !important}
.mb50{ margin-bottom:50px !important}
.mb60{ margin-bottom:60px !important}
.mb70{ margin-bottom:70px !important}
.mb80{ margin-bottom:80px !important}
.mb90{ margin-bottom:90px !important}
.mb100{ margin-bottom:100px !important;}


/*----------------------------
Padding
----------------------------*/
.p0{ padding:0 !important;}
.p3{ padding:3px !important;}
.p5{ padding:5px !important;}
.p10{ padding:10px !important;}
.p15{ padding:15px !important;}
.p20{ padding:20px !important;}
.p30{ padding:30px !important;}
.p40{ padding:40px !important;}
.p50{ padding:50px !important;}

.pt0{ padding-top:0 !important}
.pt3{ padding-top:3px !important;}
.pt5{ padding-top:5px !important}
.pt7{ padding-top:7px !important;}
.pt10{ padding-top:10px !important}
.pt15{ padding-top:15px !important}
.pt20{ padding-top:20px !important}
.pt25{ padding-top:25px !important}
.pt30{ padding-top:30px !important}

.pt40{ padding-top:40px !important}
.pt50{ padding-top:50px !important}

.pr0{ padding-right:0 !important;}
.pr3{ padding-right:3px !important;}
.pr5{ padding-right:5px !important;}
.pr7{ padding-right:7px !important;}
.pr10{ padding-right:10px !important;}
.pr15{ padding-right:15px !important;}
.pr20{ padding-right:20px !important;}
.pr30{ padding-right:30px !important;}
.pr40{ padding-right:40px !important;}
.pr45{ padding-right:45px !important;}
.pr50{ padding-right:50px !important;}

.pb0{ padding-bottom:0 !important}
.pb3{ padding-bottom:3px !important}
.pb5{ padding-bottom:5px !important}
.pb7{ padding-bottom:7px !important}
.pb10{ padding-bottom:10px !important}
.pb15{ padding-bottom:15px !important}
.pb20{ padding-bottom:20px !important}
.pb25{ padding-bottom:25px !important}
.pb30{ padding-bottom:30px !important}
.pb40{ padding-bottom:40px !important}
.pb50{ padding-bottom:50px !important}
.pb60{ padding-bottom:60px !important}
.pb70{ padding-bottom:70px !important}
.pb80{ padding-bottom:80px !important}

.pl0{ padding-left:0 !important;}
.pl3{ padding-left:3px !important;}
.pl5{ padding-left:5px !important;}
.pl7{ padding-left:7px !important;}
.pl10{ padding-left:10px !important;}
.pl15{ padding-left:15px !important;}
.pl20{ padding-left:20px !important;}
.pl24{ padding-left:24px !important;}
.pl30{ padding-left:30px !important;}
.pl40{ padding-left:40px !important;}
.pl50{ padding-left:50px !important;}

.py10 { padding-top: 10px; padding-bottom: 10px}
.py20 { padding-top: 20px; padding-bottom: 20px}
.py30 { padding-top: 30px; padding-bottom: 30px}
.py40 { padding-top: 40px; padding-bottom: 40px}
.py50 { padding-top: 50px; padding-bottom: 50px}