:root {
    --red : #e60012;
    --blue : #345cd3;
    --green : #059c5c;
    --bg-light : #f5f5f5;
    --bg-label : #f3f4f7;
    --bd-basic : #dcdcdc;
    --bd-neutral : #babbbc;
    --cl-red : #e60012;
    --cl-main : #00479d;
    --cl-gray : #969799;
    --btn-basic  : #969799;
}

/* coommon */
body {font-family:'Noto Sans KR', sans-serif; line-height:1.5}
h1, h2 {font-family: 'S-CoreDream-5Medium'; font-weight: normal}
h3, h4, h5 {font-family: 'S-CoreDream-4Regular'; font-weight: normal}
section {min-height: calc(100vh - 200px); padding-bottom: 50px}
button {cursor: pointer}
button.qm {width: 20px; height: 20px; border: none; border-radius: 50%; margin-left: 5px}
button.more {background:url("../images/ico.png") #f3f5f7 -90px 0 / auto 90px}
button.basic {color: #fff; border: none; border-radius: 5px; background: #283153}
button.cls {width: 30px; height: 30px; border: none; background:url("../images/ico.png") -90px -30px / auto 90px; opacity: .5}
.bg {background: #f2f4f8}
select {border-color: var(--bd-basic);}
input[type='date'] { border:1px solid var(--bd-basic);}
input[readonly] {pointer-events: none;}
.red {color: var(--red)}
.blue {color: var(--blue)}

.popup {position: fixed; top: 50px; right: 50px; width: 540px; background: #000000cc; z-index: 100}
.popup img {width: 100%;}
.popup .bot {display: flex; justify-content: space-between; padding: 3px 10px;}
.popup .bot label {color: #fff;}

header {position:fixed; top:0; left:0; width:100%; min-width:1100px; height:80px; background-color:rgba(7,14,21,.5); z-index:100}
header .panel {position: relative; display: flex; width:inherit; height:inherit; font-family: 'S-CoreDream-5Medium'; color: #fff;}
header .logo {position:absolute; top: 0; left: 20px; width:180px; height: 80px; padding: 0 10px; z-index: 10}
header .logo a {display: flex; align-items: center; column-gap: 5px; width: 100%; height: inherit; font-size:1.25em; color: #fff}
header .logo a::before {content: ''; width: 40px; height: 40px; background:url(../images/logo.png) no-repeat center; background-size: 40px}

header .mAll {position:absolute; top:25px; right:5%; height:50px; padding-left:30px; line-height:50px; cursor:pointer}
header .mAll .icon {position:relative}
header .mAll .icon li {position:absolute; width: 20px; height:2px; border-radius:1px; background:#fff}
header .mAll .icon li:nth-child(1) {top:0; left:0}
header .mAll .icon li:nth-child(2) {top:7px; left:0}
header .mAll .icon li:nth-child(3) {top:14px; left:0}
header .mAll.on .icon li:nth-child(1) {top:6px; left:0; transform:rotate(45deg); transition:ease .3s;}
header .mAll.on .icon li:nth-child(2) {top:7px; left:0; opacity:0; transition:ease .3s;}
header .mAll.on .icon li:nth-child(3) {top:6px; left:0; transform:rotate(-45deg); transition:ease .3s;}

nav.panel .mNav {display: flex; justify-content: center; width: 100%; height:inherit; margin:0 200px 0 180px;}
nav.panel .mNav dl {width: min(calc(100% / 5), 120px); overflow:hidden}
nav.panel .mNav dl dt {display: flex; align-items: center; padding:0 5px; text-align: center; height: 80px; font-size:1.125em; cursor: pointer}
nav.panel .mNav dl dt.on {border-bottom:3px solid #0063b7}
nav.panel.app {display: none}

nav.panel .sNav {display: flex; justify-content: center; flex-direction: column; row-gap: 10px; padding: 10px 0 20px}
nav.panel .sNav a {display: flex; align-items: center; padding: 0 5px; font-size: .875em; opacity: .7;}
nav.panel .sNav a:hover {opacity: 1}

nav.panel .mSide {position: absolute; top: 0; right: 20px; height: 80px; display: flex;}
nav.panel .mSide .orderBtn {display: flex; align-items: center; justify-content: center; width: 140px; margin-right: 20px}
nav.panel .mSide .orderBtn a {position: absolute; z-index: 10}
nav.panel .mSide .orderBtn::after {content: ''; display: block; width: 100%; height: 100%; background: var(--red); transform:skew(-25deg)}
nav.panel .mSide .topBtn {display: flex; align-items: center; column-gap: 20px; font-size: .75em; padding: 0 10px}  
nav.panel .mSide .topBtn button {border: none; background-color: transparent}  

.mAll {display: none}
.openPanel{display:none}
.link {cursor: pointer;}

.selectBtn {display: flex; column-gap: 5px}
.selectBtn label {display: flex; justify-content: center; align-items: center;  width: 100px; height: 30px; font-size: .875em; border: 1px solid var(--bd-basic); border-radius: 5px; background: var(--bg-light)}
.selectBtn label input[type='radio'] {display: none}
.selectBtn label:has(input[type='radio']:checked) {color: #fff; background-color: var(--blue);}

.toggleWrap {height: 30px; align-items: center}
.toggle {display: flex; border: 1px solid var(--bd-basic); border-radius: 15px; background-color: var(--bg-light); overflow: hidden}
.toggle label { display: flex; justify-content: center; align-items: center; width: 60px; height: 30px; border-radius: 15px; background-color: var(--bg-light); cursor: pointer; }
.toggle input[type="radio"] { display: none;}
.toggle input[type="radio"]:checked + label {color: #fff; font-size: .875em; border:none; background-color: var(--blue);}

textarea {width: 100%; border: 1px solid var(--bd-basic)}

.btnSmall {font-size: .8125em; border: none; border-radius: 15px}
.btnDark {height: 28px; padding: 0 10px; color: #fff; background: #101634}

button.act {color: #fff; background: #ff7007}

/* scroll down */
.sd {height:60px; background-color:rgba(7,14,21,.9); transition:ease .3s;}
.sd:hover {height: auto}
.sd > div:after {top: 59px} 
.sd .logo {top:0; height:60px; transition:ease .3s;}
.sd nav.panel .mNav dl dt {height: 60px; transition:ease .3s;}
.sd .mAll {top:5px; transition:ease .3s;}
.sd .admin {top:5px; transition:ease .3s}
.sd nav.panel .mSide {height: 60px; transition:ease .3s}

.btnArea {display: flex; justify-content: center; align-items: center; column-gap: 10px; height: 40px;}
.btnArea button {width: 120px; height: 40px; border-radius: 10px; border: none; color: #fff; background: var(--blue);}
.btnArea button.cancel, a.cancel { width: 120px; height: 40px; border-radius: 10px; display: flex; justify-content: center; align-items: center; color: #fff; background: var(--btn-basic)}

.subTop { position:relative; min-height: 80px; margin-bottom:30px; background: url(../images/sub.png) no-repeat center / cover}
.subMenu ul {display: flex; justify-content: center; column-gap: 20px; height:50px; margin: -30px 0 30px; border-bottom: 1px solid #ccc}
.subMenu ul li {display: flex; align-items: center; padding: 0 5px; font-family: 'S-CoreDream-5Medium'; opacity:.7}
.subMenu ul li.on {position: relative; opacity:1}
.subMenu ul li.on::after {content: ''; display: block; position: absolute; left: 0; bottom: -1px; width: 100%; height: 3px; background: var(--red)}

.subTitle {text-align: center; margin-bottom: 30px}
.subTitle h2 {position:relative; font-size: 1.875em; padding-bottom:30px; color: #0f2b51}
.subTitle h2:after {content:''; display:block; position:absolute; bottom:0; left:50%; width:50px; height:2px; margin-left:-25px; background: #2b5a97}

.container {width:1200px; margin:0 auto; padding-bottom:150px}

.list {position:relative; border-top:2px solid #1d3465; margin-bottom:20px;}
.list dl {border-bottom:1px solid var(--bd-basic)}
.list dl dt {line-height:40px; background:#f4f4f4}
.list dl dd {line-height:50px}
.list.row dl dd.sbj {align-items: flex-start; padding-left:20px; cursor:pointer}
.list.row dl dd.dat {line-height: 1.2em; color: #777}

.list label.not { border:none; border-radius:5px; padding:0 5px; color:#fff; background:#111}
.list label.ans { display:inline-block; text-indent:-9000px; width:36px; background:url(../images/ico_ans.png) no-repeat right center}
.read {border-bottom:1px solid #ccc;}
.read .r-hdr {position:relative; border-bottom:1px solid var(--bd-basic); display: flex; justify-content: space-between}
.read .r-hdr li {display: flex; align-items: center; padding-left:10px; height:50px}
.read .r-hdr li:last-child {width: 20%; justify-content: flex-end; padding-right: 10px; color: #777}
.read .r-hdr li label {position:relative; display:inline-block; padding-right: 10px; margin-right: 10px; color:#7f909b}
.read .r-hdr li label:after {position:absolute; content:'\007C'; font-size:10px; display:block; top:3px; right:0}
.read .r-bdy {padding:10px; min-height:300px}

.write {border-bottom:1px solid #ccc;}
.write .w-hdr {position:relative; border-bottom:1px solid var(--bd-basic); padding-bottom:5px}
.write .w-hdr li {padding-left:10px; line-height:30px}
.write .w-hdr li label {position:relative; display:inline-block; width:80px; color:#777}
.write .w-hdr li label:after {position:absolute; content:'\007C'; font-size:10px; display:block; top:0px; right:0}
.write .w-hdr li input:not([type=checkbox]) {width:90%; line-height:24px}
.write .w-bdy textarea {width:100%; border:none; padding:10px; min-height:300px}


.title {text-align:center; margin-bottom:50px}
.title h2 {
    background:#242545;
    background:-webkit-linear-gradient(left, #242545, #093b98);
    background:-moz-linear-gradient(right, #242545, #093b98);
    background:-o-linear-gradient(right, #242545, #093b98);
    background:linear-gradient(to right, #242545, #093b98);
    background-clip: text; 
	-webkit-background-clip: text;
	-webkit-text-fill-color:transparent;
	position:relative; display:inline-block; color:transparent; font-size: 2em;font-weight:600;
}
.title h2:before {content:''; display:block; position:absolute; top:0; left:-30px; width:15px; height:1px; transform:rotate(45deg); background:#242545}
.title h2:after {content:''; display:block; position:absolute; bottom:0; right:-30px; width:15px; height:1px; transform:rotate(45deg); background:#093b98}

.text {font-size: 1.25em; text-align: center}


.follow {position: fixed; top: 90px; right: 10px; display: flex; align-items: center; column-gap: 5px; z-index: 50; transition: all ease .2s}
.follow dl {display: flex; flex-direction: column; justify-content: center; align-items: center; width: 120px; height: 60px; border-radius: 10px; background: #072aa8 }
.follow dl dt {color: #a6d6ff}
.follow dl dd {color: #fff; font-size: 1.25em}
.follow .kakao li {width: 60px; height: 60px; border-radius: 10px; background: url('../images/ch.png') 0 0 / cover}
.sd + .follow {top: auto; top: calc(100vh - 75px); transition: all ease .5s}


/* join */
#join {padding-bottom: 50px;}
#join article {width: min(640px, 96%); margin: 0 auto; padding: 3%; border-radius: 10px; background: #fff}
#join .input {margin-bottom: 30px}
#join .input li {position: relative; margin-bottom: 5px; padding-left: 100px}
#join .input li label {position: absolute; top: 0; left: 0; width: 100px; line-height: 40px}
#join .input li label::before {position: absolute; top: 0; left: 0; width: 100px; line-height: 40px}
#join .input li input:not([type='checkbox']) {width: 100%; height: 40px; margin-bottom: 5px; padding: 0 5px; border: 1px solid #ccc; border-radius: 5px}
#join .input li button {position: absolute; top: 5px; right: 5px; width: 60px; height: 30px; color: #fff; font-size: .75em; border: none; border-radius: 5px; background: #283153;}
#join .agree { margin:0 auto; display: flex; flex-wrap: wrap; flex-direction: column; }
#join .agree li {min-height: 30px; margin-bottom: 5px}
#join .agree .soi {display: flex; justify-content: space-between; margin-bottom: 10px; }
#join .agree .soi button { width: 30px; height: 30px; border: none; background-color: transparent; }
#join .agree .soi button:after { display: block; content: ''; width: 30px; height: 30px; background: url("../images/ico.png") -30px -30px ; background-size: auto 90px}
#join .agree .soi.on button:after { transform: rotate(180deg)}
#join .agree .soi + div {display: none; max-height: 200px; white-space: pre-line; font-size: .875em; border-top: 1px solid var(--bd-basic); background: var(--bg-light); padding: 10px 5px; word-break: keep-all; overflow-y: auto;}
#join .agree .soi.on + div {display: block}
#frmLogin {display: none}
.frmPop .join li button.orderGuest {display: none}
#join .quit {width: min(640px, 96%); margin: 0 auto; padding: 10px}
#join .quit button {border: none; color: #6c7682; background-color: transparent}
#join .quit button::after {content: ' >'; color: #9c96a2;}

/* technic */
.list.col dl dt {text-align:center}
.list.col dl dd {text-align:right; padding-right:40%}
.list.col dl dd:last-child {border-top: 1px solid #0063b7; display: none}
.list.col dl.cls dd {text-align:center; padding-right:0}
.list.col dl.sum dd {color:#00529c}
.list.col.col6 dl {float:left; width:calc(100% / 6)}
.list.col.col4 dl {float:left; width:calc(100% / 4)}


/* location */
.root_daum_roughmap.root_daum_roughmap_landing {margin-bottom:50px}
.root_daum_roughmap .wrap_controllers {display:none}
.locArea ul {padding-top:50px}
.locArea li {position:relative; font-size:18px; padding-left:100px; line-height:30px; margin-bottom:20px}
.locArea li:before {content:'\00B7'; display:block; position:absolute; top:0; left:0; color:#2a519e}
.locArea li label {position:absolute; top:0; left:20px; color:#2a519e}


/* recruit */
.recruit .content {width:1200px; margin:0 auto}
.recruit .content > div:first-child {padding-bottom:50px; margin-bottom:100px; border-bottom:1px solid #ccc}
.recruit .content > div ul {position:relative; margin-bottom:50px}
.recruit .content > div h4 {position:absolute; top:0; left:0; font-size:22px; font-weight:600; color:#2a519e}
.recruit .content > div li {margin-left:27%; font-size:18px}
.recruit .content > div li p {position:relative; margin-bottom:10px; line-height:20px; color:#727478}
.recruit .content > div li p:before {content:'\00B7'; display:block; position:absolute; top:0; left:-30px; font-size:30px; color:#2a519e}
.recruit .content > div .btn { width:300px; height:60px}
.recruit .content > div li.ctg2 p {padding-left:50px}
.recruit .content > div li.ctg2 span {position:absolute; top:0; left:0}
.recTop {position:relative}
.recTop .stxt { position:absolute; left:55%; top:0}
.recTop .stxt h3 {text-align:left}
.recTop ul {position:relative}
.recTop ul > li {width:510px; height:290px; background-size:contain; background-repeat:no-repeat }
.recTop ul > li:nth-child(1) {float:left; background-image:url(../images/rec_img01.jpg)}
.recTop ul > li:nth-child(2) {float:right; margin-top:120px; background-image:url(../images/rec_img02.jpg)}


/* customer */
.search {margin: 0 auto 20px; text-align: center}
.list.row dl {display: flex}

.customer .list.row dl .num {width:5%}
.customer .list.row dl .sbj {width:80%}
.customer .list.row dl .dat {width:15%}
.customer .list.row dl dt {display: flex; align-items: center; justify-content: center}
.customer .list.row dl dd {display: flex; align-items: center; justify-content: center; flex-wrap: wrap; text-align: center; flex-direction: column; padding: 0 10px;}
.customer .list.row dl dd.sbj {align-items: flex-start;}

.page { padding-top:20px; text-align:center}
.page a {color:#999; padding:0 5px}
.page a.cur {color:#00F; font-weight:600}

.swiper-pagination-bullet {width:12px; height:12px; background:#fff; opacity: 0.3;}
.swiper-pagination-bullet-active {opacity:1}
.swiper-button-next {top: 32px; left: auto; right: 10px; transform: rotate(90deg); background-size: 12px auto} 
.swiper-button-prev {top: 10px; left: auto; right: 10px; transform: rotate(90deg); background-size: 12px auto}

footer { height:200px; color:var(--bd-basic); font-size:14px; background:#42474e;}
footer > div {width:1200px; margin:0 auto; padding-top:40px}
footer ul {margin-bottom:20px}
footer .doc li { position:relative; display:inline-block; padding-right:20px; margin-right:20px}
footer .doc li:after {content:''; display:block; position:absolute; top:5px; right:0; width:1px; height:11px; background:#777}
footer .doc li:last-child:after { display:none}
footer .info {display: flex; justify-content: space-between}
footer .info em {color:#777; padding:0 10px}
footer .info a {color:#32a1e5}
footer .copy figure {display: flex; align-items: center; justify-content: flex-end; column-gap: 5px; width: 100%; font-size:1.25em; }
footer .copy figure::after {content: ''; width: 40px; height: 40px; background:url(../images/logo.png) no-repeat center; background-size: 40px}


#dtpicker {display: flex;  flex-wrap: wrap; column-gap: 10px; position: absolute; top: 0; left: 0; width: 340px; padding: 18px; border: 1px solid #ccc; background: #fff; box-shadow: 2px 2px 5px #00000033; z-index: 100}
#dtpicker .hasDatepicker {width: 300px}
#dtpicker .hasDatepicker .ui-widget-header {border: none; font-size: .875em}
#dtpicker .hasDatepicker .ui-widget-header select { color: #363636}
#dtpicker .hasDatepicker .ui-widget-content {background: var(--bg-light)}
#dtpicker .hasDatepicker .ui-widget-content .ui-state-default { border: none; background: #fff}
#dtpicker .hasDatepicker .ui-widget-content .ui-state-active {color: #ff7007}
#dtpicker .ui-datepicker-calendar thead {font-size: .875em}
#dtpicker .ui-datepicker td span, .ui-datepicker td a {text-align: center}
#dtpicker select.time {width: 150px; text-align: center}
#dtpicker ul {width: 100%; padding: 10px}
#dtpicker ul li {display: flex; column-gap: 10px; padding: 10px 0; justify-content: center }
#dtpicker ul li p {font-size: .75em}
#dtpicker ul li button { width: 40%; border: none; border-radius: 5px}

.btnForm {display: flex; justify-content: center; column-gap: 10px;}
.btnForm button {min-width: 210px; height: 40px; display: flex; align-items: center; justify-content: center;}
.btnForm button::before {content: ''; width: 30px; height: 30px; background-image: url(../images/ico.png); background-size: auto 90px;}
.btnForm button.license::before {background-position: -90px -60px;}
.btnForm button.bank::before {background-position: -120px -60px;}


/* alertify */
.alertify .ajs-footer {border-top: none}
.ajs-button.ajs-ok { border: none; border-radius: 10px; outline:none; color: #fff; background: var(--blue);}
.ajs-button.ajs-ok:focus { outline:none; }
.ajs-button.ajs-cancel { border: none; border-radius: 10px; outline:none; color: #fff; background: var(--btn-basic);}

.guest {display: none; position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 200}
.guest::after { content: ''; position: fixed; top: 0; right: 0; bottom: 0; left: 0; padding: 0; margin: 0; background-color: #000; z-index: 90; opacity: .5;}
.guestBox {position: relative; margin: 5% auto; max-width: 600px; min-height: 122px; padding: 24px; background-color: #fff; border: 1px solid rgba(0, 0, 0, .2); box-shadow: 0 5px 15px rgba(0, 0, 0, .5); border-radius: 6px; z-index: 100}
.guestBox { transform: translate3d(0, 0, 0); transition-property: opacity, visibility; transition-timing-function: linear; transition-duration: 250ms;}
.guestBox .boxHead {color: #333; border-bottom: 1px solid #e5e5e5; border-radius: 6px 6px 0 0; font-family: 'S-CoreDream-5Medium', sans-serif; font-size: 18px;}
.guestBox .boxBody {display: flex; flex-direction: column; row-gap:10px; padding: 20px 0;}
.guestBox .boxBody li {display: flex; flex-wrap: wrap; width: 410px; margin: 0 auto}
.guestBox .boxBody label { width: 30%; }
.guestBox .boxBody input { width: 70%; border:1px solid #ddd}
.guestBox .boxBody p {width: 100%; text-align: center; color: #777}
.guestBox .boxFoot {display: flex; align-items: center; justify-content: center; column-gap: 10px}
.guestBox .boxFoot li {width: 40%;}
.guestBox .boxFoot button { width: 100%; height: 40px; border: none; border-radius: 10px; display: flex; justify-content: center; align-items: center; background: #eee;}

#addCard {display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background: #4c4c4c66; z-index: 100}
.cardPop {position: fixed; top: 50%; left: 50%; width: 540px; min-height: 640px; transform: translate(-50%, -50%); border-radius: 16px; background: #fff;}
.cardPop .header dl {display: flex; flex-direction: row; justify-content: space-between; width: 100%; padding: 16px; opacity: 1; user-select: none;}
.cardPop .header .close i {display: block; width: 24px; height: 24px; background: url(https://cache.nicepay.co.kr/v3/webstd/billing/images/icon-close.svg) no-repeat; background-size: auto;}
.cardPop .title {font-size: 1.125em; margin-bottom: 20px}
.cardPop .form-area { display: flex; flex-direction: column; gap: 24px; padding: 24px; letter-spacing: -0.04em;}
.cardPop .form-area .flex-col { gap: 16px; display: flex; flex-direction: column;}
.cardPop .form-area .flex-row { gap: 8px; display: flex; flex-direction: row;}
.cardPop .input-basic { width: 100%; font-size: 1rem; background-color: #fff;  border: 1px solid var(--bd-basic); border-radius: 8px; padding: 10px 16px;}
.cardPop .input-basic::placeholder { color: var(--bd-basic);}
.cardPop .input-basic:read-only,
.cardPop .input-basic.readonly {  background: #f8f8f8; color: #636363;}
.cardPop .input-basic.readonly button { cursor: auto;}
form label {display: block; color: var(--cl-gray); font-weight: 500; font-size: 0.875rem; margin-bottom: 4px;}

.cardPop .bottom {display: flex; flex-direction: column; gap: 16px; width: 100%; padding: 16px 24px;}
.cardPop button {overflow: visible; border: 0;  background-color: transparent;  cursor: pointer;}
.cardPop button.primary {color: #fff; background-color: var(--cl-main);}
.cardPop button.btn {width: 100%; padding: 10px 0; font-weight: bold; font-size: 1rem; border: 0; border-radius: 12px; cursor: pointer; user-select: none;
    -webkit-touch-callout: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -webkit-user-select: none;
}

/* mobile */
@media only screen and (max-width:568px){
    header {height: 50px; min-width: 0}
    header .logo {left: 10px; height: 50px; padding: 0;}
    header .logo a {font-size: 1.125em;}
    header .logo a::before {width: 30px; height: 30px; background-size:30px}
    .sd {height: 50px}
    .sd .mNav dl dt {height: auto}
    .openPanel {display:block; position:absolute; top:15px; right: 15px; width:40px; height:40px; z-index:200}
    .openPanel ul {position:relative}
    .openPanel ul li {position:absolute; width:30px; height:2px; border-radius:2px; background: #eaecef}
    .openPanel ul li:nth-child(1) {top:0; right:0}
    .openPanel ul li:nth-child(2) {top:10px; right:0}
    .openPanel ul li:nth-child(3) {top:20px; right:0}
    header.mob::after {content: ''; position: fixed; top: 0; left: 0; width: 100%; height:100vh; background-color:rgba(0,0,0,.7); z-index:50;}
    header.mob .openPanel ul li {width:35px; background: #323436}
    header.mob .openPanel ul li:nth-child(1) {top:13px; right:0; transform:rotate(45deg); transition:ease .3s;}
    header.mob .openPanel ul li:nth-child(2) {top:13px; right:0; opacity:0; transition:ease .3s;}
    header.mob .openPanel ul li:nth-child(3) {top:13px; right:0; transform:rotate(-45deg); transition:ease .3s;}
    header.mob .panel { right: -1px; transition:ease .2s}
    
    nav.panel {display: flex; flex-direction:column-reverse; position:fixed; top:0; right:-80%; width: calc(80% + 1px); height: 100vh; padding-top:60px; color: #222; background: #fff; z-index:100; transition:ease .2s}
    nav.panel .mNav {width: calc(100% - 40px); margin: 0 20px; flex-direction: column; justify-content: flex-start;}
    nav.panel .mNav dl {width: 100%; margin-bottom: 15px}
    nav.panel .mNav dl dt {height: 30px; font-size: 1em}
    nav.panel .sNav {padding: 0 5px;}
    nav.panel .sNav a {padding: 0}
    nav.panel .sNav a::before {content: '-'; margin-right: 4px}
    nav.panel .mSide {position: static; height: 60px; border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; justify-content:flex-start}
    
    .container {width: 100%; padding: 0px 10px}
	  
    .popup {right: 0; width: 100%;}

    .follow {top: auto; bottom: 10px;}
    .follow .kakao li {width: 40px; height: 40px}
    .follow dl {height: 40px; line-height: 1.1; font-size: .875em}
    .sd + .follow {top: auto; bottom: 10px;}
    
    .title {margin-bottom: 10px; word-break: keep-all; padding: 0 10px}
    .title h2 {font-size: 1.6em}
    .title h2:before {display: none}
    .title h2:after {display: none}
    
    .text {font-size: 1.125em}

    .subTop {min-height: 50px}
    .search {margin: 0 auto 20px}
    
    .list dl dt {height: 40px; line-height: 40px}
    .list dl dd {height: 50px; line-height: 1.2; }

    .customer .list.row dl {display: grid; grid-template-columns: 10% 90%; grid-template-rows: auto 30px; row-gap: 5px; padding: 5px 0;}
    .customer .list.row dl.dh {display: none}
    .customer .list dl dd {height: auto}
    .customer .list.row dl .num {grid-column: 1 / 2; grid-row: 1 / 2; width: auto; align-items: flex-start;}
    .customer .list.row dl .sbj {grid-column: 2 / 3; grid-row: 1 / 2; width: auto; align-items: flex-start; text-align: left; padding-left: 0;}
    .customer .list.row dl .dat {grid-column: 2 / 3; grid-row: 2 / 3; width: auto; align-items: flex-start; text-align: left; padding-left: 0;}
    
    .read .r-hdr {display: flex; flex-direction: column; height: auto; padding: 5px 0; row-gap: 10px}
    .read .r-hdr li {width: 100%; height: auto; align-items: flex-start; line-height: 1.2em}
    .read .r-hdr li:last-child {width: 100%; justify-content: flex-start}
    
    .loadSize {position: fixed !important; width: 100% !important; left: 0 !important; top: 0 !important}
    .loadSize .carType {width: 100% !important}
    
    .load .carType {height: 100px;}
    .load .carType ul {width: 35%}
    .load .info {width: 65%; font-size: .875em}
    .load .info dl:nth-child(3) {border-bottom: 1px solid #ddd}
    .load .info dl {width: 100%; height: 25%}
    
    .order .delivery {height: auto}
    .order .delivery .content {height: auto}
    .order .delivery .tab ul li::before {display: none}
    .cycle .opt {flex-wrap: wrap; justify-content: flex-start; align-items: flex-start;}
    .cycle .opt.volume { gap: 15px}
    .cycle .opt.volume dl {width: calc(100% / 3 - 10px)}
    .cycle .opt.weight {height: auto; column-gap: 20px; row-gap: 15px; margin-bottom: 20px}
    .cycle .opt.weight dl {width: calc(100% / 2 - 10px)}
    
    .van .opt {flex-wrap: wrap; justify-content: flex-start; align-items: flex-start;}
    .van .opt.volume {gap: 15px}
    .van .opt.volume dl {width: calc(50% - 10px)}
    .van .opt.weight {gap: 15px}
    .van .opt.weight dl {width: calc(50% - 10px)}
    
    .subTitle {margin-bottom: 30px}
    .subTitle h2 {font-size: 1.25em; padding-bottom: 20px}
    
    #truck .truckTop {flex-direction: column}
    #truck .truckTop li:first-child {width: 100%}
    #truck .truckTop li:last-child {width: 100%}
    #car-options {height: 80px; flex-direction: row; column-gap: 10px}
    
    footer {height: auto}
    footer > div {width: calc(100% - 20px)}
    footer .info {display: flex; flex-direction: column}
    footer .info div {color: #ffcc00; margin-bottom: 10px;}
    footer .info span {display: block; word-break: keep-all}
    footer ul:last-child {margin-bottom: 0} 
    
    .guestBox {max-width: 90%}
    .guestBox .boxBody li {width: 80%; flex-direction: column}
    .guestBox .boxBody label {width: 100%}
    .guestBox .boxBody input {width: 100%}
    
    .cardPop {width: 96%}
    .cardPop .input-basic {padding: 5px 8px}
    
    .swiper-button-next {top: 50%; left: auto; right: 5px; transform: rotate(90deg); background-size: 12px auto} 
    .swiper-button-prev {top: 50%; left: auto; right: 35px; transform: rotate(90deg); background-size: 12px auto}
    
    .pcOnly {display: none}
    .alertify.full:not(.ajs-maximized) .ajs-modal {padding: 0}
    .alertify.full.ajs-no-padding:not(.ajs-maximized) .ajs-body {margin: 0; display: flex; align-items: center; height: calc(100% - 100px);}
    .alertify.full .ajs-dialog {height: 100%; margin: 0; border-radius: 0; border: none}

    .btnForm {flex-direction: column; row-gap: 10px;}
}


@media only screen and (max-width:360px){
    .visual .quickBox dl::before {left: 0; zoom: .75}
    .visual .quickBox dt {height: 60px}
}