:root {
  --layer-header-height: 50px;
}

/* popup layer */
.layer-pop-box {
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9998;
  display: none
}

.layer-pop-box .popDiv {
  width: 95%;
  height: 95%;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 9999
}

.layer-pop-box .popDivIn {
  width: auto;
  height: 100%;
  overflow: hidden;
  margin: 0 auto
}

.layer-pop-box .popDivIn {
  display: flex;
  flex-direction: column;
}

.layer-pop-box .pdi_tl {
  justify-content: flex-start;
  align-items: flex-start;
  align-content: flex-start;
}

.layer-pop-box .pdi_tc {
  justify-content: flex-start;
  align-items: center;
  align-content: center;
}

.layer-pop-box .pdi_tr {
  justify-content: flex-start;
  align-items: flex-end;
  align-content: flex-end;
}

.layer-pop-box .layer-pop-box .pdi_cl {
  justify-content: center;
  align-items: flex-start;
  align-content: flex-start;
}

.layer-pop-box .pdi_cc {
  justify-content: center;
  align-items: center;
  align-content: center;
}

.layer-pop-box .pdi_cr {
  justify-content: center;
  align-items: flex-end;
  align-content: flex-end;
}

.layer-pop-box .layer-pop-box .pdi_bl {
  justify-content: flex-end;
  align-items: flex-start;
  align-content: flex-start;
}

.layer-pop-box .pdi_bc {
  justify-content: flex-end;
  align-items: center;
  align-content: center;
}

.layer-pop-box .pdi_br {
  justify-content: flex-end;
  align-items: flex-end;
  align-content: flex-end;
}

.layer-pop-box>div:last-child {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
}

/* layer common */
.layer_box {
  width: 100%;
  max-width: max-content;
  height: auto;
  max-height: 100%
}

.layer_box.w100 {
  width: 100%
}

.lb_header {
  width: auto;
  height: var(--layer-header-height);
  line-height: var(--layer-header-height);
  display: flex;
  justify-content: space-between;
}

.lbh_title {
  width: 100%;
  color: #fff;
  font-weight: bold;
  padding: 0 10px;
  box-sizing: border-box
}

.lbh_close {
  width: calc(var(--layer-header-height) * 1.5);
  height: 100%;
  text-align: center;
  cursor: pointer;
  position: relative
}

.ic_close_img:before,
.ic_close_img:after {
  content: '';
  width: 45%;
  height: 3px;
  position: absolute;
  top: 50%;
  border-radius: 4px;
  background: #fff
}

.ic_close_img:before {
  transform: translate(-50%, -50%) rotate(-45deg)
}

.ic_close_img:after {
  transform: translate(-50%, -50%) rotate(45deg)
}

.lb_contents {
  width: 100%;
  height: calc(100% - var(--layer-header-height));
  overflow-x: hidden;
  overflow-y: auto;
  box-sizing: border-box
}

.lb_contents_in {
  width: 100%;
  overflow-x: auto;
  padding: 5px 0;
}

::-webkit-scrollbar {
  -webkit-appearance: none
}

/* 스크롤 바 */
::-webkit-scrollbar:vertical {
  width: 8px
}

::-webkit-scrollbar:horizontal {
  height: 8px
}

::-webkit-scrollbar-track {
  background-color: #fff
}

/* 스크롤 바 밑의 배경 */
::-webkit-scrollbar-thumb {
  background: #ddd;
  border-radius: 50px
}

/* 실질적 스크롤 바 */
::-webkit-scrollbar-thumb:hover {
  background: #404040
}

/* 실질적 스크롤 바 위에 마우스를 올려다 둘 때 */
::-webkit-scrollbar-thumb:active {
  background: #808080
}

/* 실질적 스크롤 바를 클릭할 때 */
::-webkit-scrollbar-button {
  display: none
}

/* 스크롤 바 상 하단 버튼 */

/* .lb_header{background:var(--main_color)} 레이어 타이틀 배경 */
.lbh_title {
  color: #f1f1f1
}

/* 레이어 타이틀 */
.ic_close_img:before,
.ic_close_img:after {
  background: #fff
}

/* close 버튼 색상 */
.lb_contents {
  background: #fff;
  padding: 0;
}

/* 레이어 컨텐츠 배경 */

.info_input>button {
  min-width: 100px;
}


/* 여기만 수정하세요 */
.layerBg {
  background: #000;
  opacity: 0.8
}

.layer_box {
  border: 0px solid #000;
  box-sizing: border-box;
  border-radius: 15px;
  overflow: hidden;
  background: #fff;
}

.lbh_title {
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  border-radius: 10px;
}

.lb_header {
  background: #652eaf;
}