@import url(//spoqa.github.io/spoqa-han-sans/css/SpoqaHanSans-kr.css);

/*body { padding-top:0; }*/
.qr-container {
  position: absolute;
  top: 100%;
  width: 100%;
  height: 100%;
  z-index: 100000000000;
  display: none;
}

.qr-container.on {
  display: block;
}

.qr-container.up {
  top: 0;
  background-color: black;
}

.qr-container .search-history-wrapper {
  position: absolute;
}


.qr-container .qr-scanner-wrapper { position:relative; height:100%; }
.qr-container .qr-scanner-wrapper::before { z-index:10; position:absolute; top:0; left:0; width:100%; height:calc(100% - 4.3rem); background-color:rgba(0, 0, 0, 0.5); content:''; transition:all 0.5s linear; }
.qr-container .qr-scanner-wrapper .qr-scanner-header { z-index:20; position:relative; padding:1.45rem 1.54rem; }
.qr-container .qr-scanner-wrapper .qr-scanner-header h2 { color:#ffffff; font-size:1.4rem; font-family:'SpoqaHanSans', 'Spoqa Han Sans', 'Lato', 'Noto' !important; letter-spacing:-0.034rem; line-height:1.63; text-align:center; }
.qr-container .qr-scanner-wrapper .qr-scanner-header .btn-scanner-close { position:absolute; top:0; right:1.54rem; bottom:0; width:2.05rem; height:2.05rem; margin-top:auto; margin-bottom:auto; font-size:0; }
.qr-container .qr-scanner-wrapper .qr-scanner-header .btn-scanner-close::before { position:absolute; top:0; left:0; display:block; width:100%; height:100%; background:url('https://i.balaan.io/balaanfront/mobile/img/my/sprite-qr-code-scanner.png') no-repeat left top; background-size:9rem auto; content:''; }

.qr-container .qr-scanner-wrapper #qr-scanner-canvas { visibility:hidden; position:absolute; top:0; left:0; width:100%; height:0; }

.qr-container .qr-scanner-wrapper .qr-scanner-container { z-index:20; position:relative; top:calc(50% - 4.3rem); left:0; width:100%; transform:translateY(-50%); transition:all 0.2s linear; }
.qr-container .qr-scanner-wrapper .qr-scanner-container p { margin-top:2.56rem; color:#ffffff; font-size:1.6rem; line-height:1.39; letter-spacing:-0.034rem; font-family:'SpoqaHanSans', 'Spoqa Han Sans', 'Lato', 'Noto' !important; text-align:center; }
.qr-container .qr-scanner-wrapper .qr-scanner-container .after-text { display:none; }
.qr-container .qr-scanner-wrapper .qr-scanner-container .qr-scanner-frame1 { position:relative; width:18.07rem; height:18.07rem; margin-right:auto; margin-left:auto; background:url('https://i.balaan.io/balaanfront/mobile/img/my/bg-qr-scanner-center.png') no-repeat center; background-size:8.87rem auto; transition-property:width, height; transition-duration:0.3s; transition-timing-function:linear; }
.qr-container .qr-scanner-wrapper .qr-scanner-container .qr-scanner-frame2 { position:relative; width:100%; height:100%; }
.qr-container .qr-scanner-wrapper .qr-scanner-container .qr-scanner-frame1::before,
.qr-container .qr-scanner-wrapper .qr-scanner-container .qr-scanner-frame1::after,
.qr-container .qr-scanner-wrapper .qr-scanner-container .qr-scanner-frame2::before,
.qr-container .qr-scanner-wrapper .qr-scanner-container .qr-scanner-frame2::after { display:block; position:absolute; width:5.46rem; height:5.46rem; background-image:url('https://i.balaan.io/balaanfront/mobile/img/my/sprite-qr-code-scanner.png'); background-repeat:no-repeat; background-position:left -2.4rem; background-size:8.7rem auto; content:''; }
.qr-container .qr-scanner-wrapper .qr-scanner-container .qr-scanner-frame1::before { top:0; left:0; }
.qr-container .qr-scanner-wrapper .qr-scanner-container .qr-scanner-frame1::after { top:0; right:0; transform:rotateY(-180deg); }
.qr-container .qr-scanner-wrapper .qr-scanner-container .qr-scanner-frame2::before { bottom:0; left:0; transform:rotateX(180deg); }
.qr-container .qr-scanner-wrapper .qr-scanner-container .qr-scanner-frame2::after { bottom:0; right:0; transform:rotate(180deg); }

.qr-container .search-history-wrapper { position:absolute; bottom:0; left:0; width:100%; margin-top:0.52rem; background-color:#ffffff; }
.qr-container .search-history-wrapper a { display:block; position:relative; padding:1.2rem 1.54rem 1.2rem 4.26rem; color:#0b0d0f; font-size:1.2rem; font-family:'SpoqaHanSans', 'Spoqa Han Sans', 'Lato', 'Noto' !important; letter-spacing:-0.043rem; line-height:1.57; }
.qr-container .search-history-wrapper a::before, .qr-container .search-history-wrapper a::after { display:block; position:absolute; top:0; bottom:0; margin-top:auto; margin-bottom:auto; background-image:url('https://i.balaan.io/balaanfront/mobile/img/my/sprite-qr-code-scanner.png'); background-repeat:no-repeat; background-size:8.87rem auto; content:''; }
.qr-container .search-history-wrapper a::before { left:1.54rem; width:2.05rem; height:2.05rem; background-position:left 91%; }
.qr-container .search-history-wrapper a::after { right:1.54rem; width:1.71rem; height:1.71rem; background-position:left bottom; }

.qr-container .qr-scanner-wrapper.on::before { opacity:0; }
.qr-container .qr-scanner-wrapper.on #qr-scanner-canvas { visibility:visible; height:100%; }
.qr-container .qr-scanner-wrapper.on .qr-scanner-container { background-image:none; }
.qr-container .qr-scanner-wrapper.on .qr-scanner-container { transform:translateY(-48%); }
.qr-container .qr-scanner-wrapper.on .qr-scanner-container .before-text { display:none; }
.qr-container .qr-scanner-wrapper.on .qr-scanner-container .after-text { display:block; }
.qr-container .qr-scanner-wrapper.on .qr-scanner-container .qr-scanner-frame1 { width:28.89rem; height:28.89rem; background-image:none; }
.qr-container .qr-scanner-wrapper.on .qr-scanner-container .qr-scanner-frame1::before,
.qr-container .qr-scanner-wrapper.on .qr-scanner-container .qr-scanner-frame1::after,
.qr-container .qr-scanner-wrapper.on .qr-scanner-container .qr-scanner-frame2::before,
.qr-container .qr-scanner-wrapper.on .qr-scanner-container .qr-scanner-frame2::after { width:3.41rem; height:3.41rem; }