@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: #001F3F;
  --colorpurple: #6A0DAD;
  --colorpink: #FF69B4;
  --colorgray: #b9b9b9;
  --coloryellow: #FFD700;
  --colorgreen: #008000;
  --colorblue: #0000FF;
  --colorred: #FF0000;
  --colororange: #FFA500;
  --colorteal: #008080;
  --colormint: #3EB489;
  --colorbeige: #F5F5DC;
  --colorpeach: #FFDAB9;
  
  --lightnavy: #e3e9ee;
  --lightpurple: #E6E6FA;
  --lightpink: #FFB6C1;
  --lightgray: #EFEFEF;
  --lightyellow: #FFFACD;
  --lightgreen: #90EE90;
  --lightblue: #ADD8E6;
  --lightred: #FFA07A;
  --lightorange: #FFDAB9;
  --lightteal: #AFEEEE;
  --lightmint: #98FF98;
  --lightbeige: #F5F5DC;
  --lightpeach: #FFDAB9;

  --darknavy: #0A1128;
  --darkpurple: #4B0082;
  --darkpink: #8B0000;
  --darkgray: #454545;
  --darkyellow: #FFD700;
  --darkgreen: #006400;
  --darkblue: #0032a8;
  --darkred: #8B0000;
  --darkorange: #FF8C00;
  --darkteal: #008B8B;
  --darkmint: #3CB371;
  --darkbeige: #C5A89C;
  --darkpeach: #D88C83;
}

.custom-scroll::-webkit-scrollbar{
    width: 0px; 
}
.custom-scroll::-webkit-scrollbar-thumb{
    width: 0px;
}
.custom-scroll::-webkit-scrollbar-track{

}

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

/* 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; padding: 0; border-radius: 8px; margin-right: 10px; height: 48px; line-height: 48px; text-align: center; font-size: 17px; font-weight: 600; }
.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: ''; }