@charset "utf-8";
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard-dynamic-subset.css');/* regular-400, medium-500, semibold-600, bold-700 */
@font-face{font-family:'GmarketSansLight';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:'GmarketSansMedium';src:url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff') format('woff');font-weight:normal;font-style:normal;}
@font-face{font-family:'GmarketSansBold';src:url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansBold.woff') format('woff');font-weight:normal;font-style:normal;}
html { margin: 0; overflow-y:scroll; }
html.noscroll, html.panelopen { overflow: hidden; }
body { margin: 0; padding: 0; font-size: 1rem; font-family: 'Pretendard', 'Noto Sans Kr', 'NanumGothic', 'Malgun Gothic','Exo 2', 'Work Sans', 'Montserrat'; font-weight: 400; background-color: var(--bgcolor); color: var(--fontbasic); }
h1, h2, h3, h4, h5, h6, form, fieldset, img { margin: 0; padding: 0; border: 0; }
h1, h2, h3, h4, h5, h6 { }
article, aside, header, footer, nav, section { display: block; }
ul,li,dl,dt,dd,ol { margin: 0; padding: 0; list-style: none; }
legend { position: absolute; margin: 0; padding: 0;font-size: 0; line-height: 0; text-indent: -9999em; overflow: hidden; }
label { display: inline-block; }
label, img { vertical-align:middle; margin: 0; }
input, button { margin: 0; padding: 0; }
button, input[type="submit"] { cursor: pointer; outline:none; box-shadow: none;}
button:focus,input[type="submit"]:focus { outline:none; box-shadow: none;}
textarea { resize: none; }
select { -webkit-appearance:none;  -moz-appearance:none; appearance:none; background: #fff url(/images/select_arrow.png) right 10px center no-repeat; padding-right: 30px; }
input, select, textarea { font: inherit; margin: 0px; padding: 0px; outline: none; box-shadow: none; border-color: #ddd; }
.mask-num { text-align: right; }
p { margin: 0; padding: 0; word-break: break-all; }
pre { overflow-x: scroll;}
span, em { display: inline-block; font-style: normal; }
a { color: var(--fontbasic); }
a, a:visited, a:hover, a:focus { text-decoration: none; }
*, :after, :before { box-sizing: border-box; }
.sound_only { display: none !important; }
.btn_cke_sc { display: none !important; }
.ml-auto { margin-left: auto; }
@media(min-width: 992px) {
    html.noscroll body { }
}
:root { 
--colorblack: #000000;
--colorwhite: #ffffff;
--colornavy: #414796;
--colorpurple: #bf51e0;
--colorpink: #ff74bc;
--colorgray: #dcdcdc;
--coloryellow: #ffe272;
--colorgreen: #74dc2e;
--colorblue: #3da5ff;
--colorred: #ff3737;
--colororange: #ff9351;
--colorteal: #00b9a8;
--colormint: #83f3b8;
--colorbeige: #f1d299;
--colorpeach: #eba39c;
--lightnavy: #afb3dc;
--lightpurple: #ecc9f5;
--lightpink: #ffc4e2;
--lightgray: #f6f6f6;
--lightyellow: #fff5d0;
--lightgreen: #dbf5c9;
--lightblue: #cae6ff;
--lightred: #ffcccc;
--lightorange: #ffdeca;
--lightteal: #cafffa;
--lightmint: #dcfceb;
--lightbeige: #faefda;
--lightpeach: #f9e1df;
--darknavy: #262957;
--darkpurple: #42124f;
--darkpink: #ae005b;
--darkgray: #4a4a4a;
--darkyellow: #b08d00;
--darkgreen: #3d7814;
--darkblue: #005bae;
--darkred: #bb0000;
--darkorange: #b04200;
--darkteal: #007d71;
--darkmint: #0e924d;
--darkbeige: #785410;
--darkpeach: #e4897e;
}
.d-block { display: block !important }
.d-inline { display: inline-block !important }
.font-11 { font-size: 11px !important }
.font-12 { font-size: 12px !important }
.font-13 { font-size: 13px !important }
.font-14 { font-size: 14px !important }
.font-15 { font-size: 15px !important }
.font-16 { font-size: 16px !important }
.font-17 { font-size: 17px !important }
.font-18 { font-size: 18px !important }
.font-19 { font-size: 19px !important }
.font-20 { font-size: 20px !important }
.font-22 { font-size: 22px !important }
.font-24 { font-size: 24px !important }
.font-26 { font-size: 26px !important }
.font-28 { font-size: 28px !important }
.font-30 { font-size: 30px !important }
.font-32 { font-size: 32px !important }
.font-36 { font-size: 36px !important }
.font-40 { font-size: 40px !important }
.font-48 { font-size: 48px !important }
.font-weight-300 { font-weight: 300 !important }
.font-weight-400 { font-weight: 400 !important }
.font-weight-500 { font-weight: 500 !important }
.font-weight-600 { font-weight: 600 !important }

/* page layout */
#container { display: flex; display: ms-flexbox!important; min-height: 400px; }
#aside_left { position: relative; flex: 1 1 25%; max-width: 25%; order: 1; -ms-flex-order: 1; padding-right: 25px; }
#container_wrap { position: relative; flex: 1 1 auto; order: 2; -ms-flex-order: 2; max-width: 100%; }
#aside_right { position: relative;  flex: 1 1 25%; max-width: 25%; order: 3; -ms-flex-order: 3; padding-left: 25px; }
#page-wrap { position: relative; margin-bottom: 35px; }
@media (max-width: 992px) {
#aside_left, #aside_right { display: none !important; }
}
/* page layout */
.display-none { display: none !important; }
/* detail side display none */
#mbwnone #aside_left,
#mbwnone #aside_right,
#mbwnone #mobile-fix-nav { display: none !important; }
/* mobile-media-set */
@media(max-width: 992px) {
    .mobile-padding { padding: 0 10px !important; }
    .mobile-none { display: none !important; }
    .mobile-only { display: block !important; }
}
@media(min-width: 992px) {
    .mobile-only { display: none !important; }
}
.page-wrap-container > .page-title { display: flex; margin: 35px 0 15px 0; padding: 0 0 8px 0; }
.page-wrap-container > .page-title > span { font-weight: 500; font-size: 22px; }
.page-wrap-flex { display: flex; }
.page-wrap-flex > .page-wrap-side { flex: 1 1 20%; max-width: 20%; }
.page-wrap-flex > .page-wrap-container { flex: 1 1 auto; max-width: 100%; }
.page-wrap-flex > .page-wrap-side + .page-wrap-container { flex: 1 1 auto; max-width: 80%; }
.page-wrap-flex > .page-wrap-container > .page-title { display: flex; border-bottom: 1px solid #ccc; font-size: 22px; margin: 25px 0; padding: 0 0 8px 50px; }
.page-wrap-flex > .page-wrap-container > .content-wrapper { position: relative; padding-left: 50px; }
@media(max-width: 768px) {
    .page-wrap-container > .page-title { display: flex; margin: 35px 0 15px 0; padding: 0 0 8px 10px; }
    .page-wrap-container > .page-title > span { font-weight: 500; font-size: 18px; }
    .page-wrap-flex { flex-wrap: wrap; }
    .page-wrap-flex > .page-wrap-side { flex: 1 1 100%; max-width: 100%; padding: 0 10px; }
    .page-wrap-flex > .page-wrap-container { flex: 1 1 100%; max-width: 100%; padding: 0 10px; }
    .page-wrap-flex > .page-wrap-side + .page-wrap-container { flex: 1 1 100%; max-width: 100%; padding: 0 10px; }
    .page-wrap-flex > .page-wrap-container > .page-title { font-size: 16px; }
    .content-wrapper { padding: 0 10px; }
}
.page-sub-menu { position: relative; width: 100%; display: flex; justify-content: center; }
.page-sub-menu > ul { display: flex; flex-wrap: wrap; flex: 1 1 auto; max-width: 100%; }
.page-sub-menu > ul > li { position: relative; flex: 1 1 25%; max-width: 25%; }
.page-sub-menu > ul > li > a { display: block; text-align: center; padding: 16px 26px; font-size: 17px; font-weight: 500; border: 1px solid var(--boxbrbase); white-space: nowrap; }
.page-sub-menu > ul > li:not(:first-child) > a { border-left: 1px solid transparent; }
.page-sub-menu > ul > li > a.on { background-color: var(--darknavy); border: 1px solid var(--darknavy); color: var(--colorwhite); }
h2.page-title { margin: 35px 0 27px 0; padding: 0 0 8px 0; text-align: center; }
h2.page-title span { font-size: 28px; }
h5.title { font-size: 16px; margin-bottom: 8px; }

/* navi */
.navi-wrap { position: relative; padding: 15px 0 15px 0; border-bottom: 1px solid #ddd; margin-bottom: 25px; }
.navi-wrap > .navi-wrap-inner { display: flex; }
.navi-wrap > .navi-wrap-inner > .navi-title { }
.navi-wrap > .navi-wrap-inner > .navi-pos { margin-left: auto; align-self: flex-end; display: flex; }
.navi-wrap > .navi-wrap-inner > .navi-pos > a { position: relative; display: block; margin-right: 26px; font-size: 14px; color: #000; font-weight: 400; }
.navi-wrap > .navi-wrap-inner > .navi-pos > a:last-child { margin-right: 0; }
.navi-wrap > .navi-wrap-inner > .navi-pos > a:after { position: absolute; content: '＞'; width: 26px; display: inline-block; text-align: center; }
.navi-wrap > .navi-wrap-inner > .navi-pos > a:last-child:after { content: ''; display: none; }
@media(max-width: 768px) {
.navi-wrap { display: none; }
.navi-wrap > .navi-wrap-inner { display: flex; }
.navi-wrap > .navi-wrap-inner > .navi-title { display: none; }
.navi-wrap > .navi-wrap-inner > .navi-pos { margin: 0; padding-left: 10px; }
}

.page-wrap-block { display: block; }
/* 페이징 */
.pg_wrap { clear: both; margin: 0px 0px 20px 0px; padding: 20px 0px 20px 0px; text-align: center; }
.pg {}
.pg a:focus,
.pg a:hover { text-decoration:none; color: var(--primary); }
.pg_page,
.pg_current { display:inline-block; margin: 0px 2.5px; width: 27px; height: 27px; line-height: 25px; text-align:center; text-decoration:none; font-size:14px; background-color:#fff; color:#888; border:1px solid #ddd; vertical-align:middle; font-weight:normal; border-radius: 50%; }
.pg_page {}
.pg_current { background-color: var(--primary); border-color: var(--primary); color:#fff;}
.pg_start, .pg_end, .pg_prev, .pg_next {text-indent:-9999em;}
.pg_image { text-indent: -9999em; background-position: center center; background-repeat: no-repeat; background-size: 50%; }
.pg_start {background:url('/images/pg_start.png') center center no-repeat;}
.pg_end {background:url('/images/pg_end.png') center center no-repeat;}
.pg_prev {background:url('/images/pg_prev.png') center center no-repeat;}
.pg_next {background:url('/images/pg_next.png') center center no-repeat;}
.pg_empty {display:none}
.pg_prev.pg_empty, .pg_next.pg_empty {display:inline-block; width:0px !important;border:0; padding:0px; }

.input_text, .input_email, .input_phone { padding: .5rem .75rem; border: 1px solid #ccc; }
.input_textarea { width: 100%; min-height: 120px; padding: .5rem .75rem; border: 1px solid #ccc; }
.input_select { padding: 0.5rem 0.75rem; padding-right: 30px; border: 1px solid #ccc; }

.dtable-flex { display: flex; }
.dtable-flex-wrap { flex-wrap: wrap; }
.dtable-flex-center { justify-content: center; }
.dtable-flex-right  { justify-content: flex-end; }
.dtable-flex-between { justify-content: space-between; }
.dtable-flex > button:not(:last-child) { margin-right: 5px; }
.align-left { text-align: left !important; }
.align-center { text-align: center !important; }
.align-right { text-align: right !important; }

/* flex width */
.wfpx-10  { flex: 0 0 10px; max-width: 10px; }
.wfpx-20  { flex: 0 0 20px; max-width: 20px; }
.wfpx-30  { flex: 0 0 30px; max-width: 30px; }
.wfpx-40  { flex: 0 0 40px; max-width: 40px; }
.wfpx-50  { flex: 0 0 50px; max-width: 50px; }
.wfpx-60  { flex: 0 0 60px; max-width: 60px; }
.wfpx-70  { flex: 0 0 70px; max-width: 70px; }
.wfpx-80  { flex: 0 0 80px; max-width: 80px; }
.wfpx-90  { flex: 0 0 90px; max-width: 90px; }
.wfpx-100 { flex: 0 0 100px; max-width: 100px; }
.wfpx-110 { flex: 0 0 110px; max-width: 110px; }
.wfpx-120 { flex: 0 0 120px; max-width: 120px; }
.wfpx-130 { flex: 0 0 130px; max-width: 130px; }
.wfpx-140 { flex: 0 0 140px; max-width: 140px; }
.wfpx-150 { flex: 0 0 150px; max-width: 150px; }
.wfpx-160 { flex: 0 0 160px; max-width: 160px; }
.wfpx-170 { flex: 0 0 170px; max-width: 170px; }
.wfpx-180 { flex: 0 0 180px; max-width: 180px; }
.wfpx-190 { flex: 0 0 190px; max-width: 190px; }
.wfpx-200 { flex: 0 0 200px; max-width: 200px; }
.wfpx-210 { flex: 0 0 210px; max-width: 210px; }
.wfpx-220 { flex: 0 0 220px; max-width: 220px; }
.wfpx-230 { flex: 0 0 230px; max-width: 230px; }
.wfpx-240 { flex: 0 0 240px; max-width: 240px; }
.wfpx-250 { flex: 0 0 250px; max-width: 250px; }
.wfpx-260 { flex: 0 0 260px; max-width: 260px; }
.wfpx-270 { flex: 0 0 270px; max-width: 270px; }
.wfpx-280 { flex: 0 0 280px; max-width: 280px; }
.wfpx-290 { flex: 0 0 290px; max-width: 290px; }
.wfpx-300 { flex: 0 0 300px; max-width: 300px; }
.wfpe-10  { flex: 0 0 10%; max-width: 10%; }
.wfpe-15  { flex: 0 0 15%; max-width: 15%; }
.wfpe-20  { flex: 0 0 20%; max-width: 20%; }
.wfpe-25  { flex: 0 0 25%; max-width: 25%; }
.wfpe-30  { flex: 0 0 30%; max-width: 30%; }
.wfpe-31  { flex: 0 0 31%; max-width: 31%; }
.wfpe-32  { flex: 0 0 32%; max-width: 32%; }
.wfpe-33  { flex: 0 0 33%; max-width: 33%; }
.wfpe-34  { flex: 0 0 34%; max-width: 34%; }
.wfpe-35  { flex: 0 0 35%; max-width: 35%; }
.wfpe-36  { flex: 0 0 36%; max-width: 36%; }
.wfpe-37  { flex: 0 0 37%; max-width: 37%; }
.wfpe-38  { flex: 0 0 38%; max-width: 38%; }
.wfpe-39  { flex: 0 0 39%; max-width: 39%; }
.wfpe-40  { flex: 0 0 40%; max-width: 40%; }
.wfpe-41  { flex: 0 0 41%; max-width: 41%; }
.wfpe-42  { flex: 0 0 42%; max-width: 42%; }
.wfpe-43  { flex: 0 0 43%; max-width: 43%; }
.wfpe-44  { flex: 0 0 44%; max-width: 44%; }
.wfpe-45  { flex: 0 0 45%; max-width: 45%; }
.wfpe-46  { flex: 0 0 46%; max-width: 46%; }
.wfpe-47  { flex: 0 0 47%; max-width: 47%; }
.wfpe-48  { flex: 0 0 48%; max-width: 48%; }
.wfpe-49  { flex: 0 0 49%; max-width: 49%; }
.wfpe-50  { flex: 0 0 50%; max-width: 50%; }
.wfpe-51  { flex: 0 0 51%; max-width: 51%; }
.wfpe-52  { flex: 0 0 52%; max-width: 52%; }
.wfpe-53  { flex: 0 0 53%; max-width: 53%; }
.wfpe-54  { flex: 0 0 54%; max-width: 54%; }
.wfpe-55  { flex: 0 0 55%; max-width: 55%; }
.wfpe-56  { flex: 0 0 56%; max-width: 56%; }
.wfpe-57  { flex: 0 0 57%; max-width: 57%; }
.wfpe-58  { flex: 0 0 58%; max-width: 58%; }
.wfpe-59  { flex: 0 0 59%; max-width: 59%; }
.wfpe-60  { flex: 0 0 60%; max-width: 60%; }
.wfpe-61  { flex: 0 0 61%; max-width: 61%; }
.wfpe-62  { flex: 0 0 62%; max-width: 62%; }
.wfpe-63  { flex: 0 0 63%; max-width: 63%; }
.wfpe-64  { flex: 0 0 64%; max-width: 64%; }
.wfpe-65  { flex: 0 0 65%; max-width: 65%; }
.wfpe-66  { flex: 0 0 66%; max-width: 66%; }
.wfpe-67  { flex: 0 0 67%; max-width: 67%; }
.wfpe-68  { flex: 0 0 68%; max-width: 68%; }
.wfpe-69  { flex: 0 0 69%; max-width: 69%; }
.wfpe-70  { flex: 0 0 70%; max-width: 70%; }
.wfpe-75  { flex: 0 0 75%; max-width: 75%; }
.wfpe-80  { flex: 0 0 80%; max-width: 80%; }
.wfpe-85  { flex: 0 0 85%; max-width: 85%; }
.wfpe-90  { flex: 0 0 90%; max-width: 90%; }
.wfpe-100 { flex: 1 1 100%; max-width: 100%; }
.wf-auto  { flex: 1 1 auto; max-width: 100%; min-width: 120px; }
.wf-align-left  { width: 100%; text-align: left !important; }
.wf-align-right { width: 100%; text-align: right !important; }
.wf-ml-auto { margin-left: auto; }

.border-radius-25r { border-radius: .25rem; }
.border-radius-50r { border-radius: .5rem; }
.border-radius-5p { border-radius: 5px; }
.border-radius-25p { border-radius: 25px; }

.tbl-wrap { position: relative; width: 100%; }
.tbl-wrap > table { width: 100%; border-collapse: collapse; border-spacing: 0; }
.tbl-wrap > table thead th { background-color: var(--lightgray); padding: 12px; text-align: center; border-bottom: 1px solid var(--colorgray); font-weight: 400; }
.tbl-wrap > table tbody td { border-bottom: 1px solid var(--colorgray); text-align: center; padding: 12px; }

/* modal */
@media (min-width: 992px) {
html.noscroll body { padding-right: 17px; }
}
.myModal { position: fixed; top: 0; left: 0; z-index: 9999; display: none; width: 100%; height: 100%; overflow: hidden; outline: 0; transition: all 0.5s ease-in-out; background: rgba(0,0,0,.7); }
.myModal-dialog { position: relative; display: flex; flex-direction: column; width: 100%; pointer-events: none; max-height: calc(100% - 1.5rem); margin: 1.75rem auto; }
.myModal-dialog:before { display: block; width: 100%; height: 0px; content: ""; }
.myModal-dialog:after { display: block; width: 100%; height: 0px; content: ""; }
.myModal-content { position: relative; display: flex; flex-direction: column; width: 100%; pointer-events: auto; background-color: #fff; border: 1px solid rgba(0,0,0,.2); border-radius: .3rem; outline: 0; overflow: hidden; max-height: calc(100vh - 3.5rem); top: -100px; transition: all 0.5s ease-in-out; }
.myModal-content.open { top: 0; opacity:1; visibility: visible; transition: all 0.5s ease-in-out; }
.myModal-header { display: flex; align-items: flex-start; justify-content: space-between; padding: 1rem 1rem; border-bottom: 1px solid #dee2e6; border-top-left-radius: .3rem; border-top-right-radius: .3rem; flex-shrink: 0; }
.myModal-header .header-title { align-self: center; }
.myModal-body { position: relative; -ms-flex: 1 1 auto; flex: 1 1 auto; padding: 1rem; overflow-y: auto; }
.myModal-body::-webkit-scrollbar{ width: 3px; background: var(--bgbase); box-sizing: border-box; border-radius: 3px;}
.myModal-content .myModal-body::-webkit-scrollbar-thumb{ width: 3px; box-sizing: border-box; border-radius: 3px; background: var(--bgbase); }
.myModal-content .myModal-body::-webkit-scrollbar-track{}
.myModal-footer { display: flex; align-items: center; justify-content: flex-end; padding: 1rem; border-top: 1px solid #dee2e6; border-bottom-right-radius: .3rem; border-bottom-left-radius: .3rem; flex-shrink: 0; }
.myModal .myModal-header button.closex,
.myModal .myModal-footer button.closex{ position: relative; width: 50px; height: 50px !important; padding: 0 !important; border-radius: 0; border: 0; background: transparent; outline: none; box-shadow: none; }
.myModal .myModal-header button.closex:before,
.myModal .myModal-header button.closex:after,
.myModal .myModal-footer button.closex:before, 
.myModal .myModal-footer button.closex:after{ content: ""; margin: auto; display: block; width: 50%; height: 1px; background: #000; }
.myModal .myModal-header button.closex:before,
.myModal .myModal-footer button.closex:before{ transform: rotate(-45deg); }
.myModal .myModal-header button.closex:after,
.myModal .myModal-footer button.closex:after{ transform: rotate(45deg); }
.myModal .body-closex { position: absolute; right: 5px; top: 5px; width: 40px; height: 40px !important; padding: 0 !important; border-radius: 0; border: 0; background: transparent; outline: none; box-shadow: none; }
.myModal .body-closex:before,
.myModal .body-closex:after { content: ""; margin: auto; display: block; width: 50%; height: 1px; background: #000; }
.myModal .body-closex:before{ transform: rotate(-45deg); }
.myModal .body-closex:after{ transform: rotate(45deg); }
@media (max-width: 992px) {
.myModal .myModal-dialog { max-height: 100%; margin: 0 auto; }
.myModal .myModal-content { max-height: 100vh; }
}

/*sidequick*/
#sidetab { z-index: 99999; position: fixed; top: 0px; left: 0; right: 0; }
#sidetab .sidetab { width: 100%; margin:auto; position:relative; }
#sidetab > .sidetab > .scroll_wrap { }
#sidetab > .sidetab > .scroll_wrap > div { margin-bottom: .5rem; }

/* flex table */
.flex-table-wrap { position: relative; width: 100%; }
.flex-table-wrap > ul { }
.flex-table-wrap > ul > li { display: flex; }
.flex-table-wrap > ul > li > div { }

/* flex-row */
.row-wrap { position: relative; display: flex; flex-wrap: wrap; width: 100%; }
.row-wrap > dl { flex: 1 1 50%; max-width: 50%; display: flex; border-bottom: 1px solid #d7d7d7; }
.row-wrap > dl > dt { position: relative; flex: 1 1 30%; max-width: 30%; padding: 12px 0 12px 15px; background: #fafafa; }
.row-wrap > dl > dd { position: relative; flex: 1 1 70%; max-width: 70%; padding: 12px 8px 12px 15px; align-self: center; }
.row-wrap > dl > dt span.require { position: relative; }
.row-wrap > dl > dt span.require:after { position: absolute; right: -8px; top: 7px; display: inline-block; content: ''; width: 3px; height: 3px; background: #e83e8c; border: 1px solid #e83e8c; border-radius: 50%; }
.row-wrap > dl.dlf { flex: 1 1 100%; max-width: 100%; }
.row-wrap > dl.dlf > dt { flex: 1 1 15%; max-width: 15%; }
.row-wrap > dl.dlf > dd { flex: 1 1 85%; max-width: 85%; }
.row-wrap > dl > dd > .form-wrap { position: relative; width: 100%; }
.row-wrap > dl > dd > .form-flex { position: relative; display: flex; }
.row-wrap > dl > dd > .form-flex > div { margin-right: 10px; }
.row-wrap > dl > dd > .form-flex > div:last-child { margin-right: 0; }
.row-wrap > dl > dd > .form-input .input_text,
.row-wrap > dl > dd > .form-input .input_select { width: 100%; }
.row-wrap > dl > dd > .form-input.from-flex .input_text { width: auto; }
.row-wrap > dl > dd > .form-input .byte_view { position: absolute; top: 0; right: 0; padding: .5rem .375rem; font-size: 12px; color: #17a2b8; }
.row-wrap > dl > dd > .form-guide-box { margin: 10px 0; font-size: 14px; letter-spacing: -.1em; }
.row-btn-wrap { position: relative; width: 100%; display: flex; justify-content: center; margin: 35px 0; }
.row-btn-wrap .btn { display: inline-block; padding: 12px; text-align: center; min-width: 160px; margin-right: 8px; background-color: #fafafc; border-radius: 0.25; }
.row-btn-wrap .btn:last-child { margin-right: 0; }
.row-btn-wrap .btn-cancel { background-color: #6c757d; color: #fff; }
.row-btn-wrap .btn-submit { background-color: #007bff; color: #fff; }
.row-wrap-cols { position: relative; display: flex; flex-direction: column; } 
@media (max-width: 768px) {
    .row-wrap > dl { flex: 1 1 100%; max-width: 100%; }
    .row-wrap > dl.dlf > dt { flex: 1 1 30%; max-width: 30%; }
    .row-wrap > dl.dlf > dd { flex: 1 1 70%; max-width: 70%; }
}

/* article list */
.article-desc { position: relative; padding: 12px 15px; border: 1px solid #ddd; border-radius: 8px; margin-bottom: 12px; }
.article-desc:first-child { margin-top: 15px; }
.article-desc:last-child { margin-bottom: 0; }
.article-desc .article-image { position: absolute; width: 50px; }
.article-desc .article-image img { width: 100%; height: auto; }
.article-desc .article-image ~ .article-header,
.article-desc .article-image ~ .article-subject { padding-left: 70px; }
.article-desc .article-header { display: flex; }
.article-desc .article-header > span { display: inline-block; margin-right: 8px; align-self: center; }
.article-desc .article-header > span.state { padding: 2px 8px; font-size: 14px; background: #6c757d; color: #fff; text-align: center; border-radius: 3px; }
.article-desc .article-header > span.state.complete { background: #6ea82f; }
.article-desc .article-header > span:last-child { margin-right: 0; }
.article-desc .article-header > .star { margin-left: auto; }
.article-desc .article-subject { display: flex; padding: 8px 0 5px 8px; }
.article-desc .article-subject span { display: inline-block; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 32px; }
.article-desc .article-content .desc-content { margin-top: 5px; padding: 8px 0 8px 12px; }
.article-desc .article-content .desc-sub-article { margin-top: 15px; padding: 15px 12px; background: #f9f9f9; border-radius: 8px; }
.article-desc .article-content .desc-sub-article p.sub-article-subject { font-weight: 500; }
.article-desc .article-content .desc-sub-article p.sub-article-content { }
.article-desc button { position: absolute; top: 28px; right: 15px; display: inline-block; background-color: transparent; padding: 0; }
.article-desc button img { width: 13px !important; height: auto; }
.article-btn { margin-top: 5px; text-align: right; }
.article-btn-head { margin-bottom: 8px; }
.article-btn .btn { }
.article-btn .btn_write { padding: 4px 12px; border: 1px solid var(--primary); color: var(--primary); background-color: #fff; border-radius: 5px; font-size: 14px; }

/* table */
.dtable-form { position: relative; width: 100%; display: flex; flex-wrap: wrap; border-top: 1px solid #d6dce7; }
.dtable-form > .dl { position: relative; flex: 1 1 50%; max-width: 50%; display: flex; border-bottom: 1px solid #d6dce7; }
.dtable-form > .dl.dlf { position: relative; flex: 1 1 100%; max-width: 100%; }
.dtable-form > .dl > .dth { flex: 1 1 25%; max-width: 25%; padding: 10px; }
.dtable-form > .dl > .dtd { flex: 1 1 75%; max-width: 75%; padding: 10px; }
.dtable-form > .dl.dlf > .dth { flex: 1 1 12.5%; max-width: 12.5%; }
.dtable-form > .dl.dlf > .dtd { flex: 1 1 87.5; max-width: 87.5%; }
.dtable-button-wrap { margin: 25px 0; display: flex; }
.dtable-button-wrap > .btn { margin-right: 8px; }
.dtable-button-wrap > .btn:last-child { margin-right: 0; }

/* mypage write form */
.mypage-write-form { }
.mypage-write-form > .mypage-write-item { display: flex; border: 1px solid #ddd; border-radius: 8px; padding: 12px; margin-bottom: 25px; }
.mypage-write-form > .mypage-write-item > .image { flex: 0 0 60px; max-width: 60px; }
.mypage-write-form > .mypage-write-item > .image img { width: 100%; height: auto; }
.mypage-write-form > .mypage-write-item > .item { padding-left: 25px; align-self: center; }
.dtable-form.tbl-write-form { border: 0; }
.tbl-write-form > .dl { flex: 1 1 100%; max-width: 100%; border: 0; }
.tbl-write-form > .dl.dlf > .dth { display: flex; flex: 1 1 20%; max-width: 20%; background-color: transparent; border: 0; padding: 12px 8px; margin-bottom: .25rem; }
.tbl-write-form > .dl.dlf > .dtd { flex: 1 1 80%; max-width: 80%; padding: 0; padding: 12px 8px; }
.tbl-write-form > .dl+.dl { margin-top: .75rem; }
.tbl-write-form > .dl.dlf > .dth .req { position: relative; display: inline-block; font-weight: 500; align-self: center; }
.tbl-write-form > .dl.dlf > .dth .req:after { position: absolute; content: '*'; color: #ff0c0c; right: -10px; }
.tbl-write-form > .dl.dlf > .dth .chk { align-self: center; }
.tbl-write-form > .dl.dlf > .dtd .frm-input { }
.tbl-write-form > .dl.dlf > .dtd .frm-input input[type="text"],
.tbl-write-form > .dl.dlf > .dtd .frm-input input[type="password"] { width: 100%; background: #f6f6f6; border: 1px solid #f6f6f6; padding: .5rem .75rem; border-radius: .25rem; }
.tbl-write-form > .dl.dlf > .dtd .frm-input textarea { width: 100%; height: 160px; background: #f6f6f6; border: 1px solid #f6f6f6; padding: .5rem .75rem; border-radius: .25rem; }
.tbl-write-form > .dl.dlf.phone > .dtd .frm-input-row { justify-content: space-between; }
.tbl-write-form > .dl.dlf.phone > .dtd .frm-input { flex: 1 1 32%; max-width: 32%; }
.tbl-write-form > .dl.dlf.address > .dtd .frm-zip { flex: 1 1 50%; max-width: 50%; }
.tbl-write-form > .dl.dlf.address > .dtd .btn_zip { background: #000; color: #fff; }
.tbl-write-form + .tbl-button-wrap { margin: 25px 0; display: flex; justify-content: center; }
.tbl-write-form + .tbl-button-wrap > .btn { flex: 1 1 auto; max-width: 50%; max-width: 260px; border-radius: 25px; margin-right: 10px; padding: 12px 0; text-align: center; font-size: 1rem; }
.tbl-write-form + .tbl-button-wrap > .btn:last-child { margin-right: 0; }
.tbl-write-form + .tbl-button-wrap > .btn_cancel { background-color: #fff; border: 1px solid var(--primary); color: var(--primary); }
.tbl-write-form + .tbl-button-wrap > .btn_submit { background-color: var(--accent); border: 1px solid var(--accent); color: #fff; }
@media(max-width: 576px) {
    .tbl-write-form + .tbl-button-wrap > .btn { font-size: 14px; padding: 8px 0; }
}


/* 전화상담 */
.modal-callcenter .myModal-dialog { max-width: 630px; }
.modal-callcenter .myModal-header { display: none; }
@media (max-width: 768px) {
.modal-callcenter .myModal-dialog { height: 100vh; }
.modal-callcenter .myModal-dialog:before,
.modal-callcenter .myModal-dialog:after { height: 0; }
.modal-callcenter .myModal-content { height: 100vh; max-height: 100vh; }
.modal-callcenter .myModal-body { padding: .5rem; }
}

/* 전화상담 */
.modal-login .myModal-dialog { max-width: 460px; height: 100vh; max-height: 100vh; justify-content: space-between; }
.modal-login .myModal-header { display: none; }

.pop-layer-inner { position: relative; }
.pop-layer-inner .pop-title { padding: 0 0 15px 0; color: #000; font-size: 22px; border-bottom: solid 3px #000; }
.pop-layer-inner .closex { position: absolute; right: 0; top: -7px; width: 40px; height: 40px; text-indent: -999em; white-space: nowrap; background: url(/images/ico-close.png) no-repeat center center; overflow: hidden; }
.pop-layer-inner .pop-guide { margin: 10px 0 20px 0; }
.pop-layer-inner .pop-guide > li { font-size: 13px; letter-spacing: -0.5px; }
.pop-layer-inner .pop-guide > li.time { color: #dc3545; }
.pop-layer-inner .pop-guide > li.time > span { display: inline-block; }
.pop-layer-inner .pop-guide > li.time > span:not(:first-child) { margin-left: 10px; }
.pop-layer-inner .detail-items { padding: 10px 25px 10px 25px; background-color: #f9fafc; }
.pop-layer-inner .detail-items h3 { font-size: 16px; font-weight: 500; color: #000; padding: 10px 0 10px; }
.pop-layer-inner .dtable-form { border: 0; }
.pop-layer-inner .dtable-form > .dl { border: 0; font-size: 13px; }
.pop-layer-inner .dtable-form > .dl > .dth { flex: 1 1 35%; max-width: 35%; padding: 1px 10px 3px 10px; }
.pop-layer-inner .dtable-form > .dl > .dtd { flex: 1 1 65%; max-width: 65%; padding: 1px 10px 3px 10px; }
.pop-layer-inner .dtable-form > .dl.dlf > .dth { flex: 1 1 17.5%; max-width: 17.5%; }
.pop-layer-inner .dtable-form > .dl.dlf > .dtd { flex: 1 1 82.5%; max-width: 82.5%; }
.pop-layer-inner .dtable-form > .dl.total { font-size: 16px; color: #dc3545; font-weight: 500; }
.pop-layer-inner .dtable-form > .dl.total > .dth { flex: 1 1 20%; max-width: 20%; }
.pop-layer-inner .dtable-form > .dl.total > .dtd { flex: 1 1 80%; max-width: 80%; text-align: right; }
@media (max-width: 768px) {
    .pop-layer-inner .detail-items { padding: 10px 15px; }
    .pop-layer-inner .dtable-form > .dl { flex: 1 1 100%; max-width: 100%; }
    .pop-layer-inner .dtable-form > .dl.dlf > .dth { flex: 1 1 100%; max-width: 100%; }
    .pop-layer-inner .dtable-form > .dl.dlf > .dtd { flex: 1 1 100%; max-width: 100%; }
    .pop-layer-inner .dtable-form > .dl.total > .dth { flex: 1 1 40%; max-width: 40%; }
    .pop-layer-inner .dtable-form > .dl.total > .dtd { flex: 1 1 60%; max-width: 60%; text-align: right; }
}
.pop-layer-inner .detail-input { padding: 10px 25px 10px 25px; }
.pop-layer-inner .detail-input .input_text { width: 100%;}
.pop-layer-inner .detail-input .dtable-form > .dl.dlf { margin-bottom: .5rem; }
.pop-layer-inner .detail-input .dtable-form > .dl.dlf > .dth { flex: 1 1 30%; max-width: 30%; }
.pop-layer-inner .detail-input .dtable-form > .dl.dlf > .dtd { flex: 1 1 70%; max-width: 70%; }
.pop-layer-inner .detail-input .dtable-form > .dl.dlf > .dtd > .input_text { width: 100%; border-radius: 0; }
.pop-layer-inner .detail-agree { border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; padding: 12px 0 19px 0; }
.pop-layer-inner .detail-agree .agree-item { margin-bottom: .25rem; }
.pop-layer-inner .detail-agree .agree-item-detail { padding-left: 17px; }
.pop-layer-inner .detail-agree .agree-content { display: none; }
.pop-layer-inner .detail-agree .agree-content.open { display: block; }
.pop-layer-inner .detail-agree .agree-content > .agree-content-inner { margin: 15px; padding: 8px 8px 12px 15px; border: 1px solid #ddd; max-height: 120px; overflow-y: auto; font-size: 12px !important; }
.pop-layer-inner .button_wrap { margin: 25px 0 5px 0; text-align: center; }
.pop-layer-inner .button_wrap .btn-submit { background-color: #4a4c58; border: 1px solid #4a4c58; font-size: 14px; padding: 8px 16px; color: #fff; width: 50%; }
.pop-layer-inner .button_wrap .btn-submit:hover { background-color: #dc3545; border: 1px solid #dc3545; }
.pop-layer-inner .button_wrap .btn-round { border-radius: 25px; }
.agree-check { position: relative; font-size: 13px; }
.agree-check > .check-item { position: absolute; z-index: -1; opacity: 0; }
.agree-check > .check-item + .check-label-circle { position: relative; padding-left: 20px; cursor: pointer; }
.agree-check > .check-item + .check-label-circle:before { display: inline-block; content: ''; position: absolute; top: 50%; left: 0; width: 17px; height: 17px; margin-top: -8px; border: 1px solid #ddd; border-radius: 50%; background-color: transparent; background-image: url(/images/ico_check_sm_off.png); background-size: 100% 100%; }
.agree-check > .check-item:checked + .check-label-circle:before { border: 1px solid #dc3545; background-color: #dc3545; border-radius: 50%; background-image: url(/images/ico_check_sm_on.png); }
.agree-check > label > span { display: inline-block; margin-left: 3px; }
.agree-check > label > span.agree_req { color: #dc3545; }
.agree-check > .btn-agree-toggle { display: block; position: absolute; top: 0; right: 3px; padding: 2px; }
.agree-check > .btn-agree-toggle > span { display: inline-block; width: 20px; height: 20px; overflow: hidden; background-image: url(/images/btn_toggle_down.png); }
.agree-check > .btn-agree-toggle.up > span { transform: rotate(180deg); }
@media (max-width: 768px) {
    .agree-check { font-size: 12px; letter-spacing: -0.5px; }
}
.pop-layer-inner div.dl > div.dtd select { padding: .375rem 1.25rem .375rem 1rem; margin-right: 5px; min-width: 130px; border: 1px solid #eee; color: #575757; }
#modal-item-wrap { position: relative; background-color: #fafafa; padding: 15px 0 15px 25px; max-height: 160px; overflow-y: auto; }
#modal-item-wrap::-webkit-scrollbar{ width: 3px; background: var(--accent); box-sizing: border-box; border-radius: 8px;}
#modal-item-wrap::-webkit-scrollbar-thumb{ width: 3px; box-sizing: border-box; border-radius: 0; background: var(--accent); }
#modal-item-wrap::-webkit-scrollbar-track{}

.modal-item-list { position: relative; width: 98%; height: 70px; padding: 10px; border: 1px solid #eee; cursor: pointer; display: flex; background-color: #fff; margin-bottom: 8px; }
.modal-item-list.on { border: 2px solid #e9314b; }
.modal-item-list > .item-image { flex: 0 0 50px; max-width: 50px; }
.modal-item-list > .item-image img { width: 100%; height: auto; }
.modal-item-list > .item-conf { padding-left: 25px; align-self: center; }
.modal-item-list > .item-conf > p.name { font-size: 13px; font-weight: 500; color: #000; line-height: 1.2; }
.modal-item-list > .item-conf > p.price { display: flex; }
.modal-item-list > .item-conf > p.price > b { display: inline-block; color: #e9314b; font-size: 13px; }
.modal-item-list > .item-conf > p.price > span { display: inline-block; align-self: flex-end; font-size: 12px; margin-left: 5px; }

/*sidequick*/
#sidetab { z-index: 99999; position: fixed; top: 0px; left: 0; right: 0; }
#sidetab .sidetab { width: 100%; margin:auto; position:relative; }
#sidetab > .sidetab > .scroll_wrap { }
#sidetab > .sidetab > .scroll_wrap > div { margin-bottom: .5rem; }