@charset "UTF-8";

@font-face {
    font-family: 'GmarketSans';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansLight.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'GmarketSans';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
}
@font-face {
    font-family: 'GmarketSans';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansBold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
}

/* 
font-family: 'Noto Sans KR', sans-serif; 
font-family: 'GmarketSans', sans-serif;
*/

body { font-family: 'Noto Sans KR', sans-serif;  font-weight: 500; letter-spacing: -0.04em; color: #333; }
*, h1, h2, h3, h4, h5, h6, input, button, textarea, select { font-family: inherit; font-weight: inherit; letter-spacing: -0.04em; }
* { margin: 0; padding: 0; list-style: none; box-sizing: border-box; }
html { overflow-y: scroll; }
h1, h2, h3, h4, h5, h6 { font-size: 1em; font-weight: 500; }
a { color: inherit; }
a,button,input[type="submit"],label { cursor: pointer; }
address { font-style: normal; }
pre { overflow-y: scroll; overflow-x: auto; white-space: pre-line; }

::placeholder { color: #ccc; }

.cb::after { content: ""; display: block; clear: both; }
.cb > .left { float: left; }
.cb > .right { float: right; }

ul.cb > li { float: left; }


/* 컬러 */
.navy { color: #2948A8; }
.blue { color: #00ADEF; }


/* 버튼 */
.btn01, .btn02, .btn_submit, .btn_close, .btn_cancel, .btn_frmline, .btn_b02, .btn_b03, .btn_b04 { display: inline-block; border: 1px solid transparent; background-color: transparent; -webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px; }

.btn01       { color: #000000; border-color: #cccccc; background-color: #fafafa; }
.btn02       { color: #ffffff; border-color: #3b3c3f; background-color: #4b545e; }
.btn_submit  { color: #ffffff; border-color: #cccccc; background-color: #2948A8; }
.btn_close   { color: #000000; border-color: #dcdcdc; background-color: transparent; }
.btn_cancel  { color: #2948A8; border-color: #2948A8; background-color: #ffffff; }
.btn_frmline { color: #ffffff; border-color: #6C7680; background-color: #6C7680; }
.btn_b02     { color: #ffffff; border-color: #253dbe; background-color: #253dbe; }
.btn_b03     { color: #646982; border-color: #b9bdd3; background-color: transparent; }
.btn_b04     { color: #707070; border-color: #cccccc; background-color: transparent; }



/* 폼 */
textarea, select, .frm_input { width: 100%; height: 40px; border: 1px solid #eee; -webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px; padding: 0 10px; }
textarea { height: 200px; padding: 10px; }







/* 페이징 */
.pg_wrap { width: 100%; text-align: center; margin-top: 32px; }
.pg_wrap .pg::after { content: ""; display: block; clear: both; }
.pg_wrap .pg_page,
.pg_wrap .pg_current { display: inline-block; width: 28px; height: 28px; line-height: 26px; text-align: center; border: 1px solid #eee; vertical-align: middle; font-size: 12px; border-radius: 4px; background-color: transparent; }
.pg_wrap .pg_page:hover { border-color: #bbb; }
.pg_wrap .pg_current { border-color: #2948A8; background-color: #2948A8; color: #fff; }
.pg_wrap .pg_current:hover { border-color: #2948A8; }

.pg_wrap .pg_start, .pg_wrap .pg_prev, .pg_wrap .pg_next, .pg_wrap .pg_end { font-size: 0; background: no-repeat center; }
.pg_wrap .pg_start { background-image: url(./img/page_start.png); }
.pg_wrap .pg_prev { background-image: url(./img/page_prev.png); }
.pg_wrap .pg_next { background-image: url(./img/page_next.png); }
.pg_wrap .pg_end { background-image: url(./img/page_end.png); }


/* radio , checkbox */
.chk_box { font-size: 12px; }
.chk_box .selec_chk { display: none; }
.chk_box .selec_chk + label { cursor: pointer; }
.chk_box .selec_chk + label span { display: inline-block; vertical-align: middle; margin-right: 4px; }

.chk_box .selec_chk[type='checkbox'] + label span { width: 16px; height: 16px; border: 1px solid #ddd; background: #fff url(./img/ico_chk.png) no-repeat center/ 80%; border-radius: 4px; }
.chk_box .selec_chk[type='checkbox']:checked + label span { background-color: #2948A8; border-color: #2948A8; }

.chk_box .selec_chk[type='radio'] + label span { width: 16px; height: 16px; border: 1px solid #ddd; background: #fff; border-radius: 30px; position: relative; }
.chk_box .selec_chk[type='radio'] + label span::after { content: ""; width: 8px; height: 8px;  display: block; border-radius: 30px; position: absolute; top: 0; left: 0; margin: 3px; background-color: #fff; }
.chk_box .selec_chk[type='radio']:checked + label span::after { background-color: #2948A8; }