:root {
  --bg-color: #F8F8F8;
  --leftbg-color: #3E3E40;
  --primary-gradi:linear-gradient(70deg, #0DCC97, #0495E7);
  --white: #fff;
  --black:#000;
  --primary-color:#0495E7;
  --secondary-color:#0DCC97;
  --accent-color:#e74c3c;
  --gray-base:#ddd;
  /*
  --box-shadow-base: 0 4px 4px rgba(0, 0, 0, 0.1);
  */
  --gray-80:#222222;
  --gray-60:#585858;
  --gray-40:#939393;
  --gray-20:#C9C9C9;
  --gray-10:#eeeeee;
  --gray-5:#f2f2f2;
  --radi-30: 30px;
  --radi-15: 15px;
  --link-color:var(--gray-60);
  --focus-color: var(--primary-color): ;
}

select {
  height: 30px;
  line-height: 30px;
  border: 1px solid var(--gray-base);
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: url("/_templates/shop_skin/__normalshop/Reaction/web_skin_01/_image/sub/select_arrow.png") right 50% no-repeat #fff;
  padding: 0px 35px 0px 5px;
  color: var(--black);
  font-size: 0.875rem;
  background-size: 31px 31px;
  border-radius: 3px;
}

select::-ms-expand {
  display: none;
}

input[type=text],
input[type=date],
input[type=password] {
  border: 1px solid #d6d6d6;
  padding-left: 8px;
  border-radius: 3px;
}

input[type=text],
input[type=date] {
  height: 30px;
}
input[type=text]:focus,
input[type=date]:focus {
  border-color: #151a59;
  outline: 0;
  box-shadow: none;
}

input[type=password] {
  height: 30px;
}

input[type=checkbox],
input[type=radio] {
  margin-top: -1px;
  width: 15px;
  height: 15px;
}

input[type=submit] {
  cursor: pointer;
  border: 0;
}

input[type=file] {
  height: 24px;
  line-height: 24px;
  padding: 0;
  background: #fff;
}

textarea {
  border: 1px solid var(--gray-base);
  width: 100%;
  min-height: 100px;
  font-size: 0.875rem;
  padding: 0.625rem;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: normal;
}

fieldset, img, abbr, acronym {
  border: 0;
}

table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  word-break: break-all;
}
table th, table td {
  vertical-align: middle;
  text-align: left;
  font-weight: normal;
}

fieldset {
  margin: 0;
  padding: 0;
  border: 0;
}

legend,
caption,
.skip,
.sr_only,
.hidden,
.blind,
.IR {
  position: absolute;
  overflow: hidden;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  clip: rect(0, 0, 0, 0);
}

i {
  vertical-align: middle;
}

button:hover {
  cursor: pointer;
}

address,
caption,
em,
cite {
  font-weight: normal;
  font-style: normal;
}

ins {
  text-decoration: none;
}

del {
  text-decoration: line-through;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: "";
}

blockquote,
q {
  quotes: "" "";
}

hr {
  display: none;
}



.helv {
  font-family: 돋움, HelveticaNeue;
}

.verd {
  font-family: verdana, 돋움;
}

.bold {
  font-weight: bold !important;
}

*:focus {
  outline-color: #151a59;
}

.btn_check {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  min-width: 22px;
  min-height: 22px;
}
.btn_check input[type=checkbox] {
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
  width: 22px;
  height: 22px;
}
.btn_check input[type=checkbox]:checked + .hero {
  background-position: -48px 0;
}
.btn_check input[type=checkbox]:hover + .hero {
  background-position: -24px 0;
}
.btn_check input[type=checkbox]:checked:hover + .hero {
  background-position: -48px 0;
}
.btn_check input[type=checkbox][disabled] + .hero, .btn_check input[type=checkbox][readonly] + .hero {
  background-position: -72px 0;
}
.btn_check input[type=checkbox][disabled]:hover + .hero, .btn_check input[type=checkbox][readonly]:hover + .hero {
  background-position: -72px 0;
}
.btn_check input[type=checkbox][disabled]:checked + .hero, .btn_check input[type=checkbox][readonly]:checked + .hero {
  background-position: -96px 0;
}
.btn_check input[type=checkbox][disabled]:checked:hover + .hero, .btn_check input[type=checkbox][readonly]:checked:hover + .hero {
  background-position: -96px 0;
}
.btn_check .hero {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 22px;
  height: 22px;
  background-image: url("../_image/common/ch_raBG.png");
  background-size: 240px 24px;
  background-position: 0 0;
  cursor: pointer;
  margin-left: 0 !important;
}
.btn_check strong {
  padding-left: 30px;
  vertical-align: middle;
  line-height: 23px;
  color: var(--black);
  letter-spacing: -0.2px;
  font-weight: normal;
  cursor: pointer;
  font-size: 0.875rem;
}

.btn_radio {
  position: relative;
  display: inline-block;
  min-width: 22px;
  min-height: 22px;
  vertical-align: middle;
}
.btn_radio input[type=radio] {
  position: absolute;
  top: 0;
  left: 0;
  width: 22px;
  height: 22px;
  margin: 0;
}
.btn_radio input[type=radio]:checked + .hero {
  background-position: -168px 0;
}
.btn_radio input[type=radio]:hover + .hero {
  background-position: -144px 0;
}
.btn_radio input[type=radio]:checked:hover + .hero {
  background-position: -168px 0;
}
.btn_radio input[type=radio][disabled] + .hero {
  background-position: -192px 0;
}
.btn_radio input[type=radio][disabled]:hover + .hero {
  background-position: -192px 0;
}
.btn_radio input[type=radio][disabled]:checked + .hero {
  background-position: -216px 0;
}
.btn_radio input[type=radio][disabled]:checked:hover + .hero {
  background-position: -216px 0;
}
.btn_radio input[type=radio][readonly] + .hero {
  background-position: -192px 0;
}
.btn_radio input[type=radio][readonly]:hover + .hero {
  background-position: -192px 0;
}
.btn_radio input[type=radio][readonly]:checked + .hero {
  background-position: -216px 0;
}
.btn_radio input[type=radio][readonly]:checked:hover + .hero {
  background-position: -216px 0;
}
.btn_radio .hero {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 22px;
  height: 22px;
  background-image: url("../_image/common/ch_raBG.png");
  background-size: 240px 24px;
  background-position: -120px 0;
  cursor: pointer;
  margin-left: 0 !important;
}
.btn_radio strong {
  padding-left: 30px;
  display: block;
  line-height: 21px;
  color: #000;
  letter-spacing: -0.2px;
  font-weight: normal;
  cursor: pointer;
}

.m_t5 {
  margin-top: 5px;
}

.m_t10 {
  margin-top: 10px;
}

.m_t20 {
  margin-top: 20px;
}
.m_t15 {
  margin-top: 15px;
}

.m_t30 {
  margin-top: 30px;
}

.m_r5 {
  margin-right: 5px;
}

.m_r10 {
  margin-right: 10px;
}

.m_r15 {
  margin-right: 15px;
}

.m_l5 {
  margin-left: 5px;
}

.m_l10 {
  margin-left: 10px;
}

.m_l15 {
  margin-left: 15px;
}

.m_b5 {
  margin-bottom: 5px;
}

.m_b10 {
  margin-bottom: 10px;
}

.m_b15 {
  margin-bottom: 15px;
}

.m_b30 {
  margin-bottom: 30px;
}

.f_c_b {
  color: var(--primary-color) !important;
}

.f_c_o {
  color: var(--accent-color) !important;
}

.sub_title {
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.4;
  color: var(--black);
  margin: 0.9375rem 0rem;
}

.sub-title2 {
  display: inline-block;
  position: relative;
  line-height: 150%;
  font-size: 1.0rem;
  color: var(--black);
  font-weight: 500;
  letter-spacing: -0.5px;
  border-bottom: 1px solid var(--gray-base);
  width: 100%;
  padding: 0.625rem 0.625rem 0.625rem 3.5rem;
}
.sub-title2::before {
  content: "";
  display: block;
  position: absolute;
  left: 1.25rem;
  top: 50%;
  width: 10px;
  height: 10px;
  background: rgba(4, 15, 231, 0.53);
  border-radius: 50%;
  margin-top: -5px;
  z-index: 0;
}
.sub-title2::after {
  content: "";
  display: block;
  position: absolute;
  left: 0.9375rem;
  top: 50%;
  width: 10px;
  height: 10px;
  background: rgba(4, 149, 231, 0.33);
  border-radius: 50%;
  margin-top: -5px;
  z-index: 1;
}

.cont_box {
  box-shadow: var(--box-shadow-base);
  background: var(--white);
  width: 100%;
  margin: 0.9375rem 0;
}
.cont_box.maincont {
  border-radius: 0.625rem;
}

.line-box {
  background: var(--white);
  margin: 0.9375rem 0;
  border: 1px solid var(--gray-base);
  border-radius: 5px;
  padding: 0.625rem 3rem;
  position: relative;
  display: inline-block;
  color: var(--black);
  margin-right: 20px;
}
.line-box::before {
  position: absolute;
  content: "";
  background: var(--primary-color);
  left: 0;
  top: 10%;
  height: 80%;
  width: 3px;
}

.guide-txt {
  color: var(--accent-color);
  font-weight: 400;
  font-size: 0.8125rem;
}
.guide-txt i {
  vertical-align: middle;
  margin-bottom: 1px;
}

.guide_txt2 {
  color: var(--primary-color);
  font-size: 0.75rem;
  margin: 3px 0;
}
.guide_txt2 i {
  vertical-align: middle;
  margin-bottom: 1px;
}

.guide-blbox {
  background: #F6FDFF;
  border-radius: 5px;
  border: 1px solid #B3DBE6;
  color: var(--primary-color);
  font-size: 0.8125rem;
  padding: 1.25rem;
}
.guide-blbox li.star {
  background: var(--white);
  border-radius: 5px;
  padding: 0.5rem 0.625rem;
  display: inline-block;
  color: var(--gray-60);
  border: 2px solid var(--gray-20);
  margin-top: 10px;
}
.guide-blbox li.star span {
  margin-left: 15px;
  color: var(--black);
}

.guide-half-box {
  position: relative;
  border-radius: 5px;
  border: 1px solid var(--gray-base);
  color: var(--black);
  font-size: 0.8125rem;
  padding: 1.25rem;
  width: auto;
}
.guide-half-box::after {
  position: absolute;
  left: 0;
  top: 0;
  width: 2px;
  height: 100%;
  background: var(--primary-color);
  content: "";
}
/*
.guide-half-box:nth-child(2)::after {
  background: #E7B604;
}
*/

.btn_area,
.btn_defult {
  padding: 0 0.9375rem;
  height: 2.38rem;
  line-height: 2.25rem;
  cursor: pointer;
  font-size: 0.9375rem;
  border-radius: 8px;
}
.btn_area > a:hover,
.btn_defult > a:hover {
  text-decoration: none;
}
.btn_area i,
.btn_defult i {
  margin-bottom: 4px;
}

.btn_area_s,
.btn_defult_s {
  padding: 0 0.75rem;
  height: 3.1.25rem;
  line-height: 3rem;
  cursor: pointer;
  font-size: 0.8125rem;
  border-radius: 8px;
}
.btn_area_s > a:hover,
.btn_defult_s > a:hover {
  text-decoration: none;
}
.btn_area_s i,
.btn_defult_s i {
  margin-bottom: 4px;
}

.btn_midium {
  padding: 0 0.75rem;
  height: 3.5rem;
  line-height: 3rem;
  cursor: pointer;
  font-size: 0.8125rem;
  border-radius: 8px;
}
.btn_midium > a:hover {
  text-decoration: none;
}
.btn_midium i {
  margin-bottom: 4px;
}

.btn {
  padding: 0 0 30px 0;
}
.btn.centerarea {
  text-align: center;
}
.btn.rightarea {
  text-align: right;
}

.btn_small {
  font-weight: normal;
  font-size: 0.75rem;
  padding: 0.4rem 0.625rem;
  border-radius: 3px;
}

.btn_01 {
  background: var(--primary-color);
  border: 1px solid var(--primary-color);
  color: #fff;
  transition: all 0.3s ease;
}
.btn_01:hover {
  background: var(--white);
  border-color: var(--primary-color);
  color: var(--primary-color);
}

.btn_01_line {
  background: var(--white);
  border: 1px solid var(--primary-color);
  color: var(--primary-color);
  transition: all 0.3s ease;
}
.btn_01_line:hover {
  background: var(--primary-color);
  border-color: var(--primary-color);
  color: var(--white);
}
.btn_01_line.select {
  background: var(--primary-color);
  border-color: var(--primary-color);
  color: var(--white);
}

.btn_02 {
  background: var(--white);
  border: 1px solid #dddddd;
  color: var(--black);
  transition: all 0.3s ease;
}
.btn_02:hover {
  background: var(--gray-60);
  color: var(--white);
}

.btn_03 {
  background: var(--gray-80);
  border: 1px solid #dddddd;
  color: var(--white);
  transition: all 0.3s ease;
}
.btn_03:hover {
  background: var(--white);
  color: var(--gray-60);
}

.wh_btn {
  border: 1px solid #b3c9de;
  color: var(--primary-color) !important;
  padding: 5px 15px;
  background: #fff;
  box-shadow: 2px 2px #d6e2ef;
  border-radius: 3px;
  font-size: 0.8125rem;
  display: inline-block;
  cursor: pointer;
}
@media all and (max-width: 1280px) {
  .wh_btn {
    margin-top: 5px;
  }
}

/*# sourceMappingURL=style.css.map */













.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  0.3rem;}
.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}
.tbl03 input[type="text"],
.tbl03 input[type="password"],
.tbl03 input[type="number"] { border:1px solid #ddd; line-height:1.6rem; padding:0 0.3rem ; border-radius:2px; }
.tbl03 select { line-height:20px; padding:0 0.5rem; }


/* 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%; }


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

}

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

.wirte tbody th, .wirte tbody td {display: block; width:100%; padding:0; }
.wirte tbody th{border-right:0;padding: 0.625rem 0 0.3rem 0; text-align: left;}
    .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;}

.w70_w {width:100% ;}
   
}


@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%}



}



.title { font-size:1rem; color:#222; margin-top:2rem; }
.title:first-child { margin-top:0; }

/* 약관 동의 */

.memt_con_yak { margin:10px auto 20px; }
.memt_con_yak .terms { margin:10px auto 20px; }
.memt_con_yak .subject { display:flex; align-items:center; padding:0.5rem 0; font-size:1rem; }
.memt_con_yak .subject input[type="checkbox"] { margin-right:0.6rem; height:1rem; width:1rem; accent-color: var(--main-color); }
.memt_con_yak .subject label { cursor:pointer; font-size:1rem; color:#222 }
.memt_con_yak .subject label span { color:#222; font-size:1rem }
.memt_con_yak .contents { height:210px; overflow-y:auto; padding:0; border:1px solid #ccc; font-size:1rem; padding:10px; color:#222; max-width:100% }
.memt_con_yak .contents * { font-size:0.9rem !important }
.memt_con_yak .subject.all { border-top:1px solid #ddd; border-bottom:1px solid #ccc; padding:15px 0; }
.center_btn_area { text-align:center; margin:50px auto 0; }
.btn_style_1 { background: var(--main-color); border:none; color:#fff;  padding: 10px 30px;  text-align: center; font-size:1.2rem; white-space:nowrap; cursor: pointer; }
.btn_style_1:hover { color:#fff; }



/* 번역기 */
.login_select_lang { margin:1.7rem auto 0 ; background:#fff; padding-top:10px; }
.login_select_lang ul { display:flex; justify-content:center; justify-content: center;}
.login_select_lang ul li { margin:0 3px; }
.login_select_lang ul li a {display:block;background-repeat:no-repeat;width:30px; border:1px solid #ccc;}
.login_select_lang ul li a img{vertical-align:top; max-width:100%}