h5 {
  font-size: 1.2em;
}

h4 {
  font-size: 1.6em;
}

h3 {
  font-size: 2em;
}

.logo60 {
  width: 100px;
}

.tx-guide {
  color: #959595;
  font-size: 0.9em;
  padding: 2px 5px;
}

.tx-sign {
  color: #191068;
  font-size: 0.9em;
  padding: 2px 5px;
}

.tx-error {
  color: #08072E;
  font-size: 0.9em;
  padding: 2px 5px;
}

body::-webkit-scrollbar {
  width: 10px;
}

body::-webkit-scrollbar-thumb {
  background-color: #2f3542;
}

body::-webkit-scrollbar-track {
  background-color: grey;
}

.boxmessge_black {
  float: center;
  color: #fff;
  background: black;
  padding: 1px 10px 2px 10px;
  border-radius: 5px;
}

/* -common Boxed message */
.boxmessge_blue {
  text-align: center;
  color: #fff;
  background: #370ea6;
  padding: 1px 10px 2px 10px;
  border-radius: 5px;
}

.boxmessge_green {
  text-align: center;
  color: #fff;
  background: #16ba29;
  padding: 1px 10px 2px 10px;
  border-radius: 5px;
}

.boxmessge_red {
  float: center;
  color: #fff;
  background: #270103;
  padding: 1px 10px 2px 10px;
  border-radius: 5px;
}

.signwrap {
  width: 100%;
  height: 100vh;
  overflow: auto;
  padding: 30px 0;
}

.signbox {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  /*  min-height: calc(100vh - 60px); */
}

.signcard .logobox {
  text-align: center;
}

.signcard .logobox a img {
  height: 150px;
}

.inputbox {
  padding-bottom: 10px;
}

.pop_box h1 {
  color: #fff;
  font-size: 12pt;
}

.pop_box textarea {
  color: #fff;
  font-size: 10pt;
  width: 100%;
  border: 1px solid #777;
  margin: 10px 0px;
  height: 200px;
  padding: 20px;
}

.nbox {
  margin: 0px;
  /* box-shadow: inset 0px 0px 15px 3px #23395e; */
  /* background: linear-gradient(to bottom, #6e2e53 5%, #415989 100%); */
  background-color: #ddd;
  border-radius: 0px;
  cursor: pointer;
  color: #ffffff;
}

.input {
  padding: 0.6em 1em;
  border: 1px solid #d5d5d5;
  border-radius: 20px;
  width: 100%;
  -webkit-transition: all 0.5s ease-out;
  -moz-transition: all 0.5s ease-out;
  -o-transition: all 0.5s ease-out;
  -ms-transition: all 0.5s ease-out;
}

.input:focus {
  background: #eef8ff;
  border: 1px solid #02528e;
  -webkit-transition: all 0.5s ease-out;
  -moz-transition: all 0.5s ease-out;
  -o-transition: all 0.5s ease-out;
  -ms-transition: all 0.5s ease-out;
}

.select {
  padding: 0.6em 1em;
  border: 1px solid #d5d5d5;
  border-radius: 20px;
  width: 100%;
}

.inputbtnbox {
  position: relative;
}

.inputbtnbox .input {
  padding: 0.67em 1em;
}

.inputbtnbox .btn1 {
  position: absolute;
  right: 0;
  top: 0;
  border-top-right-radius: 30px;
  border-bottom-right-radius: 30px;
}

.inputbtnbox .btn {
  position: absolute;
  right: 0;
  top: 0;
  border-top-right-radius: 30px;
  border-bottom-right-radius: 30px;
}

.inputbtnbox .btn_sig {
  position: absolute;
  right: 0;
  top: 0;
  border-top-right-radius: 20px;
  border-top-right-radius: 20px;
  border-bottom-left-radius: 5px;
  border-bottom-left-radius: 5px;
}

.inputbtnbox p {
  position: absolute;
  right: 1em;
  bottom: 0.8em;
}

.inputbox label {
  color: #656565;
  line-height: 34px;
  
}

.wrap {
  background: #f6f6f6;
}

.leftbox {
  float: left;
  width: 360px;
  /* box-shadow: 0px 10px 14px -7px #276873;
  background: linear-gradient(to bottom, #141414 5%, #0d4650 100%); */
  background-color: #efefef;
  height: 100vh;
  /* box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.8); */
  position: fixed;
  overflow-y: scroll;
}

.leftbox::-webkit-scrollbar {
  width: 10px;
}

.leftbox::-webkit-scrollbar-thumb {
  background-color: #ddd;
}

.leftbox::-webkit-scrollbar-track {
  background-color: #ddd;
}

.leftbox .logobox {
  height: 65px;
  background-color: #fff;
  position: relative;
}

.leftbox .logobox a {
  display: flex;
  padding: 10px 20px;
}


.leftbox .logobox .img_a {
  position: relative;
  height: 80px;
  margin-left:10px;
  margin-button:0.2rem
}
.img_a{
  
}
.leftbox .logobox img {
  position: relative;
  right:30px;
  justify-content:space-between;
  height: 50px;
  right:60px;

  
}

.leftbox .logobox .close {
  line-height: 44px;
  color: #454545;
  float: right;
  display: none;
}

#mobile-close {
  display: none;
}

.menubox {
  height: calc(100vh - 65px);
  overflow: auto;
  padding-bottom: 20px;
}

.menubox ul p {
  font-size: 1.25em;
  background: #fff;
  font-weight: 600;
}

#dashboard-menuitem {
  width: 100%;
  color: #fff;
  font-size: 1.25rem;
  display: flex;
  justify-content: space-between;
}

#dashboard-menuitem > div {
  display: flex;
  column-gap: 10px;
  align-items: center;
  font-weight: 600;
}

.login_box {
  background-color: #efefef;
  border-top: 1px solid #ccc;
}

.menubox ul li {
  display: block;
  color: #000;
  padding: 18px 30px;

  /* box-shadow: inset 0px 1px 0px 0px #7a8eb9;
  background: linear-gradient(to bottom, #637aad 5%, #5972a7 100%);
  background-color: #637aad; */
}

.menubox ul li {
  border-bottom: 1px solid #ddd;
  display: flex;
  justify-content: space-between;
}

.submenu li a {
  margin-left: 20px;
  font-weight: 600;
  width: 100%;
}

.menubox ul li a i {
  width: 25px;
  text-align: center;
  margin-right: 5px;
  font-size: 0.9em;
}

.menubox ul li a:hover {
  text-decoration: underline;
  color: #000;
}

.menubox ul li.active a {
  /* box-shadow: inset 0px 1px 0px 0px #97c4fe; */
  /* background: linear-gradient(to bottom, #3d94f6 5%, #1e62d0 100%); */
  /* background-color: #3d94f6; */
  color: #000;
}

.rightbox {
  float: right;
  width: calc(100% - 360px);
}

.header {
  height: 65px;
  background: #302f51;
  /* fallback for old browsers */
  background: linear-gradient(to right, #004e92, #000428);
  /* Chrome 10-25, Safari 5.1-6 */
  /* background: linear-gradient(to right, #004e92, #000428); */
  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
   box-shadow: 0px 0px 10px #004e92; 
}

.header .lang {
  float: right;
  position: relative;
}

.header .lang .langbtn {
  line-height: 65px;
  color: #ffffff;
  padding: 0 8px;
  margin-right: 5px;
}

.header .lang ul.langbox {
  background: #ffffff;
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
  min-width: 150px;
  position: absolute;
  right: 0;
  display: none;
  z-index: 1;
}

.header .lang ul.langbox li a {
  display: block;
  padding: 3px 10px;
}

.header .btn-logout {
  line-height: 65px;
  color: #ffffff;
  padding: 0 8px;
  margin-right: 15px;
  float: right;
}

.header .btn-bars {
  line-height: 65px;
  color: #ffffff;
  padding: 0 8px;
  margin-left: 15px;
  float: left;
  display: none;
}

.content {
  margin-top: 10px;
  padding: 10px;
  position: relative;
  /* min-height: calc(100vh - 65px); */
  padding-bottom: 92px;
}

.card {
  position: relative;
  padding: 15px;
  border-radius: 10px;
  background: #fff;
  margin-bottom: 5px;
  border: 1px solid #a3ada1;
}

/* 2024-04-17 PRODUCT - QRCODE COPY   */
.title {
  display: flex;
  align-items: center;
}

.title {
  display: flex;
  align-items: center;
}

.close {
  margin-left: 20px;
}

/* 2024-04-17  PRODUCT -  QRCODE COPY   */

.card .title {
  margin-bottom: 20px;
  display: block;
}

.card .title h5 {
  display: flex;
}

.infobox-custom .card {
  padding: 30px;
}

.manage-point .flex {
  display: flex;
  justify-content: center;
  align-items: center;
  column-gap: 36px;
}

.manage-point p {
  font-size: 18px;
  font-weight: bold;
  text-align: center;
}

.manage-point .divider {
  width: 100%;
  height: 2px;
  background-color: #ddd;
  margin: 0 auto 15px;
}

.manage-point .currency-container {
  font-size: 18px;
  column-gap: 5px;
  justify-content: center;
}

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

.withdrawal .input-wrapper {
  font-size: 22px;
  padding: 16px 21px;
  width: 100%;
  border: 1px solid #d5d5d5;
  border-radius: 29px;
  font-weight: 400;
  display: flex;
  align-items: center;
}

.withdrawal .input-wrapper.column {
  flex-direction: column;
  row-gap: 10px;
  align-items: flex-start;
}

.withdrawal .input-wrapper span {
  white-space: nowrap;
}

.withdrawal .bold {
  font-weight: 600;
}

.withdrawal input {
  width: 100%;
  font-weight: 600;
}

.input-wrapper.disabled {
  background-color: #f1f1f1;
}

.card .withdrawal .divider {
  width: 1px;
  height: 20px;
  margin: 0 14px;
  background-color: #d4d4d4;
}

.withdrawal .button-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 10px;
}

.withdrawal .button-container button {
  color: #fff;
  border-radius: 10px;
  cursor: pointer;
  width: 100%;
  padding: 16px 0;
  font-size: 22px;
}

.input-wrapper.disabled input {
  -webkit-box-shadow: 0 0 0px 1000px #f1f1f1 inset;
}

/* 버튼을 스타일링하고 position: absolute;로 설정하여 부모 요소를 기준으로 위치를 조정합니다. */
.custom-button_m {
  background-color: #172e6b;
  color: #fdfefd;
  border: none;
  padding: 5px 3px;
  border-radius: 5px;
  position: absolute;
  top: 5px;
  /* 부모 요소 상단에서의 위치 조정 */
  right: 10px;
  /* 부모 요소 오른쪽에서의 위치 조정 */
  cursor: pointer;
  box-shadow: 0px 4px 6px rgba(0, 255, 102, 0.2);
  /* 빨간색 쉐도우 추가 */
  transition: background-color 0.3s ease;
  /* 호버 효과를 위한 전환 효과 추가 */
}

/* 호버 효과를 정의하여 배경색을 바꾸고 약간의 스케일 변화를 줍니다. */
.custom-button_m:hover {
  background-color: #7033ff;
  /* 호버 시 배경색 변경 */
  transform: scale(1.05);
  /* 약간 확대된 효과 */
  box-shadow: 0px 6px 10px rgba(0, 3, 15, 0.7);
  /* 호버 시 쉐도우 변경 */
}

/* 버튼을 스타일링하고 position: absolute;로 설정하여 부모 요소를 기준으로 위치를 조정합니다. */
.link-button_m {
  background-color: #0d00bb;
  color: #fdfefd;
  border: none;
  padding: 5px 3px;
  border-radius: 5px;
  position: absolute;
  top: 5px;
  /* 부모 요소 상단에서의 위치 조정 */
  right: 10px;
  /* 부모 요소 오른쪽에서의 위치 조정 */
  cursor: pointer;
  box-shadow: 0px 4px 6px rgba(0, 255, 102, 0.2);
  /* 빨간색 쉐도우 추가 */
  transition: background-color 0.3s ease;
  /* 호버 효과를 위한 전환 효과 추가 */
}

/* 호버 효과를 정의하여 배경색을 바꾸고 약간의 스케일 변화를 줍니다. */
.link-button_m:hover {
  background-color: #001ebb;
  /* 호버 시 배경색 변경 */
  transform: scale(1.05);
  /* 약간 확대된 효과 */
  box-shadow: 0px 6px 10px rgba(0, 3, 15, 0.7);
  /* 호버 시 쉐도우 변경 */
}

/* 버튼을 스타일링하고 position: absolute;로 설정하여 부모 요소를 기준으로 위치를 조정합니다. */
.attend-button_m {
  background-color: #34aa24;
  color: #fdfefd;
  border: none;
  padding: 2px 1px;
  border-radius: 5px;
  position: relative;

  /* 부모 요소 상단에서의 위치 조정 */
  right: 10px;
  /* 부모 요소 오른쪽에서의 위치 조정 */
  left: 5px;
  cursor: pointer;
  box-shadow: 0px 4px 6px rgba(0, 255, 102, 0.2);
  /* 빨간색 쉐도우 추가 */
  transition: background-color 0.3s ease;
  /* 호버 효과를 위한 전환 효과 추가 */
}

/* 호버 효과를 정의하여 배경색을 바꾸고 약간의 스케일 변화를 줍니다. */
.attend-button_m:hover {
  background-color: #33ff8f;
  /* 호버 시 배경색 변경 */
  transform: scale(1.05);
  /* 약간 확대된 효과 */
  box-shadow: 0px 6px 10px rgba(0, 3, 15, 0.7);
  /* 호버 시 쉐도우 변경 */
}

.imgbackcard {
  background-position: center;
  background-size: cover;
}

.bg1 {
  background: #0f0c29;
  /* fallback for old browsers */
  background: -webkit-linear-gradient(to right, #24243e, #302b63, #0f0c29);
  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to right, #24243e, #302b63, #0f0c29);
  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  border: 1px solid #000;
}

.mainprofile p span {
  min-width: 80px;
  display: inline-block;
}

.card h3 > span {
  font-size: 0.6em;
  padding-left: 8px;
}

.card .title p {
  color: #656565;
  padding-left: 5px;
}

.incardbox {
  line-height: 60px;
  padding: 10px 20px;
  background: #f3f3f3;
  border-left: 3px solid #d5d5d5;
  margin-bottom: 20px;
}

.calendar-container {
  margin-top: 40px;
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  column-gap: 10px;
  height: 40px;
}

.calendar-container > input {
  border: 1px solid #999;
  border-radius: 4px;
  padding: 0 14px;
  width: 200px;
  height: 100%;
}

.calendar-container > button {
  color: #fff;
  padding: 0 34px;
  background-color: #181174;
  font-weight: bold;
  border-radius: 4px;
  cursor: pointer;
  height: 100%;
  margin-left: 10px;
  white-space: nowrap;
}

/* .gradientbg1 {
  color: #ffffff;
  background: #0575e6;
  /* fallback for old browsers */
/* background: -webkit-linear-gradient(to right,
      #021b79,
      #0575e6); */
/* Chrome 10-25, Safari 5.1-6 */
/* background: linear-gradient(to right,
      #021b79,
      #0575e6); */
/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
/* font-size: small;
} */

/* .gradientbg2 {
  color: #ffffff;
  background: #00b4db; */
/* fallback for old browsers */
/* background: -webkit-linear-gradient(to right,
      #0083b0,
      #00b4db); */
/* Chrome 10-25, Safari 5.1-6 */
/* background: linear-gradient(to right,
      #0083b0,
      #00b4db); */
/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
/* font-size: small;
} */

/* .gradientbg3 {
  color: #ffffff;
  background: #dc2424; */
/* fallback for old browsers */
/* background: -webkit-linear-gradient(to right,
      #4a569d,
      #dc2424); */
/* Chrome 10-25, Safari 5.1-6 */
/* background: linear-gradient(to right,
      #4a569d,
      #dc2424); */
/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
/* font-size: small;
} */

/* .gradientbg4 {
  color: #ffffff;
  background: #fc466b; */
/* fallback for old browsers */
/* background: -webkit-linear-gradient(to right,
      #3f5efb,
      #fc466b); */
/* Chrome 10-25, Safari 5.1-6 */
/* background: linear-gradient(to right,
      #3f5efb,
      #fc466b); */
/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
/* font-size: small;
}  */
.overall-container {
  border: 1px solid #b1b4ad;
  padding: 30px;
  margin: 10px;
  border-radius: 20px;
  background-color: #fff;
}

.link-button {
  padding: 10px 20px;
  background-color: #0d00bb;
  cursor: pointer;

  /* 버튼 배경 색상 */
  border: none;
  color: white;
  /* 글씨 색상 */
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  /* 버튼 간의 간격 */
  cursor: pointer;
  border-radius: 20px;
  /* 둥근 테두리 */
  transition: background-color 0.3s ease;
  /* 부드러운 색상 변화 효과 */
}

.link-button:hover {
  background-color: #260E7C;
  /* 버튼 오버 시 색상 변경 */
}

.link-button.sm {
  padding: 10px 14px;
}

.button-container {
  display: flex;
  align-items: center;
  margin-top: 25px;
  margin-bottom: 20px;
  /* 버튼과 아래 컨텐츠 사이의 간격 */
}

.plan-button {
  padding: 10px 20px;
  background-color: #666;
  border: none;
  border-radius: 50px;
  color: white;
  margin-right: 10px;
  -webkit-border-radius:;
  -moz-border-radius:;
  -ms-border-radius:;
  -o-border-radius:;
}

.button-container {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  /* 버튼과 아래 컨텐츠 사이의 간격 */
}

.button-container_center {
  display: flex;
  /* 플렉스 컨테이너 설정 */
  justify-content: center;
  /* 가로축 중앙 정렬 */
  align-items: center;
  /* 세로축 중앙 정렬 */
  height: 100px;
  /* 컨테이너의 높이 설정, 필요에 따라 조절 가능 */
}

.plan-button_center {
  padding: 10px 20px;
  /* 버튼 내부 여백 설정 */
  background-color: #34aa24;
  /* 버튼 배경색 설정 */
  color: white;
  /* 텍스트 색상 설정 */
  border: none;
  /* 테두리 제거 */
  cursor: pointer;
}

.horizontal-line {
  flex-grow: 1;
  height: 2px;
  background-color: #666;
}

.gradientbg1 {
  border: 1px solid #b1b4ad;
  background-position: right center;
  background-size: cover;
  box-sizing: border-box;
  text-align: center;
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
}

.gradientbg1 .plan-title {
  margin-bottom: 15px;
  font-size: 18px;
  font-weight: bold;
}

.gradientbg1 .line {
  width: 20%;
  height: 2px;
  background-color: #ddd;
  margin: 0 auto 15px;
}

.gradientbg2 {
  border: 1px solid #b1b4ad;
  background-position: right center;
  background-size: cover;
  box-sizing: border-box;
  text-align: center;
  padding: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.gradientbg2 .plan-title {
  margin-bottom: 15px;
  font-size: 16px;
}

.gradientbg2 .line {
  width: 40%;
  height: 2px;
  background-color: #ddd;
  margin: 0 auto 15px;
}

.currency-container {
  display: flex;
  align-items: center;
  padding: 5px;
  margin-top: 10px;
  margin-bottom: 20px;
}

.plan-title {
  font-size: 24px;
  /* 타이틀 폰트 크기 */
  margin-bottom: 10px;
  /* 밑줄과의 간격 */
}

.left-content,
.right-content {
  display: flex;
  flex-direction: column;
  /* 세로 방향 정렬 */
  align-items: center;
  /* 중앙 정렬 */
}

.fa-chevron-circle-right {
  margin-right: 10px;
  /* 아이콘과 텍스트 사이 간격 */
  font-size: 1.5em;
  color: #ccc;
  /* 아이콘 크기 조정 */
}

.tx-r {
  flex-grow: 1;
  /* 텍스트가 남은 공간을 모두 차지하도록 설정 */
  text-align: right;
  font-size: 24px;
  /* 텍스트를 오른쪽으로 정렬 */
}

.buttons-container {
  display: flex;
  justify-content: space-around;
  /* 버튼들을 공간에 맞게 배치 */
}

.w16p {
  width: 15%;
  float: left;
  box-sizing: border-box;
  margin: 5px;
}

.vector-image {
  width: 50px;
  height: 50px;
  object-fit: cover;
}

/* .card {
  border: 1px solid #ccc;

  padding: 10px;

  box-sizing: border-box;

} */

.card .card-title {
  display: flex;
  align-items: center;
}

.plan-title_sno {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 58px;
}

.gradientbg3 {
  display: flex;
  border: 1px solid #b1b4ad;
  background-position: right center;
  background-size: cover;
  box-sizing: border-box;
  align-items: center;
  justify-content: space-between;
  padding: 15px;
}

.item {
  display: flex;
  /* 가로 정렬 */
  align-items: center;
  /* 세로 중앙 정렬 */
}

.circle-text {
  width: 40px;
  /* 동그라미 크기 */
  height: 40px;
  /* 동그라미 크기 */
  background-color: #000;
  /* 배경 색상 */
  color: white;
  /* 텍스트 색상 */
  display: flex;
  justify-content: center;
  /* 텍스트 가운데 정렬 */
  align-items: center;
  /* 텍스트 가운데 정렬 */
  border-radius: 50%;
  /* 동그랗게 */
  margin: 5px 0;
  /* 위아래 마진 */
}

.underline {
  width: 100%;
  /* 밑줄 길이 */
  border-bottom: 2px solid #ddd;
  /* 밑줄 스타일 */
  margin: 10px 0;
  /* 밑줄의 위아래 마진 */
}

.underline_sno {
  width: 100%;
  border-bottom: 2px solid #ddd;
  margin: 10px 0;
}

.underline {
  width: 100%;
  /* 밑줄 길이 - 필요에 따라 조정 가능 */
  border-bottom: 2px solid #ddd;
  /* 밑줄 스타일 */
  margin: 10px 0;
  /* 밑줄의 위아래 마진 */
}

.gradientbg4 {
  border: 2px solid #5ca952;
  background-position: right center;
  background-size: cover;
  box-sizing: border-box;
}

.footer {
  padding: 20px;
  margin-left: -30px;
  margin-right: -30px;
  position: absolute;
  bottom: 0;
  width: 100%;
}

.footer .copyright {
  font-size: 0.9em;
  color: #757575;
  text-align: center;
}

.tablebox .tableboxs {
  overflow: auto;
  width: 100%;
}

.theadbox {
  /* box-shadow: inset 0px -3px 7px 0px #0B0D5F; */
  background-color: #0A1575;
  border-radius: 10px;
  color: #000;
  text-align: Center;
}

.theadboxs {
  box-shadow: inset 0px -3px 7px 0px #211e7e;
  background-color: #484085;
  border-radius: 10px;
  color: #fff;
  text-align: Center;
}

.theadbox div.th {
  padding: 10px;
  color: #fff;
  font-size: 11pt;
}

.theadboxs div.th {
  padding: 10px;
  color: #fff;
  font-size: 11pt;
}

.tbodybox .tr {
  border-bottom: 1px solid #e9e9e9;
  font-size: 10pt;
}

.tbodybox .tr:hover {
  background: #f7f7f7;
}

.tbodybox .tr:nth-child(2n) {
  border-bottom: 1px solid #e9e9e9;
  font-size: 10pt;
  background: #fafafa;
}

.tbodybox .tr .td {
  padding: 10px 0px;
  text-align: center;
}

.tbodybox .tr .td span:first-of-type {
  display: none;
  color: #757575;
}

.tbodybox .tr .td span {
  word-break: break-word;
  display: block;
}

.tablehover .tbodybox .tr {
  cursor: pointer;
  -webkit-transition: all 0.5s ease-out;
  -moz-transition: all 0.5s ease-out;
  -o-transition: all 0.5s ease-out;
  -ms-transition: all 0.5s ease-out;
}

.tablehover .tbodybox .tr:hover {
  background: #f5f7fd;
  -webkit-transition: all 0.5s ease-out;
  -moz-transition: all 0.5s ease-out;
  -o-transition: all 0.5s ease-out;
  -ms-transition: all 0.5s ease-out;
}

.hr {
  margin: 20px 0;
  border-top: 1px solid #e1e1e1;
}

#memsearch {
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100vh;
  display: none;
  z-index: 11;
}

#memsearchbox {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  padding: 0 30px;
}

#memsearchinbox {
  width: 100%;
  max-width: 600px;
  background: #ffffff;
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);
}

#memsearchinbox .contbox {
  padding: 15px;
}

.appmenutitle {
  padding: 15px;
  position: relative;
  background: #202b3d;
  border-bottom: 1px solid #e9e9e9;
  color: #fff;
}

.appmenutitle .close {
  position: absolute;
  right: 0px;
  top: 0;
  color: #fff;
  padding: 0 10px;
  line-height: 58px;
}

.noticetitle {
  border-top: 1px solid #e1e1e1;
  padding: 8px 15px;
}

.noticesubtitle {
  background: #f5f5f5;
  font-size: 0.9em;
  padding: 5px 15px;
  color: #757575;
  border-top: 1px solid #e1e1e1;
  border-bottom: 1px solid #e1e1e1;
}

.noticecont {
  border-bottom: 1px solid #e1e1e1;
  padding: 8px 15px;
  min-height: 300px;
}

.card .divider {
  display:flex;
  justify-content:center;
  width: 100%;
  height: 2px;
  background-color: #ddd;
  margin: 10px 0;
}

.productimg {
  display: flex;
  justify-content: center;
}

.productimg img {
  width: 6.3rem;
  height: 5.25rem;
  margin: 10px;

}

.productkrw {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.producttitle {
  font-size: 18px;
  font-weight: bold;
}

/*********************************************************/
/* 페이징처리 1 */

.cpaging {
  margin-top: 10px;
}

.cpaging ul {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 10pt;
  padding: 0;
}

.cpaging ul li {
  padding: 0 1px;
  list-style-type: none;
}

.cpaging ul li a {
  padding: 2px 8px;
  border: 1px solid #fff;
  color: #959595;
}

.cpaging ul li a:hover {
  background: #e9e9e9;
}

.cpaging ul li.active a {
  background: #02528e;
  color: #ffffff;
}

.paging {
  margin-top: 10px;
}

.paging ul {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 10pt;
  padding: 0;
}

.paging ul li {
  padding: 0 1px;
  list-style-type: none;
}

.paging ul li a {
  padding: 2px 8px;
  border: 1px solid #fff;
  color: #959595;
}

.paging ul li a:hover {
  background: #e9e9e9;
}

.paging ul li.active a {
  background: #02528e;
  color: #ffffff;
}

.orgtop {
  display: flex;
}

#buy {
  position: fixed;
  top: -90px;
  left: 0px;
  width: 100%;
  height: 100vh;
  display: none;
  z-index: 11;
}

#buybox {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  padding: 0 30px;
}

#buyinbox {
  width: 100%;
  max-width: 450px;
  background: #ffffff;
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);
  font-weight: 500;
}

#infor {
  width: 100%;
  padding: 15px;

}

#buyinbox .contbox {
  padding: 15px;
}

#buyinbox .contbox .buytr {
  padding: 8px 0;
  border-bottom: 1px solid #e1e1e1;
}

#buyinbox .contbox .buytr div {
  float: left;
}

#buyinbox .contbox .buytr div:nth-of-type(1) {
  width: 100px;
  color: #959595;
}

#buyinbox .contbox .row .input {
  padding: 0.2em 1em;
}

#buyinbox .contbox .select-row {
  clear: both;
  /* 기존 float 속성에 영향받지 않도록 함 */
  display: flex;
  /* Flexbox를 사용하여 요소들을 가로로 정렬 */
  align-items: center;
  /* 요소들을 세로 중앙에 정렬 */
  justify-content: space-between;
  /* 요소들 사이의 간격을 균등하게 분배 */
}

#buyinbox .contbox .select-row > div {
  flex: 1;
  float: none;
}

#buyinbox .contbox .select-row > div:nth-of-type(2) {
  flex: 3;
}

#buyinbox .contbox .select-row > div:last-child {
  flex: 0 1 auto;
}

/*********************************************************/

.textarea {
  width: 100%;
  height: 150px;
  padding: 0.6em 1em;
  border: 1px solid #d5d5d5;
  border-radius: 10px;
  resize: none;
}

/****************@@@popup@@@*****************************************/

#order {
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100vh;
  display: none;
  z-index: 11;
}

#orderbox {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  padding: 0 30px;
}

#orderinbox {
  width: 100%;
  max-width: 600px;
  background: #ffffff;
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);
}

#orderinbox .contbox {
  padding: 15px;
  max-height: calc(100vh - 100px);
  overflow: auto;
}

/* 메인 */
#slmessage {
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100vh;
  display: none;
  z-index: 11;
}

#slmessagebox {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 860px;
  padding: 0 10px;
}

#slmessageboxinbox {
  width: 100%;
  max-width: 650px;
  background: black;
  color: #ddd;
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);
}

#slmessageboxinbox .contbox {
  padding: 10px;
  /* max-height: calc(100vh - 100px); */
  overflow: auto;
}

.terms {
  background: #23242f;
}

/* myinfo popup */
#myinfo {
  position: fixed;
  top: 150px;
  left: -100px;
  width: 100%;
  height: 100vh;
  display: none;
  z-index: 13;
}

#myinfobox {
  display: flex;
  justify-content: center;
  align-items: center;
  /* height: 100vh; */
  padding: 0 30px;
}

#myinfoinbox {
  width: 100%;
  max-width: 320px;
  background: #ffffff;
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);
}

#myinfoinbox .contbox {
  padding: 0px;
  max-height: calc(100vh - 100px);

  /* overflow: auto; */
}

.w100p.left.infobox-custom {
  margin-bottom: 20px;
}

/*********************************************************/

#payqr {
  position: fixed;
  top: 50px;
  left: 0px;
  width: 100%;
  /* height: 1dvh; */
  display: none;
  z-index: 12;
}

#payqrbox {
  display: flex;
  justify-content: center;
  align-items: center;

  padding: 0 20px;
}

#payqrinbox {
  width: 100%;
  max-width: 300px;
  max-height: 400px;
}

#payqrinbox .contbox {
  display: flex;
  justify-content: center;

  /* max-height: calc(100vh - 100px); */
  overflow: auto;
}

.graytitle {
  background: #f2f2f2;
  padding: 7px 10px;
  text-align: center;
}

.productbox .imgbox {
  padding: 5px;
}

.producttext {
  display: flex;
  padding: 10px;
}

.productbox {
  display: grid;
  grid-template-columns: repeat(6, 2fr);
  column-gap: 30px;
}

@media only screen and (max-width: 1400px) {
  .productbox {
    grid-template-columns: repeat(2, 1fr);
  }
}



@media only screen and (max-width: 1400px) {
  .productbox {
    grid-template-columns: repeat(2, 1fr);
  }
}

.point-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 20px;
}


/* POP 출금체크  */

#advert .row.mrow {
  display: flex;
  /* Flexbox 레이아웃 사용 */
  justify-content: center;
  /* 가로 방향으로 중앙 정렬 */
  align-items: center;
  /* 세로 방향으로 중앙 정렬 */
}

#advert {
  position: fixed;
  top: 10%;
  left: 20%;
  width: 100%;
  height: 100vh;
  display: none;
  z-index: 11;
  align-items: center;
}

#advertbox {
  display: flex;
  justify-content: center;
  align-items: center;
  /* height: 100vh; */
  padding: 0 0px;
}

#advertbox {
  width: 100%;
  max-width: 350px;
  background: #ffffff;
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);
}

#advertbox .contbox {
  padding: 0px;
}

#advertbox .contbox .buytr {
  padding: 8px 0;
  border-bottom: 1px solid #e1e1e1;
}

#advertbox .contbox .buytr div {
  float: left;
}

#advertbox .contbox .buytr div:nth-of-type(1) {
  width: 100px;
  color: #959595;
}

#advertbox .contbox .row .input {
  padding: 0.2em 1em;
}

@media only screen and (max-width: 600px) {
  .w50p {
    width: 50% !important;
  }

  .productbox .w20p {
    width: 40%;
  }

  .productbox .w80p {
    width: 60%;
  }

  .producttext {
    display: block;
  }

  .producttext .w33p {
    width: 100%;
    text-align: right;
  }
  .content {
    margin-top: 80px;
  }
  
}

/********************************************************/

@media only screen and (max-width: 1200px) {
  .miangcard .w25p {
    width: 50%;
  }

  .infobox > .w50p {
    width: 100%;
  }

  .productbox .w25p {
    width: 33%;
    font-size: 0.8rem;
  }
}

@media only screen and (max-width: 800px) {
  .header .btn-bars {
    display: block;
  }

  .leftbox {
    position: absolute;
    left: -100%;
    z-index: 999;
    min-width: 70%;
    width: 360px;
    overflow: scroll;
  }

  .leftbox .logobox img {
    height: 34px;
  }

  .rightbox {
    width: 100%;
  }

  .leftbox .logobox a {
    display: inline-block;
  }

  .leftbox .logobox .close {
    display: block;
  }

  #mobile-close {
    display: flex;
    position: absolute;
    right: 27px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
  }

  .link-button.mobile {
    font-size: 14px;
    padding: 10px;
  }

  .buttons-container {
    display: flex;
    flex-direction: column;
  }

  .gradientbg1 {
    padding: 16px;
  }
}

@media only screen and (max-width: 600px) {
  .signbox {
    height: 100%;
  }

  .signcard {
    padding: 30px 15px;
  }

  .phoneinputbox select {
    padding: 0.6em 0.1em;
  }

  .phoneinputbox .w20p {
    width: 25%;
  }

  .phoneinputbox .w80p {
    width: 75%;
  }

  .miangcard .w25p {
    width: 100%;
  }

  .krwlistgcard .w50p {
    width: 100%;
  }

  .theadbox {
    display: none;
  }

  .tbodybox .tr:first-of-type {
    border-top: 1px solid #e9e9e9;
  }

  .tbodybox .tr {
    display: block;
  }

  .tbodybox .tr .td {
    width: 100%;
    padding: 5px 10px;
  }

  .tbodybox .tr .td span:first-of-type {
    display: inline-block;
  }

  .tbodybox .tr .td span:last-of-type {
    float: right;
    max-width: 90%;
    text-align: right;
  }

  .tbodybox .tr .td span:nth-of-type(2) {
    float: right;
    max-width: 90%;
    text-align: right;
  }

  .tbodybox .tr .td a {
    width: 100%;
  }

  .productbox .w33p {
    width: 100%;
  }

  .calendar-container > input {
    width: 140px;
  }


  @media (max-width: 767px) {
    /* myinfo popup */
    #myinfo {
      position: fixed;
      top: 10px;
      left: -10px;
      width: 100%;
      height: 100vh;
      display: none;
      z-index: 13;
    }

    #myinfobox {
      display: flex;
      justify-content: center;
      align-items: center;
      /* height: 100vh; */
      padding: 0 30px;
    }

    #myinfoinbox {
      width: 100%;
      max-width: 320px;
      background: #ffffff;
      box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);
    }

    #myinfoinbox .contbox {
      padding: 0px;
      max-height: calc(100vh - 100px);

      /* overflow: auto; */
    }

   }


}

/********************************************************************************/

*:required {
  border-color: #d5d5d5;
}

.inputselectbox {
}

.inputselectbox {
  position: relative;
}

.inputselectbox .select {
  position: absolute;
  right: 0;
  top: 0;
  width: 40%;
  padding: 0.52em 0.5em;
  border-top-left-radius: 0px;
  border-bottom-left-radius: 0px;
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
  background: #ffffff;
}

.btn-cl {
  border-radius: 30px;
}

.borderright {
  border-right: 1px solid #e1e1e1;
}

.signcard {
  position: relative;
}

.signclose {
  position: absolute;
  top: 10px;
  right: 20px;
  font-size: 1.5em;
  color: #a5a5a5;
}

.view_con {
  float: none;
}

.login_box li {
  color: #000;
  display: flex;
  align-items: center;
}

.login_box li i.fa {
  margin-right: 5px;
  margin-left: 10px;
  color: #000;
  /* text-shadow: 1px 1px 1px #333; */
}

.login_box span {
  font-size: 20px;
}

.inputwalletbox {
  position: relative;
}

.inputwalletbox .input {
  padding-left: 140px;
}

.inputwalletbox .inputwallettext {
  position: absolute;
  left: 0;
  top: 0;
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
  width: 130px;
  text-align: center;
  background: #d5d5d5;
  color: #ffffff;
  padding: 0.67em 1em;
}

.otpbox {
  margin-bottom: 30px;
}

.otpbox .imgbox {
  padding: 20px;
}

.otpdlbox {
  margin-bottom: 20px;
}

.otpdlbox dt {
  margin-bottom: 20px;
  font-weight: bold;
}

.inputotpbox {
  position: relative;
}

.inputotpbox .input {
  padding-left: 140px;
}

.inputotpbox .inputotptext {
  position: absolute;
  left: 0;
  top: 0;
  border-right: 1px solid #d5d5d5;
  width: 130px;
  text-align: center;
  padding: 0.67em 1em;
}

.inputotpbox .btn {
  position: absolute;
  right: 0;
  top: 0;
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
  padding: 0.7em 1em;
}



.inputotpbox .btn1 {
  position: absolute;
  right: 0;
  top: 0;
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
  padding: 0.7em 1em;
}

@media only screen and (max-width: 1200px) {
  .otpbox .w20p {
    width: 30%;
  }

  .otpbox .w80p {
    width: 70%;
  }
}

@media only screen and (max-width: 500px) {
  .otpbox .w20p {
    width: 100%;
  }

  .otpbox .w80p {
    width: 100%;
  }

  .otpbox .imgbox {
    width: 60%;
    margin-left: 20%;
  }

  .calendar-container > input {
    width: 120px;
  }
}