@charset "utf-8";

@import url("fonts.css");
/*font-family: 'EsaManru'; 300, 500, 700*/

:root {
	--color-init: #111;
	--color-base: #6637cb;
	--color-study: #567CFC;
	--color-font: #6637cb;
	--color-green: #2DA231;
	--color-blue: #567CFC;
	--color-bg: #fff;
	--section-pd : 100px 0;
}

@media (max-width: 991px){
	:root {
		--section-pd : 70px 0;
	}
}
@media (max-width: 575px){
	:root {
		--section-pd : 50px 0;
	}
}


/*------------------------------------------------------------------------------
Reset
------------------------------------------------------------------------------*/
div, p, th, td, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, button, select, textarea, blockquote{ padding:0; margin:0;}
form, fieldset, button	{ border:none;}
hr	{ display:none;}
ul, dl, ol, li, dt, dd { list-style: none}
caption	{ display:none}
img { vertical-align:middle; padding: 0; margin: 0; border:0; max-width: 100%}
article, aside, figcaption, figure, footer, header, hgroup, main, nav, section { display: block}
figure { margin: 0}
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;}
legend, caption, .invisible{ width:0; height:0; padding:0; font-size:0; line-height:0; overflow:hidden; position:absolute; visibility:hidden}
.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;}
input[type="radio"].hidden, input[type="checkbox"].hidden { overflow: hidden; position: absolute; width: 0; height: 0; border: 0 none; font-size: 0; line-height: 0; left: -9999px}
 
html,body, div, dl, dt, dd, ul, ol, li, pre, form, fieldset, input, button, select, textarea, p, blockquote, address, table, th, td, a, 
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section, h1,h2,h3,h4,h5,h6, b, strong,span, em, i, a,pre{-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}

h1, h2, h3, h4, h5, h6, strong	{ font-weight: 500}

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

a { white-space: nowrap}
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, div:focus { outline: 0;}

object, embed, video { max-width: 100%;}
/*button { font-family: 'Poppins', 'Pretendard', 'Malgun Gothic', '맑은 고딕', Dotum, '돋움', sans-serif}*/
button { font-family: 'Pretendard', 'Malgun Gothic', '맑은 고딕', Dotum, '돋움', sans-serif; font-size: 16px; background: transparent}
button[type=button] { cursor: pointer}

select { -webkit-appearance: none; -moz-appearance: none; -o-appearance: none; appearance: none; -webkit-box-shadow: none; -moz-box-shadow: none; -o-box-shadow: none; height: 60px; border: 1px solid #ccc; border-radius: 5px; background: url("/assets2/img/common/select_arr.svg") right center /22px no-repeat #fff; padding: 0 35px 0 15px}
select::-ms-expand { display: none}

textarea { -webkit-box-shadow: none; -moz-box-shadow: none; -o-box-shadow: none; border: 1px solid #ccc;}

input, textarea, select { font-family: 'Pretendard', 'Malgun Gothic', '맑은 고딕', Dotum, '돋움', sans-serif; font-size: 1rem; color: var(--color-init)}
input[type=radio],input[type=checkbox],input[type=image]{ padding: 0; height: auto;}
input[type=file]{ height: 50px; background-color: #fff;}
input[type=checkbox], input[type=radio], input[type=text]	{ vertical-align: middle}

input[type=password]::-ms-clear, 
input[type=password]::-ms-reveal, 
input[type=text]::-ms-clear, 
input[type=text]::-ms-reveal { display: none; width: 0; height: 0}

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

textarea { overflow: auto; vertical-align: top; resize: vertical;}
textarea::placeholder { color: #aaa; font-weight: 400}
textarea::-webkit-input-placeholder { color: #aaa; font-weight: 400}
textarea:-ms-input-placeholder { color: #aaa; font-weight: 400}
textarea:-mos-input-placeholder { color: #aaa; font-weight: 400}

/* 크롬 autofill css 없애기(input focus시 bg 없애기) */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
	transition: background-color 5000s;
	-webkit-text-fill-color: var(--color-init) !important;
}

/* 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;}


/*------------------------------------------------------------------------------
Common
------------------------------------------------------------------------------*/
/* Font-Family */
.ptd { font-family: 'Pretendard';}
.popp { font-family: 'Poppins';}

/* 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}

/* 좌우 */
.f-left { float: left !important}
.f-right { float: right !important}
.f-none { float: none !important}
.clear { clear: both !important}
.clearfix::after { display: block; clear: both; content: ""}
.t-left { text-align: left !important;}
.t-center { text-align: center !important;}
.t-right { text-align: right !important;}
.v-middle { vertical-align: middle !important}

.hand { cursor: pointer !important}
.hand-no { cursor: default !important}
.underline { text-decoration: underline !important;}

/* Position  */
.p-rel { position: relative !important}
.p-fix { position: fixed !important;}

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

/* Flex */
.d-flex { display: flex !important}
.d-flex-center { display: flex; justify-content: center; align-items: center}
.d-flex-wcenter { display: flex; justify-content: center}
.d-flex-hcenter { display: flex; align-items: center}
.ai-center { align-items: center !important}
.jc-center { justify-content: center !important}
.f-nowrap { flex-wrap: nowrap !important}
.flex05 { flex: 0.5}
.flex1 { flex: 1}
.flex15 { flex: 1.5}
.flex2 { flex: 2}
.gap0 { gap: 0 !important}
 
/* Line-Height */
.lh18 { line-height: 18px !important}
.lh20 { line-height: 20px !important}
.lh24 { line-height: 24px !important}
.lh30 { line-height: 30px !important}

/* Letter-Spacing */
.ls-0 { letter-spacing: 0 !important}
.ls--05 { letter-spacing: -0.5px !important}
.ls--1 { letter-spacing: -1px !important}
.ls--2 { letter-spacing: -2px !important}

/* font-size */
.fs-11	{ font-size: 11px !important;}
.fs-12	{ font-size: 12px !important;}
.fs-13	{ font-size: 13px !important;}
.fs-14	{ font-size: 14px !important;}
.fs-15	{ font-size: 15px !important;}
.fs-16	{ font-size: 16px !important;}
.fs-17	{ font-size: 17px !important;}
.fs-18	{ font-size: 18px !important;}
.fs-19	{ font-size: 19px !important;}
.fs-20	{ font-size: 20px !important;}
.fs-22	{ font-size: 22px !important;}
.fs-24	{ font-size: 24px !important;}

/* border */
.bl-0 { border-left: 0 !important}
.br-0 { border-right: 0 !important}
.border-0 { border: 0 !important}
.bb-0 { border-bottom: 0 !important}
.bb-1-d { border-bottom: 1px solid #ddd !important}
.bb-1-e { border-bottom: 1px solid #eee !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}

/* Background */
.bg-fb { background: #fbfbfb}
.bg-f5 { background: #f5f5f5}
.bg-sky { background: #f4f7fc}
.bg-yellow { background: rgb(238 181 87 / 5%)}

/* Width */
.w-auto { width: auto !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}

/* 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;}

/* 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;}