/*
*/
#qrDialog { width:329px; height:168px; }
#qrDialogBody { border-radius:10px; padding:8px;}
#qrDialogBody .titleBarBlock{height:26px; line-height: 26px; font-size: 12px; color: #58595b; vertical-align: middle; text-align: center; margin-bottom: 12px;}
#qrDialogBody .qrDialogTitle{display: inline-block;}
#qrDialogBody .keyboard{ width:305px; height:106px; background-image: url(images/qr_keyboard.png); text-align: center; padding-top: 11px;}
#qrDialogBody .keyboard .qrcode{ margin-top: 11px; width:65px; height:65px; display: inline-block; position: relative;}
#qrDialogBody .keyboard .qrcode img.loading{ position: absolute;left: 21px; top: 21px;}
/*
*/
/* bioDialog */
#bioDialog {width : 324px; height:316px; }
#bioDialogBody { border-radius:10px; padding:6px;}
#bioDialogBody .titleBarBlock{margin-top:0px;}
#bioDialogBody .dialogTitle{font-size:13px; font-weight:600; color:#333; margin:0px; display:inline; border-bottom:solid 2px #b3b3b3; padding: 0px 6px 4px 5px; }
#bioDialogBody .selectCertStoreMsgTitleLine{height:11px;}
#bioDialogBody .codeBlock {
background-color : #f3f6fa;
border : solid 1px #e6e6e6;
width: 300px;
height:141px;
margin: 18px auto 0px auto;
}
#bioDialogBody .textBlock {
display: block;
margin-top:11px;
font-size:11px;
font-weight: 600;
line-height: 18px;
color:#333333;
text-align: center;
}
#bioDialogBody .textBlock img { position: relative; top:3px; }
#bioDialogBody .textBlock b { color: #0066cc;}
#bioDialogBody .authCode, #bioDialogBody .signMsg {
position:relative;
width: 100%;
}
/*#bioDialogBody .upperDot { position: absolute; top: 6px; left: 20px; }*/
#bioDialogBody .numberBlock {
position: absolute;
display: block;
margin-left: 16px;
top: 0px;
left: 0px;
width: 110px;
height: 141px;
text-align: center;
}
#bioDialogBody .leftLabel { position: relative; }
#bioDialogBody .leftNumber { position: relative; }
#bioDialogBody .orText {
position: relative;
display: table-cell;
margin: auto;
text-align: center;
vertical-align: middle;
font: 12px;
color: #4d4d4d;
}
#bioDialogBody .centerCodeBlock {
position: relative;
display: table;
height:141px;
margin: auto;
}
#bioDialogBody .qrcodeBlock {
position: absolute;
display: block;
margin-right: 16px;
top: 0px;
right: 0px;
width: 110px;
height: 141px;
text-align: center;
}
#bioDialogBody .rightLabel { position: relative; }
#bioDialogBody .rightQrcode{ position: relative; }
/*
#bioDialogBody .appIcon { position:absolute; top:70px; left:100px; width:75px; height:75px; }
#bioDialogBody .appTitle { position:absolute; top:55px; left:85px;}
#bioDialogBody .appMsg { position:absolute; top:70px; left:85px;}
#bioDialogBody .appWaiting { position:absolute; top:20px; left:100px;}
*/
#bioDialogBody .signMsg > div { width: 50%; margin: 5px auto; text-align:center; vertical-align:middle; }
#bioDialogBody .appIcon { width:50px; height:50px; }
#bioDialogBody .appTitle { font-size:13px; color:#4d4d4d }
#bioDialogBody .appMsg{ font-size:13px; color:#0066cc; font-weight:bold;}
#bioDialogBody .leftNumber {
display: table-cell;
background-color: white;
color: #4d4d4d;
border : solid 1px #2484e4;
width: 110px;
height: 98px;
font-weight: bold;
font-size: 15px;
text-align: center;
vertical-align: middle;
}
#bioDialogBody .rightQrcode {
background-color: white;
padding: 7px;
border : solid 1px #2484e4;
}
#bioDialogBody .rightQrcode img { margin: auto; }
#bioDialogBody .bottomBlock{
position: relative;
bottom: 0px;
margin:auto;
margin-bottom: 2px;
font-size: 10px;
text-align:center;
}
#bioDialogBody .bottomBlock .cancel{
font-size: 13px;
color: #666666;
background-color: white;
border : solid 1px #bbbbbb;
border-radius: 2px;
width: 68px;
height: 31px;
}
#bioDialogBody .label4d {
margin-top: 10px;
margin-bottom: 6px;
font-size: 12px;
font-weight: 600;
color: #0066cc;
}
#bioDialogBody .label66 { }
#bioDialogBody .infoMsg {
position: relative;
margin: 1px 0px 12px 4px;
cursor: hand; cursor: pointer;
text-align: left;
}
#bioDialogBody .infoMsg img{
position:relative;
top:2px;
}
#bioDialogBody .infoMsg .subject { color: #0066cc; }
/*
*/
#w2ui-alert-dialog {width:365px; height:auto; background-color:#fff; padding:10px 18px;}
#w2ui-alert-dialog .w2ui-alert-dialog-body {height:80px; border: 1px solid #fff; border-radius:10px; padding:4px; text-align : center;}
#w2ui-alert-dialog .w2ui-alert-dialog-title {font-size:18px; font-weight:600; color:#333;margin:0px; display:inline; border-bottom:solid 2px #b3b3b3; padding: 0px 6px 4px 5px;}
#w2ui-alert-dialog .w2ui-alert-dialog-title-bar{height:11px;}
#w2ui-alert-dialog .w2ui-alert-dialog-body-block{width:348px; height:auto; text-align:left; padding:13px 18px; border:1px solid lightgray; background-color:#f3f6fa; display:inline-block; position:relative;}
#w2ui-alert-dialog .w2ui-alert-dialog-body-block img {position:absolute; top:0; bottom:0; margin: auto 8px; }
#w2ui-alert-dialog .w2ui-alert-dialog-body-block p {width:240px; height:inherit; font-size:14px; float:right; text-align:left; margin:15px 0px 15px 10px; padding:0px 0px 3px 0px; }
#w2ui-alert-dialog button { width:80px;height:30px;background-color:#1d79d3; color:#FFFFFF; border:solid 1px #075fb5; border-radius:2px; font-weight:600; float:right;}
#w2ui-alert-dialog button:hover {width:80px;height:30px;background-color:#075fb5; color:#FFFFFF; border:solid 1px #003399; border-radius:2px; font-weight:600;}
#w2ui-alert-dialog button:active{ background-color:#054d94; color: #FFFFFF; border:solid 1px #003399; border-radius:2px; font-weight:600;}
#w2ui-alert-dialog > div {margin-top : 5px; }
#w2ui-alert-dialog .w2ui-alert-dialog-buttons button{margin:9px 0px 7px 7px;}
/* 숫자 키보드 */
#numKeyboard{
overflow: hidden;
padding: 0;
/*margin: 0 0 -4px -15px;*/
position: fixed;
width: 100%;
bottom: 0px;
height: 0px;
width: 0px;
transition: width 0.25s, height 0.25s;
z-index: 2;
}
#numKeyboard.shown{
height: 282px;
}
.numKeyboardBox{
background-color: #fff;
}
.numKeyboardBox div.button{
width: 100%;
height: 80px;
text-align: center;
border: none;
/*border-radius: 4px;*/
background-color: initial;
font-size: 30px;
line-height: 80px;
font-weight: normal;
padding:0;
color: #494949;
margin-bottom: 0px;
border-radius: 0px;
outline: none;
transition: background-color 0.25s;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.numKeyboardBox div.button:focus, .numKeyboardBox .numKeyboardClose:focus {
background-color: #eee;
}
.numKeyboardBox div.button:active{
background-color: #ddd;
}
.numKeyboardBox div.button.back-button{
background-image: url(images/mobile_numkb_backspace_black@2x.png);
background-size: 42px 25px;
background-repeat: no-repeat;
background-position: center;
}
.numKeyboardBox table{
width:100%;
height: 200px;
border-spacing: 0px;
border-collapse: collapse;
margin: auto;
}
.numKeyboardBox td{
vertical-align: top;
text-overflow: clip;
border: none;
padding: 0px;
box-sizing: border-box;
}
.numKeyboardBox .numKeyboardCloseDiv{
height: 42px;
background-color: #f9f9f9;
}
.numKeyboardBox .numKeyboardClose{
width: 56px;
height: 40px;
background-image: url(images/kb_close_black@2x.png);
background-size: 30px 24px;
background-repeat: no-repeat;
background-position: center;
margin-top: 2px;
float: right;
outline: none;
}
/* for dark keyboard */
#numKeyboard.dark.shown {height: 286px;}
#numKeyboard.dark .numKeyboardCloseDiv {background-color: unset;}
#numKeyboard.dark .numKeyboardBox {background-color: #555;}
#numKeyboard.dark .numKeyboardBox div.button.back-button{background-image: url(images/mobile_numkb_backspace@2x.png);}
#numKeyboard.dark .numKeyboardBox .numKeyboardClose{background-image: url(images/kb_close_white@2x.png);}
#numKeyboard.dark .numKeyboardBox div.button:active{background-color: #ddd;}
#numKeyboard.dark .numKeyboardBox div.button:focus, #numKeyboard.dark .numKeyboardBox .numKeyboardClose:focus {background-color: #888;}
#numKeyboard.dark .numKeyboardBox td{border: 1px solid #4e4e4e;}
#numKeyboard.dark .numKeyboardBox div.button{color: #ebebeb;}
span.html5Intro {
cursor: pointer; cursor: hand;
color: #696969;
font-size:90%;
position: relative;
}
span.html5Intro img {
position: relative;
padding-left:2px;
top: 1px;
}
#dragOverEffect {
transform: scale(1);
display: none;
transition: opacity 0.3s, -webkit-transform 0.3s;
border: 1px solid #6d6e71;
}
#dragOverEffect.hover{
z-index: 3000;
display: block;
background-color: rgba(0, 0, 0, 0.5);
transform: scale(1);
transition: opacity 0.3s, -webkit-transform 0.3s;
}
#dragOverEffect.hover div.dragWrapper {
display: inline-block;
position: relative;
vertical-align: middle;
border: 1px;
border-color: #66fffe;
border-style: dashed;
}
div.dragImage{
/*display:inline-block;*/
float: left;
width:31px;
height:28px;
background-image: url(icons/drag_cert_info.png);
border:0px;
margin-left: 42px;
}
div.dragImage.over{
background-image: url(icons/drag_cert_on.png);
margin-left: 41px;
}
div.dragDetail {
display:inline-block;
line-height: 16px;
font-size: 11px;
font-family: "Apple SD Gothic Neo", "Apple Gothic", "맑은 고딕", "Malgun Gothic", "Dotum", Verdana, Arial, sans-serif;
text-overflow: ellipsis;
color: #a7a9ac;
margin-left: 8px;
width:320px;
}
div.dragDetail.hover {
color: #66fffe;
}
#dragOverNoCert {
z-index: 1500;
}
.certificateBlock #certLoading div.certLoadingWrapper {
width: 260px; height: 50px;
border-radius: 7px;
margin-left: auto; margin-right: auto;
text-align: center; line-height: 50px;
background-color: #fff;
}
.certificateBlock #certLoading .certLoadingWrapper img{
margin-right: 7px;
vertical-align: middle;
width: 30px; height: 30px;
}
.certificateBlock #certLoading .certLoadingWrapper div{
display: inline-block;
line-height: 30px;
color: #000;
font-size: 12px;
}
#connectedBar {
position: absolute;
bottom: 0px;
width: 428px !important; height: 24px !important;
padding: 4px 120px 3px 120px;
background-image: url('images/connected_bar_desktop.png');
text-align: center;
}
#connectedBar div { display: inline-block; vertical-align: top;}
#connectedBar div.connectedLabel {
font-size: 11px;
margin-right: 6px;
color: #231f20;
height: 17px;
line-height: 17px;
}
#connectedBar div.g5_switch {
margin-right: 3px;
}
#connectedBar button.functionButton {
width: 17px; height:17px; margin-right: 5px;
}
#connectedBar div.connectedTurnedOnButton { background-image: url('images/btn/icon_connected_on.png'); }
#connectedBar div.connectedTurnedOffButton { background-image: url('images/btn/icon_connected_off.png'); }
#connectedBar button {width: 17px; height: 17px; border: 0; background: none;}
#connectedBar button.functionButton {
background-size: 17px;
}
#connectedBar button.connectedUploadButton { background-image: url('images/btn/icon_connected_upload.png'); }
#connectedBar button.connectedChangeButton { background-image: url('images/btn/icon_connected_change.png'); }
#connectedBar button.connectedDeleteButton { background-image: url('images/btn/icon_connected_delete.png'); }
#connectedBar button.connectedUploadButton:hover { background-image: url('images/btn/icon_connected_upload_hover.png'); }
#connectedBar button.connectedChangeButton:hover { background-image: url('images/btn/icon_connected_change_hover.png'); }
#connectedBar button.connectedDeleteButton:hover { background-image: url('images/btn/icon_connected_delete_hover.png'); }
#connectedBar button.connectedUploadButton:disabled { background-image: url('images/btn/icon_connected_upload_disabled.png'); }
#connectedBar button.connectedChangeButton:disabled { background-image: url('images/btn/icon_connected_change_disabled.png'); }
#connectedBar button.connectedDeleteButton:disabled { background-image: url('images/btn/icon_connected_delete_disabled.png'); }
#connectedBar .g5_switch .g5_switch_main { top: -1px; }
#connectedStartDialog { width:382px; height:385px }
#connectedStartDialogBody { border-radius:10px; padding:13px;}
#connectedStartDialogBody .connectedStartTitle{font-size:16px; font-weight:600; color:#333;margin:0px; display:inline; border-bottom:solid 2px #b3b3b3; padding: 0px 5px 4px 5px; text-align:left;}
#connectedStartDialogBody .connectedStartTitleLine{ height:11px;}
#connectedStartDialogBody .strongLabel{line-height:118%;}
/*#connectedStartDialogBody > div { padding: 8px 0px 0px 0px; }*/
#connectedStartDialogBody .inputBorder{ border: 1px solid lightgray; padding: 24px 0px 16px 18px; width: 348px; height: 194px; margin-top: 8px; }
#connectedStartDialogBody .inputBorder div {}
#connectedStartDialogBody .inputBorder { background-color : #f3f6fa; }
#connectedStartDialogBody .needDisappear .inputBorder .inputBlockInner { text-align:left; margin-bottom: 10px; }
#connectedStartDialogBody .needDisappear .inputBorder .inputBlockInner span { display: inline-block; width : 80px; color: #0066CC; font-size: 13px; margin-right: 20px;}
#connectedStartDialogBody .needDisappear .inputBorder .inputBlockInner input { width: 189px; height: 25px; border: 1px solid #2484e4; }
#connectedStartDialogBody .needDisappear .inputBorder .inputBlockInner.phoneNumber { margin-bottom: 14px;}
#connectedStartDialogBody .needDisappear .inputBorder .checkAgree { margin-bottom: 4px; }
#connectedStartDialogBody .needDisappear .inputBorder .checkAgree input { width: 11px; height: 11px; border: 1px solid #bcbec0; background-color: #fff; }
#connectedStartDialogBody .needDisappear .inputBorder .checkAgree label { font-size: 12px; color: #58595b; }
#connectedStartDialogBody .needDisappear .inputBorder .checkAgree label a {color: #414042;}
#connectedStartDialogBody .infoBorder { width: 348px; height: 54px; border: 1px dotted #d3d3d3; background-color: #fff; padding: 8px 15px; line-height: 17px; margin-top: 6px; }
#connectedStartDialogBody .infoBorder .seeDetailButton {color: #2484e4; font-size: 11px; float: right;}
#connectedStartDialogBody .infoBorder .seeDetailButton img {margin-right: 4px;width: 11px;height:11px;}
#connectedStartDialogBody .confirmCodeBlock .inputBorder { padding-top: 75px; height: 249px; text-align: center; }
#connectedStartDialogBody .confirmCodeBlock .inputBorder.confirmInputBorder{}
#connectedStartDialogBody .confirmCodeBlock .inputBorder .inputBlockInner {margin-bottom: 27px; }
#connectedStartDialogBody .confirmCodeBlock .inputBorder .inputBlockInner span { display: inline-block; color: #0066CC; font-size: 13px; margin-right: 21px;}
#connectedStartDialogBody .confirmCodeBlock .inputBorder .inputBlockInner input:disabled { width: 121px; height: 37px; border: 1px solid #2484e4; background-color: #fff; font-size: 23px; font-weight: bold; color: #000; text-align: center; }
#connectedStartDialogBody .confirmCodeBlock .inputBorder div.confirmCodeMsg { font-size: 12px; color: #58595b; }
#connectedStartDialogBody .confirmCodeBlock .inputBorder img.connectedLoading { margin-top: 18px; }
#connectedStartDialogBody .saveWarningMsg { /*width: 280px;*/ font-size: 11px; color: #939598;margin-left: 20px;}
#connectedStartDialogBody .okButtonBlock {padding-top: 28px;}
#connectedStartDialogBody .okButtonBlock button { width:80px; height:30px; }
#connectedStartDialogBody .okButtonBlock button:disabled {font-size: 13px; color: #d1d3d4; background-color: #f1f1f1; border-color: #e6e7e8; }
#connectedStartCompleteDialog {width: 350px; height: 330px;}
#connectedStartCompleteDialogBody { border-radius:10px; padding:13px;}
#connectedStartCompleteDialogBody .connectedStartTitle{font-size:16px; font-weight:600; color:#333;margin:0px; display:inline; border-bottom:solid 2px #b3b3b3; padding: 0px 5px 4px 5px; text-align:left;}
#connectedStartCompleteDialogBody .connectedStartTitleLine{ height:11px;}
#connectedStartCompleteDialogBody .inputBlock {width: 318px; height: 149px; border: 1px solid #b3b3b3; background-color: #f3f6fa; line-height: 149px; text-align: center; margin-top: 16px;}
#connectedStartCompleteDialogBody .inputBlockWrapper {vertical-align: middle; display: inline-block;}
#connectedStartCompleteDialogBody .inputBlockWrapper .connectedComplete { font-size: 16px; font-weight: bold; color: #06c; line-height: 16px; margin-bottom: 14px;}
#connectedStartCompleteDialogBody .inputBlockWrapper .connectedCompleteLabel { font-size: 12px; color: #231f20; line-height: 16px;}
#connectedStartCompleteDialogBody .canSaveLabel {width: 298px; font-size: 12px; color: #58595b; margin-top: 15px; margin-left: 20px; text-indent: -10px;}
#connectedStartCompleteDialogBody .canSaveLabel img {width: 11px;height: 14px;}
#connectedStartCompleteDialogBody .okButtonBlock {padding-top: 28px;}
#connectedStartCompleteDialogBody .okButtonBlock button { width:80px; height:30px; }
/*#connectedStartCompleteDialogBody .okButtonBlock button:disabled {font-size: 13px; color: #d1d3d4; background-color: #f1f1f1; border-color: #e6e7e8; }*/
#connectedUploadDialog { width:340px; height:291px }
#connectedUploadDialogBody { height:276px; border-radius:10px; padding:4px;}
#connectedUploadDialogBody .dialogTitle{ text-align:center; font-size:16px; font-weight:600; color:#333; margin:0px; display:inline; border-bottom:solid 2px #b3b3b3; padding: 0px 6px 4px 5px; text-align:left;}
#connectedUploadDialogBody .selectCertStoreMsgTitleLine{ height:11px; }
#connectedUploadDialogBody { text-align:center; }
#connectedUploadDialogBody > div { padding: 10px 0px 0px 0px; }
#connectedUploadDialogBody .passwordBorder .certificateArea {font-size: 12px; color: #06c; margin-bottom: 10px; margin-top: 20px; }
#connectedUploadDialogBody .passwordBorder .certificateArea img { margin-bottom: 10px; }
#connectedUploadDialogBody .passwordBorder{ border: 1px solid lightgray; }
#connectedUploadDialogBody .passwordBorder div { margin: 15px; }
#connectedUploadDialogBody .passwordBlockInner { padding-bottom: 10px; }
#connectedUploadDialogBody .passwordBorder { background-color : #f3f6fa; }
#connectedUploadDialogBody .passwordPolicyMsg { width: 300px;}
#connectedUploadDialogBody .okButtonBlock { padding-top: 28px; }
#connectedUploadDialogBody .okButtonBlock button { width:80px; height:30px; }
#connectedUploadDialogBody .passwordBlockInner span { margin-right:5px; }
#connectedUploadDialogBody .passwordBlockInner span { color: #0066CC/*#2E9AFE*/; }
#connectedUploadDialogBody .passwordPolicyMsg{ margin: 0px auto; }
#connectedUploadDialogBody .passwordPolicyMsg{ padding: 10px 0px; }
#connectedUploadDialogBody .passwordPolicyMsg { font-size:0.95em;}
#connectedUploadDialogBody input.passwordInput { width:240px; text-align: center; }
#connectedUploadDialogBody input.passwordInput::-webkit-input-placeholder { font-size: 12px; font-color: #eee; }
#connectedUploadDialogBody input.passwordInput:-moz-placeholder { font-size: 12px; font-color: #eee; }
#connectedUploadDialogBody input.passwordInput::-moz-placeholder { font-size: 12px; font-color: #eee; }
#connectedUploadDialogBody input.passwordInput:-ms-input-placeholder { font-size: 12px; font-color: #eee; }
#connectedUploadDialogBody input.passwordInput::placeholder { font-size: 12px; font-color: #eee; }
.titleBarBlock {text-align:left;}
.certpinInputBlock .certpin input.certpinInput { border: none; background-color: #d8d8d8; width: 24px; height: 24px; border-radius: 12px; padding: 0px; font-size: 0px; margin-right: 6px; transition: background-color 0.3s; }
.certpinInputBlock .certpin input.desktop { width: 21px; height: 21px; }
.certpinInputBlock .certpin input.createEasyPasswordInput { width: 18px; height: 18px; }
.certpinInputBlock { text-align: center; padding: 5px 0; }
.easyPassword .easyPasswordTitle img { size: 24px; vertical-align: middle; }
.easyPassword .easyPasswordTitle span { height: 18px; width: 215px; color: #333333; font-size: 14px; letter-spacing: -0.34px; line-height: 18px; text-align: left; vertical-align: middle; }
.certpinInputBlock .certpin label { display: block; color: #2484E4; font-size: 15px; letter-spacing: -1.2px; line-height: 20px; text-align: center; padding-bottom: 15px; }
.certpinInputBlock .certpin input.certpinInput:last-child { margin-right: 0px; }
.certpinInputBlock .certpin input.certpinInput.fill { background-color: #2484E4; }
.certpinInputBlock .certpin { padding-bottom: 23px; font-size: 0px; }
.easyPassword { padding: 26px; }
.easyPassword .easyPasswordTitle { margin: 0 0 10px 7px; }
.easyPassword .passwordContainer { height: 151px; border: 1px solid #cccccc; border-radius: 4px; padding: 20px 0; }
.easyPassword .passwordContainer .content { width: 40%; display: inline-block; }
.easyPassword .loadingBackground { position: absolute; width: 92%; height: 57%; background:#b3b3b396; border: 4px; z-index: 98; }
.easyPassword .loadingBackground .loadingContainer { height: 35px; margin: 58px 200px; background-color: #fff; border-radius: 6px; }
.easyPassword .loadingBackground .loadingContainer .loadingImg { display:inline-block; width:15%; height:100%; background-image: url(images/tablet.keyboard_loading_progress.gif); background-repeat: no-repeat; background-position: left; border-radius: 6px; }
.easyPassword .loadingBackground .loadingContainer .loadingText { display:inline-block; width:83%; height:110%; vertical-align:middle; text-align : center; font-size: 15px; font-weight: bold; }
.passwordContainer .createPasswordContainer { padding: 14px 160px; font-size: 15px; line-height: 21px; letter-spacing: -0.36px; text-align: center; color: #5f5f5f; }
.passwordContainer .createPasswordContainer .createPasswordTitle { display: inline-block; padding-bottom: 21px; }
.passwordContainer .createPasswordContainer button {width:168px;height:40px;background-color:#1d79d3; color:#FFFFFF; border:solid 1px #075fb5; border-radius:2px; font-weight:600; cursor: pointer;}
.passwordContainer .createPasswordContainer button:hover {width:168px;height:40px;background-color:#075fb5; color:#FFFFFF; border:solid 1px #003399; border-radius:2px; font-weight:600;}
.passwordContainer .createPasswordContainer button:active { background-color:#054d94; color: #FFFFFF; border:solid 1px #003399; border-radius:2px; font-weight:600;}
.passwordContainer .nonecloudContainer { padding: 14px 137px; font-size: 15px; line-height: 21px; letter-spacing: -0.36px; text-align: center; color: #5f5f5f; }
.passwordContainer .nonecloudContainer .createPasswordTitle { display: inline-block; padding-bottom: 21px; }
.passwordContainer .nonecloudContainer button {width:180px;height:40px;background-color:#1d79d3; color:#FFFFFF; border:solid 1px #075fb5; border-radius:2px; font-weight:600;}
.passwordContainer .nonecloudContainer button:hover {width:180px;height:40px;background-color:#075fb5; color:#FFFFFF; border:solid 1px #003399; border-radius:2px; font-weight:600;}
.passwordContainer .nonecloudContainer button:active { background-color:#054d94; color: #FFFFFF; border:solid 1px #003399; border-radius:2px; font-weight:600;}
.certpinInputBlock .changeCertpin {height: 16px;width: 100px; color: #6C6C6C; font-size: 12px;letter-spacing: -0.85px; line-height: 16px; text-align: center; cursor: pointer; }
/* kbtam 다이얼로그 */
#kbtamDialog { width:453px; height:368px }
#kbtamDialogBody { border-radius:10px; padding:26px;}
#kbtamDialogBody .dialogTitle {margin-top: 20px;margin-bottom: 40px;line-height: 20px;letter-spacing: -1px;white-space: pre-wrap;color: #000;}
#kbtamDialogBody .certInfoArea {
padding: 15px 20px;
border: 1px solid #aaa;
line-height: 68px;
margin-bottom: 25px;
}
#kbtamDialogBody .certInfoArea * {
display: inline-block;
}
#kbtamDialogBody .certImage {
background-image: url("icons/mobile_cert_x1.png");
background-size: 52px 60px;
width: 52px;
height: 60px;
vertical-align: middle;
}
@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and ( min--moz-device-pixel-ratio: 2),
only screen and ( -o-min-device-pixel-ratio: 2/1),
only screen and ( min-device-pixel-ratio: 2) {
#kbtamDialogBody .certImage { background-image: url("icons/mobile_cert_x2.png"); }
}
@media
only screen and (-webkit-min-device-pixel-ratio: 3),
only screen and ( min--moz-device-pixel-ratio: 3),
only screen and ( -o-min-device-pixel-ratio: 3/1),
only screen and ( min-device-pixel-ratio: 3) {
#kbtamDialogBody .certImage { background-image: url("icons/mobile_cert_x3.png"); }
}
#kbtamDialogBody .kbtamPasswordTitle {
font-size: 15px;
}
#kbtamDialogBody .certInfo {
vertical-align: top;
width: calc(100% - 60px);
line-height: normal;
}
#kbtamDialogBody .certInfo .certInfoSubject {
display: block;
font-size: 15px;
font-weight: 700;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
margin-bottom: 15px;
}
#kbtamDialogBody .certInfo .certInfoType, #kbtamDialogBody .certInfo .certInfoIssuerAndExpire {
display: block;
font-size: 12px;
color: #686868;
}
#kbtamDialogBody .createEasyPasswordCancelInput {margin-bottom: 40px;}
#kbtamDialogBody .createEasyPasswordCancelInput label{display: inline-block;width: 120px;}
#kbtamDialogBody .createEasyPasswordCancelInput input{width: calc(100% - 120px);}
#kbtamDialogBody .certpinContainer.pinConfirm label {display: none;}
#kbtamDialogBody .certpinContainer.pinConfirm .certpinInputBlock .certpin {float: initial;text-align: center;}
#kbtamDialogBody .certpinInputBlock {text-align: left;}
#kbtamDialogBody .certpinInputBlock label { font-size: 15px; line-height: 30px; float: left; padding-bottom: 23px;color: #888;}
#kbtamDialogBody .certpinInputBlock .certpin {float: right;}
#kbtamDialogBody .certpinInputBlock .certpin input.certpinInput {width: 30px; height: 30px; border-radius: 15px; margin-right: 10px;}
#kbtamDialogBody .certpinInputBlock .certpin input.certpinInput:last-child { margin-right: 0px; }
#kbtamDialogBody .certpinInputBlock .certpin input.certpinInput.fill { background-color: #2484E4; }
#kbtamDialogBody .certpinInputBlock .certpin { padding-bottom: 23px; font-size: 0px; }
#kbtamDialogBody #pinKeypad {
width: 100%;
padding: 0;
margin-bottom: 30px;
}
#kbtamDialogBody #pinKeypad .pinKeypadBox{
padding: 0;
}
#kbtamDialogBody #pinKeypad .pinKeypadBox table {
border-spacing: 1px;
border-collapse: unset;
}
#kbtamDialogBody .kbtamPassword td {
}
#kbtamDialogBody .kbtamPassword .pinKeypadBox div.button{
height: 48px;
width: 64px;
background-color: #e5e5e5;
}
#kbtamDialogBody .kbtamPassword .pinKeypadBox div.button:active{
background-color: #ccc;
}
#kbtamDialogBody .kbtamPassword .pinKeypadBox div.button.re-order{
/*vertical-align: middle;*/
line-height: 40px;
}
#kbtamDialogBody .kbtamPassword .pinKeypadBox div.button.back-button{
height: 48px;
}
/* pin 키보드 */
#pinKeypad{
z-index: 10;
overflow: hidden;
padding: 0 30px;
/*margin: 0 -11px 0 -11px;*/
position: relative;
display: inline-block;
width: 59%;
height: 100%;
bottom: 0px;
/* transition: height 0.25s; */
}
#pinKeypad.shown{
height: 0px;
}
#pinKeypad hr{
height:0;
border:0;
padding:0;
margin: 0;
}
.pinKeypadBox{
height: 100%;
box-sizing: border-box;
position: relative;
background-color: #F7F6F6;
padding: 20px 32px;
}
.pinKeypadBox div.button{
width: 100%;
height: 25px;
/* height: 71px; */
text-align: center;
border: none;
/*border-radius: 4px;*/
background-color: initial;
/* font-size: 30px; */
line-height: 30px;
font-weight: normal;
padding:0;
color: #494949;
margin-bottom: 0px;
border-radius: 0px;
outline: none;
transition: background-color 0.25s;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.pinKeypadBox div.button:active{
background-color: #ddd;
}
.pinKeypadBox div.button.re-order{
color: #555555;
font-size: 16px;
letter-spacing: -0.39px;
text-align: center;
}
.pinKeypadBox div.button.back-button{
background-image: url(images/mobile_pinkb_backspace@2x.png);
background-size: 30px 20px;
background-repeat: no-repeat;
background-position: center;
}
.reorder {
color: #555555;
font-size: 16px;
letter-spacing: -0.39px;
line-height: 21px;
text-align: center;
}
.pinKeypadBox table{
width:100%;
height: 100%;
border-spacing: 0px;
border-collapse: collapse;
margin: auto;
}
.pinKeypadBox .pinKeypadArea .trLine {
height: 15px;
}
.pinKeypadBox td{
/* vertical-align: top; */
text-overflow: clip;
border: none;
padding: 0px;
}
.content .certWrapper img, .content .keyWrapper img {
width: 18px;
height: 18px;
display: none;
position:absolute;
left:300px;
/*bottom:6px;*/
top: 6px;
}
table tr.w2ui-selected {
font-weight: 600;
}