/* div.Nvikie > * > * > button:focus, div.Qvikie > * > * > button:focus, div.Pvikie > * > * > button:focus { outline: none; box-shadow: none; } */
div.Nvikie>*,
div.Nvikie>*>*,
div.Qvikie>*,
div.Qvikie>*>*,
div.Pvikie>*,
div.Pvikie>*>* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

/* 모바일 우선 스타일 */
div.Nvikie,
div.Qvikie,
div.Pvikie {
  --isMobile: true;
  width: 100%;
  visibility: hidden;
  position: fixed;
  left: 0;
  bottom: 0;
  outline: none;
}

div.Nvikie {	
  height: 28rem;
  /* height: 45%; */
  z-index:10002!important
}

div.Qvikie {
  height: 55%;
}

div.Pvikie {
  height: 60%;
}

.v_top {
  width: 100%;
  height: 10%;
  border: 1px solid;
  border-bottom: none;
  background-color: white;
}

.v_top>div.v_logo {
  width: 20%;
}

.v_top>div.v_hint {
  width: 10%;
  height: calc(100% - 5px);
}

.v_top>div.v_size {
  width: 60%;
  height: calc(100% - 5px);
  overflow: hidden;
  white-space: nowrap;
}

.v_top>div.v_close {
  float: right;
  width: 10%;
  border-left: 1px solid;
}

.v_top>div.v_pad {
  margin-top: 5px;
}

.Qvikie .v_top>div.v_pad {
  margin-top: 8px;
}

.Qvikie .v_top>div.v_hint {
  height: calc(100% - 8px);
}

.Qvikie .v_top>div.v_size {
  height: calc(100% - 8px);
}

.v_center {
  /* border: 1px solid; */
}

.Nvikie>.v_center {
  width: 100%;
  height: 90%;
  padding: 16px;
  /* background-color: #707070; */
  background-color: #f4f6f9;
}

.Nvikie>.v_center>div.v_col,
.Nvikie>.v_center>div.v_specol {
  float: left;
  width: 25%;
  height: 25%;
  padding: 2px;
}

.Qvikie>.v_center {
  width: 100%;
  height: 90%;
  padding: 1.5px;
  background-color: #707070;
}

.Qvikie>.v_center.full {
  height: 100%;
}

.Qvikie>.v_center>div>button {
  border-radius: 4px;
}

.Qvikie>.v_center>div>button.NumberButton {
  background-color: #d2d4d6;
}

.Pvikie>.v_center {
  width: 100%;
  height: 90%;
  padding: 5px;
  background-color: white;
}

.Pvikie>.v_center>svg {
  height: 100%;
}

.Nvikie>.v_center.full,
.Pvikie>.v_center.full {
  height: 100%;
}

.Qvikie>.v_center>div.v_col,
.Qvikie>.v_center>div.v_specol {
  float: left;
  width: calc(100%/11);
  height: 20%;
  padding: 1px;
}

.Qvikie>.v_center>div.v_col.v_pad {
  margin-left: calc(100%/11/2);
}

/* 숫자 special button size */
.Nvikie>.v_center>div.v_specol.two {
  width: calc(100%/2);
}

.Nvikie>.v_center>div.v_specol.three {
  width: calc(100%/1.355);
}

.Nvikie>.v_center>div.v_specol.four {
  width: 98.5%;
}

/* 쿼티 special button size */
.Qvikie>.v_center>div.v_specol.backspace,
.Qvikie>.v_center>div.v_specol.rearrange,
.Qvikie>.v_center>div.v_specol.space {
  width: calc(100%/11*2);
}

.Qvikie>.v_center>div.v_specol.transform,
.Qvikie>.v_center>div.v_specol.complete {
  width: calc(100%/11*3.5);
}

/**************** 공통 ****************/
/* img tag drag 방지 */
.v_center>div>button,
.v_top div {
  user-select: none;
}

.v_center>div>button img,
.v_top div img {
  -webkit-user-drag: none;
  -khtml-user-drag: none;
  -moz-user-drag: none;
  -o-user-drag: none;
}

.v_top>div {
  float: left;
  height: 100%;
  text-align: center;
}

.v_top>div.v_close>button {
  width: 100%;
  height: 100%;
  border: 0px;
  background-color: transparent;
  cursor: pointer;
}

.Nvikie #pfq {
  background-color: rgb(204, 204, 204);
  fill: black;
  opacity: 0;
}

.Qvikie #pfq {
  background-color: transparent;
  fill: black;
  opacity: 0;
}

/* center button */
.v_center>div.v_col>button,
.v_center>div.v_specol>button {
  width: 100%;
  height: 100%;
  border: 0px;
  padding: 0 0;
  cursor: pointer;
}

.v_center>div.v_col>button {
  background-color: white;
}

.v_center>div.v_col>button.blank {
  /* background-color: transparent; */
  background-color: #fff;
  cursor: default;
}

.v_center>div.v_col>button.blank img {
  width: 45% !important;
  height: 90%;
}

/* 숫자,쿼티 special button color */
.v_center>div.v_specol.security>button {
  background-color: #707070;
}

.v_center>div.v_specol.backspace>button,
.v_center>div.v_specol.rearrange>button,
.v_center>div.v_specol.transform>button,
.v_center>div.v_specol.space>button {
  /* background-color: #d2d4d6; */
  background-color: #fff;
}

.v_center>div.v_specol.complete>button {
  /* background-color: #f04f00; */
  background-color: #08774e;
  border: 1px solid #000;
  position: relative;
}

.v_center>div.v_specol.complete>button::after {
  content: "입력완료";
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  color: #fff;
  font-size: 20px;
  font-weight: 500;
  line-height: 28px;
  transform: translate(-50%, -50%);
}

.v_center>div.v_specol.complete>button img {
  display: none;
}

.Qvikie>.v_center>div.v_col.shift>button {
  background-color: #d2d4d6;
}

/***************************************/
.test {
  background-color: rgba(255, 0, 0, 0.5);
  /* 투명한 붉은색 */
  position: fixed;
  /* 뷰포트를 기준으로 위치 */
  top: 50%;
  left: 50%;
  /* 뷰포트의 가로 중앙 기준 */
  width: 100%;
  /* 넓이를 뷰포트 기준 70%로 설정 */
  max-width: 600px;
  /* 넓이 최대값 */
  height: 120%;
  /* 높이를 뷰포트 기준 110%로 설정 */
  transform: translate(-50%, -50%);
}

.form-signin {
  max-width: 600px;
  position: absolute;
  width: 90%;
  height: 6450px;
  padding: 10px;
  top: 50%;
  /* 전체 높이 위에서부터 절반 */
  left: 50%;
  /* 전체 넓이 왼쪽에서부터 절반 */
  transform: translate(-50%, -7%);
  /* 해당 요소의 높이, 넓이의 절반만큼 돌아가기 */
  background-color: gray;
  display: block;
  /* 기본적으로 보이도록 설정 */
  z-index: 9999;
}

/* 데스크탑용 스타일 */
@media screen and (min-width: 769px) {
  div.Nvikie {
  --width:680px;
  width:680px;
  left: calc(100%/2 - var(--width)/2);    
    /* --isMobile: false;
    --width: 260px;
    --height: 170px;
    width: 260px;
    height: 170px;
    left: calc(100%/2 - var(--width)/2);
    bottom: calc(100%/2 - var(--height)/2);
    position: fixed; */
  }

  div.Qvikie {
    /* --isMobile: false; */
    --width: 510px;
    --height: 245px;
    width: 510px;
    height: 245px;
    left: calc(100%/2 - var(--width)/2);
    bottom: calc(100%/2 - var(--height)/2);
    position: fixed;
  }

  div.Pvikie {
    --width: 260px;
    --height: 300px;
    width: 260px;
    height: 300px;
    left: calc(100%/2 - var(--width)/2);
    bottom: calc(100%/2 - var(--height)/2);
    position: fixed;
  }

  .Nvikie>.v_top {
    height: 20%;
  }

  .Qvikie>.v_top {
    height: 15%;
  }

  .Pvikie>.v_top {
    height: 13%;
  }

  .v_top>div.v_logo {
    width: 100px;
  }

  .v_top>div.v_hint {
    width: 30px;
  }

  .Nvikie .v_top>div.v_size,
  .Pvikie .v_top>div.v_size {
    width: 75px;
  }

  .Qvikie .v_top>div.v_size {
    width: 333px;
  }

  .v_top>div.v_close {
    width: 38px;
  }

  .Nvikie>.v_center {
    width: 100%;
    height: 80%;
    padding: 8px 10px;
  }

  .Nvikie>.v_center>div.v_col,
  .Nvikie>.v_center>div.v_specol {
    width: calc(100%/6.001);
    height: calc(100%/3);
    padding: 1.5px 1.5px;
  }

  .Nvikie.v_center>div>button,
  .Qvikie>.v_center>div>button {
    border-radius: 2px;
  }

  .Qvikie>.v_center {
    width: 100%;
    height: 85%;
    padding: 15px;
  }

  .Qvikie>.v_center>div.v_col.v_pad {
    margin-left: calc(100%/11/2);
  }

  .Pvikie>.v_center {
    width: 100%;
    height: 87%;
  }

  /* 숫자 special button size */
  .Nvikie>.v_center>div.v_specol.security,
  .Nvikie>.v_center>div.v_specol.backspace {
    width: calc(100%/6);
  }

  .Nvikie>.v_center>div.v_specol.rearrange,
  .Nvikie>.v_center>div.v_specol.complete {
    width: calc(100%/3);
  }

  /* 쿼티 special button size */
  .Qvikie>.v_center>div.v_col.shift,
  .Qvikie>.v_center>div.v_specol.backspace {
    /* 1.5칸 */
    width: calc(100%/11*1.5);
  }

  .Qvikie>.v_center>div.v_specol.security,
  .Qvikie>.v_center>div.v_specol.transform,
  .Qvikie>.v_center>div.v_specol.rearrange,
  .Qvikie>.v_center>div.v_specol.complete {
    /* 2칸 */
    width: calc(100%/11*2);
  }

  .Qvikie>.v_center>div.v_specol.space {
    /* 3칸 */
  }

  /*박스 영역 내 출력 설정*/
  div.relativeBox {
    position: absolute;
    width: 100%;
    height: 300px;
  }

  .relativeBox>.v_top {
    height: 15%;
  }

  .relativeBox>.v_top>div.v_logo {
    width: 20%;
  }

  .relativeBox>.v_top>div.v_hint {
    width: 10%;
  }

  .relativeBox>.v_top>div.v_close {
    width: 10%;
  }

  .relativeBox>.v_center {
    height: 85%;
  }

  .relativeBox>.v_top>div.v_size {
    width: 60%;
    margin-top: 10px;
  }
}

/* 포인팅된 점 설정 */
.discoverDot {
  fill: yellow !important;
}

/* 포인팅된 점 외 설정 */
.patternlock>.lock-dots>.circle {
  stroke: transparent;
  fill: #e5e5e5;
  stroke-width: 13.5;
}

/* 포인팅된 라인 설정 */
.patternlock>.lock-lines>.line {
  stroke-width: 1;
  stroke-linecap: round;
  stroke: #ff4800;
}

/* 포인팅된 점의 라운드 설정 */
.patternlock>.lock-actives>.circle {
  fill: #000;
  opacity: 0.2;
  animation: lock-activate-dot 0.15s 0s ease 1;
  transform-origin: center;
}