@charset "utf-8";
/*mixin - cont_box */


.inbox {padding: 1.25rem 1.25rem 5rem; margin-bottom: 3rem;}  


.inbox .line-box > dl {display: flex; gap: 1.5625rem; font-weight: 600;}
.box30 {margin:30px 0}
.box30_t {margin-top:30px}

.tb30_ {width:30% ;}
.tb50_ {width:50% ;}
.tb100_ {width:100% ;}

.wid120 {width:120px}
.wid100 {width:100px;}
.wid200 {width:200px;}

.form-control_100{width:100px}
.form-control_200{width:200px}

.flexArea{display: flex; gap: 1.25rem;}


.tbl01{width:100%; border-top:1px solid var(--black); border-bottom:1px solid var(--gray-base); font-size: 0.9375rem; }
.tbl01  tbody th { color: #000; font-weight: bold; text-align: center; background: #ffff; border-right:1px solid #e5e5e5;white-space: nowrap; padding: 0.625rem  5rem;}
.tbl01  tbody td {  padding: 0.625rem 0.8125rem; font-size: 0.875rem; }
.tbl01 tr {border-bottom:1px solid var(--gray-base)}
.tbl01 tr td a {color:var(--primary-color); margin-right: 20px; text-decoration: underline}
.tbl01  tbody th.line {border-left:1px solid #e5e5e5}

.tbl02 th { color: var(--black); font-weight: bold; text-align: center; border-right:1px solid var(--gray-base);border-bottom:1px solid var(--gray-base); padding: 10px 0px; font-size: 0.9375rem; }
.tbl02{ width:100%;border-top:1px solid #000; margin:10px 0; }
.tbl02 th, .tbl02 td {text-align:center; } 
.tbl02 th:last-child, .tbl02 td:last-child { border-right:0}
.tbl02 td{ padding:8px 8px;border-bottom:1px solid var(--gray-base);border-right:1px solid var(--gray-base); font-size: 0.875rem;}
.tbl02 td.left{text-align:left;}
.tbl02 td.no{ padding:0}
.tbl02 td a {color:#000; font-size: 0.875rem; }
.tbl02 td a:hover{text-decoration:underline}
.tbl02 tr:hover td{ background:#fafafa;}
.tbl02  i {  padding-bottom: 3px; font-size: 15px; }
.tbl02 tr.total td{color:var(--primary-color);font-weight: bold !important; background-color: rgba(4, 149, 231, 0.1); }

.tbl03{width:100%; border-top:1px solid var(--black); border-bottom:1px solid var(--gray-base); font-size: 0.9375rem; }
.tbl03  tbody th { color: #000; font-weight: bold; text-align: center; background: #ffff; border-right:1px solid #e5e5e5;white-space: nowrap; padding: 0.75rem  5rem;}
.tbl03  tbody td {  padding: 0.75rem 0.8125rem; font-size: 0.875rem; }
.tbl03 tr td a {color:var(--primary-color); margin-right: 20px; text-decoration: underline}
.tbl03  tbody th.line {border-left:1px solid #e5e5e5}




/* search_form */
.search_form{position:relative; margin-bottom:10px; box-shadow: var(--box-shadow-base); padding: 0.625rem; border:1px solid var(--gray-base); border-radius: 3px;}
.search_form > ul > li.col1> dl{width:100%; text-align: center;}
.search_form > ul > li.col2 > dl{float:left; width:50%;}
.search_form > ul > li.col3 > dl{float:left; width:33.333333%;}
.search_form > ul > li{background:var(--white); padding:5px 0; min-height:26px;}
.search_form > ul > li:after{content:''; display:block; clear:both;}
.search_form > ul > li > dl{position:relative; display: flex;}
.search_form > ul > li > dl:before{content:""; position:absolute; left:-1px; top:0; width:1px; height:100%; background:#dde2ed;}
.search_form > ul > li > dl:first-child:before{display:none;}
.search_form > ul > li > dl > dt{line-height:26px; font-size:0.875rem; color:var(--black); min-width:90px; float:left; font-weight:500; letter-spacing:-0.5px; padding-left:20px; position:relative}
.search_form > ul > li > dl > dt:after {position:absolute; content: ''; width:3px; height: 3px; border-radius: 15px; background: var(--primary-color);left:13px; top:12px}
.search_form > ul > li > dl > dt.min{min-width:80px}
.search_form > ul > li > dl > dt.max{min-width:140px}
.search_form > ul > li > dl > dd{float:left; padding-left:20px;flex: 1;}
.search_form > ul > li > dl > dd.tit_not{padding-left:12px;}
.search_form > .btn_search{position:absolute; right:15px; bottom:10px;}

/* inputxt_normal */
.inputxt_normal{display:inline-block; position:relative; height:28px; background: var(--white); border:1px solid var(--gray-base); vertical-align:middle; border-radius:3px; }
.inputxt_normal.spider{display:block; margin-right:0}
.inputxt_normal input{position:relative; height:24px; line-height:24px; margin:0; border:0; padding:0 8px; margin:0; text-align:left; font-size:0.8125rem; color:#303030; box-sizing:border-box; 
    font-weight:normal; background:#fff; width:100%}
.inputxt_normal.spider input{width:100%}
.inputxt_normal input[disabled]{background:#eeeeee}
.inputxt_normal input[readonly]{background:#f9f9f9}
.inputxt_normal input[readonly] ~ .ui-datepicker-trigger{background:#fff}
.inputxt_normal.dateinput .ui-datepicker-trigger{display:block; font-size:1.0rem; position:absolute; right:0; top:0; width:35px; height:100%; margin:0; padding:0; line-height:25px;
     text-align:center; color:#808080; border:0; background:none;  border-radius:0; cursor:pointer;}
     .inputxt_normal em {padding-right:15px}
.inputxt_normal input.error{background:#feeae8;}
.inputxt_normal.dateinput input[type=text]{width:80%}
.inputxt_normal button.inp-btn { position:absolute; right:0px; top:1px}

.inputxt_normal.only input{width:25px !important; font-size:0 !important;}
.inputxt_normal.only.dateinput .ui-datepicker-trigger{border-left:1px solid #d6d6d6; background:#fff;position:relative}

.autocomplete_normal{display:inline-block; position:relative; min-height:24px; border:1px solid #d6d6d6; vertical-align:middle; border-radius:0;}
.autocomplete_normal.spider{display:block; margin-right:0;}


/* select */

.select_normal select {width:100%; height:30px; margin:0; padding:0; line-height:28px; color:#303030; padding-left:10px;  
    font-size:0.8125rem; -webkit-appearance:none; -moz-appearance:none; border:0; cursor:pointer; border-radius:0;
     background:#fff url('../image/common/select_normal.png') right 50% no-repeat; background-size:26px 34px; border:1px solid var(--gray-base); border-radius: 3px; padding-right: 35px;}

.select_normal select[disabled]{background:#eeeeee url('../image/common/select_normal.png') right 50% no-repeat; background-size:26px 34px;}
.select_normal select[readonly]{background:#f9f9f9 url('../image/common/select_normal.png') right 50% no-repeat; background-size:26px 34px;}
.select_normal option {line-height:24px; font-size:13px}
.select_normal select::-ms-expand {display:none}
@-moz-document url-prefix(){}



.ui-datepicker-year, .ui-datepicker-month{height:22px; line-height:22px; color:#fff; padding:0; padding-left:10px; font-size:13px; -webkit-appearance:none; -moz-appearance:none; border:0; margin:0; cursor:pointer; border-radius:0;  background:#515b75 url('../image/common/select_date.png') right 50% no-repeat; background-size:31px 34px}
.ui-datepicker-year option, .ui-datepicker-month option {line-height:25px; font-size:13px; color:#303030; background:#fff;}
.ui-datepicker-year::-ms-expand, .ui-datepicker-month::-ms-expand{display:none;}
@-moz-document url-prefix(){}



.tlb_op {display:flex;align-items: center;   justify-content: flex-end; position:relative; gap: 0.625rem; height: 35px; }
.tlb_op .count {font-size: 0.8125rem; color:var(--black); position:absolute; left:0; top:10px}
.tlb_op .searchbox {width:280px}
.tlb_op .array {}


/*테이블검색창*/
.search_sub{ position:relative; height:65px; }
.search_sub:after{content:''; display:block; clear:both;}
.boardsearch{position:absolute;right: 55px;margin-top: 17px;}
.boardsearch .select_box{position:absolute;top:0;left:0;min-width:140px}
.boardsearch .select_box select{ width:120px;}
.boardsearch .text_search{width:200px;height:30px;font-size:0.875rem;line-height:1.428em;color:var(--black);text-indent:5px; margin-left:12px;}
.s_sbtn{position:absolute;top:0px;right:-50px;width:55px;height:30px;font-size:0.875rem;   padding:0px 0;background:var(--black);line-height:0; border:0; color:#fff !important;
     line-height:32px; text-align:center; border-radius: 3px;}


/* CSS */

.product-cardBox {display: flex; gap: 1.25rem;justify-content: space-between;flex-wrap: wrap}
.product-card {position:relative; flex: 0 0 48%;  border-radius: 8px; box-shadow:var(--box-shadow-base); overflow: hidden; border:1px solid var(--gray-base); 
    min-height: 150px;max-height: 150px;
display: flex;flex-direction: column;}
.product-card > * {
    overflow: hidden;
    flex-shrink: 1;
  }
  
.product-card .badge {background: linear-gradient(135deg, #5CF1A4, #7F46D3);color: var(--white);padding: 0.2.5rem 1.25rem;font-size: 0.8125rem;border-top-left-radius: 8px;border-bottom-right-radius: 8px;
    position:absolute; top:0; left:0;}
.product-card .info {display: flex;flex: 1;justify-content: space-between;align-items: center;padding:0 6rem;}
.product-card .info .pps {color: #f47b20; font-size: 1.25rem;font-weight: 600;}
  
.product-card .info .price {text-align: center;color: #333;font-size: 1.25rem;}
.product-card .info .price .pv {font-size: 0.875rem;color: #888; margin-left: 15px;}
.product-card .info .qty {display: flex;align-items: center;gap: 0.3rem; border: 1px solid var(--gray-base);}
.product-card .info .qty button { width: 24px;height: 24px;border: 1px solid #fff;font-size: 0.875rem;cursor: pointer;}
  
.product-card  .qty span {min-width: 20px;text-align: center; font-size: 0.875rem;}
.product-card  .btn-area{margin-top: auto;}
.product-card  .buy-btn {width: 100%;background: var(--primary-color);color: var(--white);padding: 0.625rem;border: none;font-size: 1.0rem;cursor: pointer;}
  
.tab_group > p {float: left; margin-right: 0.625rem;}
.tab_group ul{display: flex; gap: 0.625rem;}
.tab_group ul .on button{background: var(--gray-60); color:var(--white)}
.tab_con { position:relative; }
.tab_con>div { display:none; }

/* 링크복사추천 */
.link-copy ul{display: flex; height: auto;}
.link-copy ul li:first-child{flex: 1; text-align: center;font-weight: 600;}
.link-text {display: flex;flex-direction: column;justify-content: center; }
.sns {display: flex; flex-direction: column;justify-content: center; text-align: center; margin-top:1.25rem ; border-top:1px solid #ddd; padding-top:1.25rem; }
.sns dl {display:flex; width:100%; text-align: center; gap: 0.625rem;justify-content: center; }
.sns dl dt {font-weight: 600; line-height: 2.5rem;}
.sns dl dd {text-align: left;}
.sns dl dd img{width:2.18rem; height: 2.18rem; margin:0 0.5rem;}
.link_title { font-size:1.0rem; }

.my_pointList {position:relative}
.my_pointList ul { display: flex;flex-wrap: wrap; gap: 0.9375rem;}
.my_pointList ul li {width: calc((100% - 3rem) / 3); border-radius: var(--radi-15);border: 1px solid var(--gray-base);padding: 1.25rem; box-shadow: var(--box-shadow-base); position:relative}
.my_pointList ul li > span {position:absolute; left:15px; top:15px; color:var(--white); background: var(--primary-color); width: 1.5625rem; height: 1.5625rem; text-align: center; border-radius: var(--radi-30);}
.my_pointList ul li > dl {margin-top: 30px;}
.my_pointList ul li > dl > dt{font-weight: bold; color:var(--black)}
.my_pointList ul li > dl > dd {font-size: 1.5625rem; font-weight: bold; color:var(--accent-color); margin-top: 15px; text-align: right;}

.walletBox {border: 1px solid var(--gray-base); box-shadow: var(--box-shadow-base); width:620px; margin:0 auto; border-radius: var(--radi-15); padding: 1.25rem;}
.walletBox > h3 {color:var(--black); font-size: 1.25rem; font-weight: bold; text-align: center; margin-bottom: 20px;}





@media all and (max-width:1280px){

.tb30_, .tb50_ {width:100%;}

.search_form > ul > li.col2 > dl {width:100%; margin-bottom: 8px;}
.search_form > ul > li > dl:before {display: none;}
.search_form > .btn_search {position:relative; margin: 5px 0; text-align: center; left:0; }
.product-cardBox {    flex-direction: column;}
.product-card {width:100%; }

.wirte tbody th{border-right:0; background: #f3f5f9; padding: 0.625rem 1.25rem; text-align: left;}
.wirte tbody th, .wirte tbody td {display: block; width:100%}

.form-control_100{width:30%}
.form-control_200{width:30%}

}

@media all and (max-width:768px){

    .tlb_op {height: auto; display: block;}
    .array{position:relative;  }
    .tlb_op .count {position: relative; width:100%; margin-bottom: 15px;}
    .tlb_op .searchbox {width:100%}
    .boardsearch .text_search {width:100%; margin-left: 0;}
    .boardsearch {position:relative; right:0}
    .s_sbtn{right:0}
    .search_sub {height: auto;}

    .flexArea {flex-direction: column; }

  
    .detail_T_SCl { position: relative;
        overflow-x: auto;}
    .detail_T_SCl table {min-width: 768px;}
   
}


@media all and (max-width:640px){
    .product-card {min-height: auto; max-height: none}
    .product-card .info {flex-direction: column;  gap: 0.625rem;   padding: 1.25rem 1.25rem;}
    .walletBox  {width:100%}



}