@charset "utf-8";

[v-clock] {
    display: none;
}

html, body {
  -webkit-overflow-scrolling:touch;
}
input[type=tel], input[type=text] { -webkit-appearance: none;  -moz-appearance: none;  appearance: none;  box-shadow:none; border-radius: 0px }
*:focus { outline: none; }

/* html5요소 하위브라우져 적용 */
header, footer, section, article, aside, nav, hgroup, details, menu, figure, figcaption {display:block}
/* 모든 Device를 위한 공통 로드 */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,figure,figcaption,span{margin:0;padding:0;font-family:Nanum Gothic;color:#333333;}
*{-webkit-text-size-adjust:none;}
body{height:100%;font-size:12px;font-family:Nanum Gothic;color:#464646;}
table{border-spacing:0;*border-collapse:collapse;font-family:Nanum Gothic}
fieldset,img{border:0}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;font-family:Nanum Gothic}
ol,ul{list-style:none;font-family:Nanum Gothic}
legend,caption{text-indent:-100%;*text-indent:0;white-space:nowrap;overflow:hidden;font-size:0;line-height:0;text-shadow:none;color:transparent;}
a {text-decoration:none;color:#333;font-size:12px;font-family:Nanum Gothic;white-space:nowrap;color:#464646;}
select,input{vertical-align:middle;font-family:Nanum Gothic}
.clfix{*zoom:1}
.clfix:after {clear: both;content: ".";display: block;height: 0;visibility: hidden;}
.ir{overflow:hidden;text-indent:-9999px;position:absolute;z-index:-9999;top:-10000px;left:-100000px;}
.ellipsis{white-space: nowrap;overflow: hidden;text-overflow: ellipsis}
.block{display:block;}
.inline{display:inline;}
.inlineBlock{display:inline-block;*zoom:1;*display:inline;}
.clear{clear:both}
.overHidden{overflow:hidden}

/* body{} */

/* margin */
.mt0{margin-top:0 !important;}

.mtM10{margin-top:-10px !important}

.ml0{margin-left:0 !important;}

.mr1{margin-right:1px !important;}

.mb0{margin-bottom:0 !important;}

/* padding */
.pt0{padding-top:0 !important;}

.pb6{padding-top:6px !important;}

.pl0{padding-left:0 !important;}

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

/* text type */

/* btns */

/* align */
.fl_left{float:left;}
.fl_right{float:right;}
.cl_left{clear:left}
.center{text-align:center !important;}
.top{vertical-align:top !important}
.bottom{vertical-align:bottom}
.middle{vertical-align:middle !important}
.alignRight{text-align:right !important}
.alignLeft{text-align:left !important}

/* position */
.posRel{position:relative;z-index:1;}

/* width */
.w52{width:52px !important}
/* height */
.h30{height:30px;}

/* text style */
.bold{font-weight:700;}
.redTxt{color:red !important}
.blueTxt{color:blue !important}
.greenTxt{color:#548826 !important}
.color777{color:#777 !important}

/* display */
.displayNone{display:none;}
 
/* lineheight */
.lineHeight0{line-height:0px !important;}

/* btns */

/* paging */

/* skip navigation */
a.skipNaviBtn{position: absolute;z-index:100;background:none repeat scroll 0 0 #ea0e15;color:#ffffff;display:block;left:-200%;text-align:center;width:200px;padding:5px 0;border:1px solid #000000;border-top:none;}
a.skipNaviBtn:focus{left:50%;margin-left:-100px;z-index:10000;}
a.skipNaviBtn:hover {left:50%;margin-left:-100px;z-index:10000;}
a.skipNaviBtn:active {left:50%;margin-left:-100px;z-index:10000;}

#header{position:relative;z-index:1;width:87.5%;height:15px;padding:33px 6.25% 0;}
#header>h1{line-height:17px;text-align:center;font-size:17px;font-weight:800;letter-spacing:-0.02em;}
.closeBtn{display:inline-block;position:absolute;z-index:1;bottom:0;left:6.25%;margin:0 20px 0 7px;padding:0;width:2px;height:16px;background:#000;transform:rotate(45deg);text-indent:999px;}
.closeBtn:before{display: block;content:"";position:absolute;top:50%;left:-7px;width:16px;height:2px;margin-top:-1px;background:#000;}
.closeBtn>span{display:none;}
.closeBtnArea{background: transparent; cursor: pointer; top: 10px; right: 5px; bottom: auto; left: auto; position: absolute; width: 40px; height: 40px;}

.backBtn{position:absolute;z-index:1;bottom:0;border:solid black;border-width:0 2px 2px 0;display:inline-block;padding:5px;transform: rotate(135deg);-webkit-transform: rotate(135deg);}
.backBtn>span{display:none;}


.stepMark{display:block;padding:31px 0 20px 0;text-align:center;background:none}
.stepMark>strong{overflow:hidden;display:inline-block;width:7px;height:7px;margin:0 3px;text-indent:600px;background:#7ba0ed;border-radius:50%;}
.stepMark>span{overflow:hidden;display:inline-block;width:7px;height:7px;margin:0 3px;text-indent:600px;background:#e1e1e1;border-radius:50%;}

.pageHeader{text-align:center;}
.pageHeader .imgIcon{display:inline-block;width:20px;margin:0 auto;}
.pageHeader .titleType1{line-height:20px;font-size:15px;font-weight:700;}
.pageHeader .textType1{line-height:17px;font-size:13px;color:#999;letter-spacing:-0.05em;}
.pageHeader .textType1 strong{font-weight:700;color:#333;}

.inputCardNum{position:relative;z-index:1;width:calc(100% - 40px);height:45px;margin:17px auto 0;box-sizing:border-box;overflow:hidden}
.inputCardNum>input{float:left;width:60%;height:22px;padding:10px 0 10px 10px;line-height:22px;font-weight:700;font-size:13px;letter-spacing:-0.05em;border:1px solid #ddd;}
.inputCardNum>input.fullSize{width:calc(100% - 12px)}
.inputCardNum>input.fourNum{width:calc(50% - 10px)}
.inputCardNum .btnQr{float:right;width:35%;height:42px;border:1px solid #282828}
.inputCardNum .btnQr span{display:inline-block;margin:6px 0 0 8px;line-height:28px;vertical-align:middle;}
.inputCardNum .btnQr img{display:inline-block;width:20px;line-height:28px;margin:7px 0 0 9px;vertical-align:middle;}
.inputCardNum>.btnReset{position:absolute;z-index:1;right:67px;top:14px;display:block;width:16px;}
.inputCardNum>.btnReset img{display:block;width:100%;}
.inputCardNum>.timerNum{position:absolute;z-index:1;right:10px;top:10px;padding:0 0 0 10px;height:25px;line-height:25px;font-size:13px;color:#f66f8d;letter-spacing:-0.05em;border-left:1px solid #ddd;}
.cautionTxt{width:calc(100% - 56px);margin:12px auto;font-size:14px;line-height:17px;text-indent:-16px;padding:0 0 0 16px;}
.cautionTxt strong{color:#7ba0ed}

.cfmNumTxt{padding:13px 0 0 0;text-align:center;line-height:18px;}
.cfmNumTxt span{font-size:11px;color:#9f9f9f;font-weight:700;}
.cfmNumTxt a{font-size:11px;color:#f66f8d;font-weight:800;border-bottom:1px solid #f66f8d;}

.submitBtn{display:block;width:calc(100% - 40px);height:45px;margin:15px auto 0;line-height:43px;box-sizing:border-box;text-align:center;font-size:15px;color:#fff;background:#7ba0ed;border:1px solid #6891e5}
.submitBtn.fixedBottom{margin-top:140px}
.submitBtn.cancelBtn{ width: 48%; float: left; margin-left: 1%; background: #c2c2c2; border: 1px solid #b2b2b2;}
.submitBtn.modifyBtn{ width: 48%; float: right; margin-right: 1%; }
.submitBtn.disabled{background: #d3d3d3; border: 1px solid #c2c2c2;}
.changeMobileNoBtn {width: 50px;display: inline-block;border-radius: 5px;margin: 10px 0 10px 10px; }

.rowStyleTable{table-layout:fixed;width:100%;margin:11px auto 0;border-top:1px solid #d3d3d3}
.rowStyleTable th,.rowStyleTable td{text-align:left;line-height:24px;padding:13px 0;border-bottom:1px solid #d3d3d3}
.rowStyleTable th{text-indent:20px;font-size:15px;color:#323232;letter-spacing:-0.02em;font-weight:400;}
.rowStyleTable td{position:relative;z-index:1;padding:0 20px 0 0;text-align:right;font-size:15px;color:#999;letter-spacing:-0.02em;}
.rowStyleTable th h3{font-size:15px;color:#323232;font-weight:700;}

.checkMkt{position:relative;z-index:1;float:right;width:18px;height:18px;margin:4px 20px 0 0;}
/*.checkMkt:checked:after{position:absolute;z-index:1;top:0;left:0;content:'';display:block;width:18px;height:18px;background:#fff url(../images/holderreg/img_check.gif) 3px 4px no-repeat;background-size:12px 9px;border:1px solid #e1e1e1}*/

.agreeTermsWrap{width:87.5%;padding:10px 6.25% 0;margin:18px 0 0 0;border-top:1px solid #e1e1e1;}

.checkAll{padding:10px 0;border-bottom:1px solid #e1e1e1;}

.checkAgr{position:relative;z-index:1;width:18px;height:18px;margin:0 4px 0 0;}
/*.checkAgr:checked:after{position:absolute;z-index:1;top:0;left:0;content:'';display:block;width:18px;height:18px;background:#fff url(../images/holderreg/img_check.gif) 3px 4px no-repeat;background-size:12px 9px;border:1px solid #e1e1e1}*/

.checkAll label{font-size:13px;color:#333;font-weight:700;}
.agreeTermsWrap ul{padding:10px 0;}
.agreeTermsWrap ul li{clear:both;padding:5px 0;}
.agreeTermsWrap ul li label{font-size:13px;color:#999;letter-spacing:-0.05em}
.agreeTermsWrap ul li a{float:right;font-size:9px;color:#999;border-bottom:1px solid #999;letter-spacing:-0.04em;}

.wrongTxt{position:relative;z-index:1;width:calc(100% - 40px);line-height:15px;color:#f66f8d;font-size:11px;font-weight:700;margin:7px auto 0;box-sizing:border-box;}

.inputUserInfo{position:relative;z-index:1;width:calc(100% - 40px);margin:7px auto 0;box-sizing:border-box;}
.inputUserInfo>input{width:calc(100% - 12px);height:22px;padding:10px 0 10px 10px;margin:10px 0 0 0;line-height:22px;font-weight:700;font-size:13px;letter-spacing:-0.05em;border:none;border:1px solid #ddd; }

.bigImg{display:block;width:74px;margin:42px auto;}

.checkInfoBtn{display:inline-block;line-height:14px;font-size:13px;font-weight:700;color:#373737;border-bottom:1px solid #373737;}

/* layer */
.dimmedWrap{position:fixed;z-index:3;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.5)}
.dimmedWrap .layerCon{position:absolute;z-index:3;top:32%;width:87.5%;left:6.25%;box-sizing:border-box;padding:0 20px 20px 20px;background:#fff;}
.dimmedWrap .layerCon>h3{padding:37px 0;line-height:22px;text-align:center;font-size:15px;color:#333;}
.dimmedWrap .layerCon .layerBtns{width:100%;}
.dimmedWrap .layerCon .layerBtns a{width:48%;height:40px;line-height:40px;font-size:13px;text-align:center;color:#fff;}
.dimmedWrap .layerCon .layerBtns a.btn1{float:left;background:#c2c2c2}
.dimmedWrap .layerCon .layerBtns a.btn2{float:right;background:#7ba0ed}

.dimmedWrap .termsLayerCon{overflow-y:auto;position:absolute;z-index:3;top:10%;width:87.5%;height:80%;left:6.25%;box-sizing:border-box;padding:0 20px 20px 20px;background:#fff;}
.dimmedWrap .termsLayerCon>h3{padding:37px 0;line-height:22px;text-align:center;font-size:15px;color:#333;}
.dimmedWrap .termsLayerCon .closeBtn{top:20px;right:5px;bottom:auto;left:auto;}
/* .dimmedWrap .termsLayerCon .termsTxtWrap{} */
.dimmedWrap .termsLayerCon .termsTxtWrap h4{padding:8px 0;line-height:15px;font-size:12px;letter-spacing:-0.05em;}
.dimmedWrap .termsLayerCon .termsTxtWrap p{line-height:15px;color:#323232;font-size:11px;letter-spacing:-0.02em;}
.dimmedWrap .termsLayerCon .termsTxtWrap table{table-layout:fixed;width:100%;border-collapse:collapse;}
.dimmedWrap .termsLayerCon .termsTxtWrap table th{padding:3px 0;line-height:16px;background:#eee;text-align:center;font-size:11px;border:1px solid #aaa}
.dimmedWrap .termsLayerCon .termsTxtWrap table td{padding:3px 0;line-height:16px;background:#fff;text-align:center;font-size:11px;border:1px solid #aaa}

.barcodeInfoImg{width:calc(100% - 40px);margin:35px auto 0}
.barcodeInfoImg>img{display:block;width:100%;}

/* Smartphones (portrait and landscape) */
@media only screen
and (min-device-width : 320px) {
/* Styles */
}

/* Smartphones (landscape) */
@media only screen
and (min-width : 321px) {
	/* Styles */
}

/* Smartphones (portrait) */
@media only screen
and (max-width : 320px) {
	/* Styles */
}

/* iPads (portrait and landscape) */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
	/* Styles */
}

/* iPads (landscape) */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
	/* Styles */
}

/* iPads (portrait) */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
	/* Styles */
}

/* Desktops and laptops */
@media only screen
and (min-width : 1224px) {
	/* Styles */
}

/* Large screens  */
@media only screen
and (min-width : 1824px) {
	/* Styles */
}

/* iPhone 4 */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
	/* Styles */
}


/* .has-error { outline: 1px solid #D84314 !important } */

.cameraViewerContainer video { position: absolute; width: 100%; object-fit: contain; } /** width: 100%; height: 100%; object-fit: contain;*/
.cameraViewerContainer .videoMask {
  z-index: 21000; position: absolute; width: 100%; height: 100%; border-top: 10em solid rgba(0,0,0, 0.9); border-bottom: 10em solid rgba(0,0,0, 0.9); border-left: 1em solid rgba(0,0,0,0.9); border-right: 1em solid rgba(0,0,0,0.9); box-sizing: border-box;
}
.cameraViewerContainer .videoMaskText {
  position: absolute; z-index: 21001; color: white; text-align: center; font-size: 1.3em; display: inline-block; width: 100%; top: 5em;
}
.cameraViewerContainer canvas { position: absolute; width: 100%; height: 100%; }
.cameraViewerContainer{ position: fixed; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 1); top: 0; left: 0; z-index: 20000;}
.cameraViewer { display: flex; align-items: center; flex-direction: row; justify-content: center;} /* width: 100%; height: 100%;  */
.cameraSelectContainer { display:none; margin-left: 2%; position: absolute; z-index: 22000; bottom: 1em; width: 96%; }
.cameraSelectLabel { width: 6em; color: #fff; font-size: 1.3em; display: inline-block; text-align: center; }
.cameraSelector {
    -webkit-appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    background: -webkit-linear-gradient(white, #666);
    border: 1px solid #ccc;
    border-radius: 5px;
    color: white;
    text-shadow: 0 0 4px rgba(0, 0, 0, 0.8);
    width: calc(100% - 10em);
    margin-right: 2%;
    line-height: 32px;
    text-indent: 1em;
}
/** naver QR코드 생성시 미리보기설명에 나오는 문구. 사이트를 크롤링하여 본문내용을 보여주는것으로 짐작됨.
 * title, meta태그처럼 화면에 보이지 않는 태그, display:none 스타일이 적용된 태그는 skip됨.
 */
.qrcodeDescription { position: absolute; left: -1000px; width: 0px; height: 0px; text-indent: -9999px; }