@charset "utf-8";
@import url("https://gcore.jsdelivr.net/gh/orioncactus/pretendard@v1.3.6/dist/web/static/pretendard.css");




@font-face {
    font-family: 'SUIT';
    src: url('https://itforone.co.kr/thirdParty/fonts/SUIT-ExtraLight.woff2') format('woff2');
    font-weight: 200;
    font-style: normal;
}
@font-face {
    font-family: 'SUIT';
    src: url('https://itforone.co.kr/thirdParty/fonts/SUIT-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: 'SUIT';
    src: url('https://itforone.co.kr/thirdParty/fonts/SUIT-Bold.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
}
@font-face {
    font-family: 'SUIT';
    src: url('https://itforone.co.kr/thirdParty/fonts/SUIT-ExtraBold.woff2') format('woff2');
    font-weight: 800;
    font-style: normal;
}




/* 초기화 */
html {overflow-y:scroll;}
body {margin:0 auto; padding:0!important; font-size:13px; letter-spacing:0;
    line-height:1.6em; color:#000; background:#FAFBFD; /*min-width: 1200px;*/
    font-family:'SUIT', 'Pretendard', 'Noto Sans KR', sans-serif!important; font-weight:400; word-break:keep-all;}
html, h1, h2, h3, h4, h5, h6, form, fieldset, img {margin:0;padding:0;border:0}
h1, h2, h3, h4, h5, h6 {font-size:1em}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, div {display:block; box-sizing: border-box;}
ul, dl {margin:0;padding:0;list-style:none}
dl dt{font-weight: 500;}
legend {position:absolute;font-size:0;line-height:0;text-indent:-9999em;overflow:hidden}
label, input, button, select {border-radius:4px;}
label, input, button, select, img {vertical-align:middle; outline:none; }
label{margin: 0;}
input:focus,
button:focus {outline:none;}
input, button {margin:0;padding:0;font-size:initial;outline:none;}
button {cursor:pointer;}
input[type=text], input[type=password], input[type=submit], input[type=image], button {font-size:initial;-webkit-appearance:none}
textarea, select {font-size:1em;} 
textarea {border-radius:0;-webkit-appearance:none}
select {margin:0; border-radius:4px;}
p {margin:0;padding:0;word-break:keep-all}
hr {display:none}
pre {overflow-x:scroll;font-size:1.1em}
a, a:link, a:visited {color:#000;text-decoration:none; cursor: pointer;}
a:hover, a:focus, a:active {text-decoration:none;}

@media screen and (max-width: 450px){
    body {font-size: 11.5px}
}
/*설정*/
.text-center {text-align: center}
a, a:link, a:visited {text-decoration:none; cursor: pointer;}
a:hover, a:focus, a:active {text-decoration:none; color: #BC2D1E;}
.panel {    margin-bottom: 20px;    background-color: transparent;    border: none;    border-radius: 0px;    -webkit-box-shadow:none;    box-shadow: none;}
.flex {display: flex; }
.flexwrap {flex-wrap: wrap}
.nowrap {flex-wrap: nowrap!important;}
.flex.jc-sb {justify-content: space-between!important;}
.flex.jc-le {justify-content: left!important;}
.flex.ai-c{align-items: center}
.w50 {width: 50% !important}
.w100 {width: 100%!important;}

.gap5{gap: 5px;}
.gap10{gap: 10px;}
.gap20{gap: 20px;}
.gap30{gap: 30px;}
.gap40{gap: 40px;}

.w100px{width: 100px;}
.w50px{width: 50px;}
.max-none {max-width: none!important;}
.mari-auto {margin-right: auto!important;}
.male-auto {margin-left: auto!important;}
.search {display: flex!important; display: inline-block}
.none{display: none;}
.brLine{border-bottom: 1px solid #eee; width: 100%; margin: 20px 0;}

/*글자*/
/*말줄임*/
.oneline  {display: block;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
/*꾸미기*/
.txt_blue> a,
.txt_blue { color: #1E48BC!important;}
.txt_red > a,
.txt_red { color: #BC2D1E!important;}
.txt_bold { font-weight: 800!important;}
.txt_under {text-decoration: underline}
.txt_black{color: #000000!important;}
.txt_size_up{font-size: 1.1em}

.text_center{text-align: center!important;}
.text_left{text-align: left!important;}
.text_right{text-align: right!important;}

/*버튼*/
.btn{ font-size: 1em;height: 27px;all:unset; border: 0;background: #fff; display: inline-block ; text-align:center;  border-radius: 5px; padding: 7px; line-height: 1em; cursor: pointer; font-weight: 600; position: relative; box-sizing: border-box; margin: 1px}
.btn_v2{ background: #ffffff00!important; }
.btn:hover{transition: all 0.3s;}
.btn[disabled] { opacity: 0.5; background-color: #cccccc; cursor: not-allowed; border: 1px solid #333; color: #000;}

.btn_mini{padding: 5px 7px;  font-size: 0.8em;  line-height: 0.8em;}
.btn_small{padding: 5px 8px;}
.btn_small2{padding: 10px 25px;}
.btn_middle{width: 100%;}
.btn_large{width: 100%; padding: 15px 0; font-size: 1.2em; font-weight: 600;}

a.btn_red,
.btn_red{background-color: #BC2D1E; color: #fff;}
a.btn_red:hover,
.btn_red:hover{background-color: #5e0b04; color: #fff;}

a.btn_red2,
.btn_red2{background-color: #FFD0CB; border:1px solid transparent; color: #BC2D1E;}
a.btn_red2:hover,
.btn_red2:hover{border:1px solid #BC2D1E; color: #BC2D1E;}

a.btn_blue,
.btn_blue{background-color: #1E48BC; color: #fff;}
a.btn_blue:hover,
.btn_blue:hover{background-color: #0b2054
}

a.btn_green,
.btn_green{background-color: #0ba62e; color: #fff;}
a.btn_green:hover,
.btn_green:hover{background-color: #0d641e}

a.btn_redline,
.btn_redline{background-color: #fff; color: #BC2D1E; border: 1px solid #BC2D1E;}
a.btn_redline:hover,
.btn_redline:hover{background-color: #BC2D1E; color: #fff!important;}

a.btn_redline2,
.btn_redline2{background-color: #FFD0CB; color: #BC2D1E; border: 1px solid #BC2D1E; font-weight: 600}
a.btn_redline2:hover,
.btn_redline2:hover{background-color: #BC2D1E; color: #fff!important;}

a.btn_white,
.btn_white{background-color: #fff; color: #484951;}
a.btn_white:hover,
.btn_white:hover{background-color: #484951; color: #fff;}

a.btn_whiteline,
.btn_whiteline{background-color: #fff; color: #484951; border: 1px solid #78787B;}
a.btn_whiteline:hover,
.btn_whiteline:hover{background-color: #666; color: #333; border: 1px solid #333;}

a.btn_white2,
.btn_white2{background-color: #fff; color: #BC2D1E;}
a.btn_white2:hover,
.btn_white2:hover{background-color: #BC2D1E; color: #fff}

a.btn_black,
.btn_black{background-color: #484951; color: #fff; border: 1px solid transparent;}
a.btn_black:hover,
.btn_black:hover{background-color: #78787B; color: #000; border:1px solid  #78787B;}

a.btn_blackline,
.btn_blackline{background-color: #484951; color: #fff; border: 1px solid #fff;}
a.btn_blackline:hover,
.btn_blackline:hover{background-color: #fff; color: #484951; border: 1px solid rgba(0,0,0,0.2);}

a.btn_gray,
.btn_gray{background-color: #E8E8E8; color: #373844}
a.btn_gray:hover,
.btn_gray:hover{background-color: #78787B; color: #fff;}

a.btn_grayline,
.btn_grayline{background-color: #fff; color: #78787B; border: 1px solid #C8C8CB;}
a.btn_grayline:hover,
.btn_grayline:hover{background-color: #78787B; color: #fff;}

a.btn_gray2,
.btn_gray2{background-color: #78787B; color: #fff;}
a.btn_gray2:hover,
.btn_gray2:hover{background-color: #373844; color: #000;}

a.btn_gray3,
.btn_gray3{background-color: #E8E8E8; color: #C8C8CB;}
a.btn_gray3:hover,
.btn_gray3:hover{background-color: #78787B;}

a.btn_line,
.btn_line{border: 1px solid #E8E8E8; background-color: #ffffff; color: #484951;}
a.btn_line:hover,
.btn_line:hover{background-color: #484951; border: 1px solid #484951; color: #fff}

a.btn_line2,
.btn_line2{border: 1px solid #2A2A2A; background-color: #D4D4D4; color: #484951;}
a.btn_line2:hover,
.btn_line2:hover{background-color: #7e7e7e; border: 1px solid #2A2A2A; color: #fff}

a.btn_none,
.btn_none{border: 1px solid #ffffff40; background-color: #fff0; color: #ffffff80;}
a.btn_none:hover,
.btn_none:hover{background-color: #ffffff40; color: #fff}

.btn_sdw{box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.16);}
.btn_h40 {height: 40px}
.btn_wrap{ text-align: center; padding:28px 0;}

/*댓글*/
td span.new {background: #bc2d1e;    color: #fff;    font-size: 0.7em;    padding: 2px 4px;    border-radius: 4px 4px 0 4px;    margin-left: 5px;}
td span.comment {font-size: 0.7em;    padding: 2px 5px;    background: #fff;    border: 1px solid #ccc;    border-radius: 4px 4px 4px 0;    margin-left: 5px;    font-weight: 800;}

/*상품 뱃지*/
span.pdt.newpdt {background: #bc2d1e;    color: #fff;    font-size: 0.7em;    padding: 2px 4px;    border-radius: 4px;    margin-right: 5px;}
span.pdt.subpdt {background: #484951;    color: #fff;    font-size: 0.7em;    padding: 2px 4px;    border-radius: 4px;    margin-right: 5px;}
span.pdt.soldout {border:1px solid #bc2d1e;    color: #bc2d1e;    font-size: 0.7em;    padding: 2px 4px;    border-radius: 4px;    margin-right: 5px;}
.mall_view span.pdt {font-size: 1em;}



/*박스디자인*/
.box1{display: inline-block; border-radius: 5px; box-shadow: 3px 3px 15px rgba(0, 0, 0, 0.06); background-color: #F9F9F9; overflow: hidden;}
.box2{display: inline-block; border-radius: 5px; box-shadow: 3px 3px 15px rgba(0, 0, 0, 0.06); background-color: #FFFFFF; overflow: hidden; width: 100%;}
.box5{display: inline-block; border-radius: 5px; box-shadow: 3px 3px 15px rgba(0, 0, 0, 0.06); background-color: #484951; overflow: hidden; width: 100%;}
.box6{display: inline-block; border-radius: 5px; background-color: #fff; border: 1px solid #ddd; overflow: hidden; width: 100%;}
/*adm*/
.box3{display: inline-block; border-radius: 5px; background-color: #F6F6F6; overflow: hidden;width: 100%;}
.box4{display: inline-block; border-radius: 5px; background-color: #F6F6F6; overflow: hidden;width: 100%;}
.box7{display: inline-block; border-radius: 5px; background-color: #fff; overflow: hidden;width: 100%;}

.box_red{display: inline-block;background: #BC2D1E;color: #fff!important;padding: 2px 8px;border-radius: 4px;font-size: 12px;line-height: 1.8em; margin-bottom: 10px;}
.box_gray{display: inline-block;background: #f9f9f9;padding: 20px;border-radius: 4px;font-size: 12px;line-height: 1.8em; margin-bottom: 10px;}

.recom{display: inline-block;background: #BC2D1E;color: #fff!important;padding: 0 6px;border-radius: 4px;font-size: 11px;line-height: 1.8em;}

/*폼형태*/
input{    border-radius: 4px; height: 40px;  background-color: #FFFFFF; border: 1px solid #c9c9c9; color: #000; padding: 10px; display: block; font-size: 1em!important; line-height: 1.6em!important; opacity: 1; margin-bottom: 12px; width: 100%;}
input:disabled,
input:read-only {   background-color: #E8E8E8; border: 0px ;}
textarea {    border-radius: 4px;background-color: #FFFFFF; border: 1px solid #c9c9c9; color: #000; padding: 10px; display: block; font-size: 1em!important; line-height: 1.6em!important; opacity: 1; margin-bottom: 12px; width: 100%;}
textarea:disabled,
textarea:read-only {   background-color: #f3f3f3; border: 0px ;}
input:last-child{margin-bottom: 0;}
input::placeholder{opacity: 0.8;}

.file_wrap{display: flex; align-items: center; padding: 10px 0; margin-bottom: 10px;}
.file_wrap dt{font-size: 1.2em; margin-right: 15px; min-width: 148px;}
.file_wrap dd{font-size: 1.1em; color: #373844; width: 100%;
    display:inline-block; width:100%; white-space: nowrap;overflow: hidden; text-overflow: ellipsis; vertical-align:middle;}
.file_wrap dd .btn{margin-right: 10px; padding: 6px 10px;}
.file_wrap .img_prev {margin-top: 10px;}
.file_wrap .img_prev button {margin-left: 10px;}
.file_wrap .img_prev img {max-width: 80%}

.number_controller{border: 1px solid #C8C8CB; border-radius: 5px; width: auto; display: inline-block; padding: 2px 8px;}
.number_controller button{all:unset}
.number_controller input[type=number]{all:unset; width:40px; text-align: center;}
.delete{all: unset; width: 20px; height: 20px; text-align: center;}

/*파일업로드2*/
.filebox .upload-name {    display: inline-block;    height: 40px;    padding: 0 10px;    vertical-align: middle;    border: 1px solid #dddddd;    width: 78%;    color: #999999;}
 .filebox label {     display: inline-block;     padding: 10px 20px;     color: #fff;     vertical-align: middle;     background-color: #373844;     cursor: pointer;     height: 40px;  }
 .filebox input[type="file"] {     position: absolute;     width: 0;     height: 0;     padding: 0;     overflow: hidden;     border: 0; }

select {    margin-bottom: 12px;padding: 10px;border-radius: 0;width: 100%;color: #000;     height: 40px;    background: #FFFFFF;    border: 1px solid #c9c9c9;}
select:disabled,
select[readonly] {   background-color: #f3f3f3; border: 0px ;}
input[type="search"] {    font-size: 13px!important;border-radius: 0;width: 150px;    height: 40px;    background: #FFFFFF 0% 0% no-repeat padding-box;    border: 1px solid #c9c9c9;    border-right: 0;display: inline-block; margin-bottom: 0;}
.btn_search {border-radius: 0;width: 40px;    height: 40px;    background: #FFFFFF 0% 0% no-repeat padding-box;    border: 1px solid #c9c9c9;    border-left: 0;display: inline-block;    padding: 0 10px;}

@media screen and (max-width: 330px){
    /*select {width: 50px}*/
    input[type="search"] {width: 100px}
}

/*검색 자동완성*/
.search_wrap{position: relative;}
.search_wrap .sch_field{border: 1px solid #ced4da;    border-top:0px;    border-radius:0px 0px 10px 10px;   display: none;    z-index: 4;    width:100.15%;    left:0px; top: 40px;    position: absolute;    background:white;}
.search_wrap .sch_field_tb{    width:100%;       border-collapse: inherit;}
.search_wrap .sch_field_tb tr{    cursor:pointer;}
.search_wrap .sch_field_tb tr:nth-child(odd){    cursor:pointer;    background-color:#f6f6f6}
.search_wrap .sch_field_tb tr:hover {    background-color: #dedede;}
.form_select,.pt_form_select{    background-color: #E0E8E7;}
.search_wrap .sch_field_tb td{    padding:10px;}

@media screen and (max-width: 500px){
    .search_wrap .sch_field {        overflow-y: auto;}
    .search_wrap .sch_field table { width: 200%;}
}

/**/
#pxOrdFrm   {    container-type: inline-size;    container-name: content;}
#pxOrdFrm .table [type="checkbox"]::after {    top: 3px;    left: 8px;}
.outdate input[type='date']::before {display: none;}

/*  */
input[type='date']::before {    content: attr(data-placeholder);    width: 100%;}
input[type='date']:focus::before,input[type='date']:valid::before {    display: none;}
input[type=radio] {    margin: 0px 5px 0 0;}
[type="radio"] {  display: inline-block;  vertical-align: middle; background: lightgray;    appearance: none;    width: 1.25em;    height: 1.25em;}
[type="radio"]:checked {  background: #fff;   border: 0.4em solid #BC2D1E;}
[type="radio"]:focus-visible {    outline-offset: max(2px, 0.1em);    outline: max(2px, 0.1em) dotted #BC2D1E;}
[type="radio"]:hover {    box-shadow: 0 0 0 max(4px, 0.2em) #e8e8e8;    cursor: pointer;}
[type="radio"]:disabled {    background-color: lightgray;    box-shadow: none;    opacity: 0.7;    cursor: not-allowed;}
[type="radio"]:disabled + span {    opacity: 0.7;    cursor: not-allowed;}
[type="checkbox"] {  border: 1px solid #666!important;  margin: 0px 3px 0 0!important;  position: relative;display: inline-block;  vertical-align: middle; background: #fff!important;    appearance: none;    width: 1.5em;    height: 1.5em;}
[type="checkbox"]::after {    color: #ffffff;    position: absolute;    right: 4px;    font-size: 0.8em;    cursor: pointer;    top: 2px;    left: 7px;    box-sizing: border-box;    width: 6px;    height: 12px;    transform: rotate(45deg);    border-width: 2px;    border-style: solid;    border-color: #ffffff;    border-top: 0;    content: " ";    border-left: 0;    transition: all 200ms ease-in;}
[type="checkbox"]:checked {    border-color: #BC2D1E!important;background: #BC2D1E!important;}
[type="checkbox"]:checked::after {  border-color: #fff!important}
[type="checkbox"]:focus-visible {    outline-offset: max(2px, 0.1em);    outline: max(2px, 0.1em) dotted #BC2D1E;}
[type="checkbox"]:hover {    box-shadow: 0 0 0 max(4px, 0.2em) #e8e8e8;    cursor: pointer;}
[type="checkbox"]:disabled {    /*background-color: lightgray*/;    box-shadow: none;    opacity: 0.7;    cursor: not-allowed;}
[type="checkbox"]:disabled + span {    opacity: 0.7;    cursor: not-allowed;}
/*네모형 라디오*/
.select input[type=radio]{    display: none;}
.select input[type=radio]+label{    border-radius: 0; display: inline-block;    cursor: pointer;    height: 40px; padding: 0 10px;    border: 1px solid #c9c9c9;    line-height: 40px;    text-align: center;  font-weight:400;}
.select input[type=radio]+label{    background-color: #fff;    color: #373844;}
.select input[type=radio]:disabled+label{    background-color: #c9c9c9;    color: #373844;}
.select input[type=radio]:checked+label{    background-color: #373844;    color: #fff; font-weight:bold;}
.select input[type=radio].red+label{  background-color: #fff;    color: #373844; }
.select input[type=radio].red:checked+label{    background-color: #FFD0CB;    border: 1px solid #BC2D1E;  color: #BC2D1E; font-weight:bold;}
.select input[type=radio].red:disabled+label{    background-color: #c9c9c9;    color: #373844;}

.select.v2 input[type=radio]+label{    line-height: 1em; border-radius: 5px;    height: fit-content; padding:5px;   }

/*네모형 체크*/
.select input[type=checkbox]{    display: none;}
.select input[type=checkbox]+label{    border-radius: 0; display: inline-block;    cursor: pointer;    height: 40px;  padding: 0 10px;    border: 1px solid #c9c9c9;    line-height: 40px;    text-align: center;    font-weight:400; }
.select input[type=checkbox]+label{    background-color: #fff;    color: #373844;}
.select input[type=checkbox]:disabled+label{    background-color: #c9c9c9;    color: /*#d0d0d0;*/ #999; }
.select input[type=checkbox]:checked+label{    background-color: #373844;    color: #fff; font-weight:bold;}

/*동그라미 라디오*/
.circle label{margin-right: 6px;}
.circle input[type="radio"] {    margin: 0px 5px 0 0;}
.circle input[type="radio"] { border: 1px solid #c9c9c9; display: inline-block;  vertical-align: middle; background: #fff; border-radius: 30px;  appearance: none;
    width: 1.4em;    height: 1.4em; position: relative;}
.circle input[type="radio"]:checked {  background: #fff; border: 1px solid #c9c9c9;}
.circle input[type="radio"]:checked:after{content: ""; display: inline-block;
    width: 1em; height: 1em; border-radius: 50%; background-color: #BC2D1E;
    position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); }

.circle input[type="radio"]:focus-visible {    outline-offset: max(2px, 0.1em);    outline: max(2px, 0.1em) dotted #BC2D1E;}
.circle input[type="radio"]:hover {    box-shadow: 0 0 0 max(4px, 0.2em) lightgray;    cursor: pointer;}
.circle input[type="radio"]:disabled {    background-color: lightgray;    box-shadow: none;    opacity: 0.7;    cursor: not-allowed;}
.circle input[type="radio"]:disabled + span {    opacity: 0.7;    cursor: not-allowed;}
.circle .disabled {color: lightgray;}


textarea{width: 100%; background-color: #FFFFFF; border: 1px solid #c9c9c9; color: #000; padding: 10px;}

/*탭디자인*/
.nav-tabs{font-size: 1.1em;}
.nav-tabs>li>a{border:0; border-radius: 0; color: #555; opacity: 0.6;}
.nav-tabs>li>a:hover{border:0; border-bottom: 2px solid #ddd; opacity: 0.8; background:none;}
.nav-tabs>li.active>a,
.nav-tabs>li.active>a:focus,
.nav-tabs>li.active>a:hover{border:0; border-bottom: 2px solid #BC2D1E; opacity: 1; font-weight: 500;}

/*alert디자인(swal2)*/
.swal2-container {z-index: 99999 !important;}

.swal2-popup{max-width: 300px; width: calc(100% - 80px); min-width: 280px; font-size: 14px; padding:35px;}
.swal2-title{font-size: 1.15em; margin-bottom: 10px;}
.swal2-html-container{font-size: 1em; line-height: 1.4em; margin: 0; word-break: keep-all;}
.swal2-actions{width: 100%; margin-top:20px; flex-wrap:nowrap;flex-direction: row-reverse;}

.swal2-actions button{width: 100%; border-radius:4px; font-weight: 400;
    line-height: 30px; height: 30px; padding: 0; border:0; margin:0 2px;}

.swal2-actions button:hover,
.swal2-actions button:focus{
    outline: none !important;
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0) !important;
}
.swal2-styled.swal2-confirm{background: #BC2D1E; color: #fff; border-radius:4px;}
.swal2-styled.swal2-deny{background:#C4C4C4; color: #fff; border-radius:4px;}

.swal2-actions:not(.swal2-loading) .swal2-styled{opacity: 0.9;}
.swal2-actions:not(.swal2-loading) .swal2-styled:hover{background-image: none; opacity: 1;}

@media screen and (max-width:550px) {
    input{width: 100%;}
}

/*분류태그*/
.tagbox {    padding: 20px 24px 0;    display: flex;  width: 100%;}
.tagbox > div {    display: flex;    flex-wrap: wrap;   }
.tagbox > div > p {display: inline-block;    margin-bottom: 20px;}
.tagbox > div > p span.tag {    background: #fff;border-radius: 5px; border: 1px solid #C8C8CB;color: #484951; padding: 5px;margin-left: 5px; display: inline-block; line-height: 1em;}
.tagbox > div > p span.tag.active {background: #FFD0CB;    border: 1px solid #BC2D1E;    color: #BC2D1E; font-weight: 800;}
.tagbox .ft_small {font-size: 11px; padding: 5px; margin-left: -5px;}

@media screen and (max-width:1200px) {
    .tagbox > div > p {
        margin-bottom: 10px;
    }
    .tagbox > div > p:last-child {
        margin-bottom: 20px;
    }

}



/*테이블*/
.table {overflow-y: auto;}
.table table{width: 100%; border-top: 1px solid #707070;    border-bottom: 1px solid #707070}
.table th,
.table td{ padding: 10px 5px; }
.table tbody th,
.table td{ border-top: 1px solid #c9c9c9;}
.table.px tr:nth-child(even) td { border-top: 1px solid #ECECEC;}
.table tr td:last-child{border-right: 0}
.table td{ border-right: 1px solid #ECECEC;}
.table tr:nth-child(odd) td{background-color: #FBFBFB;}
.table th{font-weight: 800; font-size: 1.1em; text-align: left; border-bottom: 1px solid #707070; color: #373844;}
.table .text_center{text-align: center;}
.table .text_left{text-align: left;}
.table .text_right{text-align: right;}
.table td > a {display: block}

/*.table.adm th:not(:last-child),*/
.table.adm td{border-right: 1px solid #dadada;}
.table.adm td{ padding: 12px 5px; border-top: 1px solid #c9c9c9;}
.table.adm .order tr:nth-child(even) td { border-top: 1px solid #dadada;}
table tr.selected {background-color: #ccc!important;}

.table tr.fixed td{font-weight: 600; background-color: RGBA(188, 45, 30, 0.05); border-bottom: 1px solid RGBA(188, 45, 30, 0.07)}

.table.px tr:nth-child(odd) td{background-color: transparent}
.table.px tr:nth-child(4n+1) td{background-color: #f3f3f3}
.table.px tr:nth-child(4n+2) td{background-color: #f3f3f3}

/*adm*/
.table.adm tr:nth-child(odd) td{ background-color: #EEEEEE;}
.table.adm tr.fixed td{font-weight: 600; background-color: RGBA(188, 45, 30, 0.05); border-bottom: 1px solid RGBA(188, 45, 30, 0.07)}

/*table2*/
.table.table2 {margin-bottom: 0;  }
.table.table2 table{border-bottom: 1px solid #707070;  }/*
.table.table2 th:first-child,*/
.table.table2 td:first-child{ border-left: 1px solid #707070;}/*
.table.table2 th:last-child { border-right: 1px solid #707070;}
.table.table2 th:nth-child(2),*/
.table.table2 td:nth-child(2){ border-right: 1px solid #707070;}
.table.table2 th,
.table.table2 td{  font-size: 1em;;}/*
.table td{border-bottom: 0px }*/

/*모달*/
.modal-open {    overflow: unset;}
.modal-content {    box-shadow: none;    background: #FAFBFD;}
.modal .btn-primary {background-color: #BC2D1E; color: #fff; width: 48%; height: 35px}
.modal .btn-primary:hover {background-color: #5e1108; color: #fff; }
.modal .btn-secondary {background-color: #747474; color: #fff; width: 48%; height: 35px}
.modal .btn-secondary:hover {background-color: #2c2c2c; color: #fff; }
.modal .btn-third {background-color: #4b50cc; color: #fff; width: 48%; height: 35px}
.modal .btn-third:hover {background-color: #171a62; color: #fff; }
.modal-title {color: #373844; opacity: 0.55; font-size: 1.7em;}
.modal-header {    border-bottom: 0;}
.modal-footer {     border-top: 0;    display: flex;    justify-content: space-around;}
.modal-dialog.modal-wide {    width: 90%;    margin: 10px auto;}
.modal-dialog.modal-middle {    width: 90%; max-width: 600px;    margin: 10px auto;}
.modal-dialog.modal-narrow {    max-width: 300px;    margin: 10px auto;}
.modal-box1 {  border-radius: 5px;    background-color: #ffffff;    padding: 20px; }
.modal-body {max-height: 75vh;overflow: auto;  }
.modal label.line {margin-top: 10px;padding-top: 10px;border-top:1px solid #ececec}

/*사이드모달*/
/*사이드모달*/
.modal.modal-side{width: 100%; left: auto;}
.modal-side .modal-dialog{margin: 0; float: right; width: 40%; height: 100vh;}
.modal-side .modal-content,
.modal-side .modal-content{height: 100%;}
.modal-side .modal-body{height: calc(100vh - 100px); max-height:100vh;}
.modal-side .modal-body .table{width:100%; height: calc(100vh - 300px)}
.modal-side .modal-body .table table{width: 100%;}
.modal-side .modal-body .oneline{white-space: pre-line; text-align: left;}
.modal-side .btn-secondary{text-align:center; cursor: pointer;
    position: absolute; right: 15px; top: 15px; width: 60px; height: 30px; border-radius: 4px;}
.modal-side .btn-secondary:after{content: "\f00d"; font-family: "Font Awesome 6 Pro"; font-weight: 400; font-size: 1em; text-align: center; margin-left: 4px;}

.modal-side .modal-backdrop.in{opacity:.7;}
.modal-side .modal-dialog{margin:0; position:fixed; right: 0;}
.modal-side.fade .modal-dialog {
    -webkit-transition: -webkit-transform .3s ease-out;
    -o-transition:      -o-transform .3s ease-out;
    transition:         transform .3s ease-out;
    -webkit-transform: translate(100%, 0%);
    -ms-transform: translate(100%, 0%);
    -o-transform: translate(100%, 0%);
    transform: translate(100%, 0%);
}
.modal-side.fade.in .modal-dialog {
    -webkit-transition: -webkit-transform .3s ease-out;
    -o-transition:      -o-transform .3s ease-out;
    transition:         transform .3s ease-out;
    -webkit-transform: translate(0, -0%);
    -ms-transform: translate(0, -0%);
    -o-transform: translate(0, -0%);
    transform: translate(0, -0%);
}

/*팝업*/
#popup {position: fixed; z-index: 9999; background: #fff;  box-shadow: 0 0 10px rgb(0 0 0 / 28%);}
#popup .btn_pop{height: 50px; display: flex;width: 100%}
#popup .btn_pop button:first-child{border-right: 1px solid #eee}
#popup .btn_pop button{height: 48px;width: 50%}
#popup.pp {display: none;}

/*임시 230711
#popup .cont_pop {
    max-height: 300px;
    overflow: auto;
}*/



/* START TOOLTIP STYLES */
[tooltip] {
    position: relative; /* opinion 1 */
}

/* Applies to all tooltips */
[tooltip]::before,
[tooltip]::after {
    text-transform: none; /* opinion 2 */
    font-size: .9em; /* opinion 3 */
    line-height: 1;
    user-select: none;
    pointer-events: none;
    position: absolute;
    display: none;
    opacity: 0;
}
[tooltip]::before {
    content: '';
    border: 5px solid transparent; /* opinion 4 */
    z-index: 1001; /* absurdity 1 */
}
[tooltip]::after {
    content: attr(tooltip); /* magic! */

    /* most of the rest of this is opinion */
    font-family: Helvetica, sans-serif;

    /*
      Let the content set the size of the tooltips
      but this will also keep them from being obnoxious
      */
    /*
    width: 250px;
    overflow: hidden;
    height: auto;
    white-space: normal;
    text-align: left;*/
    text-align: center;
    min-width: 3em;
    max-width: 51em;
    white-space: nowrap;
    text-overflow: ellipsis;
    padding: 1ch 1.5ch;
    border-radius: .3ch;
    box-shadow: 0 1em 2em -.5em rgba(0, 0, 0, 0.35);
    background: #333;
    color: #fff;
    z-index: 1000; /* absurdity 2 */
}

/* Make the tooltips respond to hover */
[tooltip]:hover::before,
[tooltip]:hover::after {
    display: block;
}

/* don't show empty tooltips */
[tooltip='']::before,
[tooltip='']::after {
    display: none !important;
}

/* FLOW: RIGHT */
[tooltip][flow^="right"]::before {
    top: 50%;
    border-left-width: 0;
    border-right-color: #333;
    right: calc(0em - 5px);
    transform: translate(.5em, -50%);
}
[tooltip][flow^="right"]::after {
    top: 50%;
    left: calc(100% + 5px);
    transform: translate(.5em, -50%);
}

@media screen and (max-width: 600px) {
    #popup {width: 320px!important;height: auto!important; top: 10px!important; left: 50%!important; transform: translateX(-50%) !important}
    #popup .cont_pop {width: 100%!important; height: auto!important;}
    #popup img {width: 100%!important;}
}

@media screen and (max-width: 320px) {
    #popup {width: 95%!important;height: auto!important; top: 10px!important; left: 50%!important; transform: translateX(-50%) !important}
    #popup .cont_pop {width: 100%!important; height: auto!important;}
    #popup img {width: 100%!important;}
}

/*페이지네이션*/

/* border-pagination */
.b-pagination-outer {    width: 100%;    margin: 0 auto;    text-align: center;    overflow: hidden;    display: flex}
#border-pagination {    margin: 0 auto;    padding: 0;    text-align: center}
#border-pagination li {    display: inline;}
#border-pagination li a {    border-radius: 5px;  display: block;    text-decoration: none;    color: #000;    padding: 5px 10px;    border: 1px solid #ddd;    float: left;}
#border-pagination li a {    -webkit-transition: background-color 0.4s;    transition: background-color 0.4s}
#border-pagination li a.active {    background-color: #333;    border-color: #000;    color: #fff;}
#border-pagination li a:hover:not(.active) {    background: #ddd;}

@media screen and (max-width: 500px) {
    #border-pagination li a { padding: 3px 6px;    font-size: 0.8em;}
}


/*사진첨부*/
.newpic {  display: inline-block;    margin-bottom: 10px;    margin-right: 10px;}
.newpic.after {  margin-bottom: 10px;    margin-right: 0px;}
.newpic-upload { display: inline-block;position: relative;    text-align: left;}
.newpic-upload.w100 { width: 100%;}
.newpic-upload .newpic-edit {  position: absolute;  left: 0px;  z-index: 1;  top: 0px;}
.newpic-upload .newpic-edit input {  display: none;}
.newpic-upload .newpic-edit input + label {  display: inline-block;    width: 130px;    height: 130px;    line-height: 110px;
    margin-bottom: 0;    border-radius: 100%;    color: #fff0;    background: #FFF0;  cursor: pointer;  font-weight: normal;  transition: all 0.2s ease-in-out;}
.newpic-upload.w100 .newpic-edit input + label {  width: 100%;   }
.newpic-upload .newpic-edit input + label:hover {  background: #ffffff69;}
.newpic-upload .newpic-edit input + label:after {  content: "";  font-family: "FontAwesome"; color: #fff0;
    position: absolute;  top: 10px;  left: 0;  right: 0;  text-align: center;  margin: auto;}
.newpic-upload .newpic-preview {  width: 130px;  height: 130px;  position: relative;  border: 1px solid #F8F8F8;}
.newpic-upload.w100 .newpic-preview {  width: 100%; }
.newpic-upload .newpic-preview > div {  width: 100%;  height: 100%;  background-size: cover;  background-repeat: no-repeat;  background-position: center;}

@media screen and (max-width: 300px) {
    .newpic-upload .newpic-edit input + label {  display: inline-block;    width: 100px;    height: 100px;    line-height: 110px;}
    .newpic-upload .newpic-preview {  width: 100px;  height: 100px;  position: relative;  border: 1px solid #F8F8F8;}
}

/*탭메뉴*/
ul.tabs{    margin: 0px;    padding: 0px;    list-style: none;}
ul.tabs li{    margin-right: 5px ;background: none;     display: inline-block;    cursor: pointer;}
ul.tabs li.current{  font-weight: 800; }

.tab-content{    display: block;}
.tab-content.current{    display: inherit;}


.page-content{position: relative;}

.ready{position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; width: calc(100%); height: calc(100%); background-color: rgba(0,0,0,0.2); z-index: 1;}
.ready_page{filter:grayscale(1); opacity: 0.5;}
.ready_bubble{opacity: 0.5;}
.ready_bubble:after{content: "준비중"; display: inline-block; background: rgba(0,0,0,0.5); border-radius: 40px; color: rgba(255,255,255,1); padding: 3px 10px;
    position: absolute; top: 12px; right: 45px; font-size: 11px; line-height: 1em; font-weight: 400;}

.ready_bubble2{position: relative; display: inline-block;}
.ready_bubble2:after{content: "준비중"; display: inline-block; background: #1e2229; border-radius: 40px; color: rgba(255,255,255,1); padding: 3px 10px;
    font-size: 12px; line-height: 1em; font-weight: 400; z-index: 99;}

.empty{padding: 40px 0; text-align: center; font-size: 1.2em;}

/*조제지시서*/
/* ./order_print.css 분리 */

/*처방*/
.px .flex > div{margin-right: 18px; width: 100%;}
.px .flex > div:last-child{margin-right: 0;}

.px.pre1 .box_title strong:first-child {margin-right: 15px}
.px.pre1 .preform {padding: 20px;    font-size: 1.1em;}
.px.pre1 .preform > div {padding: 0px}
.px.pre1 .preform div.flex input[type=text]{    display: inline-block;  float: right;  width: 74%;}
.px.pre1 .preform div.flex p {    height: 40px;    line-height: 40px;  margin-bottom: 15px;}
.px.pre1 .preform div.flex p > label{    width: 100px;}
.px.pre1 .preform div.flex p .circle label {        height: 40px;    line-height: 40px;}
.px.pre1 .preform div.flex input[type=text].input-sm2 {width: 37%;    margin-bottom: 0;}
.px.pre1 .preform  span.circle {    color: #000;    float: right;    max-height: 40px;   }
.px.pre1 .preform.slideform1 span.circle {    float: right;    width: 74%;    display: inline-block;}
.px.pre1 .preform div.flex > label{    width: 100px;}
.px.pre1 .preform div.flex > textarea{  display: inline-block;    width: 87.2%; margin-bottom: 0;}
.px.pre1 .preform div.flex > p{  display: inline-block;    width: 87.2%; margin-bottom: 0;}
.px.pre1 .preform h6{  margin-bottom: 15px; height: 40px;    line-height: 40px;   font-weight: 900; font-size: 1.1em; color: #373844}
.px.pre1 .preform h6 span{ font-size: 0.9em}
.px.pre1 .box5 {padding:20px }
.px.pre1 .box5 dl {color: #fff; font-size: 1.15em }
.px.pre1 .box5 dt strong {margin-right: 15px }
.px.pre1 .box5 dt:not(:last-child) {padding-bottom: 15px;}
.px.pre1 .box5 dt span {float: right }
.px.pre1 .box5 dt span.yellow {font-size: 1.35em;  font-weight: 800;color: #FFDE5A}
.px.pre1 .box5 dd {font-size: 1.35em; font-weight: 800; text-align: right }
.px.pre1 .box5 dl:not(:first-child) {padding-top: 20px;}
.px.pre1 .box5 dl:not(:last-child) {padding-bottom: 20px; border-bottom: 1px solid #5e5e5e}
.px.pre1 .btn_order {padding: 20px;font-size: 1.5em;  font-weight: 800;}
.px.pre1 .circle span {   display: inline-block}
.px.pre1 .addressEng { margin-top: 20px;}

.px.pre2 {display: flex}
.px.pre2 .box2 > div:not(.box_title) {    font-size: 1.1em;}
.px.pre2 .box2 > div:not(.box_title) button {    font-size: 13px;}
.px.pre2 .circle span { margin: 5px 0; display: inline-block}
.px.pre2 .file_wrap dd .btn {    font-size: 13px;}
.px.pre2 .box_title strong:first-child {margin-right: 15px}
.px.pre2 .box_title input[type="text"] {border:2px solid; text-align: left}
.px.pre2 .box_line {   padding: 15px 20px;}
.px.pre2  label.recipeLabel {    width: 100px;}
.px.pre2 .box_line1 { padding: 15px 20px; border-top:1px solid #707070}
.px.pre2 .px5 .box_line1 {display: block; }
.px.pre2 .packing .box_line1 {display: block; }
.px.pre2 .box_line2 { padding: 15px 20px; border-top:1px solid #E8E8E8}
.px.pre2 .box_line2.cheupBo { display: flex;}
.px.pre2 .box_line2.cheupBo > div:first-child{width: 35%;   min-width: 350px;}
.px.pre2 .box_line2.cheupBo > div:last-child{width: 70%;    text-align: right;}
.px.pre2 .box_line2 .table {margin-bottom: 0px}
.px.pre2 .search {    font-size: 0;display: inline-block!important;  position: relative}
.px.pre2 .search input.search-bar {    width: 350px; border-radius: 5px 0 0 5px}
.px.pre2 .search button { border-radius: 0 5px 5px 0 }
.px.pre2 .left {width: 70%; margin-right: 15px; }
.px.pre2 div.right {width: 30%;    height: auto;}
.px.pre2 div.right .sticky {position: sticky;    top: 0; padding: 0}
.px.pre2 div.right .box5 {padding: 20px}
.px.pre2 div.right div .preform {padding: 20px}
.px.pre2 div.right div .preform p {margin-bottom: 15px}
.px.pre2 div.right  .preform h6{  margin-bottom: 15px; height: 40px;    line-height: 40px;   font-weight: 900; font-size: 1.1em; color: #373844}
.px.pre2 div.right  .preform h6 span{ font-size: 0.9em}
.px.pre2 div.right .btn_order {    margin-bottom: 5px;padding: 20px;font-size: 1.5em;  font-weight: 800;}
.px.pre2 .box5 dl {color: #fff; font-size: 1.15em }
.px.pre2 .box5 dt strong {margin-right: 15px }
.px.pre2 .box5 dt:not(:last-child) {padding-bottom: 15px;}
.px.pre2 .box5 dt span.right {float: right }
.px.pre2 .box5 dt em.right {    font-style: unset;float: right }
.px.pre2 .box5 dt span.yellow {font-size: 1.35em;  font-weight: 800;color: #FFDE5A}
.px.pre2 .box5 dd {font-size: 1.35em; font-weight: 800; text-align: right }
.px.pre2 .box5 dl:not(:first-child) {padding-top: 20px;}
.px.pre2 .box5 dl:not(:last-child) {padding-bottom: 20px; border-bottom: 1px solid #5e5e5e}
.px.pre2 .number select {width: 70px; margin-bottom: 0;margin-right: 10px}
.px.pre2 .number2 select {width: 250px; margin-bottom: 0;margin-right: 10px}
.px.pre2 .number2 select.tangType {width: auto;}
.px.pre2 .number2 p {line-height: 40px}
.px.pre2 .box2 .number2 select {width: 70px;margin-bottom: 0;margin-right: 10px;}
.px.pre2 select.plus2 {width: 170px; margin-left: 10px; margin-top: 10px}
.px.pre2 div.count {letter-spacing: -.5px;padding: 20px; font-size: 1.15em;  color: #fff}
.px.pre2 div.count p {line-height: 2em;}
.px.pre2 div.count div:first-child {    width: 70%;}
.px.pre2 div.count p.tit {min-width: 110px;font-weight: 800;}
.px.pre2 div.count p span.number {background: #fff; color: #BC2D1E; padding: 2px 5px; margin: 0px 5px; font-weight: 800;border-radius: 4px}
.px.pre2 div.taking select {margin-bottom: 0px}
.px.pre2 div.taking .box5.notice {display: flex;margin-bottom: 10px; color: #fff; padding: 15px; align-items: center}
.px.pre2 div.taking .box5.notice i {font-size: 4em; margin-right: 15px}
.px.pre2 div.taking .box5.notice p {font-size: 1.1em; font-weight: 500; line-height: 1.5em}
.px.pre2 div.taking .box_title.bg_white:not(.patientNameebox) { border-radius: 5px 5px 0 0;}
.px.pre2 div.taking .box_title.bg_white.patientNameebox{ padding-top: 0;}
.px.pre2 div.packing label {margin-right: 10px; cursor:pointer}
.px.pre2 div.packing ul {margin-bottom: -10px;}
.px.pre2 div.packing li {margin-right: 20px;margin-bottom: 10px}
.px.pre2 div.packing .tagbox {padding:0px;}
.px.pre2 div.packing .warning {padding:10px; background: #f5f5f5; margin-top: 15px; border-radius: 5px}
.px.pre2 div.packing .warning p:first-child{font-weight: 800; color: #373844; }
.px.pre2 div.packing p.tit {font-size: 1.1em; font-weight: 800; color: #373844; margin-bottom: 15px}
.px.pre2 div.packing p.tit span {margin-left: 10px;font-size: 0.85em; font-weight: 400; color: #BC2D1E;}
.px.pre2 div.packing .thumb_img {width:100px; height: 100px; background-size: cover!important; background-position: center center!important;/*border: 1px solid #D9D9D9;*/
    margin: 0 auto; margin-bottom: 15px;   border-radius: 5px;}
.px.pre2  .reTangElem.flex {    margin-top: 10px;}
.px.pre2  span.dosageElem  {    font-size: 13px;}
.px.pre2  span.dosageElem span {    font-size: 1em;}
.px.pre2  span.cheupBoElem {  letter-spacing: -.5px;}
.px.pre2  .outdate div { align-items: center; flex-wrap: wrap}
.px.pre2  .outdate p { margin-bottom: 0!important; width: 50px}
.px.pre2  .outdate span { display: inline-block; width: 100%; margin-top: 15px }
.px.pre2  .outdate input[type="date"], .px.pre2  .outdate input[type="text"] {   width: calc( 100% - 50px );max-width: 200px; margin-bottom: 0}
.px.pre2  .hwanName {  margin-top: 15px }
.px.pre2  .deleteNotice { letter-spacing: -.5px;  padding: 10px 20px;  margin-bottom: 15px;  border-radius: 5px; font-size: 1.15em;   color: #fff;}
.px.pre2  #rewardPointDisplay { margin: 0 3px;    font-size: 1.35em;    font-weight: 800;}

/*멤버십 표시*/

.px.pre2 .box5 dd span.memPoint em{ font-style: normal}
.px.pre2 .box5 dd span.memPoint{ color: #ffc000; margin-bottom:15px; font-size: 0.85em}
.px.pre2 .box5 dd span.memPoint strong {background: #fff;color: #000;border-radius: 2px;padding: 0px 3px; font-size: 0.9em;    display: inline-block;}
.px.pre2 .box5 dt.memPoint{ color: #ffc000; }

/* 약재 순번 */
.medicinalBundle {counter-reset: rowNumber;}
.medicinalBundle tr[data-idx] {counter-increment: rowNumber;}
.medicinalBundle tr[data-idx] td.num::before {
    content: counter(rowNumber);
}

/* KEYFRAMES */
@keyframes tooltips-vert {
    to {
        opacity: .9;
        transform: translate(-50%, 0);
    }
}

@keyframes tooltips-horz {
    to {
        opacity: .9;
        transform: translate(0, -50%);
    }
}

/* FX All The Things */
[tooltip]:not([flow]):hover::before,
[tooltip]:not([flow]):hover::after,
[tooltip][flow^="up"]:hover::before,
[tooltip][flow^="up"]:hover::after,
[tooltip][flow^="down"]:hover::before,
[tooltip][flow^="down"]:hover::after {
    animation: tooltips-vert 300ms ease-out forwards;
}

[tooltip][flow^="left"]:hover::before,
[tooltip][flow^="left"]:hover::after,
[tooltip][flow^="right"]:hover::before,
[tooltip][flow^="right"]:hover::after {
    animation: tooltips-horz 300ms ease-out forwards;
}


.paymentOrder .how {   margin: 0 auto 10px;    padding: 10px;    border-radius: 5px;    border: 1px solid #eee;    background: #fff;    font-weight: 600;}
.paymentOrder .info {   color: #000;margin: 10px auto;    padding: 10px 0;    border-top: 1px solid #eee;    border-bottom: 1px solid #eee; ;}
.paymentOrder .how span { margin: 0 5px;   border-radius: 3px;    padding: 0px 5px;    display: inline-block;}
.paymentOrder .how span:hover { background: #E8E8E8; color:#373844}
.paymentOrder > div  > dl{display: flex;justify-content: left;text-align: left;margin: 10px auto;line-height: 2em;}
.paymentOrder > div > dl > dt {    width: 20%;    min-width: 50px; max-width: 100px;}
.paymentOrder > div > dl > dd {    width: 80%;    font-weight: 600;}

.px .message:not(:last-child) {margin-bottom: 10px; }
.px .message {color: #373844}
.px .message p {margin-bottom: 10px;}
.px .message div {padding: 10px; border-radius: 5px; border:1px solid;    width: fit-content; max-width: 80%}
.px .message.adm div {border-color:#BABABA; background: #F9F9F9}
.px .message.mine {text-align: right}
.px .message.mine div {border-color:#BC2D1E;    float: right;}
.px .message.mine::after {    content: '';    display: block;    clear: both;}
.px .messagewrap {   margin-bottom: 20px; max-height: 250px;    overflow-y: auto; padding-right: 10px}
.px .message  {    content: '';    display: block;    clear: both;}
.px input.message {margin-bottom: 0px!important; border-color:#BC2D1E;  width: 100%!important;}

.btn-fixed {position: sticky; top: 20px; right: 20px; width: 190px; text-align: center; z-index: 999; opacity: 0.7;    text-align: center;
    z-index: 999;    opacity: 0.7;    display: flex;    flex-wrap: wrap;    justify-content: right;margin-left: auto;   margin-bottom: 15px; }
.btn-fixed:hover {opacity: 1 }
.btn-fixed button {width: 60px; font-weight: 800!important;}

/*약속처방 주문*/
.p_coded.order .thumb_img {    width: 100px;    height: 100px;    background-size: cover!important;    background-position: center center!important;    border: 1px solid #D9D9D9;    border-radius: 5px;}
.p_coded.order > div { padding: 20px }
.p_coded.order > div .table{ margin-bottom: 0px }

/*주문서작성*/
.px.pre2.empAccount.order {justify-content: center} /*직원계정 조회*/
.order.px.pre2 .preform{padding: 20px;}
.px .preform .payment{margin-bottom: 20px;}
.px .preform .payment .areatop{margin-bottom: 20px;}
.px .preform .payment .circle{margin-bottom: 10px;}
.px .preform .payment .point{font-size: 1.1em;}
.px .preform .payment .point > strong:first-child{margin-right: 20px;}
.px .preform .payment .point input[type=text]{width: auto; display: inline-block; margin:0 4px; font-size: 1.1em; font-weight: 600}

.px .preform .payment .box6{padding: 15px;}
.px .preform .payment .box6 h5{font-size: 1em; border-bottom: 1px solid #eee; padding-bottom: 6px; margin-bottom: 10px; opacity: 0.6}
.px .preform .payment .issue .form{display: flex; align-items: center; margin-bottom: 5px;}
.px .preform .payment .issue .form label{}
.px .preform .payment .issue .form input[type=text],
.px .preform .payment .issue .form select{margin: 0 10px 0 5px; border-radius: 4px}
.px .preform .payment .account{background: #FFE8E5; padding: 15px; border-radius: 4px; margin-bottom: 15px}
.px .preform .payment .account dl{display: flex;}
.px .preform .payment .account dl:first-child{margin-bottom: 10px}
.px .preform .payment .account dt{font-weight: 600; margin-right: 10px}
.px .preform .box3{padding: 20px;}

.px.pre2 div .sticky h6{font-size: 1.4em; color:  #fff; font-weight: 600; margin-bottom: 20px}




/*결제실패/성공*/

.failCaption {text-align: center; border: 1px solid #eee; padding: 20px;margin-bottom: 10px;}
.failCaption h1 {font-size: 1.2em;  line-height: 2em;}
.failCaption h1 i {font-size: 2em; margin-top: 10px; }
.failCaption p{text-align: center;font-size: 1.1em;line-height: 2em}
.failCaption p.reason {margin: 20px 0}
.failCaption p.reason span {padding:10px; border-radius: 5px; border:1px solid #eee; background: #fff; font-weight: 600;}

.successCaption {text-align: center; border: 1px solid #eee; padding: 20px;margin-bottom: 10px;}
.successCaption h1 {font-size: 1.2em;  line-height: 2em;}
.successCaption h1 i {font-size: 2em; margin-top: 10px; }
.successCaption h2 {max-width: 500px;margin:10px auto;   padding: 10px 0;    border-top: 1px solid #eee;    border-bottom: 1px solid #eee; opacity: 1;}
.successCaption .how {max-width: 500px; margin: 20px auto;padding:10px; border-radius: 5px; border:1px solid #eee; background: #fff; font-weight: 600;}
.successCaption .how p {font-weight: 400;}
.successCaption .how p span {margin:10px 0;   padding: 10px 0;    border-top: 1px solid #eee;    border-bottom: 1px solid #eee;    display: block;}
.successCaption > div:not(.how) {display: flex; justify-content: center; text-align: left;max-width: 500px;margin:10px auto; line-height: 2em;}
.successCaption > div:not(.how) > *:nth-child(1) {width: 20%;min-width: 100px}
.successCaption > div:not(.how) > *:nth-child(2) {width: 80%;font-weight: 600;}
.paymentBtn {display: flex;justify-content: space-between}
.paymentBtn button {width: 49.5%;font-size: 1.2em; height: 50px }

@container content (max-width: 1500px) {
    .px.pre2 .box_line2.number2 > .flex,
    .px.pre2 .box_line2.number2.flex {flex-wrap: wrap;}
    .px.pre2 .box_line2.number2.flex .input_no {margin-bottom: 15px;  }
}
@container content (max-width: 1200px) {
    .px.pre1 .flex > div {margin-right: 0;}
    .px.pre1 .flex {flex-wrap: wrap}
    .px.pre1 .preform p.flex textarea{display: block;  margin-top: 10px;  width: 100%;}
    .px.pre1 .preform div.flex > textarea{display: block;  margin-top: 10px;  width: 100%;}
    .px.pre2 .box_line1 {flex-wrap: wrap;}
    .px.pre2 .box_title {flex-wrap: wrap;}
    .px.pre2 {flex-wrap: wrap;}
    .px.pre2 div.count {flex-wrap: wrap;}
    .px.pre2 div.count div:first-child {margin-bottom: 20px; margin-right: 0px!important;}
    .px.pre2 .left {width: 100%; margin-right: 0px; }
    .px.pre2 div.right {width: 100%;    height: auto;}
    .px.pre2 .btn_box {margin-top: 10px;}
    .px.pre2 .search {margin-top: 10px;}
    .px.pre2 .box_line2.number {flex-wrap: wrap}
    .px.pre2 .box_line2.number2.flex {flex-wrap: wrap;}

    .buwonHide {display: none!important;}
    .px.pre2 div.count div:first-child {    width: 100%;}
}
@media screen and (max-width: 1200px){
    .px.pre1 .flex > div {margin-right: 0;}
    .px.pre1 .flex {flex-wrap: wrap}
    .px.pre1 .preform p.flex textarea{display: block;  margin-top: 10px;  width: 100%;}
    .px.pre1 .preform div.flex > textarea{display: block;  margin-top: 10px;  width: 100%;}
    .px.pre2 .box_line1 {flex-wrap: wrap;}
    .px.pre2 .box_title {flex-wrap: wrap;}
    .px.pre2 {flex-wrap: wrap;}
    .px.pre2 div.count {flex-wrap: wrap;}
    .px.pre2 div.count div:first-child {margin-bottom: 20px; margin-right: 0px!important;}
    .px.pre2 .left {width: 100%; margin-right: 0px; }
    .px.pre2 div.right {width: 100%;    height: auto;}
    .px.pre2 .btn_box {margin-top: 10px;}
    .px.pre2 .search {margin-top: 10px;}
    .px.pre2 .box_line2.number2.flex {flex-wrap: wrap;}
    .px.pre2 .box_line2.number2.flex .input_no {margin-bottom: 15px;  }
    .px.pre2 .box_line2.number {flex-wrap: wrap}
    .buwonHide {display: none!important;}
}
@media screen and (max-width: 1000px) {
    .px .preform .payment .issue .form {flex-wrap: wrap}
    #pxmembermodal table {min-width: 800px}
    .px.pre2 .box_line2 table:not(#medi_sch_tb) {min-width: 800px}
    .px.pre2 .box_line2.cheupBo {flex-wrap: wrap;}
    .px.pre2 .box_line1 .flex.jc-sb {flex-wrap: wrap;}

    .px.pre2 .cheupBoElem input[type=radio] { margin-bottom: 0px!important; }
    .px.pre2 .box_line2.cheupBo input[type=checkbox] { margin-bottom: 0px!important; }
    .px.pre2 .cheupBoElem input[type=radio] + label { margin-bottom: 0px; }
    .px.pre2 .box_line2.cheupBo input[type=checkbox] + label { margin-bottom: 0px; }
    .px.pre2 .box_line2.cheupBo > div:first-child {width: 100%}
    .px.pre2 .box_line2.cheupBo > div:last-child {width: 100%}
    .px.pre2 div.taking .box5.notice p {font-size: 1em}
}
@media screen and (min-width: 820px) {
    .px.pre2 .box_title input[type="text"] {min-width: 600px!important;}
}
@media screen and (min-width: 600px) and (max-width: 819px)   {

    .px.pre2 .box_title input[type="text"] {min-width: 300px!important;}
}
@media screen and (min-width: 500px)   {

    .visible-xxs {
        display: none !important;
    }
}
@media screen and (max-width: 500px){
    .px.pre2 div.count div:first-child {margin-bottom: 10px;    }
    .px.pre1 .preform h6 {  margin:10px 0 5px;  color: #BC2D1E;   height: auto;  line-height: unset;}
    .px.pre2 div.right .box5 { padding: 15px 10px;    }
    .px.pre2 div.count .flex:last-child p.tit { margin-bottom: 5px;    }
    .px.pre2 div.count { padding: 15px 10px;    }
    .order.px.pre2 .preform {  padding: 15px 10px;  }
    .p_coded.order > div  {  padding: 15px 10px;  }
    .px.pre2 div.right div .preform {  padding: 15px 10px;  }
    .px.pre2 .box5 dt:not(:last-child) {padding-bottom: 5px;    }
    .px.pre2 .box5 dd { font-size: 1.1em;    }
    .visible-xxs {display: block!important;    }
    .px.pre1 { margin-bottom: 20px;}
    .px.pre1 .preform { padding: 10px;}
    .px.pre1 .point strong {display: block;margin-top: 10px}/*
    .px.pre2 input[type=checkbox]  {margin-bottom: 15px}
    .px.pre2 input[type=radio]  {margin-bottom: 15px}
    .px.pre2 input[type=checkbox] + label {margin-bottom: 15px}
    .px.pre2 input[type=radio] + label {margin-bottom: 15px}*/
    .px.pre2 div.packing li { margin-right: 10px;        margin-bottom: 10px;    }
    .px.pre2 div.packing .warning {margin: 10px 0!important;}
    .px.pre2 .box_line2.number2.flex .male-auto {margin-left: 0!important; margin-top: 10px}
    .px.pre2 .input_no {margin-bottom: 15px}
    .px.pre2 div.count .flex {flex-wrap: wrap;}
    .px.pre2 div.count .flex p.tit {margin-bottom: 15px}
    .px.pre1 .box_title {flex-wrap: wrap;}
    .px.pre1 .preform div.flex p > label {width: 100%;}
    .px.pre1 .preform div.flex p.txt_blue {margin-top:10px;line-height: 20px!important;width: 100%;}
    .px.pre1 .preform span.circle {width: 100%!important;        max-height: unset;}
    .px.pre1 .preform.slideform2 span.circle > * {margin: 10px 6px 10px 0;}
    .px.pre1 .preform div.flex > textarea {width: 100%;        max-height: unset;}
    .px.pre1 .preform div.flex input[type=text] {width: 100%;}
    .px.pre1 .preform div.flex input[type=text].input-sm2 {width: 50%; }
    .px.pre1 .preform div.flex p {height: auto;}
    .px.pre2 .search {width: 100%;}
    .px.pre2 .search input.search-bar {width: calc( 100% - 40px );}
    .px.pre2 div.taking select {width: 100%!important;}

    #pxmedimodal .select input[type=radio]+label { height: 25px;        line-height: 25px;        padding: 0 5px;        margin-bottom: 5px;    }
    #pxmedimodal .panel { margin-bottom: 0; }
    #pxmedimodal .modal-body {        max-height: 400px!important;}

}
/* 처방 모달*/
#pxmembermodal .search{width: 100%}
#pxmembermodal .search input {width: calc( 100% - 40px ); border-color : #BC2D1E}
#pxmembermodal .search button {border-color : #BC2D1E}
#pxlistmodal .tabletit {margin-bottom: 15px; display: none}
#pxlistmodal .tabletit p {font-size: 1.2em; }
#pxlistmodal .table tr:nth-child(odd) td{background-color: #fff;}
#pxlistmodal .table tr:nth-child(4n-1) td{background-color: #FBFBFB;}
#pxlistmodal .modal-title{opacity: 1;}
#pxlistmodal ul.tabs li{color: rgba(55, 56, 68, 0.5);}
#pxlistmodal ul.tabs li.current{border-bottom: 3px solid #1E33BC;   color: #1E33BC;}
#pxlistmodal .collapse > td { padding: 10px;background: #afafaf;}
#pxlistmodal .collapse > .table { padding: 10px;background: #afafaf;}
#pxlistmodal .collapse .table2 {    background-color: #e9e9e9;}
#pxlistmodal .table2 th,#pxlistmodal .table2 td {   border: 1px solid  #707070;padding : 5px 5px;}
#pxlistmodal .table2 tr:nth-child(odd) td {    background-color: #fcfcfc;}

#pxInsModal .tabletit {margin-bottom: 15px;}
#pxInsModal .tabletit p {font-size: 1.1em; }
#pxInsModal .table tr:nth-child(odd) td{background-color: #fff;}
#pxInsModal .table tr:nth-child(4n-1) td{background-color: #FBFBFB;}
#pxInsModal .modal-title{opacity: 1;}
#pxInsModal ul.tabs li{color: rgba(55, 56, 68, 0.5);}
#pxInsModal ul.tabs li.current{border-bottom: 3px solid #1E33BC;   color: #1E33BC;}
#pxInsModal .collapse > td { padding: 10px;background: #afafaf;}
#pxInsModal .collapse > .table { padding: 10px;background: #afafaf;}
#pxInsModal .collapse .table2 {    background-color: #e9e9e9;}
#pxInsModal .table2 th,#pxInsModal .table2 td {   border: 1px solid  #707070;padding : 5px 5px;}
#pxInsModal .table2 tr:nth-child(odd) td {    background-color: #fcfcfc;}

#pxmedimodal .modal-backdrop {background-color:#ffffff00}
#pxmedimodal .modal-header  {display: none;}
#pxmedimodal .modal-body {/*max-height: 45vh;*/    overflow: hidden;}
#pxmedimodal .table {    overflow: auto;    overflow-y: auto;    /*max-height: 250px;*/margin-bottom: 10px;}
#pxmedimodal .modal-dialog.modal-wide { margin-top: 0;}
#pxmedimodal .modal-content {box-shadow: 0 0 15px 1px rgb(0 0 0 / 22%);}
#pxmedimodal .panel{  margin-bottom: 0;}
#pxmedimodal .panel > p{  margin-right: auto;}
#pxmedimodal .table th,#pxmedimodal  .table td {padding: 3px 5px;}


#pxlistmodal .modal-backdrop {background-color:#ffffff00}
#pxlistmodal .modal-body { padding-top: 0;/*max-height: 35vh;*/    overflow: hidden;}
#pxlistmodal .panel{  margin-bottom: 0;}
#pxlistmodal .table th, #pxlistmodal  .table td {padding: 3px 5px;}
#pxlistmodal .table {    overflow: auto;    overflow-y: auto;    /*max-height: 210px;*/    margin-bottom: 10px;}

#pxTmpOrderModal .table tr:nth-child(odd) td{background-color: #fff;}
#pxTmpOrderModal .table tr:nth-child(4n-1) td{background-color: #FBFBFB;}
#pxTmpOrderModal .collapse > td { padding: 10px;background: #afafaf;}
#pxTmpOrderModal .collapse > .table { padding: 10px;background: #afafaf;}
#pxTmpOrderModal .collapse .table2 {    background-color: #e9e9e9;}
#pxTmpOrderModal .table2 th,#pxlistmodal .table2 td {   border: 1px solid  #707070;padding : 5px 5px;}
#pxTmpOrderModal .table2 tr:nth-child(odd) td {    background-color: #fcfcfc;}




/*한약재검색*/
#medi_sch_field{   max-height: max-content;  /*  max-height: 200px;  */  overflow: auto; border: 1px solid #ced4da;    border-top:0px;    border-radius:0px 0px 10px 10px;   display: none;    z-index: 4;    width:100.15%;    left:-1px;    position: absolute;    background:white;}
.mediTable {min-height: 280px}
#medi_sch_field::-webkit-scrollbar {    display: none;}
#medi_sch_tb{   font-size: 13px!important;    width:100%;       border-collapse: inherit;}
#medi_sch_tb tr {cursor: pointer;text-align: left;}
#medi_sch_tb tr:nth-child(odd){    cursor:pointer;    background-color:#f6f6f6}
#medi_sch_tb tr:hover {    background-color: #dedede;}
.form_select,.pt_form_select{    background-color: #E0E8E7;}
#medi_sch_tb td{    padding:10px;}
#medi_sch_tb td:first-child{padding-right:0}

@media screen and (max-width: 500px){
    #medi_sch_field {        overflow-y: auto;}
    #medi_sch_field table { width: 100%;}
}

/*폼증가감소*/
.input_no {  display: inline-block;    height: 40px;  padding:0 10px;    line-height: 1.5;    color: #495057;    background-color: #fff;    background-clip: padding-box;    border: 1px solid #ced4da;    border-radius: 0.25rem;
    margin: 0 10px;}
.input_no input[type=text] {    width: 50%;    border: 0;    background: none;    text-align: center;}
.input_no button {    background: none;    border: 0 !important;    cursor: pointer;}
.input_no button i {    font-size: 1.05em;}
.input_no button.arrowUp {    border: 0 !important;    border-radius: .25em;    background: #ff7e00 !important;}
.input_no button.arrowDown {    border: 0 !important;    border-radius: .25em;    background: #313d53 !important;    margin: 0 20px 0 0;}
.input_no button.arrowUp i, .table td.in_de button.arrowDown i {    color: #fff;}
.input_no button.dele{ background:#f7b924}
.input_no input[type=text] {    margin: 0;    display: inline-block;   width: 90px !important;    border: 0;    background: none;    text-align: center;    line-height: 38px;    border-radius: .25rem;}
/*@media screen and (max-width: 500px){
}*/



/*loading*/
#loading{content: ""; display: block; width: 100%; height: 100vh; background-color: rgba(0,0,0,0.5); position: fixed; left: 0; top: 0; z-index: 999999;}
#loading .box_wrap{position: fixed; top: 45%; left: 50%; transform: translate(-50%,-50%); display: block; text-align: center; width: 70px; height: 70px;}
#loading .box{display:block; background-color: #fff; width: 70px; height: 70px; border-radius:5px; position: relative;}
#loading img{width:30px; height: auto;	margin:10px auto 2px auto;}
#loading p{font-size: 0.8em; line-height: 1em; font-weight: 500; color: #666;}

#loading .box{
    box-shadow: 1px 1px 0 rgba(0,0,0,0.2), -1px -1px 0 rgba(0,0,0,0.2);
    width: 100%;
    animation: scale 1s infinite ease-in-out;
    animation-direction: alternate;
}
@keyframes scale {
    0%   { transform: scale(0.9) }
    100%  { transform: scale(1) }
}

.notice_pop{position: fixed;z-index: 9999;/* right: 20px; */top:100px;background: #BC2D1E;border-radius: 4px;padding: 20px;color: #fff;/* border-left: 4px solid #BC2D1E; */display: flex;align-items: start;left: 50%;top: 50%;transform: translate(-50%, -50%);}
.notice_pop .notice_icon{color: #FFD0CB;font-size: 1.3em;line-height: 20px;}
.notice_pop .notice_txt p{font-size: 1.1em;font-weight: 600;margin-bottom:4px;line-height: 20px;}
.notice_pop .notice_txt span{opacity: 0.8; font-weight: 100;}
.notice_pop .notice_txt{margin: 0 20px 0 10px;}
.notice_pop button.close{
    color: #fff;
    font-size: 1em;
    text-shadow: none;
    font-weight: 400;
    opacity: 0.8;
}

/* 툴팁 */
.tooltip-container {position: relative; display: inline-block;}
.tooltip {visibility: hidden; background-color: #555; color: #fff; text-align: center; border-radius: 6px; padding: 5px; position: absolute; z-index: 9999; bottom: 110%; /* 위치 조정 */ left: 50%; margin-left: -100px; opacity: 0; transition: opacity 0.3s; width: 200px;}
.tooltip-container:hover .tooltip {visibility: visible;opacity: 1;}
.tooltip::after {content: ""; position: absolute; top: 100%; left: 50%; margin-left: -5px; border-width: 5px; border-style: solid; border-color: #555 transparent transparent transparent;}

/*목록 데이터 없을 때*/
.noDataAlign {
    text-align: center !important;
}

/* swal */
body.swal2-shown:not(.swal2-no-backdrop):not(.swal2-toast-shown), html.swal2-shown:not(.swal2-no-backdrop):not(.swal2-toast-shown) { height: 100% !important; overflow-y: visible !important; }

/* summernote */
.note-editable {background: #FFF;}

/*adbanner*/
.ad_banner {margin: 0 auto; text-align: center; width: 100%; display: block}
.ad_banner img {width: 95%; border-radius: 5px;margin-top: 10px;max-width: 280px}
.ad_banner.v2 img {width: 100%; border-radius: 5px;margin-top: 0px;margin-bottom: 15px;max-width: 1540px}

/* 건강정보 팝업 */
.popup_pa h1{font-size: 1.2em; font-weight: 600; background: #333; color: #fff; padding: 10px 20px;}
.popup_pa .popup_wrap{padding: 20px;}
.popup_pa .box{background: #eee; padding:10px 20px; border-radius: 4px;}
.popup_pa .step{display: grid; grid-template-columns: auto auto auto; background: #fff; border: 1px solid #eee; padding: 10px; margin: 10px 0 20px 0; border-radius:4px; }
.popup_pa .step span{text-align: center;}
.popup_pa .step span i{display: inline-block; text-align: center; width: 20px; line-height: 20px; border-radius: 4px; background: #eee; color: #333; margin-right: 4px; font-style:normal;}
.popup_pa .step span.active{color:#BC2D1E;font-weight: bold;}
.popup_pa .step span.active i{color:#fff; background: #BC2D1E;}
.popup_pa form .flex.js > div{width: auto}
.popup_pa form .flex > label{margin-right: 20px; width: 100px;}
.popup_pa form .flex{align-items: center; padding: 5px 0;}
.popup_pa .info {margin: 10px 0 30px; padding: 20px 0; background: #fff;  }
.popup_pa .info p{font-size: 1.1em; line-height: 2em; text-align: center; font-weight: 700}
.popup_pa .info p span{background: #ffdbdb; padding: 2px 5px; border-radius: 5px}

.popup_pa .agree{ border-top:1px solid #eee; padding: 20px 0; margin-top: 20px; }
.popup_pa .agree h4{font-size: 1.2em; font-weight: 600; margin-bottom: 5px;}