@charset "utf-8";

input:focus {outline: none; color:#7a7a7a; }

.qrBtn {
	height: 50px;
	width: 40%;
	appearance: none;
	border: 0;
	border-radius: 4px;
	padding: 10px 16px;
	font-size: 15px;
	background: #e5e7eb;
	cursor: pointer;
	color: #1e2124;
}

.qrBtn.btn--primary{
	background: #286ce4;
	color: #fff;
}

/* Popup========================================== */

#mask {position:absolute; z-index:9000; background-color:#000; display:none; left:0; top:0; }
#default-mask {position:absolute; z-index:19000; background-color:#000; display:none; left:0; top:0; }
.pop-title {width:100%; font-weight:700; text-align:center; padding-top:20px; padding-bottom:20px; font-size:18px; border-bottom:1px solid #d5d5d5; }	
.pop-title span {padding-left:50px; color:#424242;}
.popup-logo {padding-left: 50px; }
.closepop {float:right; padding-right:20px; }



/*수정 190520*/
.pop-cont {text-align:center; padding-top:20px; padding-bottom:20px; padding-left: 40px; padding-right:30px;}
.pop-cont ul.step li{overflow:hidden; margin-bottom:10px; margin-left:20px;}
.pop-cont .pop-txt {padding:7px 0; line-height:30px; }
.pop-cont .pop-step {color:#00A8BE; font-weight:600; float:left; margin-right:5px; clear:both; width:60px; line-height:24px;}
.pop-cont .txt { float:left; width:310px; line-height:24px; text-align:left;}
.pop-cont span.info{color:#00A8BE; font-size:13px; display:block; line-height:1.5em;}
.pop-cont .pop-qr {padding-bottom:15px; text-align:center; float:left; margin-right:20px;}


/*추가 190521*/
.colorbar {width:100%; height: 7px; border-radius: 4px; background-image: linear-gradient(to right, #00A8BE, #ffcb40); clear:both; margin:auto; margin-bottom:20px;}
.pop-cont .noti{font-weight: 600; line-height: 1.5em; letter-spacing: -0.3px; text-align: center; color: #00A8BE;}
.pop-cont img{overflow:hidden;}



.pop-cont .mobile-reg-txt {float:right; text-align:left; line-height:40px; padding-top:15px;}
.pop-cont .popimg {padding-bottom:15px; padding-top:10px; text-align:center; }
.pop-cont .pop-input {padding:15px 0;  margin:0 auto; }
.pop-cont .pop-input .tb-label {text-align:left; width: 130px; }
.pop-cont .pop-bottom {padding: 20px 0; }
.pop-cont .auth-pop-ok {text-align:left; float:left; line-height:30px; padding-top:10px; padding-bottom:25px; width:100%; border-bottom: 1px dotted #c6c6c6; }
.pop-cont .auth-pop-no {float:right; text-align:left; line-height:32px; padding-top:25px; padding-bottom:30px; width:100%; font-size:15px;}
.pop-cont .auth-pop-no .auth-qr{float:left; width:170px; margin-top: -10px; padding-bottom: 10px; }
.pop-cont .auth-pop-no .auth-step{float:right; text-align:left; width:400px;}

.pop-cont .auth-pop-no .auth-bold{color:#00A8BE; font-weight:600;}
.pop-cont .auth-loading {font-size:14px;  clear:both;}
.pop-cont .auth-loading .auth-time{font-family: 'Roboto','Sawarabi Gothic','Nanum Gothic', sans-serif; font-weight:400; font-size:18px; }
.pop-cont .ioc-select-cont {padding-top:20px; padding-bottom:20px; }
.pop-cont-finger {text-align:center; padding-top:20px; padding-bottom:10px; padding-left: 30px; padding-right:30px;}
/*ID 입력시-register*/
.id-input, .reg-ok-pop, .activation-ok-pop, .idpwd-input, .ioc-select{display: none; position:absolute; left:45%; top:45%; margin:-180px 0 0 -200px; z-index:10000; background-color:#fff; 
			border-radius: 5px; box-shadow: 0 0 8px 0 #2c2c2c; width: 560px; min-height: 30px; }
.default-pop{display: none; position:absolute; left:45%; top:35%; margin:-180px 0 0 -200px; z-index:20000; background-color:#fff; 
			border-radius: 5px; box-shadow: 0 0 8px 0 #2c2c2c; width: 560px; min-height: 30px; }

/*
.qr-down{display: none; position:absolute; left:48%; top:50%; margin:-180px 0 0 -200px; z-index:10000; background-color:#fff; 
			border-radius: 5px; box-shadow: 0 0 8px 0 #2c2c2c; width:450px; min-height: 30px; }*/
#mgeIdLoginSection{width: 100%; height: 100%; position: absolute; z-index: 9; background: rgba(0, 0, 0, 0.70);}
.qr-down, .mobile-reg, .auth-pop {display: none; position:fixed; left:42%; top:25%; margin:-180px 0 0 -200px; z-index:10000; background-color:#fff;
			border-radius: 5px; box-shadow: 0 0 8px 0 #2c2c2c; width: 650px; min-height: 30px; backdrop-filter: blur(4px); }
.ioc-finger {display: none; position:absolute; left:45%; top:50%; margin:-180px 0 0 -200px; z-index:10000; background-color:#fff; 
			border-radius: 5px; box-shadow: 0 0 8px 0 #2c2c2c; width: 500px; min-height: 30px; }			

.ioc-id {display: none; position:absolute; left:50%; top:50%; margin:-180px 0 0 -200px; z-index:10000; background-color:#fbfbfb; 
			border-radius: 15px; box-shadow: 0 0 8px 0 #2c2c2c; width: 200px; min-height: 150px; }
.dongle-bg {display: none; position:absolute; left:50%; top:50%; margin:-180px 0 0 -200px; z-index:10000; background-color:#fbfbfb;
			border-radius: 15px; box-shadow: 0 0 8px 0 #2c2c2c; width: 350px; min-height: 150px; }				
			
/*Progress Bar*/
.seconds {background-color: #c8c5c5; height: 4px; width: 100%;  border-radius: 4px; margin: auto; position:relative; margin-bottom:20px;}
.bar {background: -webkit-gradient(linear, left top, right top, color-stop(0%,#00A8BE), color-stop(100%,#ffc555)); height: 4px;  border-radius: 4px; width: 0%;}
.animating {-webkit-animation: progress 6s infinite linear;}
@-webkit-keyframes progress {0% {width: 0%; }100% {width: 100% } }