@charset "utf-8";
/***********************************
  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, 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, section, summary, time, mark, audio, video, button, input { margin: 0; padding: 0; border: 0; outline: none; font-family: "NotoSansKR", Arial, sans-serif; -webkit-text-size-adjust: none; -moz-text-size-adjust: none; -ms-text-size-adjust: none; }
    * { box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; }
    html { -webkit-touch-callout: none; -webkit-user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }
    body { width: 100%; }
    ul, ol, li { list-style: none;}
    table, thead, tbody, tfoot { border-collapse: collapse; border-spacing: 0; border: 0; }
    img, fieldset { border: 0; }
    button, label { background: none; cursor: pointer; }
    a, a:link, a:visited, a:hover, a:focus { text-decoration: none; }
    input[type="text"] { background: none; outline: none; }
    input[type="checkbox"], input[type="radio"], input[type="file"] { display: none; }
    select { background: none; outline: none; }
    textarea { outline: none; resize: none; vertical-align: bottom; }
    input[type="number"]::-webkit-outer-spin-button,
    input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
    input:-webkit-autofill,
    input:-webkit-autofill:hover,
    input:-webkit-autofill:focus,
    input:-webkit-autofill:active { transition: background-color 5000s ease-in-out 0s; -webkit-transition: background-color 9999s ease-out; -webkit-box-shadow: 0 0 0px 1000px white inset !important; -webkit-text-fill-color: #222 !important; }

/************************************
    Common
*************************************/
    /*basic - tag*/
    body { font-size: 12px; color: #222; }
    a, a:link, a:visited, a:hover, a:focus { color: #222; }
    select { color: #222; font-size: 12px; }
    input[type="text"], input[type="checkbox"], input[type="radio"], input[type="number"] { color: #222; font-size: 12px; }
    textarea, input[type="text"]::placeholder { color: #AAAAAA; font-size: 12px; }
    textarea { width: 100%; border: 1px solid #B3BFD1; padding: 4px; border-radius: 4px; font-size: 12px; color: #222; font-family: "NotoSansKR"; }
    textarea[readonly] { border: none; }
    button, label { cursor: pointer; }
    img { max-width: 100%; }
    td { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/************************************
    common
*************************************/
    /*display*/
    .hide { display: none; }
    .cup { cursor: pointer; }

    /*margin, padding*/
    .m0 { margin: 0px!important; }
    .m5 { margin: 5px!important; } .mt5 { margin-top: 5px!important; } .mb5 { margin-bottom: 5px!important; } .ml5 { margin-left: 5px!important; } .mr5 { margin-right: 5px!important; }
    .m10 { margin: 10px!important; } .mt10 { margin-top: 10px!important; } .mb10 { margin-bottom: 10px!important; } .ml10 { margin-left: 10px!important; } .mr10 { margin-right: 10px!important; }
    .m20 { margin: 20px!important; } .mt20 { margin-top: 20px!important; } .mb20 { margin-bottom: 20px!important; } .ml20 { margin-left: 20px!important; } .mr20 { margin-right: 20px!important; }
    .m30 { margin: 30px!important; } .mt30 { margin-top: 30px!important; } .mb30 { margin-bottom: 30px!important; } .ml30 { margin-left: 30px!important; } .mr30 { margin-right: 30px!important; }
    .p0 { padding: 0!important; }
    .p10 { padding: 10px!important; } .p10 { padding-top: 10px!important; } .pb10 { padding-bottom: 10px!important; } .pl10 { padding-left: 10px!important; } .pr10 { padding-right: 10px!important; }
    .p20 { padding: 20px!important; } .p20 { padding-top: 20px!important; } .pb20 { padding-bottom: 20px!important; } .pl20 { padding-left: 20px!important; } .pr20 { padding-right: 20px!important; }
    .p30 { padding: 30px!important; } .p30 { padding-top: 30px!important; } .pb30 { padding-bottom: 30px!important; } .pl30 { padding-left: 30px!important; } .pr30 { padding-right: 30px!important; }
    .mc { margin: 0 auto; }
    .ml-a { margin-left: auto; }
    .mr-a { margin-right: auto; }

    /*text*/
    .txc { text-align: center!important; }
    .txr { text-align: right!important; }
    .txl { text-align: left!important; }
    .bold { font-weight: 700; }
    .bolder { font-weight: 900; }

/************************************
    common_layout
*************************************/
    .flex { display: flex; }
    .fl-a { display: flex; align-items: center; justify-content: space-around; }
    .fl-b { display: flex; align-items: center; justify-content: space-between; }
    .fl-s { display: flex; align-items: center; justify-content: flex-start; }
    .fl-jb { display: flex; justify-content: space-between; }
    .fl-cc { display: flex; align-items: center; justify-content: center; }
    .fl-jc { display: flex; align-items: center; }
    .fl-wp { flex-wrap: wrap; }
    .w_fix { flex-shrink: 0; }
    .initW { width: initial!important; }

	#wrap { width: 100%; height: 100vh; background-size: 100% 100%; min-width: 1200px; }
	.container { position: relative; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
	.infoWrap { position: absolute; left: 130px; top: 120px; }
	.infoWrap #logo img { max-height: 60px; }
	.infoWrap #title { color: #002632; font-size: 35px; letter-spacing: -1px; }
	.infoWrap #home a { padding: 14px 24px; font-size: 20px; font-weight: bold; color: #fff; background: rgba(65,120,202,0.75); border-radius: 100px; display: inline-block; margin-top: 30px; }
	#login { width: 520px; background: rgba(255,255,255,0.9); box-shadow: 0px 0px 15px 0px #42507640; border-radius: 20px; padding: 55px 46px 70px 46px; text-align: center; }
	#login .input { text-align: left; margin-top: 60px; }
	#login .input input { width: 100%; border: 1px solid #98adcc; height: 50px; border-radius: 8px; padding: 0 12px; font-size: 20px; color: #222; }
	#login .input label { font-size: 14px; color: #666; margin-bottom: 5px; display: inline-block; }
	#login .input #userId { margin-bottom: 16px; }
	.button .login span { display: flex; justify-content: center; background: #18306d; padding: 10px; border-radius: 8px; color: #fff; font-size: 20px; font-weight: bold; cursor: pointer; margin-top: 23px; }
	.button .search span { display: flex; justify-content: center; background: #EAEAEA; border-radius: 8px; color: #666666; line-height: 40px; font-size: 20px; font-weight: bold; cursor: pointer; border: 1px solid #B7B7B7; margin-top: 15px; }
	.button .join { border-bottom: 1px solid #7099D6; color: #7099D6; font-size: 20px; margin-top: 50px; display: inline-block; cursor: pointer; }

	@media (max-width: 1460px) {
		.logoWrap { left: 0; margin-right: 50px; position: relative; top: -150px; }
	}