/* cmn login */
/* 로그인 2020.09.04*/
.loginBox {text-align:center; width:450px; margin:0 auto 40px;}
.loginBox h3 {font-size:30px; margin: 80px 0 20px 0;}
.loginBox .loginBoxTop {margin-bottom:20px; color: #666;}
.loginBox .loginBoxTop span {display:block; font-size:18px;}
.loginBox .text--black {color:#000;}

.loginInputBox {margin-bottom:40px;}
.loginInputText {display: flex;align-items: center; margin-bottom:20px;}
.loginInputText .loginInput {flex-grow: 1;margin-right: 16px;}
.loginInputText .loginInputbtn {display:flex;align-items: center;justify-content: center;width: 118px;height: 112px;background-color: #1555B5;}
.loginInputText .loginInputbtn.green {background: #009098;}
.loginInputText .loginInputbtn.orange {background: #EE7400;}
.loginInputText .loginInputbtn a {display: flex;width: 100%;height: 100%;justify-content: center; align-items: center;color: #fff;}
.loginInputText span{display:block; margin: 10px 0; }
.loginInputText span input[type="text"], .loginInputText span input[type="password"] {font-family: 'Noto Sans Korean', 'sans-serif'; width:100%; background-color:#F6F6F6; border:1px solid #D7D7D7; margin:0; padding:0; text-indent:10px; height:48px;}

.loginInputChkLink {text-align:left; position:relative;}
.loginInputChkLink .md-checkbox input + label:after { opacity:0; transform: translate(0.2em, 0.2em) rotate(-45deg); width: 10px;height: 6px; border: 0.21em solid #C7C7C7; border-top-style: none; border-right-style: none;border-radius: 3px;}
.loginInputChkLink .md-checkbox input + label:before {width: 18px;height: 18px; margin:0;  border: 1px solid #D7D7D7; background-color:#F7F7F7; border-radius: 3px;cursor: pointer;transition: background .3s; position:static; vertical-align:middle; margin-right:4px; margin-top:-5px}
.loginInputChkLink .md-checkbox input + label { padding-left: 0; font-size:15px;}
.loginInputChkLink .md-checkbox input:checked + label:after { border: 0.21em solid #fff ;  border-top-style: none; border-right-style: none; opacity:1;}
.loginInputChkLink .md-checkbox input:checked + label:before { background:none; border: 1px solid #1555B5; background-color:#1555B5; }
.loginInputChkLink .md-checkbox label strong{font-weight:500; color:#000; font-size:18px;}

.loginInputChkLink .linLink {border-radius:5px; position:absolute; right:0; top:0; display:inline-block; border:1px solid #DFDFDF; color:#888; font-size:15px; padding:5px 6px;}
.loginInputChkLink .linLink .icon {font-size:22px; vertical-align:middle; color:#B5B5B5;}

.loginBtn {margin-bottom:40px;}
.loginBtn a {display:block;}

.onepassLogin {margin-top: 30px;padding-top: 30px;border-top: 2px dotted #ccc;}
.onepassLogin a {position: relative;display: block;color: #fff;background: #152074;font-size: 18px;padding: 14px 0px;transition: 0.2s all;}
.onepassLogin a img {position: absolute;top: 7px;left: 18px; width:42px;}

.idpwSearchBox {display: flex;align-items: center;}
.idpwSearchBox li {position: relative;padding: 0 18px;}
.idpwSearchBox li:first-child {padding-left:0;}
.idpwSearchBox li span {vertical-align:middle; font-size:18px; color:#666;}
.idpwSearchBox li a:after {display:block; content:''; width:1px; height:22px; background-color:#E1E1E1; position:absolute; left:0; top:3px;}
.idpwSearchBox li:first-child a:after {display:none;}
.idpwSearchBox li .icon {font-size: 28px;}

.idpwSearchLayout .tabBox ul:before{display:none;}
.idpwSearchLayout > h3 {color:#000; font-size:24px; margin-bottom:20px;}

.idSearchBox {text-align:center; font-size:28px; margin: 120px 0;}
.idSearchBox > span {display:block;}
.idSearchBox span.userId {position:relative; display:inline-block; padding:0 25px;}
.idSearchBox span.txt_black {color:#000;}
.idSearchBox > span span.icon { position:absolute;}
.idSearchBox span.bquo {bottom:-3px; right:-5px; color:rgba(0,0,0,0.1); display:inline-block; transform:rotate(180deg);}
.idSearchBox span.tquo {left:-5px; top:-3px;color:rgba(0,0,0,0.1);}

.joinloginMoveBox {margin:0 -20px; min-height:250px;}
.joinloginMoveBox li {float:left; width:50%;}
.jlmBoxIn {border:1px solid #E1E1E1; margin:0 20px; padding:40px; position:relative;}
.jlmBoxIn h4 {color:#000;font-size:24px; margin:0; margin-bottom:20px;}
.jlmBoxIn .txtBox {font-size:18px; margin-bottom:40px;}
.jlmBoxIn .txtBox span {display:block;}
.jlmBoxIn .icon {font-size:150px; position:absolute; right:0; bottom:40px; color:#EFEFEF;}
.jlmBoxIn:hover {border:1px solid #1555B5;}

/* 이용약관 2020.09.03 */
.joinStepBox {overflow:hidden; margin-bottom:60px;}
.joinStepBox ul {display: flex;}
.joinStepBox ul li {width:33.3%; background-color:#F8F8F8;}
.joinStepBox ul li .joinStepBoxIn {height: 100%; box-sizing: border-box; border-left:1px dashed #E1E1E1; border-bottom:1px solid #EBEBEB; padding: 21px 88px 21px 30px; position:relative; color:#999;}
.joinStepBox ul li:first-child .joinStepBoxIn {border-left:none;}
.joinStepBox ul li .joinStepBoxIn .stepNum {display:block; font-size:18px;}
.joinStepBox ul li .joinStepBoxIn .stepText {display:block; font-size:20px;}
.joinStepBox ul li .joinStepBoxIn span.icon {position:absolute; right:30px; top:20px; font-size:60px;}
.joinStepBox ul li.on {background-color:#fff;}
.joinStepBox ul li.on .joinStepBoxIn {border:1px solid #1555B5}
.joinStepBox ul li.on .stepNum {color:#1555B5;}
.joinStepBox ul li.on .joinStepBoxIn .stepText {color:#000;}
.joinStepBox ul li.on .joinStepBoxIn span.icon {color:#1555B5}

.allcheckBox {position:relative; border-bottom:1px dashed #E9E9E9; margin-bottom:60px; padding:0 0 24px 0;}

.md-checkbox input { position: relative; outline: 0;visibility: hidden; width: 0px; height:0; overflow:hidden;}
.md-checkbox input + label { cursor: pointer; display: inline; vertical-align: middle; clear: both;padding-left: 30px;}
.md-checkbox label:before,  .md-checkbox label:after { content: ""; position: absolute;left: 0;top: 0;}
.md-checkbox input + label:after { left:4px; top:4px; transform: translate(0.2em, 0.2em) rotate(-45deg); width: 11px;height: 8px; border: 0.21em solid #C7C7C7; border-top-style: none; border-right-style: none;border-radius: 3px;}
.md-checkbox input + label:before {width: 26px;height: 26px; margin:0;  border: 1px solid #C7C7C7; background-color:#fff; border-radius: 50%;cursor: pointer;transition: background .3s;}
.md-checkbox input:checked + label:after { border: 0.21em solid #fff ;  border-top-style: none; border-right-style: none;}
.md-checkbox input:checked + label:before { background:none; border: 1px solid #1555B5; background-color:#1555B5; }
.md-checkbox label strong{font-weight:500; color:#000; font-size:18px;}

.infoBox {position:relative; margin-bottom:60px;}
.infoBox .subject {color:#000; font-size:24px; margin-bottom:16px; }
.infoBox .infoTextBox {overflow:hidden;overflow-y:auto; padding:10px; max-height:145px; background-color:#F9F9F9; border: 1px solid #E9E9E9; margin-bottom: 16px;}
.infoBox .md-checkbox  {position:relative;}
.infoBox .md-checkbox + .md-checkbox {margin-left: 15px;}
.infoBox .md-checkbox label {color:#000; font-size:18px;}

.joinAgreeBtnBox {text-align:center; position:relative; overflow: hidden;}
.joinCompleteBox {text-align:center;}
.joinAgreeBtnBox a {margin: 0;}
.joinAgreeBtnBox a + a {margin-left: 5px;}
.joinAgreeBtnBox .BtnBoxleft{float: left;}
.joinAgreeBtnBox .BtnBoxright{float: right;}
.jcbTopBox {padding-bottom:60px; }
.jcbTopBox .icon {font-size:80px; color: var(--color-main);}
.jcbTop01 {margin:30px 0;}
.jcbTop01 span{display:block; font-size:30px; font-weight: 600;}
.jcbTop01 span.txt_black {color:#000}
.jcbTop02 span {display:block; font-size:20px;}
.jcbTop02 span.txt_black {color:#000}

.loginInfoTxt {margin-bottom: 10px; padding: 17px 17px 17px 46px; text-align: left; font-size: 15px; background: #ecf3ff url('/css/wvtex/img/icon-info-blue.svg') no-repeat 16px 20px / 21px; color: #666;}
.loginInfoTxt strong {font-weight: 500; color: #000;}

.jcbBottomBox {display: flex;flex-wrap: wrap;justify-content: center;color:#666; border-top:1px solid #E9E9E9; display:inline-block; padding-top:20px; margin-bottom:60px;}
.jcbBottomBox > span {margin-left:20px; vertical-align:middle;}
.jcbBottomBox span.heplD {margin-left:0;}
.jcbBottomBox span.heplD .icon {font-size:27px;vertical-align:middle;}
.jcbBottomBox span.txt_black {color:#000; margin-right:8px;}
.jcbBottomBox span {vertical-align:middle;}

.fwBox {max-width: 800px; margin: 0px auto;}
.fwBoxCont {position: relative;}
.fwImg { position: absolute; top: 20px;left: 20px;width: 60px;}
.fwBoxT {margin: 0 0 30px 105px;}
.fwBoxT h5 {margin: 0;font-size: 20px; color: #000;}
.fwBoxT p {font-size: 14px;color: #000;}

.fwBoxIn {background-color: #fff;}
.fwBoxIn .table_normal {border-top: none;border-bottom: none;}
.fwBoxIn .table_normal tbody tr th, .fwBoxIn .table_normal tbody tr td {background-color: #fff;border-top: none;}
.fwBoxIn .table_normal tbody tr th {width:20%;}
.fwBoxIn .table_normal tbody tr td {width:80%;}

/* 휴면계정 복구 페이지 */
.dormant-area {background: url("../img/ic_join.svg") no-repeat 96% 80%  / 115px;}
.dormant-area .sub-title {font-size: 18px;}
.dormant-area .dormant-info {padding: 47px 0 40px; border-top: 1px solid #1555B5; border-bottom: 1px solid #1555B5; }
.dormant-area .account-info {margin: 16px 0 32px; font-size: 24px;}

.agreeBox { margin-top: 40px;}
.agreeBox h3 {color:#000;}
.agreeBox .guideBox { max-height: 400px; min-height: 300px; overflow: auto; margin-top: 30px; background: #f7f7f7; padding: 15px 20px;}
.filebox > span {display: inline-block; float: right; padding-top: 5px; font-size: 13px;}
.agreeBoxIn span {display:block; font-size:12px; padding-left:20px; line-height:160%; color:#285DB7;}

div.fileInfo {
    width: 80px;
    height: 26px;
    background: url(/images/wvtex/infra/upload.png);
    overflow: hidden;
}

div.fileInfo input {
    display: block !important;
    width: 58px !important;
    height: 21px !important;
    opacity: 0 !important;
    overflow: hidden !important;
}

.noDataBox {width: 100%; border-top: 1px solid #575757; border-bottom:1px solid #efefef;}
.noData {text-align:center; width:300px; margin:60px auto; font-size:18px; color:#999;}
.noData:before {content:"\eaf5"; font-family:'wvIcon'; font-size:60px; color:#eee; position:absolute; margin:-30px 0px 0px -80px;}
.noData:after {content:"\eaf6"; font-family:'wvIcon'; font-size:60px; color:#eee; position:absolute; margin:-30px 0px 0px 20px;}
.noData span {font-size:40px; vertical-align:middle; margin-right:10px; color:#999;}

@media screen and (max-width: 1024px) {
    .mobileHide {display:none;}
}

@media screen and (max-width: 768px) {
    .ui-dialog {
        position: fixed !important;
        top: 50% !important;
        left: 50% !important;
        right: 0px !important;
        bottom: auto !important;
        width: 93% !important;
        padding: 0 !important;
        transform: translate(-50%, -50%);
    }
    .ui-dialog iframe {width: 100% !important;}
    .loginBox {width: auto;}
    .loginBox h3 {margin-top: 50px; font-size: 25px;}
    .login-page .sub-tab-list li {flex: 1;}
    .idpwSearchBox li {padding: 0 8px;}
    .idpwSearchBox li span {font-size: 16px;}
    .loginInputChkLink .linLink {top:-6px;}
    .login-page .idpwSearchBox li .icon {display: none;}
    .loginBox .loginBoxTop span {font-size: 16px;}
    .loginInputText .loginInputbtn {width: 95px;}
    .joinStepBox {margin-bottom:30px;}
    .joinStepBox ul li .joinStepBoxIn {padding: 10px;}
    .joinStepBox ul li .joinStepBoxIn .stepNum {font-size:13px;}
    .joinStepBox ul li .joinStepBoxIn .stepText {font-size:14px;}
    .joinStepBox ul li .joinStepBoxIn span.icon {display: none;}
    .jcbTopBox .icon {font-size: 50px;}
    .jcbTop01 span {font-size: 20px;}
    .jcbTop02 span {font-size: 16px;}
    .joinloginMoveBox {margin:0;}
    .joinloginMoveBox li {float:none; width:100%; font-weight: 500;}
    .idSearchBox {font-size:20px;}
    .jlmBoxIn {margin:0 0 24px 0;}
    .joinTableBox .joinTableBoxinfo {font-size:12px;}
    .joinloginMoveBox {margin:0 -10px;}
    .jlmBoxIn {padding:20px; margin:0 10px;}
    .jlmBoxIn h4 {font-size:20px;}
    .jlmBoxIn .txtBox {font-size:16px; margin-bottom:20px;}
    .jlmBoxIn .icon {font-size:100px; bottom:10px;}
    .idSearchBox span.userId {padding: 0 18px;}

    .fwBoxIn .table_normal tbody tr th {width:30%;}
    .fwBoxIn .table_normal tbody tr td {width:70%;}
}