@charset "utf-8";

/* 초기화 */
* img {max-width:100%;}
html {overflow-y:scroll;}
body {color:#222;margin:0;padding:0;font-size:1rem;background-color:transparent;font-weight:400;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}
html, h1, h2, h3, h4, h5, h6, form, fieldset, img {margin:0;padding:0;border:0}
h1, h2, h3, h4, h5, h6 {font-size:1rem;}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display:block}

ul, 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;font-size:1rem}
input, button {margin:0;padding:0;font-size:1rem}
input[type="submit"] {cursor:pointer}
button {cursor:pointer}

textarea, select {font-size:1rem}
select {margin:0}
p {margin:0;padding:0;word-break:break-all}
hr {display:none}
pre {overflow-x:scroll;font-size:1.1em}
a {color:#333;text-decoration:none}

*, :after, :beBfore {
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  box-sizing:border-box;
}

input[type=text],input[type=password], textarea {
outline:none;
}

/* div 클릭시 복사방지 */
/* div {user-select:none;-webkit-user-select:none;} */

.msg_sound_only, .sound_only {display:inline-block !important;position:absolute;top:0;left:0;width:0;height:0;margin:0 !important;padding:0 !important;font-size:0;line-height:0;border:0 !important;overflow:hidden !important}

/* 팝업레이어 */
#boxBlack {display:none;left:0;top:0;position:fixed;width:100%;height:100%;z-index:999;background:rgba(0,0,0,.5);}
#hd_pop {overflow:hidden;z-index:1000;width:90%;max-width:680px;position:fixed;left:50%;top:50%;transform:translate(-50%, -50%);margin:0 auto;}
.hd_pops {width:100%;position:relative;}
.hd_pops img {width:100%;display:block;}
.hd_pops_footer {background:#fff;color:#333;text-align:left;position:relative;}
.hd_pops_footer:after {display:block;visibility:hidden;clear:both;content:""}
.hd_pops_footer button {padding:.5rem 1rem;border:0;background:#fff;color:#333;font-size:.9rem;}
.hd_pops_footer .hd_pops_reject {text-align:left}
.hd_pops_footer .hd_pops_close {position:absolute;top:0;right:0}
@media (min-width:720px) {
		#hd_pop {max-width:540px;}
		.hd_pops_footer button {padding:1rem;font-size:1rem;}
}

/* 필수입력 */
.required, textarea.required {background-image:url('../img/require.png') !important;background-repeat:no-repeat !important;background-position:right top !important}

/* 페이징 */
.pg_wrap {clear:both;display:block;margin:1.5rem auto;text-align:center;}
.pg_wrap .pg {align-items:center;display:block;}
.pg_wrap .pg a,
.pg_wrap .pg strong {display:inline-block;text-align:center;vertical-align:middle;background-color:#eee;color:#959595;border:1px solid #eee;font-size:1rem;height:2rem;line-height:2rem;min-width:2rem;text-decoration:none;border-radius:3px;}
.pg_wrap .pg a:focus,
.pg_wrap .pg a:hover {text-decoration:none}
.pg_wrap .pg strong {background:var(--color1);color:#fff;font-weight:normal;}
.pg_start {text-indent:-999px;overflow:hidden;background:url('../img/btn_first.gif') no-repeat 50% 50% #eee;padding:0;border:1px solid #eee}
.pg_prev {text-indent:-999px;overflow:hidden;background:url('../img/btn_prev.gif') no-repeat 50% 50% #eee;padding:0;border:1px solid #eee}
.pg_end {text-indent:-999px;overflow:hidden;background:url('../img/btn_end.gif') no-repeat 50% 50% #eee;padding:0;border:1px solid #eee}
.pg_next {text-indent:-999px;overflow:hidden;background:url('../img/btn_next.gif') no-repeat 50% 50% #eee;padding:0;border:1px solid #eee}
.pg_start:hover,.pg_prev:hover,.pg_end:hover,.pg_next:hover {background-color:#fafafa}

.section {padding:130px 0;}
.title {text-align:center;margin-bottom:3.5rem;}
.title strong {display:block;overflow:hidden;font-size:3rem;color:var(--color_dark);letter-spacing:-1px;font-weight:normal;}
.title strong em { font-style:normal;color:var(--color_point);}
.title p {display:block;font-size:2rem;letter-spacing:-1px;color:var(--color5);margin-top:1rem;}
.title span {display:inline-block;font-size:1.35rem;padding:0 1.5rem;border-radius:1.5rem;line-height:3rem;background:var(--color3);color:var(--color4);margin-bottom:1.5rem;}
.contain {width:1380px;margin:0 auto;}

#pageContent {padding:100px 0 120px 0; background:var(--color5);}

/* ================================================
   상단 고정메뉴
   ================================================ */
#boxTop {position:fixed;top:0;left:0;background:#fff;overflow:hidden;min-width:1540px;z-index:1000;width:100%;}
#boxTop .logo {display:flex;align-items:center;height:90px;padding:0 2.5rem;}
#boxTop .logo img {display:block;height:2.25rem;}
#boxTop #boxMenu {width:45%;padding:0 2.5rem;}
#boxTop #boxMenu a {position:relative;z-index:1;color:#222;line-height:50px;display:block;font-size:1.2rem;font-weight:400;cursor:pointer;position:relative;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;}
#boxTop #boxMenu a::before {content:'';position:absolute;left:0;bottom:0;width:0;height:3px;background:var(--color1);z-index:1;color:var(--color1);-webkit-transition:all .3s ease-in-out; -moz-transition:all .3s ease-in-out; -ms-transition:all .3s ease-in-out; -o-transition:all .3s ease-in-out; transition:all .3s ease-in-out;  }
#boxTop #boxMenu a:hover,
#boxTop #boxMenu a.on {color:var(--color1);}
#boxTop #boxMenu a:hover::before,
#boxTop #boxMenu a.on::before {width:100%;}
#boxTop #boxTel {background:var(--color2);height:90px;padding:0 2.5rem;}
#boxTop #boxTel .icon {display:block;border-radius:2rem;height:3.4rem;width:3.4rem;overflow:hidden;background:#fff;}
#boxTop #boxTel .icon span {display:block;color:var(--color2);line-height:3.4rem;text-align:center;font-size:2rem;}
#boxTop #boxTel .txt {color:#fff;flex:1;margin-left:1rem;display:inline-block;font-size:1rem;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;}
#boxTop #boxTel .txt strong {display:block;font-size:1.75rem;margin-top:.15rem;font-weight:900;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;}
#boxBlank {height:90px;}

/* ================================================
   메인 검색 + 배너
   ================================================ */
#boxMain .boxMainTitle {text-align:center;}
#boxMain .boxMainTitle strong {display:block;font-size:2.75rem;font-weight:500;color:#222;margin-bottom:1.5rem;}
#boxMain .boxMainTitle strong em {font-style:normal;color:var(--color1);}
#boxMain .boxMainTitle p {display:block;font-size:1.5rem;color:#666;}

#orderLookup {width:min(740px,92%);margin:2.5rem auto 3.5rem auto;display:grid;grid-template-columns:1fr 112px;gap:0;border-radius:10px;overflow:hidden;background:#f9fbff;}
#orderLookup .search-left{display:flex;align-items:center;gap:10px;padding:1rem;background:#fff;}
#orderLookup .search-icon{width:20px;height:20px;color:#95a5bd;}
#orderLookup input{width:100%;border:0;outline:0;background:transparent;font-size:1rem;background:#fff;}
#orderLookup button{border:0;background:var(--color1);color:#fff;display:block;cursor:pointer;text-align:center;font-size:1rem;font-weight:normal;}

#boxMainBanner{margin-top:5rem; gap:32px;justify-content: center;}
#boxMainBanner > a{flex:1;max-width:360px;background:#fff;border-radius:20px;padding:36px 24px;text-align:center;box-shadow:0 20px 40px rgba(30,60,120,.12);transition:transform .25s ease,box-shadow .25s ease}
#boxMainBanner > a:hover{transform:translateY(-6px);box-shadow:0 28px 60px rgba(30,60,120,.18)}
#boxMainBanner strong{display:block;font-size:1.5rem;font-weight:700;color:#1f3f75;margin-bottom:.5rem}
#boxMainBanner img {display:block;margin:0 auto 1rem auto;max-width:50%;}
#boxMainBanner p{margin:0;font-size:1rem;color:#6b7a90}

/* ================================================
   상단 필터
   ================================================ */
#filterSort {margin-bottom:2.5rem;}
#filterSort .contain {gap:1rem;}
#filterSort .contain .fs-left{display:flex;gap:.9rem;flex-wrap:wrap}
#filterSort .contain .fs-right{display:flex;gap:.9rem;flex-wrap:wrap}
#filterSort .contain .fs-group{display:flex;flex-direction:column;gap:6px;min-width:160px}
#filterSort .contain .fs-label{font-size:.9rem;line-height:1.2}
#filterSort .contain select{height:3rem;padding:0 1rem;border:1px solid #ccc;border-radius:.25rem;background:#fff}
  
/* ================================================
   명함 리스트
   ================================================ */
#boxCard .boxCardItem{width:24%;border-radius:.75rem;background:#fff;overflow:hidden;display:flex;flex-direction:column;margin-bottom:1rem;}
#boxCard .boxThumb {padding:1rem 1rem .5rem 1rem;background:#fff;}
#boxCard .thumb{background:var(--color4);display:flex;align-items:stretch;flex-wrap: wrap;aspect-ratio:1/1;overflow:hidden;padding:.75rem;border-radius:.5rem;overflow:hidden;}
#boxCard .thumb .thumb-img{background-repeat:no-repeat;background-position:center center;background-size:contain;width:100%;}
#boxCard .thumb.vertical .thumb-img{	width:50%;border-right:2px solid var(--color4);}
#boxCard .thumb.vertical .thumb-img:last-child {border-right:0;}
#boxCard .thumb.horizontal .thumb-img{border-bottom:1px solid var(--color4);}
#boxCard .thumb.horizontal .thumb-img:last-child {border-bottom:0;}
#boxCard .info{padding:1rem 1.5rem;display:flex;flex-direction:column;gap:.5rem;}
#boxCard .boxBadge{font-size:1rem;color:rgba(31,37,44,.7);display:flex;gap:.35rem;flex-wrap:wrap;margin-bottom:.5rem;}
#boxCard .badge{font-size:.85rem;font-weight:500;padding:0 .75rem;line-height:1.6rem;border-radius:999px;background:var(--color5);color:var(--color3);}
#boxCard .badge:first-child{background:var(--color3);color:#fff;}
#boxCard .badge.winclass {background:var(--color_point);color:#fff;}
#boxCard .name{font-size:1.5rem;font-weight:600;}
#boxCard .meta{font-size:1rem;color:#777;margin-bottom:.5rem;}
#boxCard .price{font-size:1.15rem;font-weight:500;color:#d92b28;}
#boxCard .price strong {font-size:1.5rem;font-weight:700;}
#boxCard .boxItemBtn {border-top:1px solid #ddd;padding-top:.75rem;}
#boxCard .btnDesignSelect {background:var(--color3);color:#fff;font-size:1.05rem;font-weight:500;padding:0 1.5rem;letter-spacing:-.5px;line-height:2.4rem;border-radius:1.5rem;border:0;border-bottom:3px solid var(--color1);}
#boxCard .boxCardItem.empty{border-style:none;background:transparent;box-shadow:none;}
#boxCard .boxCardItem.empty *{visibility:hidden;}

/* ================================================
   명함 주문폼
   ================================================ */
#boxOrdersCard section{background:#fff;border-radius:1rem;margin-bottom:1rem;padding:2.5rem;font-size:1.15rem;}
#boxOrdersCard section .sectitle{font-size:1.75rem;margin-bottom:1.5rem;font-weight:500;}
#boxOrdersCard section .boxOrdersCardfield {display:flex;}
#boxOrdersCard section .boxOrdersCardfield.half {width:50%;gap:5rem;}
#boxOrdersCard section .boxOrdersCardfield.third {width:33.3333%;}
#boxOrdersCard section .boxOrdersCardfield.quarter {width:25%;}
#boxOrdersCard section .boxOrdersCardfield.fifth {width:20%;}
#boxOrdersCard section .boxOrdersCardfield dl{width:100%;display:flex;align-items:center;}
#boxOrdersCard section .boxOrdersCardfield dt{width:100px;font-size:1rem;color:#555;text-align:left;}
#boxOrdersCard section .boxOrdersCardfield dd{flex:1;display:flex;gap:8px;align-items:center}
#boxOrdersCard input.price {text-align:right;}
#boxOrdersCard input[type="number"] {text-align:right;}
#boxOrdersCard input[type="text"],
#boxOrdersCard input[type="number"],
#boxOrdersCard select {width:100%;padding:0 1rem;border:1px solid #ddd;border-radius:.25rem;line-height:3rem;height:3rem;}
#boxOrdersCard textarea.ta{width:100%;min-height:90px;padding:1rem;resize:vertical;border:1px solid #ddd;border-radius:.25rem;}
#boxOrdersCard .boxBtn{display:flex;justify-content:center;align-items:center;gap:1.25rem;margin-top:2.25rem}
#boxOrdersCard .boxBtn button{padding-left:1rem;position:relative;display:block;font-size:1.15rem;font-weight:500;height:4.4rem;min-width:18rem;border-radius:1rem;cursor:pointer;transition:transform .18s ease;}
#boxOrdersCard .boxBtn button span {position:absolute;left:1rem;top:50%;transform:translateY(-50%);display:block;color:#fff;height:2.4rem;width:2.4rem;line-height:2.4rem;border-radius:50%;text-align:center;}
#boxOrdersCard .boxBtn button:hover{transform:translateY(-2px);}
#boxOrdersCard .boxBtn .btnWrite{border:1px solid #c1d3ed;color:#fff;background:linear-gradient(180deg,#43a7f9 0%,#2d99f7 10%,#1c77ec 98%,#0245be 100%);box-shadow:0 .5rem .5rem rgba(11,91,255,.05);}
#boxOrdersCard .boxBtn .btnWrite span {background:#1a78de;border:1px solid rgba(255,255,255,.5);}
#boxOrdersCard .boxBtn .btnBack{border:1px solid #ddd;color:#222;background:linear-gradient(180deg,#fff 0%,#f9fafd 10%,#eff3f8 98%,#d0d6e5 100%);box-shadow:0 .5rem .5rem rgba(0,0,0,.05);}
#boxOrdersCard .boxBtn .btnBack span {background:#939bac;border:1px solid rgba(0,0,0,.25);}
#boxOrdersCard input:focus,#boxOrdersCard textarea:focus{outline:none;border-color:#111}

#canvasCard{position:absolute;right:5%;bottom:10%;width:90%;height:55%;display:flex;align-items:flex-end;pointer-events:none;}
#canvasCard .content-group{font-size:1rem;min-width:60%;display:grid;grid-template-columns:repeat(2,1fr);gap:.35rem;text-align:left;margin-right:auto;overflow:hidden;}
#canvasCard.align-right .content-group{max-width:60%;margin-left:auto;margin-right:0;}
#canvasCard .field{display:block;white-space:nowrap;}
#canvasCard .field.field-pos-dept,
#canvasCard .field.field-name{margin-bottom:.25em;}
#canvasCard .field.field-zipaddr{margin-top:1em;}
#canvasCard #name{font-size:1.5rem;font-weight:800;}
#canvasCard #zipaddr{white-space:normal;word-break:keep-all;overflow-wrap:anywhere;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
#canvasCard .field .tel-inline{display:flex;gap:.5rem;}
#canvasCard .field .tel-inline input{width:100%;}
#canvasCard .field .tel-inline input[name="tel_ext"]{max-width:80px;}
#canvasCard .field[data-has-value="1"].field-tel::before{content:"T ";font-weight:bold;}
#canvasCard .field[data-has-value="1"].field-mobile::before{content:"M ";font-weight:bold;}
#canvasCard .field[data-has-value="1"].field-fax::before{content:"F ";font-weight:bold;}
#canvasCard .field[data-has-value="1"].field-email::before{content:"E ";font-weight:bold;}

#canvasCard_en{position:absolute;right:2.5%;bottom:10%;width:90%;height:55%;display:flex;align-items:flex-end;pointer-events:none;}
#canvasCard_en .content-group{font-size:1rem;min-width:100%;display:grid;grid-template-columns:repeat(2,1fr);gap:.35rem;text-align:left;margin-right:auto;overflow:hidden;}
#canvasCard_en.align-right .content-group{max-width:60%;margin-left:auto;margin-right:0;}
#canvasCard_en .field{display:block;white-space:nowrap;}
#canvasCard_en .field.field-pos-dept,
#canvasCard_en .field.field-name{margin-bottom:.25em;}
#canvasCard_en .field.field-zipaddr{margin-top:1em;}
#canvasCard_en #name_en{font-size:1.5rem;font-weight:800;}
#canvasCard_en #zipaddr_en{white-space:normal;word-break:keep-all;overflow-wrap:anywhere;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
#canvasCard_en .field .tel-inline{display:flex;gap:.5rem;}
#canvasCard_en .field .tel-inline input{width:100%;}
#canvasCard_en .field .tel-inline input[name="tel_ext"]{max-width:80px;}
#canvasCard_en .field[data-has-value="1"].field-tel::before{content:"T ";font-weight:bold;}
#canvasCard_en .field[data-has-value="1"].field-mobile::before{content:"M ";font-weight:bold;}
#canvasCard_en .field[data-has-value="1"].field-fax::before{content:"F ";font-weight:bold;}
#canvasCard_en .field[data-has-value="1"].field-email::before{content:"E ";font-weight:bold;}

#boxCardSample {display: flex;align-items: stretch;justify-content: space-between;}
#boxCardSample .card_data .attach-help {width:100%;margin:.75rem 0 .5rem 0;padding:0 1rem;border-radius:.25rem;font-size:.85rem;line-height:2rem;background:#222;color:#fff;}
#boxCardSample .card_data {width:50%;gap:1rem;}
#boxCardSample .card_data .addr {width:100%;}
#boxCardSample .card_data .addr .addrSearch {display:flex;align-items: center;gap:.5rem;}
#boxCardSample .card_data .addr .addrSearch input[type='text'] {width:100px;}
#boxCardSample .card_data .addr .addrSearch .btn_juso_open {background:var(--color1);color:#fff;width:120px;border:0;line-height:3rem;border-radius:.25rem;}
#boxCardSample .card_data .addr .addrInput {margin:.5rem 0;}
#boxCardSample .card_data .addr .addrInput:first-child {margin-top:0;}
#boxCardSample .card_data .tel-inline{display:flex;gap:.5rem;}
#boxCardSample .card_data .tel-inline input{width:100%;}
#boxCardSample .card_data .tel-inline input[name="tel_ext"]{max-width:35%;}
#boxCardSample .card_img {width:45%;}
#boxCardSample .card_img .card {position:relative;width:100%;background-position:top center; background-size:contain; background-repeat:no-repeat;box-shadow:inset 0 0 0 1px #ddd;}
#boxCardSample .card_img.H .card:last-child{box-shadow:inset 0 -1px 0 0 #ddd, inset 1px 0 0 0 #ddd, inset -1px 0 0 0 #ddd;}
#boxCardSample .card_img.V {display:flex;align-items: start;}
#boxCardSample .card_img.V .card {width:50%;}
#boxCardSample .card_img.V .card:last-child{box-shadow:inset 0 -1px 0 0 #ddd,inset 0 1px 0 0 #ddd,inset -1px 0 0 0 #ddd;}
#boxCardSample .card_img.V .card #canvasCard {width:80%;bottom:7.5%;}

#boxAttach .attach-help {display:inline-block;font-size:1rem;color:#777;margin-left:.5rem;}
#boxAttach dl {display:flex;align-items:center;}
#boxAttach dl dt {width:100px;color:#555;line-height:3rem;}

.back-note-row button{width:6rem;height:3rem;border:1px solid #ddd;border-radius:.25rem;background:#fff;}
.back-note-row button:hover{border-color:#111;font-weight:900;}

/* ================================================
   고무인/스탬프 리스트
   ================================================ */
#boxStamp .boxStampItem{width:24%;border-radius:.75rem;background:#fff;overflow:hidden;display:flex;flex-direction:column;margin-bottom:1rem;}
#boxStamp .boxStampItem.empty{visibility:hidden;pointer-events:none}
#boxStamp .boxThumb{padding:1rem;background:#fff;}
#boxStamp .thumb{aspect-ratio:1/1;border-radius:.5rem;background:#fff center/contain no-repeat;border:1px solid #ddd;}
#boxStamp .info{padding:.5rem 1.5rem 1.5rem;display:flex;flex-direction:column;gap:.6rem;}
#boxStamp .info .boxBadge{display:flex;gap:.35rem;flex-wrap:wrap;margin-bottom:.25rem;}
#boxStamp .info .boxBadge .badge{font-size:.85rem;font-weight:500;padding:0 .75rem;line-height:1.6rem;border-radius:999px;background:var(--color3);color:#fff;}
#boxStamp .info .name{font-size:1.45rem;font-weight:600;letter-spacing:-.3px;}
#boxStamp .info .summary{font-size:.95rem;color:#888;}
#boxStamp .info .hint{font-size:.85rem;color:#999;}
#boxStamp .info .boxItemBtn{margin-top:auto;border-top:1px solid #eee;padding-top:.9rem;align-items:center;}
#boxStamp .btnDesignSelect{background:var(--color3);color:#fff;font-size:1.05rem;font-weight:500;padding:0 1.5rem;line-height:2.4rem;border-radius:1.5rem;border:0;border-bottom:3px solid var(--color1);}

/* ================================================
   고무인/스탬프 주문폼
   ================================================ */
#boxOrdersStamp section{background:#fff;border-radius:1rem;margin-bottom:1rem;padding:2.5rem;font-size:1.15rem;}
#boxOrdersStamp .sectitle{font-size:1.75rem;margin-bottom:1.5rem;font-weight:500;}
#boxOrdersStamp .prodThumb{width:45%;aspect-ratio:1/1;border-radius:1rem;border:1px solid #ddd;padding:2.5rem;}
#boxOrdersStamp .prodThumb span {display:block;width:100%;height:100%;background:#fff center/contain no-repeat;}
#boxOrdersStamp .boxOrdersStampfield {width:50%;background:#fff;}
#boxOrdersStamp .boxOrdersStampfield dl {margin-bottom:1rem;display:flex;align-items: center;gap:1rem;}
#boxOrdersStamp .boxOrdersStampfield dl dt {width:80px;color:#777;}
#boxOrdersStamp .boxOrdersStampfield dl dd {flex:1;}
#boxOrdersStamp input.price,
#boxOrdersStamp input[type="number"]{text-align:right;}
#boxOrdersStamp input[type="text"],
#boxOrdersStamp input[type="number"],
#boxOrdersStamp select{width:100%;padding:0 1rem;border:1px solid #ddd;border-radius:.25rem;line-height:3rem;height:3rem;background:#fff;}
#boxOrdersStamp textarea {width:100%;min-height:160px;padding:1rem;resize:vertical;border:1px solid #ddd;border-radius:.25rem;}
#boxOrdersStamp input:focus,
#boxOrdersStamp textarea:focus{outline:none;border-color:#111;}
#boxOrdersStamp section .prodMeta{flex:1;display:flex;flex-direction:column;gap:.75rem;}
#boxOrdersStamp section .prodMeta .prodName{display:flex;align-items: center;font-size:1.75rem;font-weight:500;}
#boxOrdersStamp section .prodMeta .prodCat{display:inline-flex;align-self:flex-start;font-size:.95rem;font-weight:600;padding:0 1rem;line-height:2rem;border-radius:999px;background:var(--color3);color:#fff;margin-right:1rem;}
#boxOrdersStamp section .prodMeta .prodDesc{font-size:1.05rem;color:#777;line-height:1.55;padding:1rem 0;margin-bottom:1rem;}
#boxOrdersStamp section .attach-help{width:100%;margin:.75rem 0 1rem 0;padding:0 1rem;border-radius:.25rem;font-size:.85rem;line-height:2rem;background:#222;color:#fff;}
#boxOrdersStamp section .optGrid{border-top:2px solid #333;}
#boxOrdersStamp section .optRow{display:grid;grid-template-columns:180px 420px 1fr;border-bottom:1px solid #ddd;}
#boxOrdersStamp section .optCell{padding:24px;border-left:1px solid #ddd;}
#boxOrdersStamp section .optNameCell{height:100%;display:flex;align-items:center;justify-content:center;font-size:1.4rem;font-weight:600;}
#boxOrdersStamp section .optImgCell img{width:100%;height:auto;display:block;}
#boxOrdersStamp section .optImgCell,
#boxOrdersStamp section .optInputCell{display:flex;flex-direction:column;justify-content:center;gap:1rem;}
#boxOrdersStamp section .optRadio{display:flex;gap:1rem;}
#boxOrdersStamp section .optSideCell{display:flex;flex-direction:column;gap:1rem;text-align:center;font-size:1.15rem;}
#boxOrdersStamp section .optSideTop{display:flex;flex-direction:column;gap:1rem;}
#boxOrdersStamp section .optSideCell .qtySelect{width:100%;height:3.4rem;padding:0 1rem;border:1px solid #e5e7eb;border-radius:.25rem;background:#fff;}
#boxOrdersStamp section .optPriceLine{display:flex;align-items:center;padding:.5rem 1rem;border:1px solid #e5e7eb;border-radius:.25rem;background:#f9fafb;}
#boxOrdersStamp section .optPriceLabel{white-space:nowrap;font-weight:600;}
#boxOrdersStamp section .optPriceInput{flex:1;min-width:0;text-align:right;border:0;font-size:1.25rem;background:transparent;font-weight:600;}
#boxOrdersStamp section .optPriceUnit{white-space:nowrap;color:#6b7280;}
#boxOrdersStamp section .optResetBtn{height:2.4rem;padding:0 1rem;border:1px solid #111;border-radius:.25rem;background:#111;color:#fff;font-weight:500;cursor:pointer;margin-left:2rem;}
#boxOrdersStamp section .optResetBtn:disabled{opacity:.45;cursor:not-allowed;}

#boxOrdersStamp section .totalBar{margin-top:1.5rem;padding-top:1.5rem;border-top:1px solid #eee;align-items:center;}
#boxOrdersStamp section .totalTit{font-size:1.25rem;font-weight:700;}
#boxOrdersStamp section .totalHint{font-size:1rem;color:#999;margin-top:.35rem;}
#boxOrdersStamp section .totalPrice{width:100%;max-width:22rem;height:3.2rem;border:0;font-size:2rem;font-weight:800;color:#d92b28;text-align:right;background:transparent;}

#boxOrdersStamp .boxBtn{display:flex;justify-content:center;align-items:center;gap:1.25rem;margin-top:2.25rem;}
#boxOrdersStamp .boxBtn button{padding-left:1rem;position:relative;display:block;font-size:1.15rem;font-weight:500;height:4.4rem;min-width:18rem;border-radius:1rem;cursor:pointer;transition:transform .18s ease;}
#boxOrdersStamp .boxBtn button span{position:absolute;left:1rem;top:50%;transform:translateY(-50%);display:block;color:#fff;height:2.4rem;width:2.4rem;line-height:2.4rem;border-radius:50%;text-align:center;}
#boxOrdersStamp .boxBtn button:hover{transform:translateY(-2px);}
#boxOrdersStamp .boxBtn .btnWrite{border:1px solid #c1d3ed;color:#fff;background:linear-gradient(180deg,#43a7f9 0%,#2d99f7 10%,#1c77ec 98%,#0245be 100%);box-shadow:0 .5rem .5rem rgba(11,91,255,.05);}
#boxOrdersStamp .boxBtn .btnWrite span{background:#1a78de;border:1px solid rgba(255,255,255,.5);}
#boxOrdersStamp .boxBtn .btnBack{border:1px solid #ddd;color:#222;background:linear-gradient(180deg,#fff 0%,#f9fafd 10%,#eff3f8 98%,#d0d6e5 100%);box-shadow:0 .5rem .5rem rgba(0,0,0,.05);}
#boxOrdersStamp .boxBtn .btnBack span{background:#939bac;border:1px solid rgba(0,0,0,.25);}
#boxOrdersStamp .btnWrite[disabled]{opacity:.45;filter:grayscale(1);cursor:not-allowed;}

:root{
	--c-card:#fff;
	--c-line:#e6ecf4;
	--c-text:#1d2a3a;
	--c-sub:#6b7c93;
	--c-primary:#2f67b2;
}

/* ================================================
   주문내역조회 리스트
   ================================================ */
#boxOrders .boxOrdersTitle {text-align:center;font-size:1.5rem;color:#666;line-height:100%;}
#boxOrders .boxOrdersTitle em {font-weight:500;display:inline-block;font-style:normal;color:var(--color1);}
#boxOrders .boxOrdersTitle b {font-weight:600;display:inline-block;color:#111;}

#boxOrders .orders-grid-table{width:100%;background:#fff;border-radius:.25rem;overflow:hidden;box-shadow:0 .5rem 1.5rem rgba(0,0,0,.06)}
#boxOrders .orders-grid-row,
#boxOrders .orders-grid-head{display:grid;gap:1rem;grid-template-columns:220px 220px 1fr 110px 140px 140px;border-bottom:1px solid #ddd}
#boxOrders .orders-grid-head {background:#f7f9fc;}
#boxOrders .orders-grid-head .c{line-height:3rem;font-weight:500;text-align:center}
#boxOrders .orders-grid-body{display:block}
#boxOrders .orders-grid-row:last-child{border-bottom:0}
#boxOrders .orders-grid-row .c{line-height:3.4rem;text-align:center;}
#boxOrders .orders-grid-row .dept{font-weight:500;color:#06c}
#boxOrders .orders-grid-row .price{font-weight:600;}
#boxOrders .orders-grid-row .name{text-align:left;padding-left:1.5rem;}
#boxOrders .orders-grid-empty{padding:400px 0;text-align:center;color:#777}
#boxOrders .paging{margin-top:1.5rem;text-align:center}

/* ================================================
   주문내역조회 상세페이지
   ================================================ */
#boxOrderView {display: flex;align-items: stretch;justify-content: space-between;flex-wrap: wrap;}
#boxOrderView section {margin-top:1.5rem;background:#fff;padding:2.5rem;border-radius:1rem;box-shadow:0 .5rem .5rem rgba(0,0,0,.06);}
#boxOrderView section:first-child {margin-top:0;}
#boxOrderView section .tit{font-size:1.5rem;font-weight:600;margin-bottom:1rem;line-height:100%;}
#boxOrderView section .tit .datetime {float:right;color:#777;font-size:.9rem;font-weight:normal;}

#boxOrderView .grid dl {display:grid;grid-template-columns:100px 1fr;gap:1rem;align-items:center;border-bottom:1px solid #ddd;line-height:3rem;}
#boxOrderView .grid dl dt {color:#777;font-weight:400;}
#boxOrderView .grid dl dd {color:#111827;font-weight:500;}
#boxOrderView .dl-attach a{text-decoration:underline;color:var(--color1);}

#boxOrderView .boxOrderViewLeft {width:48.5%;}
#boxOrderView .boxOrderViewLeft .order-view-head .sub{display:flex;align-items:center;gap:1rem;background:#f9f9f9;border:1px solid #ddd;line-height:3.4rem;border-radius:.5rem;padding:0 1rem;}
#boxOrderView .boxOrderViewLeft .order-view-head .sub .btnCopy{cursor:pointer;display:inline-flex;align-items:center;height:2rem;padding:0 1rem;border-radius:1rem;background:#111;color:#fff;font-size:.9rem;font-weight:600;}
#boxOrderView .boxOrderViewLeft .order-view-head .sub .odid{font-weight:600;font-size:1rem;}

#boxOrderView .boxOrderViewRight #optGrid{display:flex;flex-direction:column;gap:1rem;margin-top:1.5rem;}
#boxOrderView .boxOrderViewRight #optGrid .optRow{gap:1rem;display:grid;grid-template-columns:90px 1fr;align-items:center;border:1px solid #ddd;padding:1rem}
#boxOrderView .boxOrderViewRight #optGrid .optImg{text-align:center;opacity:1/1;}
#boxOrderView .boxOrderViewRight #optGrid .optImg img{max-width:100%;object-fit:contain}
#boxOrderView .boxOrderViewRight #optGrid .optCell{font-size:1rem;overflow:hidden;}
#boxOrderView .boxOrderViewRight #optGrid .optCell .optCellSub {gap:1rem;display:grid;grid-template-columns:1fr 90px 120px;}
#boxOrderView .boxOrderViewRight #optGrid .optCell .optCellSub .optName {font-size:1.15rem;}
#boxOrderView .boxOrderViewRight #optGrid .optCell .optCellSub .optName > div {font-weight:600;margin-top:.25rem;font-size:1rem;}
#boxOrderView .boxOrderViewRight #optGrid .optCell .optCellSub .optQty{text-align:center;font-weight:600}
#boxOrderView .boxOrderViewRight #optGrid .optCell .optCellSub .optPrice {text-align:right;font-weight:600;padding-right:1rem;}
#boxOrderView .boxOrderViewRight #optGrid .optCell .optMemo{white-space:pre-line;line-height:1.4;font-size:.9rem;color:#555;margin-top:.35rem;background:#f9f9f9;padding:1rem;border-radius:.25rem;}
#boxOrderView .boxOrderViewRight #optGrid .optCell .optFile{margin-top:.5rem;display:flex;flex-direction:column;gap:.4rem;max-width:100%;}
#boxOrderView .boxOrderViewRight #optGrid .optCell .optFile .file.image{display:inline-block;max-width:180px;max-height:120px;overflow:hidden;border:1px solid #e5e7eb;border-radius:.25rem;}
#boxOrderView .boxOrderViewRight #optGrid .optCell .optFile .file.image img{display:block;max-width:100%;max-height:120px;width:auto;height:auto;object-fit:contain;margin:0 auto;}
#boxOrderView .boxOrderViewRight #optGrid .optCell .optFile .file.link{display:inline-block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.9rem;}

#boxOrderView .boxOrderViewRight .card_img {width:100%;margin-top:1.5rem;}
#boxOrderView .boxOrderViewRight .card_img .card {position:relative;width:100%;background-position:top center; background-size:contain; background-repeat:no-repeat;box-shadow:inset 0 0 0 1px #ddd;}
#boxOrderView .boxOrderViewRight .card_img.H .card:last-child{box-shadow:inset 0 -1px 0 0 #ddd, inset 1px 0 0 0 #ddd, inset -1px 0 0 0 #ddd;}
#boxOrderView .boxOrderViewRight .card_img.V .card {width:50%;}
#boxOrderView .boxOrderViewRight .card_img.V .card:last-child{box-shadow:inset 0 -1px 0 0 #ddd,inset 0 1px 0 0 #ddd,inset -1px 0 0 0 #ddd;}

#boxOrderView .boxOrderViewRight {width:48.5%;}

#boxOrderView .boxOrderViewRight .req-form{display:flex;flex-direction:column;gap:10px;margin-bottom:1.5rem;}
#boxOrderView .boxOrderViewRight .req-ta{width:100%;min-height:180px;border:1px solid #e7ecf3;border-radius:.25rem;padding:12px 14px;resize:vertical;line-height:1.6;outline:none;background:#fff;}
#boxOrderView .boxOrderViewRight .req-ta:focus{border-color:#111;}
#boxOrderView .boxOrderViewRight .req-actions{display:flex;gap:.5rem;justify-content:flex-end;}
#boxOrderView .boxOrderViewRight .btn{min-width:100px;height:3rem;padding:0 1rem;border-radius:.25rem;border:1px solid #111;background:#111;color:#fff;cursor:pointer;font-weight:600;display:inline-flex;align-items:center;justify-content:center;text-decoration:none;}
#boxOrderView .boxOrderViewRight .btn:hover{opacity:0.92;}
#boxOrderView .boxOrderViewRight .btn.ghost{background:#fff;color:#111;border-color:#e7ecf3;}
#boxOrderView .boxOrderViewRight .btn.ghost:hover{background:#f9fafb;}

#boxOrderView .boxOrderViewRight .req-empty{padding:1.5rem;border:1px dashed #ddd;border-radius:.25rem;color:#6b7280;background:#f9fafb;text-align:center;}
#boxOrderView .boxOrderViewRight .req-list{display:flex;flex-direction:column;}
#boxOrderView .boxOrderViewRight .req-item{border-bottom:1px dashed #ddd;padding:.75rem;background:#fff;}
#boxOrderView .boxOrderViewRight .req-item .meta{display:flex;font-size:.9rem;align-items:center;margin-bottom:1rem;justify-content: space-between;}
#boxOrderView .boxOrderViewRight .req-item .meta .dt{color:#777;font-size:.8rem;}
#boxOrderView .boxOrderViewRight .req-item .meta .by{color:#6b7280;}
#boxOrderView .boxOrderViewRight .req-item .txt{font-size:1rem;line-height:1.4;color:#111827;white-space:pre-wrap;word-break:break-word;}
#boxOrderView .boxOrderViewRight .req-item.is-staff {background:#f9f9f9;}
#boxOrderView .boxOrderViewRight .req-item.is-staff .meta .by{color:var(--color1);}

/* ================================================
   자주하는 질문
   ================================================ */
#boxFaq{position:relative;background:transparent;padding:0;}
#boxFaqCate{display:flex;gap:.8rem;flex-wrap:wrap;margin:0 0 2rem 0;}
#boxFaqCate span{padding:.9rem 1.7rem;border:1px solid #e3e8f1;border-radius:999px;font-size:1rem;line-height:1;cursor:pointer;background:#fff;color:#3b4151;box-shadow:0 2px 10px rgba(16,24,40,.04);transition:.18s;}
#boxFaqCate span:hover{transform:translateY(-1px);box-shadow:0 2px 10px rgba(16,24,40,.1);}
#boxFaqCate span.on{background:var(--color1);border-color:var(--color1);color:#fff;font-weight:600;box-shadow:0 2px 10px rgba(16,24,40,.1);}

#boxFaqLoad{background:#fff;border:1px solid #e7ecf3;border-radius:1rem;overflow:hidden;box-shadow:0 2px 10px rgba(16,24,40,.05);}
#boxFaq dl{display:block;margin:0;background:#fff;border-top:1px solid #ddd;overflow:hidden;}
#boxFaq dl:first-child{border-top:0;}
#boxFaq dl dt{display:flex;align-items:center;gap:1.5rem;padding:0 2.4rem;cursor:pointer;position:relative;min-height:6.2rem;font-size:1rem;font-weight:600;color:#1f2937;background:#fff;}
#boxFaq dl dt span{display:inline-flex;align-items:center;justify-content:center;width:3.2rem;height:3.2rem;border-radius:50%;background:#eef6ff;color:var(--color1);font-weight:900;font-family:"Vitro-Head";}
#boxFaq dl dt .con{flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;padding-right:3.8rem;}
#boxFaq dl dt i{position:absolute;right:2.2rem;top:50%;transform:translateY(-50%);font-size:1rem;color:#8a94a6;transition:.18s;}
#boxFaq dl.on dt{background:#f8fbff;}
#boxFaq dl.on dt i{transform:translateY(-50%) rotate(180deg);color:var(--color1);}

#boxFaq dl dd{display:none;margin:0;padding:0 2.4rem 2.4rem 2.4rem;background:#f8fbff;border-top:1px solid #ddd;}
#boxFaq dl.on dd{display:block;}
#boxFaq dl dd .con{padding:2rem 2.2rem;font-size:1.15rem;line-height:180%;color:#374151;}

#boxFaq dl dd table{border-spacing:0;border-collapse:collapse;width:100%;box-sizing:border-box;}
#boxFaq dl dd table tr td{border:1px solid #e7ecf3;padding:1.3rem 1.8rem;font-size:1.45rem;}
#boxFaq dl dd table tr td b{font-weight:700;font-size:1.12em;margin-bottom:.4rem;}
#boxFaq dl dd img{display:block;max-width:100%;height:auto;border-radius:.25rem;}

#boxFaq dl dd em{font-style:normal;}
#boxFaq dl dd em.under{background:linear-gradient(transparent 68%,#fff1d6 32%);}

/* ================================================
   하단 카피
   ================================================ */
#boxCopy {background:#16243d;color:#97a2b7;text-align:center;font-size:1rem;}
#boxCopy .boxCopyLogo {display:block;margin:0 auto 3.5rem auto;}
#boxCopy .boxCopyLogo img {height:2.5rem;}
#boxCopy .boxCopyLink a {display:block;color:#97a2b7;}
#boxCopy .boxCopyLink a.strong {font-weight:600;color:#fff;}
#boxCopy .boxCopyLink em {width:1px;height:1rem;background:rgba(255,255,255,.15);display:block;margin:0 1.5rem;}
#boxCopy .boxCopySub {margin-top:2.5rem;line-height:1.6;}
#boxCopyright {line-height:4rem;border-top:1px solid rgba(255,255,255,.15);display:block;text-align:center;background:#16243d;color:#97a2b7; padding-bottom:6rem;}
#boxCopyright a {color:#fff;}

/* ================================================
   고정 퀵메뉴
   ================================================ */
#boxQuick {position:fixed;top:55%;right:5rem;z-index:10000;}
#boxQuick a span {display:block;position:absolute;top:10001;bottom:-.5rem;background:#fff;font-size:.8rem;border-radius:1rem;padding:0 .25rem;}
#boxQuickKakao {position:absolute;top:0;left:0;background:#FFE812;width:4rem;height:4rem;border-radius:2rem;}
#boxQuickKakao img {display:block;margin:0 auto;width:70%;}
#boxQuickBlog {position:absolute;top:5rem;z-index:10000;background:#009345;width:4rem;height:4rem;border-radius:2rem;}
#boxQuickBlog img {display:block;margin:0 auto;width:70%;}
#boxQuickTop {position:absolute;top:5rem;z-index:9999;border:0;background:var(--color_point);width:4rem;height:4rem;border-radius:2rem;}
#boxQuickTop img {display:block;margin:0 auto;width:50%;}
#boxQuickTop.on {top:10rem;background:rgba(0,0,0,0.5);}
#boxQuickTop.on:hover {background:#01478c;}

#fixedBanner {position:fixed;right:0;top:160px;z-index:100;}

/* ================================================
   주소 팝업 레이어
   ================================================ */
.juso-layer{display:none;position:fixed;inset:0;z-index:9999;}
.juso-dim{position:absolute;inset:0;background:rgba(0,0,0,.5);backdrop-filter:blur(2px);}
.juso-modal{position:relative;width:min(920px,calc(100% - 24px));margin:6vh auto;background:#fff;border-radius:1rem;overflow:hidden;box-shadow:0 18px 60px rgba(0,0,0,.25);border:1px solid rgba(0,0,0,.06);}
.juso-head{display:flex;justify-content:space-between;align-items:center;padding:1rem 1.5rem;border-bottom:1px solid #f0f0f0;background:linear-gradient(#fff,#fafafa);}
.juso-head .juso-title{font-weight:500;font-size:1.25rem;letter-spacing:-.02em;}
.juso-head .juso-title .juso-status{display:inline-block;margin-left:1rem;color:#777;font-size:1rem;}
.juso-head .juso-close{height:2rem;background:transparent;border:0;font-size:2rem;}
.juso-body{padding:16px;}
.juso-body .juso-row--search{margin-bottom:1rem;display:flex;align-items:center;justify-content: space-between;}
.juso-body .juso-row--search input {flex:1;border:1px solid #ddd;border-radius:.25rem 0 0 .25rem;line-height:3rem;font-size:1rem;padding:0 1rem;}
.juso-body .juso-row--search button {background:#222;color:#fff;border:0;height:3rem;padding:0 1.5rem;border-radius:0 .25rem .25rem 0;}
.juso-body .juso-row--search .juso-count{width:120px;max-width:40vw;border:1px solid #ddd;border-radius:.25rem;margin-left:.5rem;height:3rem;text-align:center;}
.juso-foot{margin-top:12px;display:flex;justify-content:space-between;align-items:center;gap:10px;}
.juso-foot .juso-page{font-size:12px;color:#777;white-space:nowrap;}
.juso-foot .juso-prev,
.juso-foot .juso-next{min-width:88px;height:3rem;line-height:3rem;background:#f5f5f5;border:0;border-radius:.25rem;}
.juso-list{margin-top:0;max-height:52vh;overflow:auto;border:1px solid #eee;border-radius:.25rem;background:#fff;}
.juso-list th,
.juso-list td {padding:1rem;}
.juso-list th {font-size:1rem;font-weight:600;}
.juso-list::-webkit-scrollbar{width:10px;}
.juso-list::-webkit-scrollbar-thumb{background:rgba(0,0,0,.18);border-radius:.25rem;border:2px solid #fff;}