@charset "utf-8";
html { margin: 0; overflow-y:scroll; }
html.noscroll, html.panelopen { overflow: hidden; }
body { margin: 0; padding: 0; font-size: 1rem; font-family: 'Noto Sans Kr', 'NanumGothic', 'Malgun Gothic','Exo 2', 'Work Sans', 'Montserrat'; font-weight: 400; color: #333; }
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 { 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, input, button, select, img { vertical-align:middle; margin: 0; }
input, button { margin: 0; padding: 0; }
button, input[type="submit"] { cursor: pointer; }
button:focus,input[type="submit"]:focus { outline:none; border-color: transparent; box-shadow: none; }
textarea { resize: none; }
select { -webkit-appearance:none;  -moz-appearance:none; appearance:none; padding-right:30px; background:#fff url("/img/select_arrow.png") right 10px center no-repeat; }
input, select, button, textarea { font:inherit; margin:0px; padding:0px; outline:none; }
input::-ms-clear { display: none;}
select::-ms-expand { background-color: transparent; border: 0; }
select:focus::-ms-value {background: transparent; color: inherit; }
p { margin: 0; padding: 0; word-break: break-all; }
pre { overflow-x: scroll;}
a { color: #333; }
a:hover, a:hover { color: #014254; }
a, a:hover, a:focus { text-decoration: none; }
*, :after, :before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
input[type=text],input[type=password], textarea { outline: none; box-shadow: none; }
input[type=text]:focus,input[type=password]:focus, textarea:focus,select:focus { outline: none; box-shadow: none; }
span[data-class],div[data-class],p[data-class],li[data-class] { cursor: pointer; }
#hd_login_msg, .sound_only { display: none !important; }
.btn_cke_sc { display: none !important; }
/* page layout */
#container { display: flex; display: ms-flexbox!important; }
#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; }
}
@media (max-width: 778px) {
#templateSect1 .templateSect {
    padding-top: 97px;
}
}
/* 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; }
}

/* font */
.scdream1 { font-family: 'SCDream1'; }
.scdream2 { font-family: 'SCDream2'; }
.scdream3 { font-family: 'SCDream3'; }
.scdream4 { font-family: 'SCDream4'; }
.scdream5 { font-family: 'SCDream5'; }
.scdream6 { font-family: 'SCDream6'; }
.scdream7 { font-family: 'SCDream7'; }
.scdream8 { font-family: 'SCDream8'; }
.scdream9 { font-family: 'SCDream9'; }
.gmarketb { font-family: 'GmarketSansB'; }
.gmarketl { font-family: 'GmarketSansL'; }
.gmarketm { font-family: 'GmarketSansM'; }
.nexonb   { font-family: 'NexonLv2GothicB'; }
.nexonl   { font-family: 'NexonLv2GothicL'; }
.nexonm   { font-family: 'NexonLv2GothicM'; }
.nexonr   { font-family: 'NexonLv2Gothic'; }
.cafe24sr { font-family: 'Cafe24sSurround'; }


/* 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; }
.fullwrap-in:before,
.fullwrap-in:after { display: block; width: 100%; height: 1px; content: ''; }

/* form */
.input_text, .input_email, .input_phone { padding: .375rem .75rem; border: 1px solid #ccc; border-radius: .25rem; }
.input_select { padding: .375rem .75rem; padding-right: 30px; border: 1px solid #ccc; border-radius: .25rem; }
.input_select.big { padding: .5rem.75rem; }
.input_radio_label { padding: .375rem .75rem; border-radius: .25rem; border: 1px solid #ccc; margin: 0; }
.input_textarea { padding: .375rem .75rem; border: 1px solid #ccc; border-radius: .25rem; min-height: 80px; }

.radio_wrap { display: flex; }
.radio_wrap .radio_box { margin-right: 10px; }
.radio_wrap .radio_box:last-child { margin-right: 0; }
.radio_wrap input[type="radio"] { position: absolute; z-index: -1; opacity: 0; }
.radio_wrap label.big_label { position: relative; padding-left: 25px; cursor: pointer; }
.radio_wrap label.big_label:before { position: absolute; left: 0; top: 2px; display: inline-block; content: ''; width: 21px; height: 21px; border: 1px solid #ddd; border-radius: .25rem; }
.radio_wrap input[type="radio"]:checked~ label.big_label:before { font-family: 'fontAwesome'; content: '\f00c'; border: 1px solid #000; line-height: 21px; text-align: center; font-size: 16px; }
.check_wrap { display: flex; justify-content: space-between; }
.check_wrap input[type="checkbox"] { position: absolute; z-index: -1; opacity: 0; }
.check_wrap label.big_label { position: relative; padding-left: 30px; cursor: pointer; margin-bottom: 5px; }
.check_wrap label.big_label:before { position: absolute; left: 0; top: 2px; display: inline-block; content: ''; width: 21px; height: 21px; border: 1px solid #ddd; border-radius: .25rem; }
.check_wrap input[type="checkbox"]:checked~ label.big_label:before { font-family: 'fontAwesome'; content: '\f00c'; border: 1px solid #000; line-height: 21px; text-align: center; font-size: 16px; }
.check_wrap label.sm_label { position: relative; padding-left: 25px; cursor: pointer; }
.check_wrap label.sm_label:before { position: absolute; left: 0; top: 2px; display: inline-block; content: ''; width: 17px; height: 17px; border: 1px solid #ddd; border-radius: .25rem; }
.check_wrap input[type="checkbox"]:checked~ label.sm_label:before { font-family: 'fontAwesome'; content: '\f00c'; border: 1px solid #000; line-height: 17px; text-align: center; font-size: 13px; }

/* button */
button { padding: .375rem .75rem; text-align: center; outline: none; box-shadow: none; border: 0; border-radius: .25rem; /*height: calc(1.5em + .75rem + 2px);*/ }
button:focus { outline: none; box-shadow: none; border: 0; }
button.big { padding: .5rem .75rem; }

/* button wrap */
.button_wrap { width: 100%; display: flex; justify-content: center; }
.button_wrap button { position: relative; flex: 1; max-width: 50%; margin-right: 10px; }
.button_wrap button:last-child { margin-right: 0; }
.bton { padding: .375rem .75rem; text-align: center; outline: none; box-shadow: none; border: 0; border-radius: .25rem; /*height: calc(1.5em + .75rem + 2px);*/ }
.bton-bg-dark { background: #212121; color: #fff; }
.bton-bg-gray { background: #757575; color: #fff; }
.bton-bg-kakao { background: #ffe500; color: #212121; }
.bton-bg-accent { background: #7c4dff; color: #fff; }
.bton-bg-turquoise { background: #5bbdc8; color: #fff; }
.bton-bg-pomegranate { background: #e12e4b; color: #fff; } 
.bton-sns-img { width: 1.5em; height: auto; vertical-align: middle; margin-right: 5px; }

/* mymodal basic */
@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: 1px; content: ""; }
.myModal-dialog:after { display: block; width: 100%; height: 1px; content: ""; }
.myModal-content { position: relative; display: -ms-flexbox; display: flex; -ms-flex-direction: column; 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: -ms-flexbox; display: flex; -ms-flex-align: start; align-items: flex-start; -ms-flex-pack: justify; justify-content: space-between; padding: 1rem 1rem; border-bottom: 1px solid #dee2e6; border-top-left-radius: .3rem; border-top-right-radius: .3rem; -ms-flex-negative: 0; 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-footer { display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; -ms-flex-pack: end; justify-content: flex-end; padding: 1rem; border-top: 1px solid #dee2e6; border-bottom-right-radius: .3rem; border-bottom-left-radius: .3rem; -ms-flex-negative: 0; flex-shrink: 0; }
.myModal .myModal-header {
   background-color:  #e6007e !important;
}
.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: #fff; }
.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); }

@media (max-width: 992px) {
.myModal .myModal-dialog { max-height: 100%; margin: 0 auto; }
.myModal .myModal-content { max-height: 100vh; }
}

/* fadedown Modal */
.fadedown .myModal-dialog { max-width: 400px; }
.fadedown .myModal-content {
    border-radius: 0;
    border: 0;
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-height: calc(100% - 1.5rem);
}
.fadedown .myModal-header { border-radius: 0; padding: 0; border: 0; }
.fadedown .header-title { align-self: center; color: rgba(86,61,124,1); padding-left: 20px; letter-spacing: -2px; }
.fadedown .myModal-footer { display: none; }

/*smcenter Modal */
.smcenter .myModal-dialog { width: auto; flex-direction: column; justify-content: space-between; height: 100vh; margin: 0 auto; }
.smcenter .myModal-dialog:before { display: block; width: 100%; height: 1px; content: ""; }
.smcenter .myModal-dialog:after { display: block; width: 100%; height: 1px; content: ""; }
.smcenter .myModal-dialog .myModal-content { align-self: center; }
.smcenter .myModal-footer { display: none; }

/* 전화 상담 모달 */
.myModal.dlqa { }
.myModal.dlqa .myModal-dialog { max-width: 400px; }
.myModal.dlqa .myModal-content { border-radius: 10px !important; border: 0; }
.myModal.dlqa .myModal-header { border-radius: 0; padding: 0; border: 0; background: #e6007e !important; }
.myModal.dlqa .header-title { align-self: center; color: #fff; padding-left: 20px; letter-spacing: -2px; }
.myModal.dlqa .myModal-footer { display: none; }
.myModal.dlqa .dtable_wrap .dtd .radio_wrap .radio_box input:checked+ label { border: 1px solid #e12e4b; color: #e12e4b; }

/* 팝업레이어 */
#hd_pop { z-index: 1090; position: relative; margin: 0 auto; height: 0; }
#hd_pop h2 { position: absolute; font-size: 0; line-height: 0; overflow: hidden; }
.hd_pops { position: absolute; background: #fff; z-index: 1090; }
.hd_pops img { max-width: 100%; }
.hd_pops_con {}
.hd_pops_footer { padding: 0; background: #000; color: #fff; text-align: left; position: relative; }
.hd_pops_footer:after { display: block; visibility: hidden; clear: both; content: ""; }
.hd_pops_footer button { padding: 10px; border: 0; color:#fff; border-radius: 0; }
.hd_pops_footer .hd_pops_reject { background: #000; text-align: left; }
.hd_pops_footer .hd_pops_close { background: #393939; position: absolute; top: 0; right: 0; border-radius: 0; }
@media (max-width: 576px) {
#hd_pop { background: #fff; }
.hd_pops { display: flex; flex-direction: column; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; background: rgba(0,0,0,0.3); z-index: 9999; }
.hd_pops:before,
.hd_pops:after { content: ''; height: 1px; }
.hd_pops_con { width: 90% !important; height: 80vh !important; background: #fff; margin: auto auto; }
.hd_pops_con img { width: 100% !important; height: auto !important; }
}

/* 페이징 */
.pg_wrap {clear:both;margin:0px 0px 20px 0px;padding:20px 0px 60px 0px;text-align:center}
.pg {}
.pg a:focus, .pg a:hover {text-decoration:none}
.pg_page, .qa_page, .pg_current {display:inline-block; margin:0px 2.5px; width:30px; height:30px; line-height:30px; text-align:center; text-decoration:none; font-family:'Montserrat'; font-size:15px; background-color:#fff; color:#888; border:1px solid #ddd; vertical-align:middle; font-weight:normal; }
.pg_page {}
.pg_current {background-color:#3f4553;border-color:#3f4553;color:#fff !important;}
.pg_start, .pg_end, .pg_prev, .pg_next {text-indent:-9999em;}
.pg_start {background:url('/img/pg_start.png') center center no-repeat;}
.pg_end {background:url('/img/pg_end.png') center center no-repeat;}
.pg_prev {background:url('/img/pg_prev.png') center center no-repeat;}
.pg_next {background:url('/img/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; }

/*sidetab*/
#sidetab img { width: 70px; height: auto; }
#rtab { position: absolute; top: 0; width: 80px; right: -100px; }
#ltab { position: absolute; top: 0; width: 80px; left: -100px; }
#rtab > div,
#ltab > div { margin-bottom: .375rem; }

/*sidequick*/
#rightquick { position: fixed; width: 240px; height: 100%; top: 0; right: 0; background-color: #fff; box-shadow: 0 10px 10px 0 rgba(199, 197, 197, 1); z-index: 9999; border-left: 1px solid #ddd; transition: all 0.5s ease-in-out; }
#rightquick.off { right: -240px; }
#rightquick .quickwrap { position: relative; }
#rightquick .quickwrap .inner_wrap { padding: 20px; }
#rightquick .quicklist { position: absolute; top: calc(50vh - 150px); right: 240px; transform: translate(0,-50%); background-color: #fff; border: 1px solid #ddd; border-right: 0; border-bottom: 0; }
#rightquick .quicklist ul li { width: 57px; padding: 15px 0; text-align: center; cursor: pointer; border-bottom: 1px solid #ddd; }
#rightquick .quicklist ul li i { font-size: 24px; }
#leftquick { position: fixed; width: 240px; height: 100%; top: 0; left: 0; background-color: #fff; box-shadow: 0 10px 10px 0 rgba(199, 197, 197, 1); z-index: 9999; border-left: 1px solid #ddd; transition: all 0.5s ease-in-out; }
#leftquick.off { left: -240px; }
#leftquick .quickwrap { position: relative; }
#leftquick .quickwrap .inner_wrap { padding: 20px; }
#leftquick .quicklist { position: absolute; top: calc(50vh - 150px); left: 239px; transform: translate(0,-50%); background-color: #fff; border: 1px solid #ddd; border-right: 0; border-bottom: 0; }
#leftquick .quicklist ul li { width: 57px; padding: 15px 0; text-align: center; cursor: pointer; border-bottom: 1px solid #ddd; }
#leftquick .quicklist ul li i { font-size: 24px; }

/* flex list table */
.list-wrap { position: relative; width: 100%; }
.list-wrap > ul.list { }
.list-wrap > ul.list > li { position: relative; display: flex; width: 100%; }
.list-wrap > ul.list > li > div { flex: 1 1 auto; padding: .5rem .75rem; text-align: center; }
.list-wrap > ul.list > li.list-head > div { border-top: 2px solid #666; border-bottom: 1px solid #ddd; padding: .75rem; background-color: #f1f1f1; }
.list-wrap > ul.list > li.list-body > div { border-bottom: 1px solid #ddd; }
.list-wrap > ul.list > li > div.num { flex: 1 1 60px; max-width: 60px; }
.list-wrap > ul.list > li > div.itemname { flex: 1 1 200px; max-width: 200px; white-space: nowrap; overflow: hidden; }
.list-wrap > ul.list > li > div.username { flex: 1 1 100px; max-width: 100px; }
.list-wrap > ul.list > li > div.writedate { flex: 1 1 100px; max-width: 100px; }
.list-wrap > ul.list > li > div.answer { flex: 1 1 100px; max-width: 100px; }
.list-wrap > ul.list > li.list-body > div.subject { text-align: left; }
.list-wrap-btn { margin-top: 25px; text-align: right; }
.list-wrap-btn > button { padding: .5rem .75rem; border-radius: 0; margin-right: 10px; min-width: 160px; }
.list-wrap-btn > button:last-child { margin-right: 0; }
.list-wrap-btn > button.btn-openwin { background-color: #2196F7; color: #fff; }
@media (max-width: 768px) {
.list-wrap > ul.list { border-top: 1px solid #666; }
.list-wrap > ul.list > li { flex-wrap: wrap; border-bottom: 1px solid #ddd; padding: 5px 10px; }
.list-wrap > ul.list > li > div.num { display: none; }
.list-wrap > ul.list > li.list-head { display: none; }
.list-wrap > ul.list > li.list-body > div { padding: 0; border: 0; text-align: left; }
.list-wrap > ul.list > li.list-body > div.subject { flex: 1 1 100%; max-width: 100%; line-height: 32px; }
.list-wrap > ul.list > li > div.itemname { flex: 0 0 auto; max-width: auto; font-size: 13px; padding-right: 10px; }
.list-wrap > ul.list > li > div.username { flex: 0 0 auto; max-width: auto; font-size: 13px; padding-right: 10px; }
.list-wrap > ul.list > li > div.writedate { flex: 0 0 auto; max-width: auto; font-size: 13px; padding-right: 10px; }
.list-wrap > ul.list > li > div.username { flex: 0 0 auto; max-width: auto; font-size: 13px; padding-right: 10px; }
.list-wrap > ul.list > li > div.answer { position: absolute; font-size: 13px; top: calc( 50% - 12px ); right: 8px; display: inline-block; text-align: center; padding: 4px 12px; background-color: #2196F7; color: #fff; border-radius: 8px; }
}

/* flex-row */
.row-wrap { position: relative; display: flex; flex-wrap: wrap; width: 100%; border-top: 1px solid #fff; }
.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%; padding: 12px 0 12px 15px; background: #fafafa; }
.row-wrap > dl.dlf > dd { flex: 1 1 85%; max-width: 85%; padding: 12px 8px 12px 15px; }
.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%; }
}

/* check-item */
.check-item-group { display: flex; flex-wrap: wrap; }
.check-item-group > .check-item-box:not(:last-child) { margin-right: 15px; }
.check-item { display: none; }
.check-label-button { display: inline-block; padding: .5rem .75rem; background-color: transparent; border: 1px solid #3d3d3d; text-align: center; color: #3d3d3d; cursor: pointer; }
.check-item:checked + .check-label-button { background-color: #3d3d3d; color: #fff; }

/* color bg */
.item-color { display: flex; }
.color-bg { width: 14px; height: 14px; display: inline-block; border-radius: 50%; margin-right: 5px; }
.color-bg:last-child { margin-right: 0; }
/* 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: 5px; }
.item-icon-wrap > .item_icon:last-child { margin-right: 0; }
.item-icon-wrap > .ic_basic > .ic { display: inline-block; font-size: 12px; padding: 0 6px; border-radius: 3px; line-height: 18px; }
/* ul */
ul.dot_list { }
ul.dot_list li { position: relative; color: #666; padding-left: 10px; font-size: 12px; }
ul.dot_list li:before { display: block; position: absolute; content: ''; width: 3px; height: 3px; top: 8px; left: 3px; border-radius: 50%; background: #666; }

/* list-board-wrap */
.list-board-wrap { position: relative; width: 100%; max-width: 100%; }
.board-list { display: flex; }
.board-list > div { position: relative; padding: 10px 0; text-align: center; font-size: 15px; }
.board-list > div.area    { flex: 0 0 70px; max-width: 70px; }
.board-list > div.subject { flex: 1 1 auto; text-align: center; }
.board-list > div.price   { flex: 0 0 110px; max-width: 110px; }
.board-list > div.name    { flex: 0 0 110px; max-width: 110px; }
.board-list.list-head {  border-top: 1px solid #252525; border-bottom: 1px solid #252525; }
.board-list.list-body { border-bottom: 1px solid #ddd; }
.board-list.list-body .subject { text-align: left; }
.list-board-wrap .btn-wrap { display: flex; justify-content: flex-end; margin: 25px 0; }
.list-board-wrap .btn-wrap .btn { margin-right: 5px; font-size: 15px; }
.list-board-wrap .btn-wrap .btn i { margin-right: 3px; }
.list-board-wrap .btn-wrap .btn:last-child { margin-right: 0; }
.list-board-wrap .btn-wrap .btn.btn-write { display: inline-block; padding: .375rem .75rem; box-shadow: 0 0 8px #8f8f8f40; background-color: #ef3c39; color: #fff; text-align: center; font-size: 12px; }
@media (max-width: 992px) {
}
@media (max-width: 768px) {
.item-list-board > div.title { font-size: 18px; padding-left: 10px; margin-bottom: 8px; }

}
@media (max-width: 576px) {
}

/* 구매후기,Q&A */
#use-best { position: relative; padding: 20px; display: none; }
#use-best .swiper-button-next,
#use-best .swiper-button-prev { color: #595656; display: none; }
#use-best .swiper-pagination { display: none; position: relative; margin-top: 10px; bottom: unset; left: unset; }
#use-best .swiper-pagination-bullet { width: 13px; height: 13px; }
#use-best .swiper-pagination-bullet-active { background: #17a2b8; opacity: .7; }
.use-best-box { position: relative; padding: 20px 10px !important; border-radius: 12px; }
.use-best-box .best-inner-box { } /* swiper-container */
.use-best-box .best-inner-box > ul { }
.use-best-box .best-inner-box > ul > li { 
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 12px;
}
.use-best-box .best-inner-box > ul > li .item_image { position: relative; max-width: 100%;}
.use-best-box .best-inner-box > ul > li .item_image img { 
    width: 156px;
    height: 156px;
    object-fit: fill;
    /* border: 1px solid #656564; */
    /*border-radius: 10px;
    box-shadow: 0 0 8px #8f8f8f40;*/
}
.use-best-box .best-inner-box > ul > li .item_name { 
    background-color: #fff !important;
    color: #000;
    text-align: right;
    font-size: 16px;
    padding: 10px 4px 4px 4px;
    border-radius: 4px;
}
.use-best-box .best-inner-box > ul > li .item_foot { 
    display: flex;
    flex-direction: column;
    justify-content: start;
    min-width: 55% !important;
    padding: 0 0 0 10px;
}
.use-best-box .best-inner-box > ul > li .item_foot > .name { font-size: 13px; align-self: flex-end; font-family: 'Noto Sans KR',sans-serif; padding-top: 3px; }
.use-best-box .best-inner-box > ul > li .item_foot > .use-ico { margin-left: auto; display: flex; }
.use-best-box .best-inner-box > ul > li .item_foot > .use-ico > li { display: flex; }
.use-best-box .best-inner-box > ul > li .item_foot > .use-ico > li > .use-ico-btn { display: inline-block; width: 27px; height: 27px; cursor: pointer; }
.use-best-box .best-inner-box > ul > li .item_foot > .use-ico > li > .use-ico-btn > img { width: 100%; height: auto; }
.use-best-box .best-inner-box > ul > li .item_foot > .use-ico > li > .use-ico-num { font-size: 13px; align-self: flex-end; }
.list-board-wrap { margin-bottom: 25px; }
.list-board-wrap .board-list.list-head { 
    border: none;
    color: #ffff;
 }
.list-board-wrap .board-list > div { align-self: center; font-size: 12px; margin-right: 8px; }
.list-board-wrap .board-list > div:last-child { margin-right: 0; }
.list-board-wrap .num { flex: 0 0 50px; max-width: 50px; }
.list-board-wrap .image { flex: 0 0 50px; max-width: 50px; }
.list-board-wrap .image img { width: 65%; height: auto; border-radius: 8px; }
.list-board-wrap .model { flex: 0 0 120px; max-width: 120px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.list-board-wrap .star  { flex: 0 0 90px; max-width: 90px; }
.list-board-wrap .subject { flex: 1 1 auto; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.list-board-wrap .name { flex: 0 0 120px; max-width: 120px; }
.list-board-wrap .date { flex: 0 0 120px; max-width: 120px; }
.list-board-wrap .cols { flex: 0 0 120px; max-width: 120px; }
.list-board-wrap .cols > .answer { display: inline-block; text-align: center; padding: 2px 12px; background-color: #17a2b8; color: #fff; border-radius: .5rem; }
.list-board-wrap .cols > .answer.no { background-color: #6c757d; color: #fff; }
.use-star-wrap { }
.use-star-wrap > dl { display: flex; }
.use-star-wrap > dl > dt { flex: 0 0  auto; margin-right: 10px; }
.use-star-wrap > dl > dd { flex: 1 1  auto; }


#board-top-navigation {
    padding: 120px 0 50px 0 !important;
    background-color: #ffffff !important;
}
#board-top-navigation ul > li > a.active {
    border-color: #e6007e !important;
    color: #e6007e !important;
}

@media (max-width: 768px) {
#use-best { padding: 5px; }
#use-best .swiper-button-next,
#use-best .swiper-button-prev { display: none; }
.use-best-box { position: relative; padding: 15px; }
.use-best-box .box-use { } /* swiper-container */
.use-best-box .box-use > ul { }
.use-best-box .box-use > ul > li { position: relative; }
.use-best-box .box-use > ul > li .item_image { position: relative; }
.use-best-box .box-use > ul > li .item_image img { width: 100%; height: auto; border: 1px solid #656564; }
.use-best-box .box-use > ul > li .item_name { margin: 10px 0; background-color: <?php echo $config['cf_shop_basic_color'];?>; color: #fff; border-radius: .5rem; text-align: center; font-family: GmarketSansM,Noto Sans KR,sans-serif; padding: 3px 0 0 0; }
.use-best-box .box-use > ul > li .item_foot { display: flex; }
.use-best-box .box-use > ul > li .item_foot > .name { font-size: 12px; align-self: flex-end; font-family: GmarketSansM,Noto Sans KR,sans-serif; padding-top: 3px; }
.use-best-box .box-use > ul > li .item_foot > .use-ico { margin-left: auto; display: flex; }
.use-best-box .box-use > ul > li .item_foot > .use-ico > li { display: flex; }
.use-best-box .box-use > ul > li .item_foot > .use-ico > li > .use-ico-btn { display: inline-block; width: 27px; height: 27px; cursor: pointer; }
.use-best-box .box-use > ul > li .item_foot > .use-ico > li > .use-ico-btn > img { width: 100%; height: auto; }
.use-best-box .box-use > ul > li .item_foot > .use-ico > li > .use-ico-num { font-size: 13px; align-self: flex-end; }

.board-list.list-head { display: none; }
.board-list.list-body { flex-wrap: wrap; padding: 0 10px 8px 10px;     border-bottom: 1px solid #dddddd60;}
.board-list.list-body:first-child { 
    /*border-top: 2px solid #333;*/ 
}
.board-list.list-body > div { font-size: 13px; padding: 5px 0 2px 0; }
.list-board-wrap .board-list > .num { display: none; flex: 0 0 50px; max-width: 50px; }
.list-board-wrap .board-list > .image { flex: 0 0 50px; max-width: 50px; order: 0; }
.list-board-wrap .board-list > .image img { width: 100%; height: auto; border-radius: 8px; }
.list-board-wrap .board-list > .model { flex: 0 0 auto; max-width: auto; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; order: 2; }
.list-board-wrap .board-list > .star  { flex: 0 0 auto; max-width: 90px; order: 2; align-self: flex-end; }
.list-board-wrap .board-list > .subject { flex: 1 1 100%; max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; order: 1; }
.itemuse-list.list-board-wrap .board-list > .subject { max-width: calc( 100% - 70px ); line-height: 1.2; }
.list-board-wrap .board-list > .name { margin-left: auto; flex: 0 0 auto; max-width: auto; order: 2; }
.list-board-wrap .board-list > .date { flex: 0 0 auto; max-width: auto; order: 2; }
.list-board-wrap .board-list > .cols { flex: 0 0 auto; max-width: auto; order: 2; }
}


/* 이벤트 뷰 반응형 */


/* 구매후기 상세보기 */
.use_content { }
.use_content .use_content_info { width: 100%; }
.use_content .use_content_info img { width: 100%; height: auto; }
@media (max-width: 576px) {
.step .step_view { position: relative !important; width: 100% !important; padding-left: 0 !important; }
.use_content .use_content_image { width:100%; }
.use_content .use_content_info { width: 100%; }
}
/* box_wrap */
.box_wrap { position: relative; width: 100%; }
.box_wrap .box_header, .box_wrap .box_content, .box_wrap .box_space, .box_wrap .box_footer { padding: .5rem; }
.box_wrap .box_header { font-weight: 600;}
.box_wrap .box_header .box_image { max-width: 70px; }
.box_wrap .box_header .box_image img { width: 100%; height: auto; }
.box_wrap .box_header .box_subject { padding-left: 10px; align-self: center; }
.box_wrap .box_content { min-height: 400px; }
.box_wrap .box_content.iqanswer { min-height: 80px; }
.box_wrap .box_space { display: flex; }
.box_wrap .box_space .name { margin-left: auto; }
.box_wrap .box_space .date { margin-left: 10px; }
.box_wrap .box_space .box_sm_image { width: 60px;}
.box_wrap .box_space .box_sm_image img { width: 100%; height: auto; }
.box_wrap .box_space .box_model_name { margin-left: 10px; }
.box_wrap .input_text~button { }
.box_wrap .box_helper { display: block; font-size: 14px; color: #dc3545; }

/* table */
.dtable_wrap { display: flex; flex-wrap: wrap; width: 100%; }
.dtable_wrap .dth, .dtable_wrap .dtd, .dtable_wrap .dtm, .dtable_wrap .dtc, .dtable_wrap .dtf { padding: .5rem; font-size: 13px; }
.dtable_wrap .text-left { text-align: left;  }
.dtable_wrap .dtd .radio_wrap { width: 100%; display: flex; justify-content: space-between; }
.dtable_wrap .dtd .radio_wrap .radio_box { position: relative; margin-right: .25rem; flex: 1; max-width: 50%; }
.dtable_wrap .dtd .radio_wrap .radio_box:last-child { margin-right: 0; }
.dtable_wrap .dtd .radio_wrap .radio_box input[type="radio"] { position: absolute; z-index: -1; opacity: 0; }
.dtable_wrap .dtd .radio_wrap .radio_box label { width: 100%; text-align: center;  cursor: pointer; }
.dtable_wrap .dtd .radio_wrap .radio_box input:checked+ label { border: 1px solid #ddd; }
.dtable_wrap .dtd .input_text,.dtable_wrap .dtd .input_textarea,.dtable_wrap .dtd .input_select { width: 100%; }
.dtable_wrap .dtd .input_select .dl_model_option {
    max-width: 260px !important;
}
.dtable_wrap .dth { width: 25%;display: flex; align-self: start; }
.dtable_wrap .dtm { width: 30%; }
.dtable_wrap .dtd { width: 75%; }
.dtable_wrap .dtf { width: 100%; }
.dtable_wrap .dtc { width: 50%; }
.dtable_wrap > div > .input_text,
.dtable_wrap > div > .input_select { width: 100%; }
/* button wrap */
.button-wrap { width: 100%; display: flex; justify-content: center; margin: 4px 0; }
.button-wrap button { position: relative; flex: 1 1 auto; max-width: 240px; margin-right: 10px; padding: .5rem .75rem; }
.button-wrap button:last-child { margin-right: 0; }
.button-wrap button:focus { outline: none; box-shadow: none; }
.button-wrap button.btn-cancel { background-color: #6c757d; color: #fff; }
.button-wrap button.btn-write  { background-color: #e6007e; color: #fff; }
.button-wrap button.btn-submit { background-color: #0356ae; color: #fff; }
/* 전화상담 창 개인정보 동의 */
.privacy-agree-title { position: relative; width: 100%; margin-top: 4px; display: flex; }
.privacy-agree-title span { display: inline-block; font-size: 12px; color: #ff0000; align-self: center; }
.privacy-agree-title span.chk { padding-left: 10px; }
.privacy-agree-title span.chk input[type="checkbox"] { width: 14px; height: 14px; }
@media (max-width: 768px) {
.dtable_wrap { }
.dtable_wrap .dtd .radio_wrap .radio_box label { padding: .375rem; }
.dtable_wrap .dth { width: 25%; }
.dtable_wrap .dtm { width: 75%; }
.dtable_wrap .dtd { width: 75%; }
}

/* 전화 상담 모달 */
.myModal.dlqa {
    display: flex !important;
    min-height: 100vh !important;
    align-items: center;
    justify-content: center;
 }
.myModal.dlqa .myModal-dialog { max-width: 400px !important; }
.myModal.dlqa .myModal-content { border-radius: 10px !important;  }
.myModal.dlqa .myModal-header { border-radius: 0; padding: 0; border: 0; background: #e6007e; }
.myModal.dlqa .header-title { align-self: center; color: #fff; padding-left: 20px; letter-spacing: -2px; }
.myModal.dlqa .myModal-footer { display: none; }
.myModal.dlqa .dtable_wrap .dtd .radio_wrap .radio_box input:checked+ label { border: 1px solid #e12e4b; color: #e12e4b; }
@media (max-width: 768px) {
.myModal.dlqa .dtable_wrap .dth,
.myModal.dlqa .dtable_wrap .dtd { font-size: 13px; }
}

@media (max-width: 480px) {
.myModal.dlqa {
    align-items: start;
    justify-content: center;
    margin: 0;
 }
.myModal.dlqa .myModal-content { border-radius: 0px !important; min-width: 100%; min-height: 100vh; margin:0px; border: 0; }
.myModal.dlqa .myModal-dialog { max-width:100% !important; min-height: 100% !important; }
}
/* layer home calc */
.myModal.layer-calc-wrapper .myModal-header,
.myModal.layer-calc-wrapper .myModal-footer { display: none; }
.myModal.layer-calc-wrapper .myModal-dialog { max-width: 900px; }
.myModal.layer-calc-wrapper h3 { display: flex; justify-content: space-between; font-size: 24px; font-weight: 600; margin: 10px 0 0 0; padding-bottom: 10px; border-bottom: 1px solid #ddd; letter-spacing: -.1em; font-family: SCDream4,Noto Sans KR,sans-serif; }
.myModal.layer-calc-wrapper h3 span { display: block; }
.myModal.layer-calc-wrapper .myModal-content h3 button.closex { position: absolute; top: 0; right: 5px; width: 50px; height: 50px !important; padding: 0 !important; border-radius: 0; border: 0; background: transparent; outline: none; box-shadow: none; }
.myModal.layer-calc-wrapper .myModal-content h3 button.closex:before, 
.myModal.layer-calc-wrapper .myModal-content h3 button.closex:after{ content: ""; margin: auto; display: block; width: 30%; height: 1px; background: #000; }
.myModal.layer-calc-wrapper .myModal-content h3 button.closex:before{ transform: rotate(-45deg); }
.myModal.layer-calc-wrapper .myModal-content h3 button.closex:after{ transform: rotate(45deg); }

.myModal.layer-calc-wrapper .dtd { width: 100%; }
.myModal.layer-calc-wrapper .dtd .radio_box { flex: 1 1 auto; max-width: 33.333333%; }
.myModal.layer-calc-wrapper .dtd .radio_box label { width: 100%; }
.brand-row { margin: 15px 0; display: flex; }
.brand-row button { flex: 1 1 auto; max-width: 33.333333%; margin-right: 15px; font-size: 18px; border: 1px solid #ddd; color: #888; border-radius: 0; padding: 12px; }
.brand-row button:last-child { margin-right: 0; }
.layer-item-row button,
.layer-item-row label { display: inline-block; border-radius: .25rem; min-width: 120px; max-width: 100%; text-align: center; padding: .5rem .75rem; cursor: pointer; border: 1px solid #ddd; background-color: transparent; color: #888; }
.layer-item-row label p { font-size: 15px; }
.layer-item-row label span { font-size: 13px; }
.layer-item-row { display: flex; width: 100%; font-size: 14px; padding-bottom: .75rem; border-bottom: 1px solid #ddd; }
.layer-item-row .item-wrap  { flex: 1 1 auto; }
.layer-item-row .union-wrap { flex: 1 1 220px; max-width: 220px; margin-left: 50px; }
.layer-item-row .union-wrap h5 { margin-bottom: 1rem; }
.layer-item-row .union-wrap .union-item { flex-direction: column; }
.layer-item-row .union-wrap .union-item .radio_box { width: 100%; margin-bottom: .75rem; }
.layer-item-row .union-wrap .union-item .radio_box label { width: 100%; max-width: 100%; }
.layer-item-row .union-wrap .union-item .radio_box label b + small { display: inline-block; margin-left: 5px; }
.item-wrap { }
.item-wrap > .item-box { border-top: 1px dashed #ddd; }
.item-wrap > .item-box:first-child { border-top: 0; }
.item-wrap > .item-box .item-row { display: flex; }
.item-wrap > .item-box .item-row:last-child { border-bottom: 0; }
.item-wrap > .item-box .item-row .dth, 
.item-wrap > .item-box .item-row .dtd { padding: .75rem; }
.item-wrap > .item-box .item-row .dth { flex: 1 1 80px; max-width: 80px; }
.item-wrap > .item-box .item-row .dtd { flex: 1 1 auto; max-width: calc( 100% - 80px ); }
.item-calc { margin-top: 35px; }
.layer-item-row .calc-guide { }
.layer-item-row .calc-guide ul { }
.layer-item-row .calc-guide ul > li { position: relative; padding-left: 10px; color: #333; }
.layer-item-row .calc-guide ul > li:before { position: absolute; content: ''; width: 5px; height: 5px; background-color: #888; border-radius: 3px; left: 0; top: 7px; }
.layer-item-row .calc-box { margin-left: auto; padding: 15px 25px; width: 280px; background-color: #17a2b8; color: #fff; }
.layer-item-row .calc-box dl { display: flex; justify-content: space-between; }
.layer-item-row .calc-box dl dt { flex: 1 1 120px; max-width: 120px; padding: .375rem .125rem; white-space: nowrap; }
.layer-item-row .calc-box dl dd { flex: 1 1 auto; padding: .375rem .25rem; white-space: nowrap; text-align: right; }
.layer-btn-wrap { margin: 15px 0; }
.layer-btn-wrap button { border-radius: 0; letter-spacing: 0; padding: 12px 16px; }
.layer-btn-wrap .btn-quick { background-color: #6c757d; color: #fff; }
@media (max-width: 768px) {
.myModal.layer-calc-wrapper h3 { font-size: 18px; }
.myModal.layer-calc-wrapper .myModal-dialog { height: 100vh; }
.myModal.layer-calc-wrapper .myModal-body { height: 100vh; max-height: 100vh; padding: .5rem; }
.myModal.layer-calc-wrapper .dtd .radio_box { margin-right: 5px; }
.brand-row { margin: 15px 0 5px 0 }
.brand-row button { font-size: 14px; padding: 8px; margin-right: 5px; }
.layer-item-row button,
.layer-item-row label { min-width: unset; font-size: 12px; padding: .375rem .75rem; }
.layer-item-row label p { font-size: 13px; }
.layer-item-row label span { font-size: 12px; }
.layer-item-row { flex-wrap: wrap; padding-right: 5px; }
.layer-item-row .item-wrap { flex: 1 1 100%; max-width: 100%; }
.layer-item-row .union-wrap { flex: 1 1 100%; padding: 0; }
.layer-item-row .union-wrap .union-item { flex-direction: row; }
.layer-item-row .union-wrap .union-item .radio_box { flex: 1 1 100%; max-width: 100%; }
.item-wrap > .item-box { padding-top: 10px; }
.item-wrap > .item-box .item-row { flex-wrap: wrap; }
.item-wrap > .item-box .item-row .dth, 
.item-wrap > .item-box .item-row .dtd { padding: 0; padding-bottom: .5rem; }
.item-wrap > .item-box .item-row .dth { flex: 1 1 100%; max-width: 100%; font-size: 16px; font-weight: 500; line-height: 1.2; }
.item-wrap > .item-box .item-row .dtd { flex: 1 1 100%; max-width: 100%; }
.layer-item-row .union-wrap { flex: 1 1 100%; max-width: 100%; margin: 0; }
.layer-item-row .union-wrap h5 { font-size: 16px; margin-bottom: 10px; padding-top: 10px; border-top: 1px dashed #ddd; }
.layer-item-row .union-wrap .union-item { flex-direction: column; }
.layer-item-row .union-wrap .union-item .radio_box { width: 100%; margin-bottom: .75rem; }
.layer-item-row .union-wrap .union-item .radio_box label { width: 100%; max-width: 100%; }
.layer-item-row .union-wrap .union-item .radio_box label b + small { display: inline-block; margin-left: 5px; }
.item-calc { margin-top: 15px; padding: 0 10px; }
.layer-item-row .calc-guide { flex: 1 1 100%; max-width: 100%; margin-bottom: 15px; font-size: 13px; }
.layer-item-row .calc-box { margin: 0; flex: 1 1 100%; max-width: 100%; width: 100%; margin-bottom: 15px; }
.layer-btn-wrap { justify-content: flex-start; padding-right: 5px; }
.layer-btn-wrap button { flex: 1 1 auto; }
}

/* 구매후기 작성 */
.use_write { }
.use_write .button-wrap { margin: 25px 0; display: flex; justify-content: center; }
.use_write .button-wrap > button { flex: 1 1 30%; max-width: 30%; min-width: 160px; }
.use_write .button-wrap > button:not(:last-child) { margin-right: 10px; }

.page-top-navigation { padding: 120px 0 50px 0 !important; margin-bottom: 25px; }
.page-top-navigation h5.title { font-size: 26px; font-weight: 500; }
.page-top-navigation h5.title > span.h { display: inline-block; color: #919191; font-size: 16px; margin-left: 10px; }
.page-top-navigation .page-category { margin-top: 30px; }
.page-category ul { display: flex ; flex-wrap: wrap; }
.page-category ul > li:not(:first-child) { margin-left: 10px; }
.page-category ul > li > a { display: block; padding: 8px; min-width: 160px; text-align: center; border: 1px solid #ddd; background-color: #fff; }
.page-category ul > li > a.active { border-color: #e6007e !important; color: #e6007e !important; }
@media(max-width: 768px) {
    .page-top-navigation { margin-bottom: 0; }
    .page-top-navigation h5.title { font-size: 22px; padding: 0 10px; }
    .page-top-navigation h5.title > span.h { font-size: 13px; }
    .page-category ul { justify-content: center; }
    .page-category ul > li { margin-bottom: 5px; }
    .page-category ul > li:not(:first-child) { margin-left: 0; }
    .page-category ul > li:nth-child(2n) { margin-left: 5px; }
    .page-category ul > li > a { display: block; padding: 8px; min-width: 160px; text-align: center; border: 1px solid #ddd; background-color: #fff; }
    .page-category ul > li > a.active { border-color: #e6007e !important; color: #e6007e !important; }
}

.content-empty { position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; justify-content: center; width: 100%; min-height: 250px; border: 1px solid #ddd; border-radius: 12px; margin-bottom: 35px !important; }
.content-empty .qbox { position: relative; display: flex; justify-content: center; align-items: center; width: 120px; height: 120px; }
.content-empty .qbox > .svg-icon { width: 70px; height: 70px; color: #ddd; }
.content-empty p { color: #ddd; }

.order-list-wrap { position: relative; }
.order-list-wrap > .order-view-box { position: relative; display: flex; border: 1px solid #DCDBDB; border-radius: 12px; padding: 20px 30px 25px; margin-bottom: 12px; }
.order-list-wrap > .order-view-box > .model-info { flex: 1 1 230px; max-width: 230px; display: flex; align-self: center; }
.order-list-wrap > .order-view-box > .order-info { flex: 1 1 auto; max-width: calc( 100% - 350px ); position: relative; display: flex; padding: 0 15px; align-self: center; }
.order-list-wrap > .order-view-box > .order-btn { flex: 1 1 120px; max-width: 120px; align-self: center; }
.order-list-wrap > .order-view-box > .model-info > .image { text-align: center; flex: 1 1 90px; max-width: 90px; }
.order-list-wrap > .order-view-box > .model-info > .image > img { width: 100%; height: auto; }
.order-list-wrap > .order-view-box > .model-info > .model { flex: 1 1 auto; padding-left: 10px; }
.order-list-wrap > .order-view-box > .model-info > .model > p { font-weight: 600; font-size: 18px; }
.order-list-wrap > .order-view-box > .model-info > .model > ul { margin-top: 8px; font-size: 13px; }
.order-list-wrap > .order-view-box > .order-info > div { flex: 1 1 50%; max-width: 50%; padding: 0 25px; }
.order-list-wrap > .order-view-box > .order-info > div > dl { position: relative; display: flex; }
.order-list-wrap > .order-view-box > .order-info > div > dl > dt { }
.order-list-wrap > .order-view-box > .order-info > div > dl > dd { margin-left: auto; }
.order-list-wrap > .order-view-box > .order-btn { position: relative; }
.order-list-wrap > .order-view-box > .order-btn > a.btn { display: block; padding: 6px 12px; font-size: 13px; text-align: center; white-space: nowrap; margin-bottom: 7px; border: 1px solid #ddd; border-radius: 8px; outline: none; box-shadow: none; }
@media(max-width: 768px) {
    .order-list-wrap { padding: 0 10px; }
    .order-list-wrap > .order-view-box { padding: 20px 10px 20px; flex-wrap: wrap; }
    .order-list-wrap > .order-view-box > .model-info { flex: 1 1 100%; max-width: 100%; }
    .order-list-wrap > .order-view-box > .order-info { flex: 1 1 100%; max-width: 100%; padding: 0; margin: 15px 0; }
    .order-list-wrap > .order-view-box > .order-btn { flex: 1 1 100%; max-width: 100%; }

    .order-list-wrap > .order-view-box > .order-info > div { padding: 0 10px; }
    .order-list-wrap > .order-view-box > .order-info > div > dl { font-size: 12px; }
    .order-list-wrap > .order-view-box > .order-info > div > dl > dt { white-space: nowrap; }
    .order-list-wrap > .order-view-box > .order-info > div > dl > dd .minus { display: none; }
}