@charset "utf-8";
@import url("common.css");

body { background: #f9f9f9; color: #000; }
body.lock { height: 100vh; overflow: hidden; }

.wrapper { position: relative; width: 100%; min-width: 250px; min-height: auto; z-index: 1; }

/** header **/
.header-wrap {
    position: sticky; top: 0;
    width: 100%; height: 80px;
    background: #fff;
    border-bottom: 1px solid #2d66af;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10;
}
.header-wrap .header {
    flex: none;
    width: 950px; height: 100%;
    display: flex;
    justify-content: start;
    align-items: center;
    flex-wrap: nowrap;
}
.header-wrap .header .logo { flex: none; }
.header-wrap .header .logo a { height: 60px; display: inline-flex; align-items: center; }
.header-wrap .header .logo img { width: auto; height: 32px; object-fit: contain;  }

.header-wrap .header .menu { flex: none; margin-left: 100px; }
.header-wrap .header .menu ul { display: flex; justify-content: start; align-items: center; flex-wrap: nowrap; gap: 20px; }
.header-wrap .header .menu ul li a { min-width: 100px; height: 80px; padding: 0 10px; font-size: 1.8rem; font-weight: 500; line-height: 80px; color: #000; text-align: center; display: inline-block; }
.header-wrap .header .menu ul li a:hover,
.header-wrap .header .menu ul li a.on { color: #1d7abd; border-bottom: 3px solid #1d7abd;  }
.header-wrap .header .toolbar { flex: none; margin-left: auto; }
.header-wrap .header .toolbar ul { display: flex; justify-content: end; align-items: center; flex-wrap: nowrap; gap: 10px; }
.header-wrap .header .toolbar .toolbar-btn { min-width: 30px; height: 36px; padding: 2px 10px; border-radius: 5px; background: #fff; font-size: 1.5rem; display: flex; justify-content: center; align-items: center; user-select: none; cursor: pointer; }
.header-wrap .header .toolbar .toolbar-btn:hover { background: #f1f1f4; }
.header-wrap .header .toolbar .toolbar-btn i { font-size: 1.6rem; color: #99A1B7; }
.header-wrap .header .toolbar .toolbar-btn i+span { margin-left: 8px; }

.header-wrap .header .mobile-menu { flex: none; margin-left: auto; display: none; }
.header-wrap .header .mobile-menu .btn-menu { width: 32px; height: 32px; background: #fff; }
.header-wrap .header .mobile-menu .btn-menu i { font-size: 2.2rem; }

/** content **/
.content-wrap { width: 100%; min-height: calc(100vh - 225px); }
.content-wrap .content { flex: none; width: 950px; height: auto; }
.content-wrap .content-header,
.content-wrap .content-body,
.content-wrap .content-footer { display: flex; justify-content: center; align-items: start; }

.content-wrap .content-header { position: sticky; top: 80px;  border-bottom: 1px solid #cdcdcd; background: #fff; z-index: 10; }
.content-wrap .content-footer { border-top: 1px solid #cdcdcd; background: #fff; }
.content-wrap .content-header:not(:has(.content *)),
.content-wrap .content-footer:not(:has(.content *)) {display: none; }

.content-wrap .content-body .content { padding: 20px 0;}

.content-wrap .content-title { height: 60px; display: flex; justify-content: space-between; align-items: center; flex-wrap: nowrap; }
.content-wrap .content-title h2 { font-size: 2rem; font-weight: bold; color: #333; }
.content-wrap .content-title .breadcrumb { flex: none; display: flex; justify-content: start; align-items: center; flex-wrap: nowrap; gap: 10px; }
.content-wrap .content-title .breadcrumb ul { display: flex; justify-content: start; align-items: center; flex-wrap: nowrap; }
.content-wrap .content-title .breadcrumb ul li { font-size: 2rem; color: #767676; }
.content-wrap .content-title .breadcrumb ul li:after { margin: 0 10px; font-size: 1.3rem; color: #ccc; content: "|"; }
.content-wrap .content-title .breadcrumb ul li:last-child { font-weight: bold; color: #333; }
.content-wrap .content-title .breadcrumb ul li:last-child:after { display: none; }
.content-wrap .content-title .buttons { padding-right: 20px; }

/** footer **/
.footer-wrap {
    width: 100%; height: 145px;
    border-top: 1px solid #E5E5E5;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: start;
}
.footer-wrap .footer { flex: none; width: 950px; margin: 20px 0; }
.footer-wrap .footer .menu ul { display: flex; justify-content: start; align-items: center; flex-wrap: nowrap; }
.footer-wrap .footer .menu ul li { font-size: 1.6rem; color: #333; }
.footer-wrap .footer .menu ul li a:hover { text-decoration: underline; }
.footer-wrap .footer .menu ul li:after { margin: 0 10px; font-size: 1.3rem; color: #ccc; content: "|"; }
.footer-wrap .footer .menu ul li:last-child:after { display: none; }
.footer-wrap .footer .usbio { margin-top: 20px; }
.footer-wrap .footer .usbio li { display: flex; justify-content: start; align-items: center; flex-wrap: nowrap; gap: 5px 10px; }
.footer-wrap .footer .usbio li+li { margin-top: 10px;}
.footer-wrap .footer .usbio li span { font-size: 1.3rem; color: #757575; }

/** intro **/
.main-intro {
    position: relative;
    width: 100%; height: 300px;
    background: #fff url(../images/intro.jpg) center -45px no-repeat;
    background-size: cover;
}
.main-intro h1 {
    position: absolute;
    top: 50px; left: 50px;
    font-size: 3.5rem;
    font-weight: 300;
    color: #fff;
    word-break: keep-all;
}
.main-intro h1 b { font-weight: 700; }
.main-intro a {
    position: absolute;
    bottom: 30px; right: 30px;
    height: 60px;
    padding: 10px 50px;
    border: 1px solid #fff;
    border-radius: 10px;
    font-size: 2.4rem;
    line-height: 40px;
    color: #fff;
    text-decoration: none;
}

/** floating **/
.floating-wrap {
    position: fixed; bottom: 0;
    width: 100%;
    background: #1b222c;
    display: flex;
    justify-content: center;
    align-items: start;
    z-index: 2;
}
.floating-wrap.hide { display: none; }
.floating-wrap .floating { flex: none; width: 950px; }
.floating-wrap .floating.order { min-height: 80px; display: flex; justify-content: end; align-items: center; flex-wrap: nowrap; gap: 20px; }
.floating-wrap .floating.order .price { font-size: 2rem; font-weight: bold; color: #D3D5D8; }
.floating-wrap .floating.order .price span {}
.floating-wrap .floating.order .price span b { margin: 0 5px; color: #fff; }

body.floating-on .content-wrap { min-height: calc(100vh - 305px); }
body.floating-on .footer-wrap { margin-bottom: 80px; }
body.floating-on .btn-top { bottom: 90px; }

/** context **/
.context-account { position: fixed; top: 62px; }
.context-account .context-box { min-width: 200px; border-radius: 10px; }
.context-account .profile p { font-size: 1.5rem; font-weight: bold; }
.context-account .profile span { margin-top: 5px; font-size: 1.3rem; color: #757575; display: block; }

.context-gnb { position: fixed; left: 0; top: 0; width: 100%; height: 100vh; }
.context-gnb .context-box { width: 100%; height: 100%; border-radius: 0; box-shadow: unset; }
.context-gnb .profile p { font-size: 1.8rem; font-weight: bold; }
.context-gnb .profile span { margin-top: 5px; font-size: 1.5rem; color: #757575; display: block; }
.context-gnb .context-menu li { padding: 0; }
.context-gnb .context-menu li:last-child { border-bottom-width: 1px; }

/** card-section **/
.card-mypage-varify {}
.card-mypage-varify .card-body p { font-size: 1.5rem; }
.card-mypage-varify .card-body fieldset { margin-top: 30px ; }
.card-mypage-varify .card-body .verify-message { height: 20px; margin-top: 10px; font-size: 1.5rem; color: #FF003E; line-height: 20px; }

.card-form-varify {}
.card-form-varify .card-body p { font-size: 1.5rem; }
.card-form-varify .card-body fieldset { margin-top: 20px ; }
.card-form-varify .card-body .verify-message { height: 20px; margin-top: 10px; font-size: 1.5rem; color: #FF003E; line-height: 20px; }

.card-nonmbr-varify {}
.card-nonmbr-varify .card-body p { font-size: 1.5rem; }
.card-nonmbr-varify .card-body fieldset { min-width: 100px; max-width: 300px; margin-top: 20px; }
.card-nonmbr-varify .card-body fieldset input+input { margin-top: 10px; }
.card-nonmbr-varify .card-body .verify-message { height: 20px; margin-top: 10px; font-size: 1.5rem; color: #FF003E; line-height: 20px; display: none; }
.card-nonmbr-varify .card-body .btn-box { margin-top: 10px; }

.card-help { padding: 10px 20px; }

/** search **/
.card-search { padding: 20px 20px;  }
.card-search .card-header { min-height: unset; padding: 0; display: none; cursor: pointer; }
.card-search .card-header:after { width: 20px; height: 20px; font-family: 'FontAwesome'; font-size: 1.5rem; font-weight: 900; content: "\f078"; }
.card-search .card-body { padding: 0; display: flex; justify-content: stretch; flex-wrap: nowrap; gap: 20px; }
.card-search .search-form { flex: 1 0 0; }
.card-search .search-form fieldset { display: flex; justify-content: start; align-items: center; flex-wrap: wrap; gap: 20px; }
.card-search .search-form .search-input { flex: 1 0 0; display: flex; justify-content: start; align-items: center; flex-wrap: nowrap; gap: 10px; }
.card-search .search-form .search-keyword { flex: 1 0 240px; }
.card-search .search-form .search-date { flex: 1 0 60%; display: flex; justify-content: start; align-items: center; flex-wrap: nowrap; gap: 10px; }
.card-search .search-form .search-date .date { flex: 1 0 270px; max-width: 500px; display: flex; justify-content: start; align-items: center; flex-wrap: nowrap; gap: 10px; }
.card-search .search-form .search-date .period { flex: none; width: 190px; display: flex; justify-content: start; align-items: center; flex-wrap: nowrap; gap: 10px; }
.card-search .search-form .search-date .period li { font-size: 1.3rem; text-decoration: underline; cursor: pointer; }
.card-search .search-button { flex: none; display: flex; justify-content: end; align-items: start; gap: 10px; }
.card-search .search-button button+button { margin: 0; }

/** board **/
.board { width: 100%; }
.board table { width: 100%; }

.board > h4 { font-size: 1.6rem; margin-bottom: 20px; }
.board > p { font-size: 1.5rem; margin-bottom: 10px; }

.board .scroll { overflow-x: hidden; overflow-y: scroll; }
.board .scroll-auto { overflow-y: auto; }

.board .board-header { width: 100%; height: 40px; margin-bottom: 10px; display: flex; justify-content: space-between; align-items: end; }
.board .board-header > h4 { font-size: 1.6rem; margin-bottom: 10px; }
.board .board-header > p { font-size: 1.5rem; }
.board .board-header .total-page { font-size: 1.3rem; color: #747474; }

.board .board-toolbar { width: 100%; border: 1px solid #E5E5E5; background: #fff; }
.board .board-toolbar li { padding: 10px 20px; border-top: 1px solid #E5E5E5; display: flex; justify-content: start; align-items: center; flex-wrap: nowrap; gap: 10px; overflow-x: auto; overflow-y: hidden; }
.board .board-toolbar li:first-child { border-top: 0; }
.board .board-toolbar .filter { padding: 10px 0; margin: 0 20px; user-select: none; }
.board .board-toolbar .select { font-size: 1.5rem; justify-content: space-between; }
.board .board-toolbar .select > * { display: inline-flex; align-items: center; }
.board .board-toolbar button+button { margin: 0; }

.board .no-data { width: 100%; height: 100px; font-size: 1.5rem; line-height: 100px; justify-content: center; text-align: center; cursor: unset; }
.board .no-hover,
.board .no-link { cursor: unset; }
.board .no-hover:hover { background: transparent; cursor: unset; }
.board .no-link:hover { background: transparent; cursor: unset; }
.board .border-top { border-top: 1px solid #E5E5E5; }
.board .border-bottom { border-bottom: 1px solid #E5E5E5; }

.board .more-list { width: 100%; height: 50px; border: 1px solid #E5E5E5; background: #fff; display: flex; justify-content: center; align-items: center; cursor: pointer; }
.board .more-list:before { font-size: 1.5rem; font-weight: normal; content: "더보기" }
.board .more-list.hide { display: none; }

.board-list01 { width: 100%; }
.board-list01 > li { padding: 15px 0; border-bottom: 1px solid #E5E5E5; display: flex; justify-content: start; align-items: center; flex-wrap: nowrap; cursor: pointer; }
.board-list01 > li:first-child { padding-top: 0; }
.board-list01 > li:last-child { padding-bottom: 0; border-bottom: 0; }

.board-list02 { width: 100%; }
.board-list02 > li { padding: 15px 0; border-bottom: 1px solid #E5E5E5; display: flex; justify-content: start; align-items: center; flex-wrap: nowrap; cursor: pointer; }
.board-list02 > li:hover { background: #fafafa; }

.board-list03 { width: 100%; border: 1px solid #E5E5E5; background: #fff; }
.board-list03 > li { padding: 10px 20px; border-bottom: 1px solid #E5E5E5; display: flex; justify-content: start; align-items: stretch; flex-wrap: nowrap; gap: 20px; }
.board-list03 > li:last-child { border-bottom: 0; }
.board-list03 > li.header { background: #ddecf7; color: #335f7e; } /** f3f8fe  ddecf7 436f8e **/
.board-list03 > li.header h4 { font-size: 1.5rem; font-weight: 500; display: inline-block; }
.board-list03 > li .col { flex: none; min-height: 30px; font-size: 1.5rem; display: flex; justify-content: start; align-items: center; flex-wrap: nowrap; gap: 10px; }
.board-list03 > li .col.col-chk { max-height: 30px; font-size: unset; }
.board-list03 > li .col.col-data { flex: 1 0 0; }
.board-list03 > li .col.col-etc { flex: none; display: flex; justify-content: end; align-items: center; flex-wrap: nowrap; }
.board-list03 > li.item .col.col-etc { width: 200px; }

.board-list04 { width: 100%; }
.board-list04 > li { padding: 10px 5px; border-bottom: 1px solid #E5E5E5; display: flex; justify-content: start; align-items: stretch; flex-wrap: nowrap; gap: 20px; }
.board-list04 > li:last-child { border-bottom: 0; }
.board-list04 > li > a {  flex: none; width: 100%; display: flex; justify-content: start; align-items: stretch; flex-wrap: nowrap; gap: 20px; }
.board-list04 > li .col { flex: none; min-height: 30px; font-size: 1.5rem; display: flex; justify-content: start; align-items: center; flex-wrap: nowrap; gap: 10px; }
.board-list04 > li .col.col-chk { max-height: 30px; font-size: unset; }
.board-list04 > li .col.col-num { width: 50px; justify-content: center; }
.board-list04 > li .col.col-data { flex: 1 0 0; }
.board-list04 > li .col.col-etc { flex: none; width: 200px; display: flex; justify-content: end; align-items: center; flex-wrap: nowrap; }
.board-list04 > li.summary { min-height: 50px; justify-content: end; }
.board-list04 > li.summary dl { font-size: 1.8rem; display: flex; justify-content: start; align-items: center; flex-wrap: nowrap; gap: 10px; }
.board-list04 > li.summary dl dd { width: 150px; text-align: right; }

.board-list05 { width: 100%; }
.board-list05 > li { padding: 0; border-bottom: 1px solid #E5E5E5; display: flex; justify-content: space-between; align-items: center; flex-wrap: nowrap; }
.board-list05 > li:last-child { border-bottom: 0; }

.board-view01 {}
.board-view01 th,
.board-view01 td { height: 50px; padding: 10px; font-size: 1.5rem; font-weight: normal; line-height: 1.7rem; }
.board-view01 th { text-align: right; }

.board-group-list {}
.board-group-list > p { margin-bottom: 5px; font-size: 1.3rem; text-align: right; }
.board-group-list .no-data { height: 350px; border: 1px solid #E5E5E5; background: #fff; font-size: 1.5rem; display: flex; justify-content: center; align-items: center; }
.board-group-list .board-list03+.board-list03 { margin-top: 10px; }

/** dataset **/
.dataset { width: 100%; }
.dataset-item { width: 100%; display: flex; justify-content: start; align-items: start; flex-wrap: nowrap; gap: 40px; }
.dataset-item .name { min-width: 120px; min-height: 40px; font-size: 1.5rem; color: #747474; display: flex; justify-content: end; align-items: center; }
.dataset-item .name.sm { min-width: 50px; }
.dataset-item .name.md { min-width: 80px; }
.dataset-item .value { flex: 1 0 0; padding-top: 11px; font-size: 1.5rem; display: flex; justify-content: start; align-items: center; flex-wrap: wrap; }
.dataset-item .value .value-row { flex: none; width: 100%; }
.dataset-item .value .value-row+.value-row { margin-top: 10px; }
.dataset-item+.dataset-item { margin-top: 10px; }
.dataset-item.inline { align-items: center; }
.dataset-item.inline .value { padding-top: 0;}
.dataset-item.line { padding-top: 10px; border-top: 1px solid #E5E5E5; }
.dataset-item.hide { display: none; }

/** fieldset **/
.fieldset { width: 100%; }
.fieldset-item { width: 100%; display: flex; justify-content: start; align-items: start; flex-wrap: nowrap; gap: 40px; }
.fieldset-item label { min-width: 120px; min-height: 40px; font-size: 1.5rem; color: #747474; display: flex; justify-content: end; align-items: center; }
.fieldset-item input { flex: 1 0 0; }
.fieldset-item+.fieldset-item { margin-top: 10px; }
.fieldset-item.inline { align-items: center; }
.fieldset-item.inline .value { padding-top: 0;}

/** policy **/
.policy { padding: 20px 35px; }
.policy-tab { position: relative; width: 100%; height: 40px; display: flex; justify-content: start; align-items: center; flex-wrap: nowrap; gap: 0; }
.policy-tab:before { position: absolute; bottom: 0; width: 100%; height: 1px; background: #cdcdcd; content: ""; }
.policy-tab a { flex: none; min-width: 150px; height: 100%; padding: 0 20px; border: 1px solid #cdcdcd; font-size: 1.5rem; line-height: 40px; text-align: center; }
.policy-tab a:hover { color: #1B84FF; }
.policy-tab a.on { background: #E9F3FF; color: #1B84FF; }
.policy-tab a+a { margin-left: -1px; }
.policy-title { margin-top: 30px; display: flex; justify-content: space-between; align-items: center; flex-wrap: nowrap; }
.policy-title h2 { font-size: 3rem; font-weight: bold; }
.policy-title ul li { font-size: 1.3rem; line-height: 1.7rem; }
.policy-content { width: 100%; padding: 50px 0; font-size: 1.5rem; line-height: 2rem; word-break: keep-all; white-space: pre-wrap; }

/** popup **/
.popup-update-password { width: 400px; }
.popup-update-password .popup-body h4 { margin-bottom: 20px; font-size: 1.3rem; font-weight: normal; word-break: keep-all; }
.popup-update-profile { width: 550px; }
.popup-withdraw { width: 500px; }
.popup-withdraw .withdraw-help {
    padding: 20px 10px;
    background: #F1F1F4;
    padding-inline-start: 30px;
}
.popup-withdraw .withdraw-message { margin-top: 15px; font-size: 1.5rem; color: #FF003E; display: none; }
.popup-change-company { width: 500px; }
.popup-update-company { width: 500px; }

.popup-shipping { width: 500px; height: 675px; }
.popup-shipping .search-addr { padding: 20px; background: #F1F1F4; }
.popup-shipping .search-addr h4 { font-size: 1.5rem; font-weight: 400; }
.popup-shipping .board .board-header { height: auto; }
.popup-shipping .shipping-select-list { height: 533px; }
.popup-shipping .shipping-add-list { height: 468px; }
.popup-shipping .address { font-size: 1.5rem; line-height: 20px; word-break: break-all; white-space: pre-wrap; }

.popup-update-quotation { width: 550px; }
.popup-inquiry { width: 550px; }

/** tracking **/
.tracking-view .shipping { padding-bottom: 20px; border-bottom: 1px solid #ccc; display: flex; justify-content: center; align-items: start; flex-direction: column; gap: 20px; }
.tracking-view .shipping .state { font-size: 2rem; color: #1B84FF; }
.tracking-view .shipping .no { font-size: 1.5rem; color: #333; }
.tracking-view .shipping .no span+span { margin-left: 20px; }
.tracking-view .tracking { margin-top: 20px; background: #fff; }
.tracking-view .tracking li { position: relative; width: 100%; padding: 0 10px 30px 32px; }
.tracking-view .tracking li .where { font-size: 1.5rem; color: #747474; }
.tracking-view .tracking li .state { margin-top: 5px; font-size: 1.3rem; color: #747474; }
.tracking-view .tracking li .state span+span { margin-left: 20px; }
.tracking-view .tracking li:before { position: absolute; left: 10px; top: 0; bottom: -1px; width: 3px; background: #E5E5E5; content: ""; }
.tracking-view .tracking li:after { position: absolute; left: 7px; top: 5px; width: 9px; height: 9px; border: 2px solid #999; border-radius: 50%; background: #fff; content: ""; }
.tracking-view .tracking li:first-child .where { color: #000; }
.tracking-view .tracking li:first-child .state span:last-child { color: #1B84FF; }
.tracking-view .tracking li:first-child:before { top: 6px; }
.tracking-view .tracking li:first-child:after { border-color: #1B84FF; background: #fff; }
.tracking-view .tracking li:last-child:before { bottom: unset; height: 7px; }
.tracking-view .tracking li.no-data { padding: 0; font-size: 1.3rem; color: #747474; text-align: left; }
.tracking-view .tracking li.no-data:before,
.tracking-view .tracking li.no-data:after { display: none; }

.tracking-wrap { width: 100%; display: flex; justify-content: center; align-items: center; }
.tracking-wrap .tracking-box { width: 100%; max-width: 750px; background: #fff; }
.tracking-wrap .tracking-box header { width: 100%; height: 60px; padding: 0 15px; border-bottom: 1px solid #ccc; display: flex; justify-content: space-between; align-items: center; cursor: default; }
.tracking-wrap .tracking-box header h3 { font-size: 2rem; font-weight: bold; color: #333; }
.tracking-wrap .shipping { padding: 15px; }
.tracking-wrap .tracking { padding: 0 15px; }

.popup-tracking { width: 550px; }
.popup-tracking .tracking { height: 272px; margin-top: 20px; background: #fff; overflow-x: hidden; overflow-y: auto; }

/** shipping **/
.shipping-info { }
.shipping-info li+li { margin-top: 10px; line-height: 2rem; }
.shipping-info .name { font-size: 1.5rem; }
.shipping-info .phone,
.shipping-info .addr { font-size: 1.3rem; }
.shipping-info .direct { color: #159b43; }
.shipping-info .direct:before { font-size: 1.5rem; line-height: 2rem; color: #333; display: inline-block; content: "(" }
.shipping-info .direct:after { font-size: 1.5rem; line-height: 2rem; color: #333; display: inline-block; content: ")" }
.board .shipping-row { width: 100%; display: flex; justify-content: space-between; align-items: start; flex-wrap: nowrap; gap: 10px; }
.board .shipping-row .shipping-info { flex: 1 0 0; }

.shipping-direct { color: #159b43; }
.shipping-direct:before { font-size: 1.5rem; line-height: 2rem; color: #333; display: inline-block; content: "(" }
.shipping-direct:after { font-size: 1.5rem; line-height: 2rem; color: #333; display: inline-block; content: ")" }

/** quotation **/
.quo-info { width: 100%; display: flex; justify-content: start; align-items: center; flex-wrap: nowrap; gap: 10px; cursor: pointer; }
.quo-info > li { flex: none; text-align: center; }
.quo-info > li p { text-overflow: ellipsis; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; }
.quo-info > li p b { display: none; margin-right: 5px; font-weight: normal; }
.quo-info .product { flex: 1 0 0; text-align: left; }
.quo-info .product p { width: 100%; height: 30px; line-height: 30px; }
.quo-info .cty,
.quo-info .qty { width: 100px; }
.quo-info .state { width: 60px; }

.quo-price {}
.quo-price > li { display: block; text-align: right; }
.quo-price > li+li { margin-top: 5px; }
.quo-price .price { font-size: 1.5rem; }
.quo-price .date { font-size: 1.1rem; }
.quo-price.large .price { font-size: 2rem; }
.quo-price.large .date { font-size: 1.3rem; }

/** order **/
.order-info { width: 100%; display: flex; justify-content: start; align-items: center; flex-wrap: nowrap; gap: 10px; cursor: pointer; }
.order-info > li { flex: none; text-align: center; }
.order-info > li p { text-overflow: ellipsis; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; }
.order-info > li p b { display: none; margin-right: 5px; font-weight: normal; }
.order-info .product { flex: 1 0 0; text-align: left; }
.order-info .product p { width: 100%; height: 30px; line-height: 30px; }
.order-info .qty { width: 100px; }
.order-info .state { width: 80px; }

.order-complete { padding: 50px 0; display: flex; justify-content: center; align-items: center; }
.order-complete h3 { font-size: 2.4rem; font-weight: 500; color: #333; }
.order-complete h3 b { color: #1B84FF; }

.order-noti {}
.order-noti .card-body h4 { font-size: 1.5rem; font-weight: 500; display: flex; justify-content: start; align-items: start; flex-wrap: nowrap; gap: 5px; }
.order-noti .card-body h4 i { margin-top: 1px; color: #F8285A; }

.order-agree {}
.order-agree .card-body p { font-size: 1.5rem; margin-bottom: 10px; }

/** feedback **/
.feedback-info { width: 100%; display: flex; justify-content: start; align-items: center; flex-wrap: nowrap; gap: 10px; }
.feedback-info li { font-size: 1.5rem; line-height: 2rem; }
.feedback-info .state { flex: none; min-width: 50px; }
.feedback-info .cmnt { flex: 1 0 0; }
.feedback-info .date { flex: none; min-width: 120px; text-align: right; }
.board .feedback-row { width: 100%; justify-content: space-between; cursor: unset; }
.board .feedback-row .feedback-info { flex: 1 0 0; }

/** inquiry **/
.inquiry-info { display: flex; justify-content: start; align-items: start; flex-wrap: nowrap; gap: 10px; }
.inquiry-info .state { flex: none; width: 80px; height: 30px; font-size: 1.5rem; line-height: 30px; text-align: center; }
.inquiry-info ul { flex: 1 0 0; }
.inquiry-info ul li { display: flex; justify-content: start; align-items: center; flex-wrap: wrap; }
.inquiry-info ul li+li { margin-top: 10px; }
.inquiry-info ul .ctnt { min-height: 30px; padding-top: 5px; font-size: 1.5rem; line-height: 2rem; word-break: keep-all; white-space: pre-wrap; align-items: start; }
.inquiry-info ul .attach { font-size: 1.3rem; }
.inquiry-info ul .date { font-size: 1.3rem; color: #747474; }
.board .inquiry-row { padding: 15px 0; justify-content: space-between; align-items: start; gap: 10px; }
.board .inquiry-row:first-child { padding-top: 0; }
.board .inquiry-row .inquiry-info { flex: 1 0 0; }
.board .inquiry-row.reply { background: #fafafa; }

/** statistics **/
.statistics { display: flex; justify-content: space-evenly; align-items: center; flex-wrap: nowrap; gap: 20px; }
.statistics dl { flex: none; min-width: 100px; display: flex; justify-content: center; align-items: center; flex-direction: column; gap: 15px; }
.statistics dl dt { font-size: 1.3rem; font-weight: normal; order: 2; }
.statistics dl dd { font-size: 1.8rem; font-weight: 500; order: 1; }

/** notice **/
.notice-impt-list { flex-wrap: nowrap; gap: 10px; }
.notice-impt-list h5 { flex: none; color: #F8285A; display: flex; justify-content: start; align-items: center; flex-wrap: nowrap; gap: 5px; }
.notice-impt-list h5 i { margin-top: -2px; color: #F8285A; }
.notice-impt-list .list { flex: 1 0 0; }
.notice-impt-list .list li { font-size: 1.5rem; display: none; justify-content: end; align-items: center; flex-wrap: nowrap; }
.notice-impt-list .list li.on { display: flex !important; }
.notice-impt-list .list li:after { margin-left: 10px; color: #747474; content: ">"; }
.notice-impt-list .list li p { width: 100%; }

.notice-list {}
.notice-list li a { width: 100%; height: 50px; padding: 0 5px; font-size: 1.5rem; display: flex; justify-content: start; align-items: center; flex-wrap: nowrap; gap: 10px; cursor: pointer; }
.notice-list li a.impt:before { padding: 5px; border: 1px solid #F8285A; border-radius: 5px; background: #FFEEF3; font-size: 1.3rem; color: #F8285A; content: "중요공지"; }
.notice-list li p { flex: 1 0 0; }
.notice-list li span { flex: none; min-width: 100px; color: #747474; text-align: right; }

.notice-view {}
.notice-view .notice-header { padding: 10px 5px 20px; border-bottom: 1px solid #E5E5E5; }
.notice-view .notice-header h4 { font-size: 1.6rem; font-weight: 500; }
.notice-view .notice-header .date { font-size: 1.3rem; color: #747474; }
.notice-view .notice-content { padding: 30px 5px; font-size: 1.5rem; line-height: 2rem; word-break: keep-all; white-space: pre-wrap; }
.notice-view .notice-footer { padding: 20px 5px 10px; border-top: 1px solid #E5E5E5; }
.notice-view .notice-footer .link_attach { font-size: 1.5rem; }

/** search address **/
.addr-info { flex: 1 0 0; padding: 0 10px; display: flex; justify-content: start; align-items: start; flex-direction: column; gap: 5px; }
.addr-info .addr { flex: none; width: 100%; font-size: 1.5rem; line-height: 2rem; display: flex; align-items: start; gap: 10px; }
.addr-info .addr:before { padding: 0 5px; border-radius: 2px; font-size: 1.5rem; white-space: nowrap; display: inline-block; }
.addr-info .addr.jibun:before { background-color: #FFEEF3; color: #F8285A; content: "지번"; }
.addr-info .addr.road:before { background-color: #E9F3FF; color: #1B84FF; content: "도로"; }
.addr-info .addr+.addr { margin-top: 5px; }

/** etc **/
.agree-ok { flex: none; width: 100%; font-size: 1.5rem; display: flex; justify-content: start; align-items: center; }
.agree-ok:before { margin-top: -2px; margin-right: 10px; font-family: 'FontAwesome'; font-size: 1.5rem; color: #747474; content: "\f1db"}
.agree-ok.on:before { color: #1B84FF; content: "\f058" }
.agree-ok+.agree-ok { margin-top: 15px;}

.approve-ok { margin-left: 20px; font-size: 1.3rem; font-weight: 500; color: #1B84FF; display: flex; justify-content: start; align-items: center; }
.approve-ok:before { margin-top: -2px; margin-right: 5px; font-family: 'FontAwesome'; font-size: 1.5rem; content:"\f058"}

.ocl-dt { flex: 1 0 0; max-width: 250px; height: 36px; font-size: 1.5rem; line-height: 36px; }
.ocl-dt + button { margin-left: 10px; }

.qrm-item-list {}
.qrm-item-list .card-section+.card-section { margin-top: 10px; }

/** extra large pc **/
@media screen and (min-width: 1300px) {
    .header-wrap .header,
    .content-wrap .content,
    .footer-wrap .footer { width: 1200px; }
    .floating-wrap .floating { width: 1200px; }
}

/** pc **/
@media screen and (min-width: 770px) and (max-width: 1000px) {
    .header-wrap .header,
    .content-wrap .content,
    .footer-wrap .footer { width: 100%; padding: 0 15px; }
    .floating-wrap .floating { width: 100%; padding: 0 15px; }

    .header-wrap .header .menu { margin-left: 50px; }
    .content-wrap .content-body .content { padding: 20px 15px; }
}

/** tablet **/
@media screen and (max-width: 769px) {
    .header-wrap .header,
    .content-wrap .content,
    .footer-wrap .footer { width: 100%; padding: 0 15px; }

    .header-wrap { height: 60px; }
    .header-wrap .header .menu,
    .header-wrap .header .toolbar { display: none; }
    .header-wrap .header .mobile-menu { display: block; }

    .content-wrap { min-height: calc(100vh - 280px); }
    .content-wrap .content-header { top: 60px; }
    .content-wrap .content-body .content { padding: 20px 15px; }
    .content-wrap .content-title h2 { font-size: 1.8rem; }
    .content-wrap .content-title .breadcrumb { gap: 5px; }
    .content-wrap .content-title .breadcrumb ul li { font-size: 1.8rem; }
    .content-wrap .content-title .buttons { padding-right: 0; }

    .footer-wrap { border-color: transparent; background: transparent; }
    .footer-wrap .footer .menu ul li { font-size: 1.3rem; }
    .footer-wrap .footer .usbio li span { font-size: 1.2rem; }
    .footer-wrap .footer .usbio .info { flex-wrap: wrap; }
    .footer-wrap .footer .usbio .info span:nth-child(2) { flex: 1 0 calc(100% - 67px); }

    .main-intro { height: 240px; background-position-y: top; }
    .main-intro h1 { top: 30px; left: 20px; padding-right: 20px; font-size: 2.4rem; }
    .main-intro a { right: 20px; height: 50px; padding: 10px 30px; border-radius: 5px; font-size: 1.6rem; line-height: 30px; }

    .floating-wrap .floating { width: 100%; padding: 15px 15px 10px; }
    .floating-wrap .floating.order { justify-content: start; align-items: start; flex-direction: column; gap: 10px; }
    .floating-wrap .floating.order .price { flex: none; width: 100%; font-size: 1.5rem; font-weight: 500; display: flex; justify-content: space-between; align-items: center; flex-wrap: nowrap; }
    .floating-wrap .floating.order .price span { flex: none; }
    .floating-wrap .floating.order button { flex: none; width: 100%; height: 44px; font-size: 1.6rem; line-height: 44px; }

    body.floating-on .content-wrap { min-height: calc(100vh - 402px); }
    body.floating-on .footer-wrap { margin-bottom: 97px; }
    body.floating-on .btn-top { bottom: 107px; }

    .board .board-toolbar li { padding: 10px 15px; }
    .board .board-toolbar .filter { padding: 10px 0; margin: 0 15px; }

    .board-list03 > li { padding: 10px 15px; }
    .board-list03 > li.item { flex-wrap: wrap; }
    .board-list03 > li.item .col.col-chk { order: 1; }
    .board-list03 > li.item .col.col-data { order: 2; }
    .board-list03 > li.item .col.col-etc { flex: none; width: 100%; padding-top: 10px; border-top: 1px solid #E5E5E5; order: 4; }
    .board-list03 > li.item .col.col-etc:empty { display: none; }
    .board-list03 > li.item .col.col-menu { max-height: 30px; order: 3; }

    .board-list04 > li { padding: 10px 0; }
    .board-list04 > li,
    .board-list04 > li > a { flex-wrap: wrap; }
    .board-list04 > li .col.col-num { width: 20px; font-size: 1.3rem; order: 1; }
    .board-list04 > li .col.col-data { order: 2; }
    .board-list04 > li .col.col-etc { flex: none; width: 100%; padding-top: 10px; border-top: 1px solid #E5E5E5; order: 4; }
    .board-list04 > li .col.col-etc:empty { display: none; }
    .board-list04 > li .col.col-menu { max-height: 30px; order: 3; }
    .board-list04 > li.summary { min-height: 40px; }
    .board-list04 > li.summary dl { font-size: 1.5rem; }

    .dataset-item { align-items: start; flex-direction: column; gap: 5px; }
    .dataset-item .name { min-width: 100%; min-height: 13px; font-size: 1.3rem; color: #747474; justify-content: start; }
    .dataset-item .value { flex: none; width: 100%; min-height: 20px; padding-top: 0; }
    .dataset-item:last-child { border-bottom-width: 0; }
    .dataset-item+.dataset-item { margin-top: 20px; }
    .dataset-item .value .ocl-dt { max-width: 100%; }
    .dataset-item.agree-item .value { padding-top: 10px; }

    .fieldset-item { align-items: start; flex-direction: column; gap: 5px; }
    .fieldset-item label { min-width: 100%; min-height: 13px; font-size: 1.3rem; color: #747474; justify-content: start; }
    .fieldset-item input { flex: none; width: 100%; min-height: 20px; padding-top: 0; }
    .fieldset-item:last-child { border-bottom-width: 0; }
    .fieldset-item+.fieldset-item { margin-top: 20px; }

    /** card section **/
    .card-nonmbr-varify .card-body fieldset { width: 100%; min-width: unset; max-width: unset; }
    .card-help { padding: 10px 15px;}
    .card-help .help li { font-size: 1.3rem;}

    /** search **/
    .card-search { padding: 20px 15px; }
    .card-search .card-header { display: flex; align-items: center; }
    .card-search .card-body { flex-wrap: wrap; gap: 10px; display: none; }
    .card-search .search-form fieldset { gap: 10px; }
    .card-search .search-form .search-keyword { flex: none; width: 100%; max-width: unset; }
    .card-search .search-form .search-date { flex: none; width: 100%; flex-wrap: wrap; gap: 10px; }
    .card-search .search-form .search-date .date { flex: none; width: 100%; max-width: unset; }
    .card-search .search-form .search-date .period { flex: none; width: 100%; min-width: unset; }
    .card-search .search-form .search-date .period li { flex: 1 0 0; height: 40px; border: 1px solid #A8A8A8; border-radius: 3px; background-color: #fff; font-size: 1.5rem; line-height: 40px; text-align: center; text-decoration: none; }
    .card-search .search-button { flex: none; width: 100%; flex-direction: row; }
    .card-search .search-button button { flex: 1 0 0; min-width: unset; }
    .card-search .search-button button.btn-reset { flex: none; width: 50px; }
    .card-search.on .card-header { margin-bottom: 10px; }
    .card-search.on .card-header:after { content: "\f077"; }
    .card-search.on .card-body { display: flex; }

    /** policy **/
    .policy { padding: 15px; }
    .policy-title h2 { font-size: 2.3rem; }
    .policy-title ul li { font-size: 1.2rem; line-height: 1.5rem; }
    .policy-tab a { flex: 1 0 0; min-width: unset; }
    .policy-content { font-size: 1.3rem; line-height: 2rem; }

    /** quotation **/
    .quo-info { justify-content: start; align-items: start; flex-direction: column; flex-wrap: wrap; gap: 0; }
    .quo-info > li { font-size: 1.3rem; text-align: left; }
    .quo-info > li p b { display: inline-block; }
    .quo-info .product { flex: none; order: 2; }
    .quo-info .cty { width: 100%; order: 3; }
    .quo-info .qty { width: 100%; order: 4; }
    .quo-info .cty p,
    .quo-info .qty p { width: 100%; line-height: 30px; }
    .quo-info .state { width: 100%; height: 30px; font-size: 1.5rem; line-height: 30px; order: 1; }

    /** order **/
    .order-info { justify-content: start; align-items: start; flex-direction: column; flex-wrap: wrap; gap: 0; }
    .order-info > li { font-size: 1.3rem; text-align: left; }
    .order-info > li p b { display: inline-block; }
    .order-info .product { flex: none; order: 2; }
    .order-info .qty { width: 100%; order: 3; }
    .order-info .qty p { width: 100%; line-height: 30px; }
    .order-info .state { width: 100%; height: 30px; font-size: 1.5rem; line-height: 30px; order: 1; }

    /** feedback **/
    .feedback-info { flex-wrap: wrap; gap: 10px; }
    .feedback-info li { flex: none; width: 100%; min-width: unset; }
    .feedback-info .date { font-size: 1.3rem; color: #747474; text-align: left; }

    /** inquiry **/
    .inquiry-info { padding: 0 10px; flex-direction: column; flex-wrap: wrap; gap: 10px; }
    .inquiry-info .state { width: unset; height: unset; font-size: 1.5rem; line-height: unset; text-align: left; }
    .inquiry-info ul .ctnt { min-height: unset; padding: 10px 0; font-size: 1.3rem; line-height: 1.5rem; }
    .inquiry-info ul .attach { font-size: 1.3rem; }
    .inquiry-info ul .date { font-size: 1.1rem; color: #747474; }
    .inquiry-row.reply .inquiry-info .state { display: none; }

    /** statistics **/
    .statistics { gap: 10px; }
    .statistics dl { flex: 1 0 0; min-width: unset; }
    .statistics dl dt { font-size: 1.3rem; }
    .statistics dl dd { font-size: 1.5rem; }

    /** popup **/
    .popup-shipping .shipping-select-list { height: calc(100vh - 161px); height: calc(var(--vh, 1vh) * 100 - 161px); }
    .popup-shipping .shipping-add-list { height: calc(100vh - 227px); height: calc(var(--vh, 1vh) * 100 - 227px); }
    .popup-tracking .tracking { height: calc(100dvh - 205px); height: calc(var(--vh, 1vh) * 100 - 205px); }

}

/** mobile **/
@media screen and (max-width: 575px) {
}