@charset "utf-8";
/* sub */
/*20220401 류미정 작업가이드메인*/
.hc_guidewrap {
  font-size: 14px;
  color: #646464;
}
.hc_container {
  background: #4e66dd;
  color: #fff;
  text-align: center;
  padding: 50px 0 42px 0;
}
.hc_container .guide-center-name {
  font-family: "Noto Sans KR", sans-serif;
  font-size: 32px;
  padding: 0 0 15px 0;
}
.hc_container .guide-center-details {
  color: #c5cbf2;
}
.hc_list {
  clear: both;
  margin: 50px 0 0 0;
}
.hc_list > ul {
  box-sizing: border-box;
  float: left;
  width: 20%;
  text-align: center;
}
.hc_list > ul:nth-child(1) {
  background: url("/img/hc_b1.png") no-repeat center top;
}
.hc_list > ul:nth-child(2) {
  background: url("/img/hc_b2.png") no-repeat center top;
}
.hc_list > ul:nth-child(3) {
  background: url("/img/hc_b3.png") no-repeat center top;
}
.hc_list > ul:nth-child(4) {
  background: url("/img/hc_b4.png") no-repeat center top;
}
.hc_list > ul:nth-child(5) {
  background: url("/img/hc_b5.png") no-repeat center top;
}
.hc_list > ul:nth-child(1):hover {
  background: url("/img/hc_b1_.png") no-repeat center top #f5f5f6;
}
.hc_list > ul:nth-child(2):hover {
  background: url("/img/hc_b2_.png") no-repeat center top #f5f5f6;
}
.hc_list > ul:nth-child(3):hover {
  background: url("/img/hc_b3_.png") no-repeat center top #f5f5f6;
}
.hc_list > ul:nth-child(4):hover {
  background: url("/img/hc_b4_.png") no-repeat center top #f5f5f6;
}
.hc_list > ul:nth-child(5):hover {
  background: url("/img/hc_b5_.png") no-repeat center top #f5f5f6;
}

.hc_list > ul {
  border-right: 1px solid #eeeeee;
  box-sizing: border-box;
}
.hc_list > ul:last-child {
  border: none;
}
.hc_list > ul > li > h1 {
  color: #000;
  font-size: 20px;
  font-weight: 600;
  border-bottom: 1px solid #333;
  padding: 80px 0 12px 0;
  margin: 0 20px 20px 20px;
}
.hc_list > ul > li {
  min-height: 900px;
  line-height: 2.5;
  font-weight: 420;
}
.hc_list > ul > li > ul > li > a {
  color: #7d7d7d;
  transition: 0.2s;
  display: inline-block;
  width: 83%;
  border-radius: 4px;
}
.hc_list > ul > li > ul > li > a:hover {
  background: #4e66dd;
  color: #fff;
}
.hc_list h1 {
  font-family: "Noto Sans KR", sans-serif;
}

/*20230126 류미정 디지털용지 table*/
.paperguide_new {
  width: 92%;
  font-size: 13px;
  border: 1px solid #cfcfcf;
  margin: 4%;
  box-sizing: border-box;
}
.paperguide_new td {
  padding: 2px 0;
  text-align: left;
  padding: 4px;
  border-bottom: 1px solid #cfcfcf;
}
.paperguide_new th {
  background: #daefff;
  padding: 10px;
  border-bottom: 1px solid #cfcfcf;
  text-align: center;
  color: #175280;
}
.paperguide_new tr:nth-child(2n) {
  background: #f4fafe;
}
.paperguide_new tr:hover {
  background: #c9e7fe;
  font-weight: 500;
}

/*20230126 류미정 인기상품 */
.new_subcate {
  margin: 50px 0 0 0;
}
.new_subcate h2 {
  font-size: 16px;
  padding: 0 0 10px 0;
  color: #555;
}
.new_subcate ul li {
  float: left;
}
.new_subcate ul li {
  padding: 0 14px 0 0;
}
.new_subcate ul li:nth-child(6) {
  padding: 0 0 0 0;
}
.new_subcate ul li p {
  color: #555;
  font-weight: 800;
  text-align: center;
  padding: 10px 0 0 0;
}
.new_subcate ul li a {
}
.new_subcate ul li:hover {
  opacity: 0.8;
}

.contents.member h2 {
  font-size: 40px;
  font-weight: bold;
  letter-spacing: -0.025em;
  line-height: 50px;
  color: #2f2f2f;
  padding-bottom: 17px;
  border-bottom: 1px solid #dde7e9;
}
/* 24-05-08수정 */
.contents {
  padding: 20px 0px 100px;
  width: 1200px;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
}
.contents.member {
  padding: 50px 20px 100px;
  width: 1200px;
}
.contents.orderf {
  padding: 50px 20px 100px;
  width: 1200px;
}
.contents.orderf h2 {
  font-size: 26px;
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 40px;
  color: #2f2f2f;
}
.contents .h2-txt,
.contents .h2-txt a {
  font-size: 14px;
  color: #888888;
  letter-spacing: -0.025em;
  line-height: 17px;
  font-weight: normal;
  margin: 8px 0px;
}
.contents .h2-txt2 {
  font-size: 14px;
  color: #888888;
  letter-spacing: -0.025em;
  line-height: 30px;
}
.contents.order {
  padding: 40px 0px 100px !important;
}
.contents .h2-order {
  position: relative;
  line-height: 1;
  font-size: 24px;
  font-weight: 700;
  color: #000;
  padding-bottom: 12px;
  box-sizing: border-box;
  padding: 0 0 20px;
}

.contents .form-bx:has(.h2-order + .form-tbl) .h2-order{
  border-bottom: 1px solid #bfbfbf;
}

.content2 .h2-order {
  position: relative;
  line-height: 1;
  font-size: 20px;
  font-weight: 700;
  color: #333;
  padding-bottom: 12px;
  box-sizing: border-box;
  border-bottom: none;
}

/* 우측 레이아웃 스타일 시작 */
.sub_title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom:7px;
}

.sub_title a {
  margin: 0;
  border: 1px solid #000;
  padding: 5px 10px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
  line-height: 150%;
}

.sub_title a::after {
  content: '';
  width: 5px;
  height: 8px;
  background: url(/img/sub/ico-arr.svg) no-repeat center;
  display: inline-block;
}

.sub_title h2.h2-order{
  border:0;
  padding-bottom:0;
  line-height:120%;
}

.sub_title + p {
  font-size: 17px;
  color: #555;
  padding-bottom: 22px;
  border-bottom: 1px solid #bfbfbf;
}

.form-bx:has(.sub_title + .form-tbl) .sub_title {
  padding-bottom: 22px;
  border-bottom: 1px solid #bfbfbf;
}

.form-bx:has(.sub_title + p) .sub_title {
  padding-bottom: 0 !important;
  border-bottom: 0 !important;
}


/* location */

.location {
  position: relative;
  display: flex;
  justify-content: flex-end;
  padding-bottom: 15px;
  box-sizing: border-box;
}

.location > div {
  position: relative;
  display: flex;
  justify-content: flex-start;
}

.location > div > div a {
  position: relative;
  display: inline-block;
  font-size: 14px;
  font-weight: 500;
  color: #555;
}

.location > div > div {
  position: relative;
}

.location > div > div:after {
  position: relative;
  top: 1px;
  content: "";
  display: inline-block;
  width: 13px;
  height: 11px;
  background: url("/images/newMain/icon_location_arrow.png") center center
    no-repeat;
  margin: 0 8px 0 6px;
}

.location > div > div:last-child:after {
  content: none;
}

.location > div a.navi {
}
.location > div a.navi.active {
  color: #0f68ed;
}
.location > div a.navi > span {
  position: relative;
  top: -3px;
  background: url("/images/newMain/navi-open.png") center center no-repeat;
  display: inline-block;
  width: 8px;
  height: 4px;
  font-size: 0;
  text-indent: -1000;
  overflow: hidden;
  margin-left: 5px;
  transition: all 0.2s;
}
.location > div a.navi.active > span {
  transform: rotate(180deg);
}
.location .navimenu {
  display: none;
  position: absolute;
  width: 122px;
  right: 0px;
  margin-top: 10px;
  padding: 10px;
  z-index: 9;
  background: url(/img/sub/navi-bg.png);
  border: 1px solid #ccc;
}
.location .navimenu a {
  font-size: 13px;
  line-height: 23px;
  color: #555555;
  letter-spacing: -0.025em;
}
.location .navimenu a:hover,
.location .navimenu a.active {
  font-weight: 500;
  color: #295ba0;
}

#scroll {
  overflow-x: hidden;
  overflow-y: auto;
}
.textarea {
  padding: 20px;
  height: 454px;
  border: 1px solid #ccc;
}
.textarea h3 {
  font-size: 14px;
  color: #2f2f2f;
  letter-spacing: -0.025em;
  line-height: 17px;
}
.textarea h4 {
  font-size: 14px;
  color: #2f2f2f;
  letter-spacing: -0.025em;
  line-height: 17px;
  margin-top: 20px;
}
.textarea p {
  margin-top: 20px;
  font-size: 12px;
  color: #888888;
  letter-spacing: -0.025em;
  line-height: 17px;
  font-weight: 500;
}
.textarea > ul {
  margin-top: 20px;
}
.textarea > ul > li {
  font-size: 12px;
  color: #888888;
  letter-spacing: -0.025em;
  line-height: 17px;
  font-weight: 500;
}

.login-bx {
  border: 1px solid #ccc;
  height: 337px;
  position: relative;
}
.login-bx h3,
.member-bx h3 {
  text-align: center;
  font-weight: normal;
  font-size: 34px;
  line-height: 50px;
  color: #888888;
  margin-top: 60px;
}
.login-bx h3 span,
.member-bx h3 span {
  color: #295ba0;
}
.member-bx h3 p.h3-txt {
  font-size: 14px;
  color: #555555;
  line-height: 20px;
  margin-top: 5px;
}

.login-bx input[type="text"],
.login-bx input[type="password"] {
  z-index: 9;
  width: 363px;
  padding-left: 75px;
  height: 47px;
  line-height: 47px;
  border: 1px solid #ccc;
  position: absolute;
  left: 309px;
  font-size: 14px;
  color: #888;
  letter-spacing: -0.025em;
}
.login-bx input[type="text"] {
  top: 150px;
}
.login-bx-captcha input[type="text"] {
  top: 0px;
  left: -110px;
}
.login-bx input[type="password"] {
  top: 198px;
}
.login-bx .mid {
  background: url(/img/sub/login-id.png) no-repeat;
  width: 22px;
  height: 21px;
  display: inline-block;
  text-indent: -9999px;
  position: absolute;
  top: 163px;
  left: 322px;
  z-index: 99;
}
.login-bx .mpw {
  background: url(/img/sub/login-pw.png) no-repeat;
  width: 19px;
  height: 21px;
  display: inline-block;
  text-indent: -9999px;
  position: absolute;
  top: 211px;
  left: 322px;
  z-index: 99;
}
.login-bx .btn_submit {
  text-align: center;
  color: #fff;
  width: 100px;
  height: 97px;
  border: none;
  background: #4da7ef;
  font-size: 16px;
  font-weight: bold;
  position: absolute;
  left: 749px;
  top: 150px;
}
.login-bx .member-btn {
  position: absolute;
  left: 309px;
  top: 259px;
}
.login-bx input[type="checkbox"] {
  border: 1px solid #ccc;
  width: 20px;
  height: 20px;
  background: #fff;
  margin-right: 5px;
  vertical-align: top;
}
.login-bx .member-btn label {
  font-size: 14px;
  color: #888888;
  letter-spacing: -0.025em;
  line-height: 22px;
  vertical-align: top;
}
.login-bx .member-btn a {
  font-size: 14px;
  color: #295ba0;
  margin-left: 20px;
  letter-spacing: -0.025em;
  line-height: 20px;
}
.nomem {
  position: relative;
  margin-top: 15px;
}
.nomem strong {
  font-size: 16px;
  letter-spacing: -0.025em;
  color: #2f2f2f;
  margin-left: 309px;
  line-height: 20px;
}
.nomem p {
  font-size: 14px;
  color: #555;
  margin-left: 309px;
  margin-top: 5px;
  left: 25px;
}
.nomem a {
  position: absolute;
  left: 749px;
  top: 0px;
  text-align: center;
  width: 100px;
  height: 45px;
  background: #83b14e;
  font-size: 16px;
  font-weight: bold;
  letter-spacing: -0.025em;
  line-height: 45px;
  color: #fff;
}

.mb-banner {
  margin-top: 40px;
}
.mb-banner > ul {
  overflow: hidden;
}
.mb-banner > ul > li {
  float: left;
  margin-left: 10px;
}
.mb-banner > ul > li:first-child {
  margin-left: 0px;
}

.login-bx #email {
  left: 358px !important;
}
/*.login-bx #captcha2 {top:198px; left:358px !important; }*/
/*.login-bx #captcha { top:198px; left:797px; width:162px; padding-left:0px; text-align: center; font-size:30px; background:#fffddc; font-family: "Bodoni MT"; color:#2f2f2f;}*/
.login-bx .memail {
  background: url(/img/sub/login-main.png) no-repeat;
  width: 20px;
  height: 21px;
  display: inline-block;
  text-indent: -9999px;
  position: absolute;
  top: 163px;
  left: 371px;
  z-index: 99;
}
/*.login-bx .mcaptcha {background:url(/img/sub/login-pw.png) no-repeat; width:19px; height:21px; display: inline-block; text-indent:-9999px; position:absolute; top:211px; left:371px; z-index:99;}*/
.member-tx {
  position: absolute;
  left: 358px;
  top: 279px;
  font-size: 14px;
  letter-spacing: -0.025em;
  color: #888;
}
.member-tx span {
  font-weight: 500;
  color: #555;
}
.nomem2 {
  text-align: center;
}
.nomem2 a {
  width: 200px;
  height: 60px;
  line-height: 60px;
  color: #fff;
  font-size: 20px;
  font-weight: bold;
  background: #4da7ef;
  display: inline-block;
  margin-top: 30px;
}
.nomem2 img {
  position: absolute;
  left: 797px;
  top: 198px;
  width: 100px;
  height: 50px;
}

.mb01-bx {
  border: 1px solid #ccc;
  margin-top: 35px;
  background: #f5f7fa;
}
.mb01-bx > ul {
  overflow: hidden;
}
.mb01-bx > ul > li {
  float: left;
  width: 578px;
  height: 265px;
  background: url(/img/sub/mb01-ico2.png) no-repeat 70px center;
  border-left: 1px solid #ccc;
}
.mb01-bx > ul > li:first-child {
  width: 579px;
  background: url(/img/sub/mb01-ico1.png) no-repeat 70px center;
  border-left: none;
}
.mb01-bx > ul > li > strong {
  margin-left: 212px;
  margin-top: 60px;
  line-height: 40px;
  font-size: 30px;
  font-weight: 500;
  color: #2f2f2f;
  display: inline-block;
}
.mb01-bx > ul > li > p {
  margin-left: 212px;
  font-size: 14px;
  color: #555;
  line-height: 20px;
}
.mb01-bx > ul > li > p > a {
  width: 200px;
  height: 60px;
  line-height: 60px;
  color: #fff;
  background: #83b14e;
  font-size: 20px;
  font-weight: 500;
  display: inline-block;
  text-align: center;
}
.mb01-bx > ul > li:first-child > p > a {
  background: #4da7ef;
}

.join-tab {
  margin-top: 60px;
}
.join-tab > ul {
  overflow: hidden;
}
.join-tab > ul > li {
  float: left;
  border-top: 1px solid #ccc;
  border-bottom: 2px solid #2f2f2f;
  width: 385px;
  text-align: center;
}
.join-tab > ul > li.active {
  border: 2px solid #2f2f2f;
  border-bottom: 2px solid #fff;
  width: 425px;
}
.join-tab > ul > li > a {
  border-right: 1px solid #ccc;
  line-height: 57px;
  background: #f5f7fa;
  display: inline-block;
  width: 100%;
  font-size: 18px;
  color: #555555;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.join-tab > ul > li.active > a {
  border-right: none;
  font-weight: 500;
  background: #fff;
}
.join-tab > ul > li:first-child > a {
  border-left: 1px solid #ccc;
}
.join-tab > ul > li.active:first-child > a {
  border-left: none;
}

.mb-bx01 h3 {
  font-weight: 500;
  font-size: 24px;
  color: #2f2f2f;
  line-height: 40px;
  margin-top: 50px;
}
.mb-bx01 > p {
  font-size: 14px;
  color: #888;
  margin-top: 5px;
  line-height: 20px;
}
.mb-bx01 h4 {
  font-weight: 500;
  font-size: 14px;
  color: #2f2f2f;
  line-height: 40px;
  margin-top: 20px;
}
.mb-bx01 textarea {
  border: 1px solid #ccc;
  height: 268px;
  width: 100%;
}
.mb-bx01 label {
  font-size: 14px;
  color: #888;
  margin-top: 10px;
  line-height: 20px;
  display: inline-block;
  margin-left: 0px;
}
.chkall label {
  margin-top: 0px;
}

.mb-table {
}
.mb-table h3 {
  font-size: 24px;
  font-weight: 500;
  color: #2f2f2f;
  line-height: 40px;
  margin-bottom: 5px;
  padding-top: 20px;
  padding-bottom: 20px;
}
.mb-table h3 span {
  color: #e7586c;
  margin-right: 5px;
}
.mb-table input[type="text"],
.mb-table input[type="password"] {
  line-height: 33px;
  border: 1px solid #ccc;
  height: 33px;
  padding: 0px 10px;
  box-sizing: border-box;
  font-size: 14px;
}
.mb-table select {
  line-height: 36px !important;
  border: 1px solid #ccc;
  height: 36px !important;
  padding: 0px 10px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.mb-table .select_box {
  height: 34px;
  vertical-align: bottom;
}
.mb-table .select_box.wx70 {
  width: 68px !important;
}
.mb-table .select_box select.selbx {
  min-height: 34px;
}
.mb-table .select_box > label {
  top: 10px;
}

.order_pay_type_td1 {
  float: left;
  width: 130px;
  line-height: 60px;
  height: 60px;
  padding-left: 20px;
  background: #f5f7fa;
  font-size: 14px;
  font-weight: bold;
  color: #555;
  border-top: 1px solid #ccc;
}
.order_pay_type_td2 {
  float: left;
  width: 1040px;
  padding: 12px 0px 12px 10px;
  font-size: 14px;
  color: #353535;
  border-top: 1px solid #ccc;
}

.flexBox {
  position: relative;
  display: flex;
  justify-content: space-between;
}
.order_pay_type_td3 {
  position: relative;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  background: #f5f7fa;
  font-size: 14px;
  font-weight: bold;
  color: #040000;
  border-bottom: 1px solid #f1f1f1;
  width: 160px !important;
  padding-left: 20px;
  box-sizing: border-box;
}
.order_pay_type_td4 {
  width: calc(100% - 140px);
  padding: 18px 18px;
  font-size: 14px;
  color: #333;
  border-bottom: 1px solid #f1f1f1;
  box-sizing: border-box;
}

.payRcptList {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.payRcptList li label {
  display: inline-block;
  padding: 5px 0;
  box-sizing: border-box;
  cursor: pointer;
}

.noRightPd {
  padding-right: 0 !important;
}

.payList {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  /* align-items: center; */
  gap: 10px 30px;
  padding-top:28px;
}
.order_pay_select1 {
  float: left;
  width: 20%;
  padding: 5px 0;
}
.order_pay_select2 {
  float: left;
  width: 25%;
  padding: 5px 0;
}
.order_pay_select3 {
  float: left;
  width: 50%;
  padding: 5px 0;
}

.new_pay_select1 {
  /* width: 28%; */
  padding: 5px 0;
}
.new_pay_select2 {
  width: 21%;
  padding: 5px 0;
}
.new_pay_select3 {
  width: 50%;
  padding: 5px 0;
}

.payList li {
  position: relative;
  padding: 3px 0;
  box-sizing: border-box;
}
.payList li img {
  position: relative;
  display: inline-block;
}

.payList li label {
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  padding: 13px 0;
  box-sizing: border-box;
}

.payList li label span {
  position: relative;
  top: 1px;
  display: inline-block;
}

/* 25-09-18 bhs - pay event */
.order_pay_select1 label {
    position:relative;
}

.payList li .event,
.order_pay_select1 .event {
    font-size: 12px;
    font-weight: 400;
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: 100%;
    gap: 5px;
    color: #52607d;
    margin-bottom: 5px;
    position: absolute;
    white-space: nowrap;
    top: -27px;
    left: 0;
    flex-shrink: 0;
}

.order_pay_select1 .event {
  top:-33px;
}

.payList li .event::before,
.order_pay_select1 .event::before {
    content: 'EVENT';
    color: #0057ff;
    font-weight: 600;
    font-size: 10px;
    display: inline-block;
    padding: 5px 8px;
    background-color: #e9f2ff;
    border-radius: 999px;
}

.payList li .event::after,
.order_pay_select1 .event::after {
  content: "";
  position: absolute;
  z-index:-9;
  bottom: -6px;
  left: 0px;
  border-width: 15px 10px 0 10px;
  border-style: solid;
  border-color: #e9f2ff transparent transparent transparent;
}

/*.mb-table .captcha { font-size:30px; background:#f5f7fa; font-family: "Bodoni MT"; color:#2f2f2f;}*/
.mb-table .numbtn {
  position: relative;
  display: inline-block;
  width: 76px;
  padding: 7px 0;
  /* color: #333; */
  font-size: 12px;
  font-weight: 500;
  background: #000000;
  color: #fff;
  text-align: center;
  border: 1px solid #000000;
  box-sizing: border-box;
  transition: all 0.2s;
}
.mb-table .numbtn:hover {
  background: #4da7ef;
  color: #fff;
  border: 1px solid #3b92d8;
}
.mb-table .numbtn2 {
  position: relative;
  display: inline-block;
  width: 76px;
  padding: 7px 0;
  color: #333;
  font-size: 12px;
  font-weight: 500;
  background: #fff;
  border: 1px solid #555;
  box-sizing: border-box;
  transition: all 0.2s;
}
.mb-table .numbtn2:hover {
  background: #4da7ef;
  color: #fff;
  border: 1px solid #3b92d8;
}

.join-result {
  border-top: 2px solid #2f2f2f;
  border-bottom: 2px solid #2f2f2f;
  margin-top: 95px;
}
.order-result {
  margin-top: 60px !important;
}
.order-result h3 {
  padding-top: 170px;
  background: url(/img/sub/order-result-bg.png) center top no-repeat;
}
.order-result .join-bx {
  height: 300px;
}
.join-bx {
  text-align: center;
  margin: 40px 0px;
  background: #f7f7f7;
  height: 140px;
  overflow: hidden;
}
.join-bx h3 {
  font-size: 30px;
  letter-spacing: -0.05em;
  color: #555555;
  font-weight: normal;
  line-height: 40px;
  margin-top: 40px;
}
.join-bx h3 span {
  font-weight: 500;
}
.join-bx p {
  font-size: 16px;
  font-weight: 500;
  color: #555;
  line-height: 20px;
  margin-top: 5px;
}

/* s:2024-07-25 고객센터/마이페이지 수정 */
.cs-top {
  
}
.cs-top .cs-area01 {
  position: relative;
  padding: 20px 20px 20px 0;
  border-bottom: 1px solid #ccc;
}
.cs-top .cs-area01 h2 {
  font-size: 30px;
  color: #555;
  font-weight: normal;
  line-height: 40px;
  letter-spacing: -0.025em;
}
.cs-top .cs-area01 h2 span {
  font-weight: 500;
  color: #2f2f2f;
}
.cs-top .cs-area01 p {
  margin-top: 10px;
  line-height: 20px;
  font-weight: 500;
  font-size: 14px;
  color: #888;
  letter-spacing: -0.025em;
}
.cs-top .cs-area01 .call-num {
  position: absolute;
  left: 745px;
  top: 26px;
  background: url(/img/sub/call-bg.png) no-repeat;
  padding-left: 81px;
  line-height: 60px;
  height: 60px;
  font-size: 30px;
  font-family: Helvetica, sans-serif;
  font-weight: 500;
  color: #0f68ed;
}

.cs-top .cs-area02 {
  margin-top: 42px;
  padding-bottom: 32px;
  overflow: hidden;
  border-bottom: 1px solid #ccc;
}
.cs-top .cs-area02 > ul > li {
  background: url(/img/sub/cs-line.png) no-repeat;
  float: left;
}
.cs-top .cs-area02 > ul > li:first-child {
  background: none;
}
.cs-top .cs-area02 > ul > li > a {
  width: 122px;
  display: inline-block;
  padding-top: 50px;
  text-align: center;
  font-size: 13px;
  font-weight: 500;
  color: #555;
  line-height: 20px;
  letter-spacing: -0.025em;
}
.cs-top .cs-area02 > ul > li > a.ico01 {
  background: url(/img/sub/cs-ico01.png) no-repeat center top;
  width: 123px;
}
.cs-top .cs-area02 > ul > li > a.ico01:hover {
  background: url(/img/sub/cs-ico01-ov.png) no-repeat center top;
}
.cs-top .cs-area02 > ul > li > a.ico02 {
  background: url(/img/sub/cs-ico02.png) no-repeat center top;
}
.cs-top .cs-area02 > ul > li > a.ico02:hover {
  background: url(/img/sub/cs-ico02-ov.png) no-repeat center top;
}
.cs-top .cs-area02 > ul > li > a.ico03 {
  background: url(/img/sub/cs-ico03.png) no-repeat center top;
}
.cs-top .cs-area02 > ul > li > a.ico03:hover {
  background: url(/img/sub/cs-ico03-ov.png) no-repeat center top;
}
.cs-top .cs-area02 > ul > li > a.ico04 {
  background: url(/img/sub/cs-ico04.png) no-repeat center top;
}
.cs-top .cs-area02 > ul > li > a.ico04:hover {
  background: url(/img/sub/cs-ico04-ov.png) no-repeat center top;
}
.cs-top .cs-area02 > ul > li > a.ico05 {
  background: url(/img/sub/cs-ico05.png) no-repeat center top;
}
.cs-top .cs-area02 > ul > li > a.ico05:hover {
  background: url(/img/sub/cs-ico05-ov.png) no-repeat center top;
}
.cs-top .cs-area02 > ul > li > a.ico06 {
  background: url(/img/sub/cs-ico06.png) no-repeat center top;
}
.cs-top .cs-area02 > ul > li > a.ico06:hover {
  background: url(/img/sub/cs-ico06-ov.png) no-repeat center top;
}
.cs-top .cs-area02 > ul > li > a.ico07 {
  background: url(/img/sub/cs-ico07.png) no-repeat center top;
}
.cs-top .cs-area02 > ul > li > a.ico07:hover {
  background: url(/img/sub/cs-ico07-ov.png) no-repeat center top;
}
.cs-top .cs-area02 > ul > li > a.ico08 {
  background: url(/img/sub/cs-ico08.png) no-repeat center top;
  width: 126px;
}
.cs-top .cs-area02 > ul > li > a.ico08:hover {
  background: url(/img/sub/cs-ico08-ov.png) no-repeat center top;
}
.cs-top .cs-area03 {
  height: 70px;
  position: relative;
}
#sc-sch legend {
  display: inline-block;
  position: absolute;
  font-size: 30px;
  color: #000000;
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 66px;
  width: 60px;
  height: auto;
  text-indent: 0px;
  visibility: inherit;
  left: 30px;
}
#sc-sch form {
  position: absolute;
  left: 120px;
}
#sc-sch form label {
  line-height: 70px;
  font-size: 14px;
  color: #555;
  letter-spacing: -0.025em;
  font-weight: 500;
  margin-right: 10px;
}
#sc-sch form input[type="text"] {
  width: 278px;
  border: 1px solid #ccc;
  line-height: 34px;
  height: 34px;
  padding: 0px 10px;
}
#sc-sch .btn-submit {
  width: 50px;
  height: 36px;
  border: none;
  line-height: 36px;
  background: #000;
  color: #fff;
  font-weight: 500;
  font-size: 14px;
  margin-left: -6px;
}

.cs-latest h3 {
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.025em;
  color: #2f2f2f;
}
.cs-latest {
  position: relative;
}
.cs-latest > ul {
  margin-top: 10px;
}
.cs-latest > ul > li {
  overflow: hidden;
  border-bottom: 1px solid #ccc;
  height: 40px;
}
.cs-latest > ul > li:first-child {
  border-top: 1px solid #2f2f2f;
}
.cs-qa-latest > ul > li span {
  display: inline-block;
  font-size: 14px;
  color: #888;
  letter-spacing: -0.025em;
  line-height: 20px;
  margin: 10px 0px;
  border-left: 1px solid #ccc;
  text-align: center;
  float: left;
}
.cs-qa-latest > ul > li .num {
  width: 40px;
  font-weight: 500;
  border-left: none;
}
.cs-qa-latest > ul > li .num em {
  color: #ef562d;
}
.cs-qa-latest > ul > li .category {
  width: 100px;
}
.cs-qa-latest > ul > li .q-a {
  width: 40px;
}
.cs-qa-latest > ul > li .subject {
  padding: 0px 20px;
  width: 740px;
  text-align: left;
}
.cs-qa-latest > ul > li .subject a {
  display: inline-block;
  width: 740px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #555555;
  line-height: 20px;
}
.cs-qa-latest a.more {
  position: absolute;
  top: 5px;
  right: 0px;
  font-size: 12px;
  font-weight: 500;
  color: #888888;
  background: url(/img/sub/cs-more.png) no-repeat right center;
  padding-right: 10px;
}

.cs-notice-latest > ul > li .subject a,
.cs-column-latest > ul > li .subject a {
  line-height: 20px;
}
.cs-notice-latest {
  width: 485px;
  float: left;
  position: relative;
}
.cs-notice-latest a.more {
  position: absolute;
  top: 5px;
  right: 0px;
  font-size: 12px;
  font-weight: 500;
  color: #888888;
  background: url(/img/sub/cs-more.png) no-repeat right center;
  padding-right: 10px;
}
.cs-column-latest {
  width: 485px;
  margin-left: 20px;
  float: left;
  position: relative;
}
.cs-column-latest a.more {
  position: absolute;
  top: 5px;
  right: 0px;
  font-size: 12px;
  font-weight: 500;
  color: #888888;
  background: url(/img/sub/cs-more.png) no-repeat right center;
  padding-right: 10px;
}

.latest-set span {
  display: inline-block;
  font-size: 14px;
  color: #888;
  letter-spacing: -0.025em;
  line-height: 20px;
  margin: 10px 0px;
  float: left;
}
.latest-set .subject {
  width: 379px;
}
.latest-set .subject a {
  width: 359px;
  background: url(/img/sub/cs-latest-dot.png) no-repeat 10px center;
  padding-left: 20px;
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #555555;
}
.latest-set .date {
  float: right;
  margin-right: 20px;
  font-size: 12px;
  color: #888888;
}

.frcontent .h2-title {
  font-size: 30px;
  color: var(--color-black-19);
  letter-spacing: -0.025em;
  font-weight: 500;
  line-height: 30px;
}
.cs-faq {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:var(--size10);
  margin-top:25px;
}
.cs-faq form {
  flex:1;
  width:100%;
}
.cs-faq .input-row {
  position:relative;
}
.cs-faq .input-row input[type="submit"] {
  display:block;
  position:absolute;
  right:10px;
  top:50%;
  width:24px;
  height:20px;
  border:none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='25' height='20' viewBox='0 0 25 20' fill='none'%3E%3Ccircle cx='10' cy='10' r='9.5' fill='%23F3F6FE' stroke='%23B4BCD4'/%3E%3Cline x1='17.9245' y1='15.3415' x2='24.2777' y2='19.5842' stroke='%23B4BCD4'/%3E%3C/svg%3E");
  background-color:transparent;
  transform:translateY(-50%);
  text-indent:-9999em;
  cursor: pointer;
}
.cs-faq .input-row input[type="text"] {
  width:100%;
  height:40px;
  padding:0 45px 0 15px;
  font-size:14px;
  line-height:40px;
  border:1px solid var(--color-purple-d7);
  background-color:var(--color-purple);
  box-sizing:border-box;
}
.cs-faq .input-row input[type="text"]::-webkit-input-placeholder {color:var(--color-purple-b4);}
.cs-faq .input-row input[type="text"]::-moz-placeholder {color:var(--color-purple-b4);}
.cs-faq .button {
  width:170px;
}
.cs-notice {
  margin-top:25px;
  padding:15px 30px;
  border-radius: 6px;
  background: #F9E9F5;
}
.cs-notice p {
  font-size:14px;
  font-weight:500;
  color:#E40394;
  line-height:19px;
  word-break: keep-all;
}
.cs-notice p a {
  color:inherit;
}
/* e:2024-07-25 고객센터/마이페이지 수정 */
.h3-title {
  background: url(/img/sub/dvs-li-dot.png) no-repeat left center;
  padding-left: 25px;
  line-height: 20px;
  color: #555;
  font-size: 14px;
  letter-spacing: -0.025em;
}

.dvs-bx {
}
.dvs-bx > ul > li {
  margin-top: 20px;
  font-size: 14px;
  font-weight: 500;
  color: #2f2f2f;
  letter-spacing: -0.025em;
}
.dvs-bx > ul > li > span {
  padding-left: 24px;
  background: url(/img/sub/dvs-li-dot.png) no-repeat left 3px;
}
.dvs-bx > ul > li > span > em {
  color: #e7586c;
}
.dvs-bx > ul > li > ul {
  margin-top: 10px;
}
.dvs-bx > ul > li > ul > li {
  line-height: 20px;
  font-size: 14px;
  color: #888;
  letter-spacing: -0.025em;
  background: url(/img/sub/dvs-li-dot2.png) no-repeat left 10px;
  padding-left: 10px;
}

.dvs-bx2 {
}
.dvs-bx2 > ul > li {
  margin-top: 20px;
  font-size: 14px;
  font-weight: 500;
  color: #2f2f2f;
  letter-spacing: -0.025em;
}
.dvs-bx2 > ul > li > span {
  padding-left: 24px;
  background: url(/img/sub/dvs-li-dot.png) no-repeat left 3px;
}
.dvs-bx2 > ul > li > span > em {
  color: #e7586c;
}
.dvs-bx2 > ul > li > ul {
  margin-top: 10px;
}
.dvs-bx2 > ul > li > ul > li {
  line-height: 20px;
  font-size: 14px;
  color: #888;
  letter-spacing: -0.025em;
  font-weight: normal;
}
.dvs-bx2 > ul > li > ul > li .fsredbt {
  color: #e7586c;
  border-bottom: 1px solid #e7586c;
}

.job-tab {
  position: relative;
  margin-top: 40px;
  margin-left: 20px;
  padding-bottom: 2150px;
}
.job-tab > ul {
  overflow: hidden;
}
.job-tab > ul > li > a {
  display: inline-block;
  line-height: 45px;
  background: #fcfcfc;
  width: 483px;
  text-align: center;
  border-right: 1px solid #ccc;
  border-top: 1px solid #ccc;
  float: left;
  font-size: 14px;
  color: #555555;
  border-bottom: 1px solid #2f2f2f;
}
.job-tab > ul > li:first-child > a {
  border-left: 1px solid #ccc;
  border-right: 1px solid #2f2f2f;
}
.job-tab > ul > li:first-child > a.active {
  border-left: 1px solid #2f2f2f;
}
.job-tab > ul > li > a.active {
  border-right: 1px solid #2f2f2f;
  border-top: 1px solid #2f2f2f;
  background: #fff;
  color: #2f2f2f;
  font-weight: 500;
  border-bottom: 1px solid #fff;
}
.job-tab > ul > li > ul {
  position: absolute;
  top: 60px;
  left: 0px;
  display: none;
}
.job-tab > ul > li > ul.active {
  display: block;
}
.job-tab > ul > li {
}

.job-tab2 {
  position: relative;
  margin-top: 40px;
  margin-left: 20px;
  padding-bottom: 2150px;
}
.job-tab2 > ul {
  overflow: hidden;
}
.job-tab2 > ul > li > a {
  display: inline-block;
  line-height: 45px;
  background: #fcfcfc;
  width: 322px;
  text-align: center;
  border-right: 1px solid #ccc;
  border-top: 1px solid #ccc;
  float: left;
  font-size: 14px;
  color: #555555;
  border-bottom: 1px solid #2f2f2f;
}
.job-tab2 > ul > li:first-child > a {
  border-left: 1px solid #ccc;
  border-right: 1px solid #2f2f2f;
}
.job-tab2 > ul > li:first-child > a.active {
  border-left: 1px solid #2f2f2f;
}
.job-tab2 > ul > li > a.active {
  border-right: 1px solid #2f2f2f;
  border-top: 1px solid #2f2f2f;
  background: #fff;
  color: #2f2f2f;
  font-weight: 500;
  border-bottom: 1px solid #fff;
}
.job-tab2 > ul > li > ul {
  position: absolute;
  top: 60px;
  left: 0px;
  display: none;
}
.job-tab2 > ul > li > ul.active {
  display: block;
}
.job-tab2 > ul > li {
}

.job-tab_new {
  margin-top: 40px;
  margin-left: 20px;
}
.job-tab_new > ul {
  overflow: hidden;
}
.job-tab_new > ul > li > a {
  display: inline-block;
  margin-bottom: 15px;
  line-height: 45px;
  background: #fcfcfc;
  width: 137px;
  text-align: center;
  border-right: 1px solid #ccc;
  border-top: 1px solid #ccc;
  float: left;
  font-size: 14px;
  color: #555555;
  border-bottom: 1px solid #2f2f2f;
}
.job-tab_new > ul > li:first-child > a {
  border-left: 1px solid #ccc;
  border-right: 1px solid #ccc;
}
.job-tab_new > ul > li:first-child > a.active {
  border-left: 1px solid #2f2f2f;
}
.job-tab_new > ul > li > a.active {
  border-right: 1px solid #2f2f2f;
  border-top: 1px solid #2f2f2f;
  background: #fff;
  color: #2f2f2f;
  font-weight: 500;
  border-bottom: 1px solid #fff;
}
.job-tab_new > ul > li > ul {
  top: 60px;
  left: 0px;
  display: none;
}
.job-tab_new > ul > li > ul.active {
  display: block;
}
.job-tab_new > ul > li {
}

.cs-tab {
  position: relative;
  margin-top: 40px;
  margin-bottom: 20px;
  /* 탭 내용(.cs-tab > ul > li > ul)은 항상 position:absolute라 이 박스 자체는
     높이를 못 잡는다. 예전엔 padding-bottom을 숫자로 고정해뒀었는데(2300px)
     그 값보다 긴 탭이 생기면 잘리는 문제가 있었다. clear:both로 내용을 자연스러운
     흐름에 놓아 자동으로 늘어나게 해봤지만, 두 탭 버튼(a)이 각자의 li 안에
     콘텐츠와 같이 있는 구조라 먼저 오는 탭(일자기준)이 활성화되면 그 탭의
     내용이 clear로 내려가면서 li 자체가 늘어나 버려 뒤에 오는 두번째 탭 버튼
     (상품기준)이 그 밑으로 밀려나는 문제가 생겼다. 그래서 absolute를 되살리고
     대신 padding-bottom을 common.renewal.js에서 활성 탭 내용의 실제 높이에 맞춰
     매번 계산해서 넣어주도록 수정함(2026-09-01) */
}
.cs-tab > ul {
  overflow: hidden;
}
.cs-tab > ul > li > a {
  display: inline-block;
  line-height: 45px;
  background: #fcfcfc;
  width: 493px;
  text-align: center;
  border-right: 1px solid #ccc;
  border-top: 1px solid #ccc;
  float: left;
  font-size: 14px;
  color: #555555;
  border-bottom: 1px solid #2f2f2f;
}
.cs-tab > ul > li:first-child > a {
  border-left: 1px solid #ccc;
  border-right: 1px solid #2f2f2f;
}
.cs-tab > ul > li:first-child > a.active {
  border-left: 1px solid #2f2f2f;
}
.cs-tab > ul > li > a.active {
  border-right: 1px solid #2f2f2f;
  border-top: 1px solid #2f2f2f;
  background: #fff;
  color: #2f2f2f;
  font-weight: 500;
  border-bottom: 1px solid #fff;
}
.cs-tab > ul > li > ul {
  position: absolute;
  top: 60px;
  left: 0px;
  display: none;
}
.cs-tab > ul > li > ul.active {
  display: block;
}
.cs-tab > ul > li {
}

.cs-tab1 {
  position: relative;
  margin-top: 40px;
  padding-bottom: 1390px;
}
.cs-tab1 > ul {
  overflow: hidden;
}
.cs-tab1 > ul > li > a {
  display: inline-block;
  line-height: 45px;
  background: #fcfcfc;
  width: 245px;
  text-align: center;
  border-right: 1px solid #ccc;
  border-top: 1px solid #ccc;
  float: left;
  font-size: 14px;
  color: #555555;
  border-bottom: 1px solid #2f2f2f;
}
.cs-tab1 > ul > li:first-child > a {
  border-left: 1px solid #ccc;
}
.cs-tab1 > ul > li:first-child > a.active {
  border-left: 1px solid #2f2f2f;
}
.cs-tab1 > ul > li > a.active {
  border-left: 1px solid #2f2f2f;
  border-right: 1px solid #2f2f2f;
  border-top: 1px solid #2f2f2f;
  background: #fff;
  color: #2f2f2f;
  font-weight: 500;
  border-bottom: 1px solid #fff;
}
.cs-tab1 > ul > li > ul {
  position: absolute;
  top: 60px;
  left: 0px;
  display: none;
}
.cs-tab1 > ul > li > ul.active {
  display: block;
}
.cs-tab1 > ul > li {
}

.cs-tab2 {
  padding-bottom: 610px !important;
}
/*.cs-tab2 > ul > li > a { width:196px; }*/
.cs-tab2 > ul > li > a {
  width: 245px;
}
.cs-tab2 > ul > li:first-child > a {
  border-right: 1px solid #ccc;
}
.cs-tab2 > ul > li:first-child > a.active {
  border-left: 1px solid #2f2f2f;
  border-right: 1px solid #2f2f2f;
  margin-left: 0px !important;
}
.cs-tab2 > ul > li > a.active {
  border-left: 1px solid #2f2f2f;
  border-right: 1px solid #2f2f2f;
  margin-left: -1px;
}
.cs-tab2 > ul > li > ul {
  top: 116px;
}

.dvs-tbl td {
  line-height: 22px;
}

.webbg {
  background: url(/img/sub/webhdd.jpg) no-repeat top right;
}

.web-tab {
  margin-top: 78px;
  overflow: hidden;
}
.web-tab > ul > li {
  border-bottom: 1px solid #ccc;
  border-right: 1px solid #ccc;
  float: left;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  width: 165px;
  height: 45px;
  line-height: 45px;
  text-align: center;
  overflow: hidden;
}
.web-tab > ul > li.brd-l {
  border-left: 1px solid #ccc;
}
.web-tab > ul > li.brd-t {
  border-top: 1px solid #ccc;
}
.web-tab > ul > li > a {
  width: 165px;
  height: 45px;
  line-height: 45px;
  font-size: 14px;
  color: #555555;
  display: inline-block;
}
.web-tab > ul > li > a:hover,
.web-tab > ul > li > a.active {
  background: #ef562d;
  font-weight: 500;
  color: #fff;
}

.hddcont {
  display: none;
}
.hddcont.active {
  display: block;
}
.hddcont > ul {
}
.hddcont > ul > li {
  margin-top: 40px;
  font-size: 14px;
  font-weight: 500;
  color: #ef562d;
  letter-spacing: -0.025em;
}
.hddcont > ul > li > span {
  padding-left: 24px;
  background: url(/img/sub/hdd-li-dot.png) no-repeat left 3px;
}
.hddcont > ul > li > ul {
  margin-top: 10px;
}
.hddcont > ul > li > ul > li {
  line-height: 22px;
  font-size: 14px;
  color: #888;
  letter-spacing: -0.025em;
  font-weight: normal;
}

.bd-faq-bx {
  position: relative;
  overflow: hidden;
  min-height: 70px;
  border: 1px solid #ccc;
  background: #fcfcfc;
  margin: 20px 0px;
}

.faq-cate {
}
.faq-cate > ul {
  overflow: hidden;
}
.faq-cate > ul > li {
  float: left;
}
.faq-cate > ul > li > a {
  width: 122px;
  display: inline-block;
  height: 44px;
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #2f2f2f;
  line-height: 44px;
  text-align: center;
  font-size: 14px;
  color: #555555;
  border-right: 1px solid #ccc;
}
.faq-cate > ul > li:first-child > a {
  border-left: 1px solid #ccc;
  width: 126px;
}
.faq-cate > ul > li > a.active {
  color: #fff;
  background: #83b14e;
  border-top: 1px solid #2f2f2f;
  border-bottom: none;
  border-left: 1px solid #2f2f2f;
  border-right: 1px solid #2f2f2f;
  height: 45px;
  line-height: 45px;
}

.bd-faq {
  width: 100%;
  border-top: 1px solid #2f2f2f;
  border-bottom: 1px solid #2f2f2f;
  margin-top: 20px;
}
.bd-faq > ul {
}
.bd-faq > ul > li {
  border-top: 1px solid #ccc;
}
.bd-faq > ul > li > p.faq-q {
  line-height: 40px;
  position: relative;
}
.bd-faq > ul > li > p .subject {
  font-size: 14px;
  color: #555;
  letter-spacing: -0.025em;
}
.bd-faq > ul > li > p > span:first-child {
  width: 40px;
  text-align: center;
  font-size: 14px;
  font-weight: bold;
  color: #555555;
  display: inline-block;
  line-height: 20px;
  background: url(/img/common/bg-ft-line.png) no-repeat center right;
  margin-right: 20px;
}
.bd-faq > ul > li > p.faq-q > a {
  position: absolute;
  right: 20px;
  top: 10px;
  display: inline-block;
  background: url(/img/sub/btn-plus.png) no-repeat;
  width: 17px;
  height: 17px;
  vertical-align: middle;
  text-indent: -9999px;
}
.bd-faq > ul > li > p.faq-q > a.active {
  background: url(/img/sub/btn-minus.png) no-repeat;
}
.bd-faq > ul > li > p.faq-a {
  border-top: 1px solid #ccc;
  overflow: hidden;
  background: #fcfcfc;
  display: table;
  display: none;
}
.bd-faq > ul > li > p.faq-a span {
  width: 907px;
  display: table-cell;
  vertical-align: middle;
  padding: 10px 20px;
  font-size: 14px;
  color: #888;
  letter-spacing: -0.025em;
  line-height: 22px;
}
.bd-faq > ul > li > p.faq-a span:first-child {
  width: 40px;
  text-align: center;
  font-size: 14px;
  font-weight: bold;
  color: #e7586c;
  line-height: 20px;
  padding: 0px;
}

.item-form {
  position: relative;
  display: flex;
  justify-content: space-between;
  overflow: hidden;
}
.img-bx {
  position: relative;
  display: flex;
  flex-direction: column-reverse;
  min-height: 510px;
}
.item-form .item-img {
  position: relative;
  width: 510px;
}
.item-form .small-img {
  position: relative;
}
.item-form .small-img > ul {
  position: relative;
  width: 100%;
  height: 100px;
  display: flex;
  justify-content: space-between;
  overflow: hidden;
  margin-top: 10px;
}
.item-form .small-img > ul > li {
  width: 23%;
  border: 1px solid #fff;
  cursor: pointer;
}
.item-form .small-img > ul > li img {
  width: 100%;
  height: auto;
  min-height: 100%;
}
.item-form .small-img > ul > li {
  transition: 0.2s;
}
.item-form .small-img > ul > li:first-child {
  margin-left: 0px;
}
.item-form .small-img > ul > li.active {
  border: 1px solid #222;
}
.item-form .big-img {
  width: 508px;
}
/* 상품이미지 border삭제 border:1px solid #ccc;*/

.item-form .big-img > ul > li {
  display: none;
}
.item-form .big-img > ul > li.active {
  display: block;
  border: 1px solid #fff;
}

.form-bx {
  position: relative;
  float: left;
  margin-left: 40px;
  width: 650px;
}
.form-title {
  font-size: 20px;
  color: #333;
  font-weight: 700;
  line-height: 1;
  padding: 30px 0 20px;
  box-sizing: border-box;
}

.form-title span {
  font-size: 14px;
  color: #fd3349;
  font-weight: 500;
  margin-left: 2px;
}

.form-title2 {
  font-size: 16px;
  letter-spacing: -0.025em;
  color: #333;
  font-weight: 500;
  line-height: 40px;
}
.form-tbl {
  border-top: 1px solid #ccc;
}
.form-tbl th {
  text-align: left;
  height: 50px;
  font-size: 14px;
  font-weight: bold;
  letter-spacing: -0.1em;
  /* border-bottom: 1px solid #ececec; */
  color: #2f2f2f;
  width: 130px;
}
.form-tbl th label {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.1em;
  color: #2f2f2f;
}

.form-tbl td {
  padding: 10px 0;
  border-bottom: 1px solid #ececec;
  color: #666;
  box-sizing: border-box;
}

.form-tbl td.dot {
  border-bottom: 1px dashed #e6e6e6;
}
.form-tbl td select {
  width: 100%;
  padding-left: 10px;
  line-height: 26px;
  height: 33px;
  border: 1px solid #ccc;
}
.form-tbl td input[type="text"] {
  position: relative;
  font-size: 13px;
  line-height: 33px;
  height: 33px;
  border: 1px solid #ccc;
  width: 80px;
  padding: 0px 10px;
  box-sizing: border-box;
}

.form-tbl td label {
  font-size: 13px;
  color: #295ba0;
  line-height: 21px;
  letter-spacing: -0.025em;
  display: inline-block;
  cursor: pointer;
  margin-right: 10px;
}

.form-tbl td label i {
  position: relative;
  top: 3px;
  font-style: normal;
  cursor: pointer;
}

/*규격 아래 정보*/
.form-tbl label {
  position: relative;
}

.form-tbl label:has(p) span {
  font-size: 1px;
  width: 5px;
  height: 5px;
  margin-right: 5px;
  position: absolute;
  top: 9px;
}

.form-tbl label[for="csize1"] span {
  background-color: #FF5959;
}

.form-tbl label[for="esize1"] span {
  background-color: #F7E472;
}

.form-tbl label[for="ssize1"] span {
  background-color: #5e93ff;
}

.form-tbl label .text-indent {
  margin-left: 10px;
  /* 원하는 들여쓰기 값으로 조절 */
}

.form-tbl td span {
  position: relative;
  top: 2px;
  font-size: 12px;
}

.form-tbl td label.circle span {
  top: 0;
}

.form-tbl td label.circle i {
  top: 0;
  color: #333;
}

.form-tbl thead th {
  text-align: center;
}

.point-color1 {
  color: #f53651;
  font-weight: bold;
}

.order-sum {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  line-height: 50px;
  overflow: hidden;
  padding: 0px 10px;
  background: #f5f7fa;
  margin-top: 20px;
}
.order-sum span:first-child {
  font-size: 14px;
  color: #555;
}
.order-sum span {
  color: #2f2f2f;
  font-size: 20px;
  font-weight: 500;
  line-height: 50px;
  height: 50px;
}
.order-sum span em {
  color: #f53651;
}
.order-sum span input.order-sub {
  width: 80px;
  text-align: right;
  border: none;
  font-size: 14px;
  font-weight: 500;
  background: #f5f7fa;
  line-height: 50px;
  vertical-align: top;
  height: 50px;
}
.order-sum span input.order-tax {
  width: 80px;
  text-align: right;
  border: none;
  font-size: 14px;
  font-weight: 500;
  background: #f5f7fa;
  line-height: 50px;
  vertical-align: top;
  height: 50px;
}
.order-sum span input.order-fnl {
  width: 120px;
  text-align: right;
  border: none;
  color: #f53651;
  font-size: 20px;
  font-weight: 500;
  background: #f5f7fa;
  line-height: 50px;
  vertical-align: top;
  height: 50px;
}
.btn-od-form {
  position: relative;
  width: 70px;
  text-align: center;
  color: #333;
  font-size: 13px;
  font-weight: 500;
  background: #fff;
  display: inline-block;
  cursor: pointer;
  border: 1px solid #333;
  padding: 6px 0;
  box-sizing: border-box;
  margin-left: 1px;
  transition: all 0.2s;
}
.btn-od-form.top2 {
  top: 2px;
}
.btn-od-form:hover {
  background: #4da7ef;
  color: #fff;
  border: 1px solid #308ad1;
}
.btn-od-form-L {
  position: relative;
  width: 100px;
  text-align: center;
  color: #fff !important;
  font-size: 13px;
  letter-spacing: -0.025em;
  font-weight: 500;
  background: #aaa;
  display: inline-block;
  cursor: pointer;
  padding: 7px 0;
  box-sizing: border-box;
  transition: all 0.2s;
}
.btn-od-form-L:hover {
  background: #777;
}
.btn-od-form-L.top1 {
  top: 1.5px;
}

.od-op-tbl {
  border-top: 2px solid #295ba0;
  border-bottom: 1px solid #295ba0;
}
.od-op-tbl tr {
  display: block;
  border-top: 1px solid #ccc !important;
}
.od-op-tbl tr:first-child {
  border-top: 0px;
}
.od-op-tbl tr:first-child td {
  width: 1200px !important;
}
.od-op-tbl th {
  position: relative;
  padding-left: 20px;
  height: 50px;
  background: #f5f7fa;
  width: 210px;
  text-align: left;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.025em;
}
.od-op-tbl td {
  position: relative;
  padding: 10px 0 10px 10px;
  font-size: 14px;
  width: 960px;
  box-sizing: border-box;
}
.od-op-tbl td input[type="text"] {
  line-height: 26px;
  height: 33px;
  border: 1px solid #ccc;
  width: 90px;
  padding: 0px 10px;
  box-sizing: border-box;
}
.od-op-tbl td label {
  line-height: 20px;
  display: inline-block;
  font-size: 14px;
  color: #2f2f2f;
  letter-spacing: -0.025em;
  margin-left: 5px;
}
.od-op-tbl tr:first-child td input[type="text"] {
  margin-left: 5px;
}
.od-op-tbl tr:first-child td {
  background: #f5f7fa;
  padding-left: 0px;
}
.od-op-tbl td select {
  font-size: 13px;
  width: 140px;
  padding-left: 10px;
  line-height: 26px;
  height: 33px;
  border: 1px solid #ccc;
}
.od-op-tbl td .btn-od-form {
  position: absolute;
  left: 856px;
  top: 9px;
}
.od-op-tbl td .od-won {
  position: absolute;
  left: 558px;
  top: -1px;
  font-weight: 500;
  color: #e7586c;
  width: 250px;
  text-align: right;
  line-height: 26px;
  font-size: 14px;
}
.od-op-tbl td .flexDiv {
  position: relative;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.od-op-tbl td .flexDiv span {
  margin-left: 10px;
}

/* 170804 수정 */
.od-op-tbl .plus {
  position: absolute;
  right: 40px;
  top: 18px;
  display: inline-block;
  background: url(/img/sub/btn-plus.png) no-repeat;
  width: 17px;
  height: 17px;
  vertical-align: middle;
}
.od-op-tbl .minus {
  position: absolute;
  right: 20px;
  top: 18px;
  display: inline-block;
  background: url(/img/sub/btn-minus.png) no-repeat;
  width: 17px;
  height: 17px;
  vertical-align: middle;
}
/* 수정 end */

.od-op-bx {
  position: absolute;
  left: 165px;
  top: 3px;
  width: 146px;
  height: 44px;
}
.od-op-bx .cop-op1 {
  position: absolute;
  top: 0px;
  left: 0px;
}
.od-op-bx .cop-op2 {
  position: absolute;
  bottom: 0px;
  left: 0px;
}
.od-op-bx .cop-op3 {
  position: absolute;
  top: 0px;
  right: 0px;
}
.od-op-bx .cop-op4 {
  position: absolute;
  bottom: 0px;
  right: 0px;
}
.od-op-bx .op-bx {
  width: 83px;
  height: 42px;
  line-height: 42px;
  text-align: center;
  color: #555555;
  font-size: 13px;
  background: url(/img/sub/opbx-bg.png);
  border: 1px solid #ccc;
  border-radius: 6px;
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
  position: absolute;
  left: 30px;
  top: 2px;
}

.od-tab {
  border-top: 1px solid #dcdcdc;
  border-bottom: 1px solid #dcdcdc;
  height: 152px;
  border-right: 1px solid #dcdcdc;
  border-left: 1px solid #dcdcdc;
  position: relative;
  margin-top: 20px;
}
.od-tab > ul > li {
}
.od-tab > ul > li > a {
  width: 130px;
  height: 50px;
  line-height: 50px;
  display: inline-block;
  padding-left: 20px;
  background: #f3f2f7;
  color: #555;
  border-top: 1px solid #ccc;
  font-weight: 500;
  font-size: 14px;
  border-right: 1px solid #ccc;
}
.od-tab > ul > li > a.active {
  background: #57b2fa;
  color: #fff;
  width: 131px;
  border-right: none;
  transition: 0.2s;
}
.od-tab > ul > li:first-child > a {
  border-top: none;
}
.od-tab > ul > li > ul {
  position: absolute;
  top: 30px;
  left: 155px;
  display: none;
}
.od-tab > ul > li > ul.active {
  display: block;
}
.od-tab > ul > li > ul > li {
  float: left;
  margin-left: 30px;
}
.od-tab > ul > li .activebg {
  position: absolute;
  height: 50px;
  width: 7px;
  left: 150px;
  top: 0px;
}
.od-tab > ul > li.tab02 .activebg {
  top: 50px;
}
.od-tab > ul > li.tab03 .activebg {
  top: 100px;
}
.od-tab > ul > li .activebg.active {
  background: url(/img/sub/od-tab-bg.png) no-repeat center right;
}

/* 상품설명, 출고/배송정보 탭 */
.od-pro-tab {
  position: relative;
  margin-top: 100px;
  border-bottom: 1px solid #f1f1f1;
}

.od-pro-tab > ul {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.od-pro-tab > ul > li {
  position: relative;
}

.od-pro-tab > ul > li:after {
  position: absolute;
  bottom: -1px;
  left: 50%;
  transform: translateX(-50%);
  content: "";
  width: 0%;
  height: 1px;
  background: #000;
  transition: all 0.2s;
}

.od-pro-tab > ul > li:first-child {
  margin-right: 30px;
}

.od-pro-tab > ul > li.active:after {
  width: 100%;
}
/* 2024-06-20 */
.od-pro-tab > ul > li > a {
  position: relative;
  display: inline-block;
  font-size: 20px;
  font-weight: 600;
  color: #777;
  line-height: 1;
  padding-bottom: 14px;
  box-sizing: border-box;
  transition: all 0.2s;
  text-align: center;
}

.od-pro-tab > ul > li.active > a {
  color: #333;
}

.od-pro-tab > ul > li > a:hover {
  color: #000;
}

.odtab {
  padding: 40px 0px 0px 20px;
  display: none;
}
.odtab.active {
  display: block;
}
.odtab h3 {
  line-height: 40px;
  font-size: 22px;
  color: #2f2f2f;
  font-weight: 500;
  letter-spacing: -0.025em;
}
.odtab h3 span {
  color: #888;
  margin-left: 5px;
  font-weight: normal;
}
.odtab > ul > li {
  position: relative;
  display: flex;
  justify-content: space-between;
}
.odtab > ul > li > a {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  line-height: 20px;
  width: 161px;
  height: 51px;
  font-size: 14px;
  font-weight: 700;
  color: #333;
  text-align: center;
  line-height: 49px;
  border: 1px solid #cfcdce;
  box-sizing: border-box;
}
.odtab > ul > li > a:hover {
  color: #fff;
  background: #0f68ed;
  border: 1px solid #0f68ed;
}
.odtab > ul > li > a:first-child {
  margin-left: 0px;
}
.odtab > ul > li > a:before {
  position: relative;
  top: -1px;
  display: inline-block;
  content: "";
  margin-right: 10px;
}
.odtab > ul > li > a:after {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  content: "";
  display: inline-block;
  width: 4px;
  height: 5px;
  background: url("/images/newSub/icon_guideArrow_off.png") no-repeat;
}
.odtab > ul > li > a:hover:after {
  background: url("/images/newSub/icon_guideArrow_on.png") no-repeat;
}
.odtab > ul > li > a.od-pro01:before {
  width: 21px;
  height: 20px;
  background: url("/images/newSub/icon_subGuide01_off.png") no-repeat;
}
.odtab > ul > li > a.od-pro01:hover:before {
  background: url("/images/newSub/icon_subGuide01_on.png") no-repeat;
}
.odtab > ul > li > a.od-pro02:before {
  width: 24px;
  height: 16px;
  background: url("/images/newSub/icon_subGuide02_off.png") no-repeat;
}
.odtab > ul > li > a.od-pro02:hover:before {
  background: url("/images/newSub/icon_subGuide02_on.png") no-repeat;
}
.odtab > ul > li > a.od-pro03:before {
  width: 19px;
  height: 17px;
  background: url("/images/newSub/icon_subGuide03_off.png") no-repeat;
}
.odtab > ul > li > a.od-pro03:hover:before {
  background: url("/images/newSub/icon_subGuide03_on.png") no-repeat;
}
.odtab > ul > li > a.od-pro04:before {
  width: 24px;
  height: 24px;
  background: url("/images/newSub/icon_subGuide04_off.png") no-repeat;
}
.odtab > ul > li > a.od-pro04:hover:before {
  background: url("/images/newSub/icon_subGuide04_on.png") no-repeat;
}
.odtab > ul > li > a.od-pro05:before {
  width: 21px;
  height: 21px;
  background: url("/images/newSub/icon_subGuide05_off.png") no-repeat;
}
.odtab > ul > li > a.od-pro05:hover:before {
  background: url("/images/newSub/icon_subGuide05_on.png") no-repeat;
}
.odtab > ul > li > a.od-pro06:before {
  width: 20px;
  height: 20px;
  background: url("/images/newSub/icon_subGuide06_off.png") no-repeat;
}
.odtab > ul > li > a.od-pro06:hover:before {
  background: url("/images/newSub/icon_subGuide06_on.png") no-repeat;
}
.odtab > ul > li > a.od-pro07:before {
  width: 21px;
  height: 21px;
  background: url("/images/newSub/icon_subGuide07_off.png") no-repeat;
}
.odtab > ul > li > a.od-pro07:hover:before {
  background: url("/images/newSub/icon_subGuide07_on.png") no-repeat;
}
.odtab h4 {
  margin-top: 30px;
  line-height: 20px;
  font-size: 14px;
  color: #555;
  font-weight: 500;
  letter-spacing: -0.025em;
}

.size-tbl {
  border: 1px solid #ccc;
  margin-top: 10px;
}
.size-tbl th {
  background: #0f68ed;
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  text-align: center;
  height: 35px;
  border: 1px solid #ccc;
}

/* 2024-06-19 상품설명 */
details[open] > summary {
  color: #0f68ed !important;
}

.size-tbl td {
  height: 35px;
  border-top: 1px solid #ccc;
  text-align: center;
  font-size: 14px;
  border-left: 1px solid #ccc;
  color: #555555;
}
.size-tbl th:first-child {
  border-left: none;
}
.size-tbl td:first-child {
  border-left: none;
}

.size-tbl2 {
  border: 1px solid #ccc;
}
.size-tbl2 th {
  background: #7da7d9;
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  text-align: center;
  height: 45px;
  border: 1px solid #ccc;
}
.size-tbl2 td {
  /*height:150px;*/
  padding: 50px 0;
  border-top: 1px solid #ccc;
  text-align: center;
  font-size: 14px;
  border-left: 1px solid #ccc;
  color: #555555;
}
.size-tbl2 th:first-child {
  border-left: none;
}
.size-tbl2 td:first-child {
  border-left: none;
}

.od-dv li {
  letter-spacing: -0.06em !important;
  margin-top: 10px;
}

.mp-latest {
  position: relative;
}
.mp-latest h3 {
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.025em;
  color: #2f2f2f;
  line-height: 20px;
  margin-bottom: 10px;
}
.mp-latest .more {
  position: absolute;
  top: 0px;
  line-height: 20px;
  right: 0px;
  font-size: 12px;
  font-weight: 500;
  color: #888888;
  background: url(/img/sub/cs-more.png) no-repeat right center;
  padding-right: 10px;
}
/* s:2024-07-25 고객센터/마이페이지 수정 */
.board-layout-top {
  position:relative;
}
.board-layout-top h2 {
  font-size:30px;
  color: var(--color-black-19);
  letter-spacing: -0.025em;
  font-weight: 500;
  line-height:30px;
}
.board-layout-top h2 + p {
  margin-top:15px;
  font-size:14px;
  color: var(--color-black-19);
}
.board-layout-top .call-num {
  position:absolute;
  right:0;
  top:50%;
  padding-right:51px;
  font-size:30px;
  font-weight:600;
  color:var(--color-black);
  transform:translateY(-50%);
}
.board-layout-top .call-num::after {
  content:'';
  display:block;
  position:absolute;
  right:0;
  top:0;
  width:43px;
  height:36px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='43' height='36' viewBox='0 0 43 36' fill='none'%3E%3Cg clip-path='url(%23clip0_71_89)'%3E%3Cpath d='M0.75 25.44C0.75 30.04 4.43 33.78 9 33.9V16.98C4.43 17.09 0.75 20.84 0.75 25.44Z' fill='black' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M42.02 25.44C42.02 30.04 38.35 33.78 33.77 33.9V16.98C38.35 17.09 42.02 20.84 42.02 25.44Z' fill='black' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M6.84009 19.37V15.29C6.84009 7.26 13.3501 0.75 21.3901 0.75C29.4201 0.75 35.9301 7.26 35.9301 15.29V19.37' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M25.99 34.9699L33.77 33.8999' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M25.0808 32.0015L23.8362 33.8999L25.7346 35.1445L26.9792 33.2462L25.0808 32.0015Z' fill='black' stroke='black' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_71_89'%3E%3Crect width='42.77' height='35.72' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
}
.mp-main {
  /* border: 1px solid #83b14e; */
  /* padding-bottom:35px; */
}
.mp-minfo {
  height: 110px;
  overflow: hidden;
  /* background: #fcfcfc; */
  border-bottom: 1px solid #ccc;
}
.mp-minfo > div {
  float: left;
  background: url(/img/sub/mb-one-line.png) left center no-repeat;
}
.mp-minfo > div:first-child {
  background: none;
}
.mp-one {
  width: 555px;
  margin: 20px 30px 0px 0;
}
.mp-one h2 {
  font-size: 30px;
  letter-spacing: -0.025em;
  color: #555;
  line-height: 40px;
  margin: 0px 0px 10px 0px;
  font-weight: normal;
}
.mp-one h2 span {
  font-weight: 500;
  color: #2f2f2f;
}
.mp-one > p {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.03em;
  color: #888;
  line-height: 20px;
}
.mp-one > p > span {
  color: #005ba0;
}
.bank-num {
  margin-top: 20px;
  width: 180px;
  text-align: center;
  padding: 5px 0px;
}
.bank-num > p {
  line-height: 20px;
  font-size: 18px;
  color: #e7586c;
  letter-spacing: -0.025em;
  text-align: center;
  margin-top: 10px;
}
.bank-num > p:first-child {
  line-height: 30px;
  margin: 0px 20px;
  padding: 0px 5px;
}
.bank-change {
  line-height: 70px;
  margin-top: 20px;
}
.bank-num > span {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.025em;
  color: #e7586c;
  display: inline-block;
  line-height: 60px;
}
.bank-change > a {
  line-height: 40px;
  height: 40px;
  width: 100px;
  background: #e7586c;
  color: #fff;
  font-size: 16px;
  font-weight: 500;
  display: inline-block;
  text-align: center;
  margin-left: 45px;
}
.bank-change > a:hover,
.bank-change > a:focus {
  background-color:#e90021;
}
.mp-btn {
  padding-bottom:32px;
  border-bottom:1px solid #ccc;
}
.mp-btn ul {
  overflow:hidden;
}
.mp-btn > ul > li {
  background: url(/img/sub/mp-ico-line.png) no-repeat;
  float: left;
  margin-top: 42px;
}
.mp-btn > ul > li:first-child {
  background: none;
}
.mp-btn a {
  display: inline-block;
  width: 140px;
  text-align: center;
  padding-top: 50px;
  font-size: 13px;
  letter-spacing: -0.025em;
  color: #555;
}
.mp-btn a.btn01 {
  background: url(/img/sub/mp-ico01.png) center top no-repeat;
}
.mp-btn a.btn02 {
  background: url(/img/sub/mp-ico02.png) center top no-repeat;
}
.mp-btn a.btn03 {
  background: url(/img/sub/mp-ico03.png) center top no-repeat;
}
.mp-btn a.btn04 {
  background: url(/img/sub/mp-ico04.png) center top no-repeat;
}
.mp-btn a.btn05 {
  background: url(/img/sub/mp-ico05.png) center top no-repeat;
}
.mp-btn a.btn06 {
  background: url(/img/sub/mp-ico06.png) center top no-repeat;
}
.mp-btn a.btn07 {
  background: url(/img/sub/mp-ico07.png) center top no-repeat;
}
.mp-btn a.btn01:hover {
  background: url(/img/sub/mp-ico01-ov.png) center top no-repeat;
}
.mp-btn a.btn02:hover {
  background: url(/img/sub/mp-ico02-ov.png) center top no-repeat;
}
.mp-btn a.btn03:hover {
  background: url(/img/sub/mp-ico03-ov.png) center top no-repeat;
}
.mp-btn a.btn04:hover {
  background: url(/img/sub/mp-ico04-ov.png) center top no-repeat;
}
.mp-btn a.btn05:hover {
  background: url(/img/sub/mp-ico05-ov.png) center top no-repeat;
}
.mp-btn a.btn06:hover {
  background: url(/img/sub/mp-ico06-ov.png) center top no-repeat;
}
.mp-btn a.btn07:hover {
  background: url(/img/sub/mp-ico07-ov.png) center top no-repeat;
}
/* e:2024-07-25 고객센터/마이페이지 수정 */
.txt-p {
  line-height: 22px;
  color: #888888;
  font-size: 14px;
  letter-spacing: -0.025em;
}

.mp-ico {
  overflow: hidden;
  margin-left: 24px;
}
.mp-ico > .mp-work {
  float: left;
  background: url(/img/sub/mp-oreder-arr.png) no-repeat 5px 20px;
  padding-left: 19px;
  width: 82px;
}
.mp-ico > .mp-work:first-child {
  background: none;
  padding-left: 0px;
}
.mp-ico > .mp-work > p {
  text-align: center;
  line-height: 18px;
  font-size: 13px;
  color: #888;
  letter-spacing: -0.025em;
}
.mp-ico > .mp-work > p.name {
  color: #555;
  font-weight: 500;
}
.mp-ico > .mp-work > p.kwork {
  font-weight: 500;
}
.mp-ico > .mp-work > p.kwork:hover {
  color: #ef562d;
}
.mp-ico > .work01 > p.kwork {
  background: url(/img/sub/mp-order-ico01.png) no-repeat center top;
  padding-top: 66px;
}
.mp-ico > .work02 > p.kwork {
  background: url(/img/sub/mp-order-ico02.png) no-repeat center top;
  padding-top: 66px;
}
.mp-ico > .work03 > p.kwork {
  background: url(/img/sub/mp-order-ico03.png) no-repeat center top;
  padding-top: 66px;
}
.mp-ico > .work04 > p.kwork {
  background: url(/img/sub/mp-order-ico04.png) no-repeat center top;
  padding-top: 66px;
}
.mp-ico > .work05 > p.kwork {
  background: url(/img/sub/mp-order-ico05.png) no-repeat center top;
  padding-top: 66px;
}
.mp-ico > .work06 > p.kwork {
  background: url(/img/sub/mp-order-ico06.png) no-repeat center top;
  padding-top: 66px;
}
.mp-ico > .work07 > p.kwork {
  background: url(/img/sub/mp-order-ico07.png) no-repeat center top;
  padding-top: 66px;
}
.mp-ico > .work08 > p.kwork {
  background: url(/img/sub/mp-order-ico08.png) no-repeat center top;
  padding-top: 66px;
}
.mp-ico > .work01 > p.kwork:hover {
  background: url(/img/sub/mp-order-ico01-ov.png) no-repeat center top;
}
.mp-ico > .work02 > p.kwork:hover {
  background: url(/img/sub/mp-order-ico02-ov.png) no-repeat center top;
}
.mp-ico > .work03 > p.kwork:hover {
  background: url(/img/sub/mp-order-ico03-ov.png) no-repeat center top;
}
.mp-ico > .work04 > p.kwork:hover {
  background: url(/img/sub/mp-order-ico04-ov.png) no-repeat center top;
}
.mp-ico > .work05 > p.kwork:hover {
  background: url(/img/sub/mp-order-ico05-ov.png) no-repeat center top;
}
.mp-ico > .work06 > p.kwork:hover {
  background: url(/img/sub/mp-order-ico06-ov.png) no-repeat center top;
}
.mp-ico > .work07 > p.kwork:hover {
  background: url(/img/sub/mp-order-ico07-ov.png) no-repeat center top;
}
.mp-ico > .work08 > p.kwork:hover {
  background: url(/img/sub/mp-order-ico08-ov.png) no-repeat center top;
}

.mptbl input[type="text"],
.mptbl input[type="password"] {
  padding:0 10px;
  line-height: 34px;
  height: 34px;
}

.order-f-tx {
}
.order-f-tx > ul {
}
.order-f-tx > ul > li {
  font-size: 14px;
  font-weight: 500;
  color: #555;
  letter-spacing: -0.025em;
  line-height: 20px;
  margin-top: 20px;
}
.order-f-tx > ul > li > ul {
  margin-top: 10px;
}
.order-f-tx > ul > li > ul > li {
  font-weight: normal;
  line-height: 21px;
}
.order-f-tx > ul > li > ul > li > a {
  border-bottom: 1px solid #e7586c;
  color: #e7586c;
}
.of-tx > ul > li > ul > li {
  font-size: 13px;
}
.of-tx > ul > li > ul > li > a.filed {
  color: #295ba0;
  border-bottom: 1px solid #295ba0;
  background: url(/img/sub/filed.png) no-repeat right center;
  padding-right: 15px;
}

.event-top {
  margin: 20px 0px 30px;
}
.event-title {
  margin: 0px 0px 20px;
  height: 55px;
  background: url(/img/sub/event-medal.png) no-repeat left center;
  padding-left: 41px;
}
.event-title p {
  line-height: 30px;
  color: #2f2f2f;
  font-weight: 500;
  font-size: 20px;
}
.event-title p:first-child {
  line-height: 20px;
  font-size: 15px;
  color: #e7586c;
  margin-bottom: 5px;
}

/* 오른쪽 플로트 메뉴 */

.fix-area {
  position: fixed;
  top: 0;
  right: 0;
  width: 167px;
  height: 100vh;
  z-index: 102;
  background: #fff;
  border-left: 1px solid #ddd;
  box-sizing: border-box;
  box-shadow: -4px -1px 8px 1px rgba(0, 0, 0, 0.07);
  -webkit-box-shadow: -4px -1px 8px 1px rgba(0, 0, 0, 0.07);
  -moz-box-shadow: -4px -1px 8px 1px rgba(0, 0, 0, 0.07);
  transition: all 0.7s;
}
.fix-area.active {
  right: -167px;
}
.fix-area .billWrap {
  position: relative;
  width: 100%;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  z-index: 99999;
}
.fix-area ul {
  position: relative;
  margin-bottom: 0px;
}

.fix-area ul:first-child {
  margin-top: 0px;
}
.fix-area ul li:first-child {
  background: #f5f7fa;
  line-height: 50px;
  height: 50px;
  color: #2f2f2f;
  text-align: center;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.05em;
  padding: 0px 10px;
}
.fix-area ul:first-child > li:first-child {
  color: #ef562d;
}
.fix-area ul li {
  padding: 10px;
  overflow: hidden;
  letter-spacing: -0.05em;
  font-size: 12px;
  background: #fff;
}
.fix-area ul li p {
  overflow: hidden;
  color: #555555;
  margin-top: 5px;
  line-height: 15px;
}
.fix-area ul li > p:first-child {
  margin-top: 0px;
}
.fix-area ul li span {
  float: right;
  letter-spacing: -0.025em;
}
.fix-area ul li span:first-child {
  float: left;
}
.fix-area ul li input {
  width: 70px;
  text-align: right;
  border: none;
}
.fix-area ul li input.fnl {
  width: 80px;
  text-align: right;
  border: none;
  color: #f53651;
  font-size: 14px;
  font-weight: 500;
}
.fix-area ul li p.subj {
  font-weight: 500;
  color: #2f2f2f;
}
.fix-area ul li p.cont {
  margin-top: 10px !important;
  width: 140px;
  text-align: right;
}
.fix-area ul li p.cont1 {
  margin-top: 10px !important;
  width: 140px;
  text-align: left;
}
.fix-area ul li p.cont em {
  color: #ff6c00;
}
.fix-area ul li p.cont1 em {
  color: #ff6c00;
}
.fix-area ul li p.porder {
  text-align: right;
  color: #555555;
  font-size: 14px;
  font-weight: 500;
}
.fix-area ul li p.psum {
  text-align: right;
  color: #555555;
  font-size: 14px;
  font-weight: 500;
}
.fix-area ul li p.psum span {
  position: relative;
  top: -2px;
  color: #f53651;
  float: none;
}
.fix-area ul li p.cont span.fs-num {
  color: #e7586c;
}

.fix-area .billWrap > a {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.025em;
  display: inline-block;
  text-align: center;
  margin: 7px auto;
  width: 127px;
  padding: 6px 0;
  border-radius: 4px;
  box-sizing: border-box;
  transition: all 0.2s;
}

.fix-area .btnWrap {
  position: relative;
}

.fix-area .billWrap .r-btn01,
.fix-area .billWrap .r-btn02,
.fix-area .billWrap .r-btn03 {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.025em;
  display: inline-block;
  text-align: center;
  margin: 0 auto;
  width: 127px;
  padding: 6px 0;
  border-radius: 4px;
  box-sizing: border-box;
  margin-top: 10px;
}

.fix-area .r-btn01,
.fix-area .r-btn02 {
  color: #000000;
  background: #fff;
  border: 1px solid #000000;
}

.fix-area .r-btn01:hover,
.fix-area .r-btn02:hover {
  background: #000000;
  color: #fff;
  border: 1px solid #000000;
}

.fix-area .r-btn03 {
  color: #fff;
  background: #000000;
  border: 1px solid #333;
}

.fix-area .r-btn03:hover {
  color: #fff;
  background: #0f68ed;
  border: 1px solid #0f68ed;
}

.fix-area .billWrap .r-btn02,
.fix-area .billWrap .r-btn03 {
  margin-top: 7px;
}

/* 230330 fix-area added */
.fix-area .price_list li:last-child {
  background: #f5f7fa;
}
.fix-area .price_list li:last-child input {
  background: #f5f7fa;
}
.fix-area .price_list li input:focus {
  border: none !important;
  outline: 0 !important;
  box-shadow: none !important;
}

.fix-area .closeRMBtn {
  position: absolute;
  top: 78px;
  left: -40px;
  width: 40px;
  height: 50px;
  background: #000000;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  border-radius: 5px 0 0 5px;
  transition: all 0.2s;
}

.fix-area .closeRMBtn:hover {
  background: #0f68ed;
}

.fix-area .closeRMBtn img {
  transition: all 0.2s;
}
.fix-area .closeRMBtn.active {
  background: #0f68ed;
}
.fix-area .closeRMBtn.active img {
  transform: rotate(-180deg);
}

.fix-area .closeRMBtn span {
  font-size: 0;
  text-indent: -100000px;
}

.fix-area2 {
  position: fixed;
  width: 162px;
  right: 50%;
  margin-right: 615px;
  top: 255px;
  z-index: 99;
}
.fix-area2 > ul {
  border: 1px solid #ccc;
  margin-top: 25px;
}
.fix-area2 > ul:first-child {
  margin-top: 0px;
}
.fix-area2 > ul > li:first-child {
  background: #f5f7fa;
  line-height: 50px;
  height: 50px;
  color: #2f2f2f;
  text-align: center;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.05em;
  border-top: none;
  padding: 0px 10px;
}
.fix-area2 > ul:first-child > li:first-child {
  color: #ef562d;
}
.fix-area2 > ul > li {
  padding: 10px;
  overflow: hidden;
  letter-spacing: -0.05em;
  font-size: 12px;
  border-top: 1px solid #ccc;
  background: #fff;
}
.fix-area2 > ul > li > p {
  overflow: hidden;
  color: #555555;
  margin-top: 5px;
  line-height: 15px;
}
.fix-area2 > ul > li > p:first-child {
  margin-top: 0px;
}
.fix-area2 > ul > li span {
  float: right;
  letter-spacing: -0.025em;
}
.fix-area2 > ul > li span:first-child {
  float: left;
}
.fix-area2 > a {
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.025em;
  display: inline-block;
  text-align: center;
  margin-top: 3px;
  width: 162px;
  line-height: 40px;
}

.fix-area3 {
  position: absolute;
  width: 162px;
  right: 50%;
  margin-right: 609px;
  top: 3px;
  z-index: 99;
}

/* 170929 추가 */
.hggopt {
  display: none;
}

/* 180130 추가 */
.after_div {
  display: none;
}

.ovf {
  overflow: hidden;
}
.fl {
  float: left;
}

.Item_Area_Title {
  margin-top: 30px;
  margin-bottom: 20px;
  line-height: 40px;
  font-size: 22px;
  color: #2f2f2f;
  font-weight: 500;
  letter-spacing: -0.025em;
}
.Item_Area_Title span {
  font-size: 16px;
  color: #888;
  margin-left: 5px;
  font-weight: normal;
}
.Sub_Content {
  clear: both;
  display: block;
}
.Sub_Content_Box {
  clear: both;
  display: block;
  border: 1px solid #dadada;
}
.Sub_Content_Box table {
  border-collapse: collapse;
}
.Sub_Content_Box table caption {
  display: none;
}
.Sub_Content_Box table thead {
  display: none;
  font-weight: normal;
}
.Sub_Content_Box table tbody {
}
.Sub_Content_Box table tbody th {
  font-weight: normal;
}
.Sub_Content_Box td {
  text-align: center;
  padding: 20px;
}
.Sub_Content_Box td p:first-child {
  margin-bottom: 20px;
}

#POSTit_Goods_Item {
  padding: 0px 20px 20px;
  border: 1px solid #dadada;
}
.POSTit_Goods_Item {
}
.POSTit_Goods_Item .Goods_box {
  float: left;
  width: 33%;
} /* width:330px; */
.POSTit_Goods_Item .Goods_box {
  width: 242px;
  margin-top: 20px;
  margin-right: 60px;
} /* margin-right:15px; 오른쪽 */
.POSTit_Goods_Item .Goods_box:nth-of-type(4n) {
  margin-right: 0px;
}
/* 이미지 */
.POSTit_Goods_Item .Goods_Thum {
  width: 240px;
  height: 168px;
  border: 1px solid #dadada;
  margin-bottom: 5px;
  text-align: center;
  overflow: hidden;
}
.POSTit_Goods_Item .Goods_Thum img {
  width: 238px;
}
/* 상품명 */
.POSTit_Goods_Item .Goods_Title {
  margin-top: 10px;
}
.POSTit_Goods_Item .Goods_Title input {
  cursor: pointer;
}
.POSTit_Goods_Item .Goods_Title label {
  cursor: pointer;
  font-weight: 500;
}
.POSTit_Goods_Item .Goods_Title span {
}
.POSTit_Goods_Item .Goods_Title span img {
  cursor: pointer;
}
/* 사이즈 */
.POSTit_Goods_Item .Goods_Size {
  margin-left: 15px;
}
.POSTit_Goods_Item .Goods_Size span {
  display: block;
  letter-spacing: -1px;
  line-height: 30px;
}
#POSTit:after {
  content: "";
  clear: both;
  display: block;
}

/* 인쇄노트_상품영역 */
#Inote_Goods {
}
/* 타이틀 */
.Inote_Goods_Title {
  margin-bottom: 5px;
}
/* 상품리스트 영역 */
.Inote_Goods {
  clear: both;
  display: block;
  border: 1px solid #dadada;
}
/* 설명문구 */
.IFG_info {
} /* margin-bottom:5px; */
/* 상품리스트. 썸네일 */
.Goods_List {
}
.Goods_box {
  float: left;
  width: 378px;
  margin-top: 10px;
  margin-right: 10px;
} /*  float:left;  */
.Goods_box ul {
  margin-left: 10px;
}
.Goods_box ul li {
  line-height: 26px;
}
.Goods_thum {
  margin-bottom: 5px;
  border: 1px solid #dadada;
}
.Goods_thum img {
  width: 100%;
}
.Goods_name {
  text-align: left;
  margin-top: 10px;
} /* 상품명 */
.Goods_size {
  margin-top: 4px;
  margin-bottom: 4px;
  display: block;
  line-height: 26px;
} /* 사이즈  */
.Goods_size select {
}
.Goods_paperOUT {
} /*  표지재질   */
.Goods_paperIN1 {
} /*  내지재질  */
.Goods_paperIN2 {
} /*  내지형태  */
.Goods_bind {
} /* 제본법 */
.Goods_textinfo {
} /*  기타 설명  */
.Goods_price {
} /*  가격  */
.Goods_down {
  margin-top: 10px;
} /* 파일다운로드   */

/*  인쇄노트_기성품  */
#Inote_Fix {
  margin-bottom: 20px;
}
/* 기본선택항목 */
#Inote_Fix .Item_Area {
}
#Inote_Fix .Item_Area .Item_Area_Contents {
}
#Inote_Fix .Item_Area .Item_Area_Table {
}
#Inote_Fix .Item_Area .Item_Area_Table table {
}
#Inote_Fix .Item_Area .Item_Area_Table tr {
  height: 25px;
}
/* 상품리스트 */
.Inote_Fix_Goods {
  padding: 7px;
  height: 690px;
}

/*  인쇄노트_제공디자인  */
#Inote_Choice {
  margin-bottom: 20px;
}
/* 기본선택항목 */
#Inote_Choice .Item_Area {
}
#Inote_Choice .Item_Area .Item_Area_Contents {
}
#Inote_Choice .Item_Area .Item_Area_Table {
}
#Inote_Choice .Item_Area .Item_Area_Table table {
}
#Inote_Choice .Item_Area .Item_Area_Table tr {
  height: 25px;
}
/* 상품결과물 */
.Goods_ThumOverall {
}
.Goods_ThumOverall ul {
}
.Goods_ThumOverall ul li {
  float: left;
  text-align: center;
  width: 150px;
}
.Goods_ThumOverall ul span {
  display: block;
}
.Goods_ThumOverall ul span img {
  height: 80px;
}
/* 표지상품 */
.Inote_Choice_Goods1 {
  padding: 20px;
  margin-bottom: 20px;
} /*  height:510px; */
/* 내지상품 */
.Inote_Choice_Goods2 {
  padding: 20px;
  margin-bottom: 20px;
} /*  height:315px; */

/*  인쇄노트_셀프디자인  */
#Inote_Design {
  margin-bottom: 20px;
}
/* 기본선택항목 */
#Inote_Design .Item_Area {
}
#Inote_Design .Item_Area .Item_Area_Contents {
}
#Inote_Design .Item_Area .Item_Area_Table {
}
#Inote_Design .Item_Area .Item_Area_Table table {
}
#Inote_Design .Item_Area .Item_Area_Table tr {
  height: 25px;
}

/* 1021 캘린더 상품 추가*/
.prd_list {
  margin-top: 30px;
}
.prd_list > ul {
  overflow: hidden;
}
.prd_list > ul > li {
  float: left;
  width: 280px;
  margin-right: 26px;
}
.prd_list > ul > li:nth-child(4n) {
  margin-right: 0px;
}

/* s:상품리스트 이미지 크기 /상품리스트 상단이미지 / 상품리스트 pagination 추가 */
.prd_list.type2 > ul {display:flex;gap: 40px 15px;flex-wrap:wrap;}
.prd_list.type2 > ul > li {width: 390px;float:none;margin:0;padding:0;}
.prd_top {display:flex;align-items:center;position:relative;height: 300px;overflow: hidden; letter-spacing:-0.3px;}
.prd_top img {width:100%;height:100%;object-fit:cover;object-position:center;}
.prd_top_text {width:1px; height:1px; overflow:hidden; opacity:0;}
/*  상단 텍스트 스타일
.prd_top_text {position:absolute;left:0;top:50%;width:100%;padding: 0 56px;box-sizing:border-box;transform:translateY(-50%);}
.prd_top p {font-size:25px;font-weight:500;color: #555555;mix-blend-mode: multiply;}
.prd_top strong {font-size:48px;font-weight:900;color:#222;mix-blend-mode: multiply;}
.prd_top ul {margin-top:20px;display:flex;gap:8px;}
.prd_top ul li {padding:8px 15px; background-color:#6cadf3;font-size:18px;font-weight:500;color:#fff;border-radius:999px;}
.prd_top a:hover {color:#000;} */
.prd_list .img img {width:100%;height:100%;object-fit:cover;object-position:center;margin-bottom:25px;}
.prd_list .content {display:flex;flex-flow:column;justify-content: center;letter-spacing:-0.5px;gap: 15px;align-items: center;}
.prd_list .content .prd_title {display:flex; flex-flow:column; justify-content:center; gap:4px;}
.prd_list .content .prd_title strong {font-size:20px; text-align:center; font-weight:600; color:#222222;}
.prd_list .content .prd_title p {font-size:17px; color:#666666; font-weight:500; text-align:center;}
.prd_list .content > strong {font-size:22px; color:#111111; font-weight:800; text-align:center; line-height:100%; display:flex; justify-content:center; align-items:center;gap:10px;}
.prd_list .content >  strong span  {font-size:14px; line-height:100%; font-weight:400; color:#838383; margin-top:3px;}
.prd_list .content .point {display:flex;justify-content:center;gap: 7px;}
.prd_list .content .point li {border:1px solid #000; border-radius:999px; padding:5px 10px; font-size:12px; font-weight:500;}
.prd_list .content .point li:nth-child(1) {color:#666; border-color:#888;}
.prd_list .content .point li:nth-child(2) {color:#1DAB10; border-color:#1DAB10;}
.prd_list .content .point li:nth-child(3) {color:#2392DD; border-color:#2392DD;}
.prd_list .content .prd_spec {display: table;width:fit-content;}
.prd_list .content .prd_spec dl {display: table-row;}
.prd_list .content .prd_spec dt,.prd_spec dd { display: table-cell; padding: 3px 7px; font-size:14px;}
.prd_list .content .prd_spec dt {white-space: nowrap; width: 1px; font-weight:700; color:#444;}
.prd_list .content .prd_spec dd {color:#838383;}
.prd_list .pagination {margin-top:20px;text-align:center;}
.prd_list .pagination .pg_page,
.prd_list .pagination .pg_current {text-align:center;box-sizing:border-box;}
/* e:상품리스트 이미지 크기 /상품리스트 상단이미지 / 상품리스트 pagination 추가 */

/* 20200109 크리팩 리스트 */
.prd_visual {
  position: relative;
  width: 1200px;
  height: 250px;
}
.prd_visual .title {
  position: absolute;
  top: 50%;
  left: 50%;
  display: inline-block;
  vertical-align: middle;
  font-size: 0;
  transform: translate(-50%, -50%);
}
.prd_visual.crepack .title {
  -webkit-animation: move 3s;
  -webkit-animation-fill-mode: forwards;
  animation: move 3s;
  animation-fill-mode: forwards;
}
@keyframes move {
  from {
    top: 0px;
  }
  to {
    top: 166px;
  }
}

/* 공통 탭 */
.tab_menu {
  width: 1200px;
  margin: 0 auto;
}
.tab_menu ul {
  width: 100%;
  text-align: center;
  font-size: 0;
  border-top: 1px solid #ddd;
  display: flex;
}
.tab_menu ul:after {
  content: "";
  display: block;
  clear: both;
}
.tab_menu ul li {
  /*float:left; width:299px;*/
  width: 100%;
  height: 40px;
  display: inline-block;
  line-height: 40px;
  vertical-align: top;
  text-align: center;
  border-left: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
}
/*.tab_menu ul li:nth-child(4n) {width: 298px; border-right:1px solid #ddd;}*/
.tab_menu ul li:last-child {
  border-right: 1px solid #ddd;
}
.tab_menu ul li a {
  position: relative;
  width: 100%;
  height: 100%;
  display: block;
  font-weight: 500;
  /* font-family: "Malgun Gothic"; */
  color: #000000;
  font-size: 15px;
}

/* 2024-06-11 phj */
.tab_menu ul li a:hover,
.tab_menu ul li.active a {
  color: #fff;
  background: #000000;
}
/*특정 이슈 있을 때 */
.tab_menu.crepack {
}
/*
.tab_menu ul li {float:left; width:300px; height:40px; display:inline-block; line-height: 40px; vertical-align: top; text-align: center; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; border-left:1px solid #ddd; border-bottom:1px solid #ddd;}
.tab_menu ul li:nth-child(4n) {border-right:1px solid #ddd;}
.tab_menu ul li a {position:relative; width:300px; height:40px; display:block; font-family:'Malgun Gothic'; color:#444; font-size:12px;} 
.tab_menu ul li a:hover:after {content: ""; position: absolute; top:0; left:-1px; right:0; bottom:0; width:301px; height:40px; background: #4a82cc;}
.tab_menu ul li a:hover .txt {position: absolute; top: 50%; left: 50%; color:#fff; text-align: center; vertical-align: middle; transform: translate(-50%, -50%); z-index:1;}
*/

/* 리스트 */
.prd_list.crepack {
  margin-top: 60px;
}
.prd_list.crepack > ul > li {
  width: 263px;
  margin: 0 50px 30px 0;
}
.prd_list.crepack > ul > li:nth-child(3n) {
  margin-right: 48px;
}
.prd_list.crepack > ul > li:nth-child(4n) {
  margin-right: 0;
}
.prd_list.crepack > ul > li a {
  display: block;
}
/*.prd_list.crepack > ul > li a:hover {color:#000;}*/
.prd_list.crepack > ul > li img {
  width: 263px;
  height: 263px;
  border: 1px solid #ddd;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.prd_list.crepack > ul > li a:hover img {
  border: 1px solid #98c4da;
}
.prd_list.crepack > ul > li .subject {
  position: relative;
  margin: 10px 8px;
  padding-left: 12px;
  font-family: dotum;
  font-size: 12px;
  text-align: left;
  line-height: 1.3; /*background: url(/images/crepack/bul_cirblack.gif) no-repeat 0 4px;*/
}
.prd_list.crepack > ul > li .subject:before {
  content: "";
  position: absolute;
  left: 0;
  top: 5px;
  width: 4px;
  height: 4px;
  border-radius: 4px;
  background: #000;
  vertical-align: top;
}
.prd_list.crepack > ul > li a:hover .subject {
  text-decoration: underline;
}
h2 .caution {
  font-size: 14px;
  font-weight: normal;
  padding-left: 10px;
}
h2 .caution span {
  color: red;
}
h2 .caution a {
  text-decoration: underline;
  color: #2684e4;
}

/*상품상세*/
.pro_info_new_wrap {
  font-family: "Noto Sans KR", sans-serif;
  font-size: 15px;
  color: #666;
  text-align: center;
}
.pro_info_new_wrap .pro_newtit {
  font-size: 24px;
  font-weight: 600;
  padding: 0 0 10px 0;
  display: block;
}
.pro_info_blank {
  height: 50px;
}
.pro_info_blank20 {
  height: 20px;
}
.pro_info_new_wrap table {
  border-top: 2px solid #4a8ef5;
  border-bottom: 1px solid #ccc;
  width: 70%;
  margin: 0 auto;
}
.pro_info_new_wrap table th,
.pro_info_new_wrap table td {
  padding: 10px 0;
  border-top: 1px solid #dfdfdf;
  font-size: 14px;
}
.pro_info_new_wrap table th {
  background: #f7f7f7;
}
.pro_info_new_wrap table td {
  font-weight: 300;
  color: #777;
}
.pro_info_new_wrap table td:nth-child(1) {
}
.pro_new_info_detail01 {
  overflow: hidden;
  width: 70%;
  margin: 0 auto;
  padding: 10px 0 0 0;
}
.pro_new_info_detail01 img {
  float: left;
  width: 330px;
}
.pro_new_info_detail01 .pro_new_info_detail01_txt {
  float: left;
  text-align: left;
  margin: 0 0 0 25px;
  width: 470px;
  box-sizing: border-box;
}
.pro_new_info_detail01 .pro_new_info_detail01_txt h2 {
}
.pro_new_info_detail01 .pro_new_info_detail01_txt p {
  margin: 5px 0 0 0;
  font-size: 14px;
  font-weight: 300;
}
.pro_contxt {
  margin: 5px 0 0 0;
  font-size: 14px;
  font-weight: 300;
}
.pro_f_red {
  color: #fe1c71;
  font-weight: 600;
}
.pro_f_bl {
  color: #000;
  font-weight: 500;
}
.pro_img50p ul {
  clear: both;
  width: 1040px;
  overflow: hidden;
  margin: 0 auto;
  padding: 30px 0 0 0;
}
.pro_img50p ul li {
  box-sizing: border-box;
  width: 50%;
  float: left;
  padding: 0 0 50px 0;
}
.pro_img50p ul li {
}
.pro_img50p ul li span {
  display: block;
  padding: 10px 0 0 0;
}
.pro_delivery_check {
  width: 73.5%;
  clear: both;
  text-align: left;
  margin: 0 auto;
  border-bottom: 1px dashed #d694ff;
  border-top: 1px dashed #d694ff;
  padding: 20px 0 20px 150px;
  display: inline-block;
  background: url(/images/goods/pro_check_box.png) no-repeat 0 0 #fff;
}
.pro_delivery_check span {
  color: red;
}
.pro_open {
  border-bottom: 1px dashed #d694ff;
  border-top: 1px dashed #d694ff;
  padding: 10px 0;
  display: inline-block;
}

@media (min-width: 180px) and (max-width: 600px) {
  .pro_info_new_wrap .pro_newtit {
    color: red;
    font-size: 16px;
    font-weight: 600;
    padding: 0 0 6px 0;
    display: block;
  }
}

/* 230405 sub 주문페이지 상세설명 추가*/
.pc_detailWrap {
  position: relative;
  width: 1140px;
  overflow: hidden;
  margin: 0 auto;
}

.pc_detailWrap .dCon {
  position: relative;
}

.pc_detailWrap .dCon .titleBox {
  position: relative;
}

.pc_detailWrap .dCon .titleBox .titleNum {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 39px;
  height: 39px;
  border-radius: 25rem;
  background: #333;
  margin: 0 auto 30px;
}

.pc_detailWrap .dCon .titleBox .titleNum span {
  position: relative;
  top: -1px;
  font-size: 16px;
  color: #fff;
  font-weight: 900;
}

.pc_detailWrap .dCon .titleBox h3 {
  position: relative;
  font-size: 30px;
  font-weight: 400;
  color: #333;
  line-height: 1;
  text-align: center;
  margin: 0;
}

.pc_detailWrap .dCon .titleBox p {
  position: relative;
  font-size: 15px;
  font-weight: 400;
  color: #777;
  margin-top: 20px;
  line-height: 1.6;
  text-align: center;
}
.pc_detailWrap .dCon .onePicBox {
  position: relative;
  display: flex;
  justify-content: center;
  box-sizing: border-box;
}
.pc_detailWrap .dCon .twoPicBox {
  position: relative;
  display: flex;
  justify-content: space-between;
  box-sizing: border-box;
}

.pc_detailWrap .dCon .twoPicBox img {
  width:100%;
}

.pc_detailWrap .dCon .threePicBox,
.pc_detailWrap .dCon .fourPicBox {
  position: relative;
  display: flex;
  box-sizing: border-box;
  gap: 15px;
  justify-content: center;
}
.pc_detailWrap .dCon .fivePicBox {
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    text-align:center;
    gap:25px;
}
.pc_detailWrap .dCon .fivePicBox p {
    font-size:20px;
}
.pc_detailWrap .dCon .threePicBox img,
.pc_detailWrap .dCon .fourPicBox img,
.pc_detailWrap .dCon .fivePicBox img {
  width:100%;
}

.pc_detailWrap .dCon .st2 .picExp {
  padding-top: 20px;
  text-align: center;
}

.pc_detailWrap .dCon .st2 .picExp strong{
  display:block;
}

.pc_detailWrap .dCon .oneTableBox {
  position: relative;
  display: flex;
  justify-content: center;
}

.pc_detailWrap .dCon .oneTableBox p {
  font-size: 15px;
  font-weight: 500;
  color: #333;
  text-align: center;
  padding-bottom: 12px;
  box-sizing: border-box;
}

.pc_detailWrap .dCon .oneTableBox table {
  position: relative;
  width: 532px;
  border-collapse: collapse;
  border-top: 1px solid #000;
}

.pc_detailWrap .dCon .oneTableBox table thead {
  border-bottom: 1px solid #e5e5e5;
}

.pc_detailWrap .dCon .oneTableBox table th,
.pc_detailWrap .dCon .oneTableBox table td {
  border-right: 1px solid #e8eaed;
}

.pc_detailWrap .dCon .oneTableBox table th:last-child,
.pc_detailWrap .dCon .oneTableBox table td:last-child {
  border-right: none;
}

.pc_detailWrap .dCon .oneTableBox table th {
  font-size: 13px;
  font-weight: 500;
  color: #777;
  height: 30px;
}

.pc_detailWrap .dCon .oneTableBox table td {
  font-size: 13px;
  font-weight: 300;
  color: #777;
  text-align: center;
  background: #f4f7fa;
  padding: 3px 0;
  box-sizing: border-box;
}

.pc_detailWrap .dCon .oneTableBox table tr:first-child td {
  padding-top: 8px;
}

.pc_detailWrap .dCon .oneTableBox table tr:last-child td {
  padding-bottom: 8px;
}

.pc_detailWrap .dCon .twoTableBox {
  position: relative;
  display: flex;
  justify-content: space-between;
}

.pc_detailWrap .dCon .twoTableBox p {
  font-size: 15px;
  font-weight: 500;
  color: #333;
  text-align: center;
  padding-bottom: 12px;
  box-sizing: border-box;
}

.pc_detailWrap .dCon .twoTableBox table {
  position: relative;
  width: 532px;
  border-collapse: collapse;
  border-top: 1px solid #000;
}

.pc_detailWrap .dCon .twoTableBox table thead {
  border-bottom: 1px solid #e5e5e5;
}

.pc_detailWrap .dCon .twoTableBox table th,
.pc_detailWrap .dCon .twoTableBox table td {
  border-right: 1px solid #e8eaed;
}

.pc_detailWrap .dCon .twoTableBox table th:last-child,
.pc_detailWrap .dCon .twoTableBox table td:last-child {
  border-right: none;
}

.pc_detailWrap .dCon .twoTableBox table th {
  font-size: 13px;
  font-weight: 500;
  color: #777;
  height: 30px;
}

.pc_detailWrap .dCon .twoTableBox table td {
  font-size: 13px;
  font-weight: 300;
  color: #777;
  text-align: center;
  background: #f4f7fa;
  padding: 3px 0;
  box-sizing: border-box;
}

.pc_detailWrap .dCon .twoTableBox table tr:first-child td {
  padding-top: 8px;
}

.pc_detailWrap .dCon .twoTableBox table tr:last-child td {
  padding-bottom: 8px;
}

.pc_detailWrap .dCon .grayBox {
  position: relative;
  background: #f6f7fb;
  padding: 30px 30px;
  box-sizing: border-box;
}

.pc_detailWrap .dCon .grayBox .center {
  position: relative;
  display: flex;
  justify-content: center;
}

.pc_detailWrap .dCon .grayBox .center .picWrap:first-child {
  margin-right: 27px;
}

.pc_detailWrap .dCon .grayBox .center .picWrap .picExp {
  font-size: 14px;
  font-weight: 400;
  color: #333;
  text-align: center;
  padding: 5px 0 30px;
}

.pc_detailWrap .dCon .grayBox > p {
  position: relative;
  text-align: center;
  font-size: 15px;
  font-weight: 400;
  color: #333;
  line-height: 1.8;
}

.pc_detailWrap .commonDCon {
  position: relative;
}

.pc_detailWrap .commonDCon .titleBox {
  position: relative;
}

.pc_detailWrap .commonDCon .titleBox h3 {
  position: relative;
  display: flex;
  justify-content: center;
  margin: 0;
}

.pc_detailWrap .commonDCon .titleBox h3 span {
  position: relative;
  text-align: center;
  display: inline-block;
  font-size: 30px;
  font-weight: 400;
  color: #333;
  line-height: 1;
}

.pc_detailWrap .commonDCon .titleBox h3 span span {
  position: absolute;
  bottom: -13px;
  left: 0;
  width: 100%;
  height: 1px;
  background: #000;
}

.pc_detailWrap .commonDCon .titleBox p {
  font-size: 15px;
  font-weight: 400;
  color: #333;
  text-align: center;
  padding-top: 30px;
  box-sizing: border-box;
}

.pc_detailWrap .commonDCon .center {
  text-align: center;
}

.pc_detailWrap .commonDCon .picWrap .picTitle {
  font-size: 18px;
  font-weight: 700;
  color: #333;
  text-align: center;
  padding: 15px 0;
  box-sizing: border-box;
}

.pc_detailWrap .commonDCon .picWrap .picExp {
  font-size: 15px;
  font-weight: 400;
  color: #333;
  text-align: center;
}

.pc_detailWrap .commonDCon .twoPicBox {
  position: relative;
  display: flex;
  justify-content: space-between;
}

.pc_detailWrap .commonDCon .twoPicBox .picWrap {
  position: relative;
  width: 530px;
}

.pc_detailWrap .commonDCon .twoPicBox .picWrap p.picTitle {
  font-size: 15px;
  font-weight: 400;
  color: #333;
  text-align: center;
  padding-bottom: 20px;
  box-sizing: border-box;
}

.pc_detailWrap .commonDCon .twoPicBox .picWrap p.picTitle2 {
  font-size: 15px;
  font-weight: 700;
  color: #333;
  text-align: center;
  padding: 20px 0 0;
  box-sizing: border-box;
}

.pc_detailWrap .commonDCon .center .picWrap p.picTitle2 {
  font-size: 15px;
  font-weight: 700;
  color: #333;
  text-align: center;
  padding: 20px 0 0;
  box-sizing: border-box;
}

.pc_detailWrap .commonDCon .twoPicBox .picWrap p.picExp {
  position: relative;
  font-size: 15px;
  font-weight: 300;
  color: #333;
  text-align: center;
  line-height: 1.6;
  padding-top: 10px;
  box-sizing: border-box;
}

.pc_detailWrap .commonDCon .twoPicBox .picWrap p.picExp2 {
  position: relative;
  font-size: 15px;
  font-weight: 400;
  color: #333;
  text-align: center;
  line-height: 1.6;
  padding-top: 10px;
  box-sizing: border-box;
}

.pc_detailWrap .commonDCon .center .picWrap p.picExp2 {
  position: relative;
  font-size: 15px;
  font-weight: 400;
  color: #333;
  text-align: center;
  line-height: 1.6;
  padding-top: 10px;
  box-sizing: border-box;
}

.pc_detailWrap .commonDCon .twoPicBox .picWrap p.picExp .redFont {
  color: #f70001;
  font-weight: 500;
}

.pc_detailWrap .commonDCon .twoPicBox .picWrap ul {
  position: relative;
  margin: 0;
  padding: 10px 0 10px;
}

.pc_detailWrap .commonDCon .twoPicBox .picWrap ul li:before {
  position: relative;
  top: -3px;
  display: inline-block;
  content: "";
  width: 3px;
  height: 3px;
  background: url("../images/newSub/icon_listDot3.png") no-repeat;
  margin-right: 10px;
}

.pc_detailWrap .commonDCon .twoPicBox .picWrap ul li {
  position: relative;
  list-style: none;
  font-size: 15px;
  font-weight: 300;
  color: #333;
  padding: 3px 0;
  box-sizing: border-box;
}

.pc_detailWrap .commonDCon .grayBox {
  position: relative;
  background: #f6f7fb;
  padding: 30px 30px;
  box-sizing: border-box;
}

.pc_detailWrap .commonDCon .grayBox .center {
  position: relative;
  display: flex;
  justify-content: center;
}

.pc_detailWrap .commonDCon .grayBox .numTitle {
  font-size: 16px;
  font-weight: 700;
  color: #333;
  text-align: center;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
}

.pc_detailWrap .commonDCon .grayBox .numTitle span {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 27px;
  height: 27px;
  background: url(../images/newSub/icon_circleBg2.png) center center no-repeat;
  margin-right: 7px;
  color: #fff;
  font-weight: 700;
  text-align: center;
  font-size: 12px;
}

.pc_detailWrap .commonDCon .grayBox .center .picWrap:first-child {
  margin-right: 27px;
}

.pc_detailWrap .commonDCon .grayBox .center .picWrap .picExp {
  font-size: 14px;
  font-weight: 400;
  color: #333;
  text-align: center;
  padding: 5px 0 30px;
}

.pc_detailWrap .commonDCon .grayBox > p {
  position: relative;
  text-align: center;
  font-size: 15px;
  font-weight: 400;
  color: #333;
  line-height: 1.8;
}

.pc_detailWrap .commonDCon .twoPicBox dl {
  position: relative;
  padding: 0;
  margin: 0;
}

.pc_detailWrap .commonDCon .twoPicBox dl dt {
  font-size: 16px;
  font-weight: 700;
  color: #333;
  text-align: center;
  padding: 15px 0 5px;
  box-sizing: border-box;
}

.pc_detailWrap .commonDCon .twoPicBox dl dd {
  font-size: 15px;
  font-weight: 300;
  color: #333;
  line-height: 1.6;
  text-align: center;
  margin: 0;
}

.pc_detailWrap .commonDCon .grayBox .flexBox {
  position: relative;
  display: flex;
}

.pc_detailWrap .commonDCon .grayBox .flexBox > div:first-child {
  margin-right: 30px;
}

.pc_detailWrap .commonDCon .grayBox .flexBox .txtWrap {
  position: relative;
}

.pc_detailWrap .commonDCon .grayBox .flexBox .txtWrap h4 {
  font-size: 16px;
  font-weight: 700;
  color: #333;
  padding: 7px 0 20px;
  margin: 0;
}

.pc_detailWrap .commonDCon .grayBox .flexBox .txtWrap p {
  font-size: 15px;
  font-weight: 300;
  color: #333;
  line-height: 1.7;
}

.pc_detailWrap .commonDCon .threeDivBox {
  position: relative;
  display: flex;
  justify-content: space-between;
}

.pc_detailWrap .commonDCon .threeDivBox > div {
  position: relative;
  width: 357px;
  padding: 40px 30px;
  box-sizing: border-box;
}

.pc_detailWrap .commonDCon .threeDivBox .smallWrap {
  position: relative;
  display: flex;
  justify-content: space-between;
}

.pc_detailWrap .commonDCon .threeDivBox .smallWrap > div {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 27px;
  height: 27px;
  background: url("../images/newSub/icon_circleBg2.png") center center no-repeat;
  margin-right: 7px;
}

.pc_detailWrap .commonDCon .threeDivBox .smallWrap > div span {
  position: relative;
  top: -1px;
  font-size: 11px;
  font-weight: 900;
  color: #fff;
}

.pc_detailWrap .commonDCon .threeDivBox .smallWrap > p {
  position: relative;
  width: calc(100% - 27px);
  font-size: 15px;
  font-weight: 700;
  color: #333;
  line-height: 1.5;
  letter-spacing: -0.7px;
}

.pc_detailWrap .commonDCon .threeDivBox > div:last-child {
  position: relative;
}

.pc_detailWrap .commonDCon .threeDivBox .grayBox > div:last-child p {
  font-size: 14px;
  font-weight: 300;
  color: #333;
  line-height: 1.7;
  margin-top: 20px;
}

.pc_detailWrap
  .commonDCon
  .threeDivBox
  .grayBox
  > div:last-child
  p
  span.blueFont {
  display: inline-block;
  margin-top: 13px;
  color: #116ab4;
}

.pc_detailWrap .commonDCon .threeDivBox .grayBox > div:last-child a {
  margin-top: 7px;
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  color: #333;
  padding: 8px 13px;
  border: 1px solid #d9d9d9;
  background: #fff;
  box-sizing: border-box;
  text-decoration: none;
  transition: all 0.2s;
}

.pc_detailWrap .commonDCon .threeDivBox .grayBox > div:last-child a:hover {
  color: #fff;
  background: #4da7ef;
  border: 1px solid #4da7ef;
}

.pc_detailWrap .cautionbox {
  width: 100%;
  padding: 32px 40px 40px;
  margin-top: 32px;
  background-color: #f6f7fb;
  display: flex;
  gap: 54px 87px;
  flex-wrap: wrap;
}
.pc_detailWrap .cautionbox,
.pc_detailWrap .cautionbox * {
  box-sizing: border-box;
}
.pc_detailWrap .cautionbox > div {
  width: calc((100% - 87px) / 2);
}
.pc_detailWrap .cautionbox .subtt {
  display: flex;
  font-size: 16px;
  font-weight: 900;
  color: #333;
}
.pc_detailWrap .cautionbox .subtt .numling {
  width: 27px;
  height: 27px;
  line-height: 27px;
  border-radius: 27px;
  background-color: #333;
  color: #fff;
  font-size: 12px;
  font-weight: 900;
  margin-right: 10px;
  text-align: center;
  flex-shrink: 0;
}
.pc_detailWrap .cautionbox .subtt + .img {
  margin: 12px 0 0 40px;
}

.pc_detailWrap .cautionbox2 {
  width: 100%;
  padding: 40px 35px;
  margin-top: 32px;
  background-color: #f6f7fb;
  display: flex;
  gap: 40px 35px;
  flex-wrap: wrap;
}
.pc_detailWrap .cautionbox2,
.pc_detailWrap .cautionbox2 * {
  box-sizing: border-box;
}
.pc_detailWrap .cautionbox2 > .img {
  width: 500px;
  flex-shrink: 0;
}
.pc_detailWrap .cautionbox2 > .img img {
  width: 100%;
}
.pc_detailWrap .cautionbox2 > div:not(.img) {
  width: calc(100% - 35px - 500px);
}
.pc_detailWrap .cautionbox2 .subtt {
  display: flex;
  font-size: 16px;
  font-weight: 900;
  color: #333;
}
.pc_detailWrap .cautionbox2 .subtt .numling {
  width: 27px;
  height: 27px;
  line-height: 27px;
  border-radius: 27px;
  background-color: #333;
  color: #fff;
  font-size: 12px;
  font-weight: 900;
  margin-right: 10px;
  text-align: center;
  flex-shrink: 0;
}
.pc_detailWrap .cautionbox2 .subtt + p {
  font-size: 15px;
  color: #333;
  margin-top: 14px;
}
.pc_detailWrap .cautionbox2 .subtt + p .b {
  font-weight: bold;
}

.pc_detailWrap .cautionbox3 {
  width: 100%;
  padding: 40px 0 48px;
  margin-top: 32px;
  background-color: #f6f7fb;
  display: block;
  text-align: center;
}
.pc_detailWrap .cautionbox3,
.pc_detailWrap .cautionbox2 * {
  box-sizing: border-box;
}
.pc_detailWrap .cautionbox3 > .img {
  width: 100%;
  display: flex;
  justify-content: center;
  gap: 20px;
}
.pc_detailWrap .cautionbox3 > .img + p {
  margin-top: 20px;
  font-size: 16px;
  font-weight: bold;
  color: #ff0036;
  text-align: center;
}

/* 241220 hsb */
strong.title {
        padding:8px 15px;
        font-size:15px;
        font-weight:400;
        display:block;
        border:1px solid #000;
        color:#000;
        width:fit-content;
        border-radius:999px;
    }
    strong.title.blue {
        color:#0F74F8;
        border-color:#0F74F8;
    }
    
    strong.title.red {
        color:#F83B3B;
        border-color:#F83B3B;
    }
    .dCon .col {
        display:flex;
        flex-direction:column;
        justify-content:center;
        align-items:center;
    }
    .dCon .col:has(strong.title) {
        gap:24px;
    }
    .pc_detailWrap .dCon .onePicBox.col {
      gap:50px;
    }
    .onePicBox p.txt {
        font-size:15px;
        color:#777;
        text-align:center;
    }
    
    /* 이미지 아래 li */
    .pc_detailWrap .dCon .picWrap ul {position: relative;margin: 0;padding: 10px 0 10px;/* display:none; */}
    
    .pc_detailWrap .dCon .picWrap ul li:before {
    position: relative;
    top: -3px;
    display: inline-block;
    content: "";
    width: 3px;
    height: 3px;
    background: url("../images/newSub/icon_listDot3.png") no-repeat;
    margin-right: 10px;
    }
    
    .pc_detailWrap .dCon .picWrap ul li {
    position: relative;
    list-style: none;
    font-size: 15px;
    font-weight: 400;
    color: #333;
    padding: 3px 0;
    box-sizing: border-box;
    }
    
    
    /* 신규 테이블 */
    .pc_detailWrap .dCon .oneTableBox2 {
    position: relative;
    display: flex;
    justify-content: center; 
    }
    .pc_detailWrap .dCon .oneTableBox2 p {
    font-size: 15px;
    font-weight: 500;
    color: #333;
    text-align: center;
    padding-bottom: 12px;
    box-sizing: border-box;
    }
    .pc_detailWrap .tableWrap {
    border-top:1px solid #000;
    }
    .pc_detailWrap .dCon .oneTableBox2 table {
    position: relative;
    width: 532px;
    border-collapse: collapse;
    }
    
    .pc_detailWrap .dCon .oneTableBox2 table thead {
    border-bottom: 1px solid #e5e5e5;
    }
    
    .pc_detailWrap .dCon .oneTableBox2 table th:last-child,
    .pc_detailWrap .dCon .oneTableBox2 table td:last-child {
    border-right: none;
    border-left: 1px solid #e5e5e5;
    }
    
    .pc_detailWrap .dCon .oneTableBox2 table th {
    font-size: 14px;
    font-weight: 600;
    color: #333;
    height: 30px;
    padding: 8px 0;
    background-color: #f7f7f9;
    }
    .pc_detailWrap .dCon .oneTableBox2 table tr {
    border-bottom: 1px solid #dbdbdb;
    }
    .pc_detailWrap .dCon .oneTableBox2 table td {
    font-size: 14px;
    font-weight: 400;
    color: #777;
    text-align: center;
    background: #ffffff;
    padding: 12px 0;
    box-sizing: border-box;
    }
    
    .pc_detailWrap .dCon .oneTableBox2 table th,
    .pc_detailWrap .dCon .oneTableBox2 table td {
    border-right:1px solid #e5e5e5;
    }

.mt10 {
  margin-top: 10px;
}
.mt20 {
  margin-top: 20px;
}
.mt30 {
  margin-top: 30px;
}
.mt40 {
  margin-top: 40px;
}
.mt50 {
  margin-top: 50px;
}
.mt60 {
  margin-top: 60px;
}
.mt70 {
  margin-top: 70px;
}
.mt80 {
  margin-top: 80px;
}
.mt90 {
  margin-top: 90px;
}
.mt100 {
  margin-top: 100px;
}
.mt110 {
  margin-top: 110px;
}
.mt120 {
  margin-top: 120px;
}
.mt130 {
  margin-top: 130px;
}
.mt140 {
  margin-top: 140px;
}

.pd50 {
  padding: 50px !important;
}

:root{
  --bg:#f7f7f7;--fg:#1e2330;
  --card:#fff;--card-fg:#1e2330;
  --primary:#3182f6;--primary-fg:#fff;
  --muted:#f4f4f6;--muted-fg:#7d8395;
  --border:#e8e9ed;--secondary:#f4f4f6;
  --accent:#f4f4f6;
  --blue-light:#eef4ff;
  --radius:1rem;
}

/* Breadcrumb */
.breadcrumb{display:flex;justify-content:flex-end;margin-bottom:24px;font-size:14px;color:var(--muted-fg);align-items:center;gap:4px}
.breadcrumb .active{color:var(--fg);font-weight:500}
.breadcrumb svg{width:14px;height:14px}

/* Section title */
.section-title{font-size:24px;font-weight:700;letter-spacing:-.02em;margin-bottom:4px}
.section-sub{font-size:14px;color:var(--muted-fg);margin-bottom:40px}

/* Product grid */
.product-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-bottom:64px}
@media(max-width:768px){.product-grid{grid-template-columns:1fr}.nav{display:none}.logo-sub{display:none}}

/* Product card */
.product-card{display:flex;flex-direction:column}
.preview-area{aspect-ratio:4/5;background:var(--card);border-radius:var(--radius);display:flex;align-items:center;justify-content:center;padding:40px;box-shadow:0 1px 3px rgba(0,0,0,.04)}
.preview-inner{width:75%;height:75%;background:var(--muted);border-radius:8px;display:flex;align-items:center;justify-content:center;color:var(--muted-fg);font-size:14px;box-shadow:0 4px 16px rgba(0,0,0,.08)}
.card-body{padding:20px 4px 0}
.page-tabs{display:flex;gap:8px;margin-bottom:16px;overflow-x:auto}
.page-tab{min-width:56px;height:36px;border-radius:8px;border:1px solid var(--border);background:var(--card);color:var(--muted-fg);font-size:12px;font-weight:500;cursor:pointer;transition:all .2s;flex-shrink:0}
.page-tab:hover{background:var(--accent)}
.page-tab.active{border-color:var(--primary);color:var(--primary);background:var(--blue-light)}
.card-title{font-size:16px;font-weight:700;margin-bottom:2px}
.card-subtitle{font-size:14px;color:var(--muted-fg);margin-bottom:16px}
.card-actions{display:flex;gap:8px}
.btn-primary{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;padding:12px 16px;border-radius:12px;background:var(--primary);color:var(--primary-fg);font-size:14px;font-weight:600;border:none;cursor:pointer;transition:opacity .2s}
.btn-primary:hover{opacity:.9}
.btn-outline{display:flex;align-items:center;justify-content:center;gap:8px;padding:12px 16px;border-radius:12px;border:1px solid var(--border);background:var(--card);color:var(--fg);font-size:14px;font-weight:500;cursor:pointer;transition:background .2s}
.btn-outline:hover{background:var(--accent)}
.btn-primary svg,.btn-outline svg{width:16px;height:16px}

/* CTA Banner */
.cta-banner{border-radius:var(--radius);background:var(--primary);padding:32px;display:flex;align-items:center;justify-content:center;margin-bottom:40px}
.cta-banner span{color:var(--primary-fg);font-size:20px;font-weight:700;letter-spacing:-.02em}

/* Notice */
.notice{text-align:center;font-size:18px;font-weight:600;margin-bottom:64px}

/* ===== Mobile Responsive ===== */
@media(max-width:768px){
  .product-grid{grid-template-columns:1fr}
}
@media(max-width:480px){
  .section-title{font-size:20px}
  .section-sub{font-size:13px;margin-bottom:28px}
  .breadcrumb{font-size:12px;margin-bottom:16px}
  .breadcrumb svg{width:12px;height:12px}
  .preview-area{padding:24px}
  .preview-inner{font-size:13px}
  .cta-banner{padding:24px}
  .cta-banner span{font-size:17px}
  .notice{font-size:15px;margin-bottom:48px}
  .page-tab{min-width:48px;height:32px;font-size:11px}
  .card-title{font-size:15px}
  .card-subtitle{font-size:13px}
  .btn-primary,.btn-outline{padding:11px 14px;font-size:13px}
}