@charset "utf-8";
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css");/* regular-400, medium-500, semibold-600, bold-700 */
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; }
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; border-width: 1px; border-color: transparent; }
button:focus,input[type="submit"]:focus { outline:none; box-shadow: none; border-width: 1px; border-color: transparent; }
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; }
p { margin: 0; padding: 0; word-break: break-all; }
pre { overflow-x: scroll;}
a { color: var(--fontbasic); }
a:hover,a:hover { }
a, a:hover, a:focus { text-decoration: none; }
*, :after, :before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
.sound_only { display: none !important; }
.btn_cke_sc { display: none !important; }
.ml-auto { margin-left: auto !important; }
@media(min-width: 992px) {
    html.noscroll body { padding-right: 17px; }
}
:root { 
--colorblack: #000000;
--colorwhite: #ffffff;
--colornavy: #414796;
--colorpurple: #bf51e0;
--colorpink: #ff74bc;
--colorgray: #b4b4b4;
--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: #701889;
--darkpink: #ae005b;
--darkgray: #4a4a4a;
--darkyellow: #b08d00;
--darkgreen: #3d7814;
--darkblue: #005bae;
--darkred: #bb0000;
--darkorange: #b04200;
--darkteal: #007d71;
--darkmint: #0e924d;
--darkbeige: #785410;
--darkpeach: #e4897e;
}
.font-accent { color: var(--fontaccent); }
.font-dgray { color: var(--darkgray); }
.font-red { color: var(--colorred); }
/* 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; }
@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 { 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 { position: relative; }
.page-wrap-flex { display: flex; }
.page-wrap-flex > .page-wrap-side { flex: 1 1 22%; max-width: 22%; }
.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: 78%; padding-left: 50px; }
.page-wrap-flex > .page-wrap-container > .page-title { display: flex; border-bottom: 1px solid #ccc; font-size: 22px; padding-bottom: 8px; margin-bottom: 25px; }
@media(max-width: 992px) {
    #page-wrap { padding-top: 12px; }
    .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; }
}

div.page-title { }
div.page-title > h2 { display: flex; border-bottom: 1px solid #ccc; font-size: 22px; padding-bottom: 8px; margin-bottom: 25px; }
div.page-title > h2 > span { }
.page-wrap-block { display: block; }
@media(max-width: 992px) {
    div.page-title { }
    div.page-title > h2 { font-size: 20px; padding-left: 10px; margin-bottom: 15px; }
    div.page-title > h2 > span { }
}

/* 페이징 */
.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(--accent); }
.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(--accent); border-color: var(--accent); 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; border-radius: 0.25rem; }

.click-arrow:before,
.click-arrow:after { position: absolute; width: 0.4em; height: 1px; content: ''; background-color: var(--colorgray); right: -0.8em; }
.click-arrow:before { top: 38%; transform: translateY(-50%) rotate(45deg); }
.click-arrow:after { top: 55%; transform: translateY(-50%) rotate(-45deg); }
/* full wrap */
.fullwrap-out { position: relative; width: 100%; min-height: 100vh; display: flex; flex-direction: column; justify-content: space-between; }
.fullwrap-out:before { display: block; width: 100%; height: 1px; content: ''; }
.fullwrap-out:after  { display: block; width: 100%; height: 50px; content: ''; }
.fullwrap-in { position: relative; width: 100%; display: flex; flex-direction: column; justify-content: space-between; margin-top: 50px; }
.fullwrap-in:before,
.fullwrap-in:after { display: block; width: 100%; height: 1px; content: ''; }
.fullwrap-in .sub-page-title { display: none; }

/* radio checkbox */
.inp-custom { display: inline-block; vertical-align: middle; }
.inp-custom:not(:first-child) { margin-left: 25px; }
.inp-custom input[type="radio"],
.inp-custom input[type="checkbox"] { display: none; }
.inp-custom input[type="radio"] + label { font-size: 15px; color: #222; font-weight: 400; cursor: pointer; letter-spacing: -0.51px; }
.inp-custom input[type="radio"] + label:before { display: inline-block; width: 17px; height: 17px; margin-right: 7px; content: ''; vertical-align: -3px !important; background: url(/images/radio_off.png)left top no-repeat; background-size: auto 100%; }
.inp-custom input[type="radio"]:checked + label:before { background: url(/images/radio_on.png)left top no-repeat; background-size: auto 100%; }
.inp-custom input[type="checkbox"] + label { font-size: 15px; color: #222; font-weight: 400; cursor: pointer; letter-spacing: -0.51px; }
.inp-custom input[type="checkbox"] + label:before { display: inline-block; width: 17px; height: 17px; margin-right: 7px; content: ''; vertical-align: -3px !important; background: url(/images/check_off.png)left top no-repeat; background-size: auto 100%; }
.inp-custom input[type="checkbox"]:checked + label:before { background: url(/images/check_on.png)left top no-repeat; background-size: auto 100%; }
.inp-custom label > span { display: inline-block; margin-right: 3px; }
.inp-custom label > span:last-child { margin-right: 0; }

.radio_wrap { display: flex; }
.radio_wrap > .radio_box { margin-right: 10px; }
.radio_wrap > .radio_box:last-child { margin-right: 0; }
.radio_wrap > .radio_box > input[type="radio"] { position: absolute; z-index: -1; opacity: 0; }
.radio_wrap > .radio_box > label { display: inline-block; text-align: center; padding: .375rem .75rem; width: 100%; border: 1px solid #ddd; border-radius: .25rem; }

/* item icon basic wrap */
.item-icon-wrap { position: absolute; display: flex; top: 5px; left: 8px; }
.item-icon-wrap > .item_icon { flex: 0 0 auto; margin-right: 3px; min-width: 35px; }
.item-icon-wrap > .item_icon:last-child { margin-right: 0; }
.item-icon-wrap > .ic_basic > .ic { display: inline-block; width: 100%; font-size: 13px; padding: 0 6px; text-align: center; border-radius: 3px; line-height: 20px; }
@media(max-width: 768px) {
    .item-icon-wrap { }
    .item-icon-wrap > .item_icon { min-width: 30px; margin-right: 2px; }
    .item-icon-wrap > .item_icon:last-child { margin-right: 0; }
    .item-icon-wrap > .ic_basic > .ic { font-size: 12px; }
}

/* mypage write form */
.mypage-write-form { }
.mypage-write-form > .mypage-write-item { display: flex; border: 1px solid #ddd; border-radius: 8px; padding: 12px; }
.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; display: flex; flex-wrap: wrap; }
.tbl-write-form > .dl { display: flex; flex: 1 1 100%; max-width: 100%; border: 0; }
.tbl-write-form > .dl.dlf > .dth { display: flex; flex: 1 1 120px; max-width: 120px; background-color: transparent; border: 0; padding: 12px 8px; margin-bottom: .25rem; }
.tbl-write-form > .dl.dlf > .dtd { flex: 1 1 auto; max-width: calc( 100% -120px ); padding: 8px; align-self: center; }
.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"] { 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: 220px; border-radius: 0; 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(--accent); color: var(--accent); }
.tbl-write-form + .tbl-button-wrap > .btn_submit { background-color: var(--accent); border: 1px solid var(--accent); color: #fff; }
@media(max-width: 768px) {
    .tbl-write-form > .dl { flex-wrap: wrap; }
    .tbl-write-form > .dl.dlf > .dth { flex: 1 1 100%; max-width: 100%; padding: 4px 0 0 0; }
    .tbl-write-form > .dl.dlf > .dtd { flex: 1 1 100%; max-width: 100%; padding: 4px 0 0 0; }
    .tbl-write-form + .tbl-button-wrap > .btn {  max-width: 40%; font-size: 14px; padding: 8px 0; }
}

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

.circle-check { position: relative; display: block; width: 32px; height: 32px; background-color: #494949; border-radius: 50%; margin: 0 auto; }
.circle-check:before { position: absolute; width: 11px; height: 2px; background-color: #fff; transform: rotate(45deg); content: ''; left: 4px; top: 19px;}
.circle-check:after { position: absolute; width: 18px; height: 2px; background-color: #fff; transform: rotate(-45deg); content: ''; left: 10px; top: 17px; }

/* minus */
.minus { color: var(--fontaccent); }
span > .minus { padding-left: 6px; margin-left: 1px; }
.minus > .unit-w { position: relative; color: var(--fontaccent); }
.minus > .unit-w:before { position: absolute; width: 6px; height: 1px; background-color: var(--fontaccent); top: 50%; left: -7px; content: ''; }
dl > dt.minus { color: var(--fontaccent); }
dl > dd.minus { color: var(--fontaccent); }
dl > dd.minus > span.unit-w { position: relative; color: var(--fontaccent); }
dl > dd.minus > span.unit-w:before { position: absolute; width: 7px; height: 1px; background-color: var(--fontaccent); top: calc( 50% - 1px ); left: -10px; content: ''; }