@charset "UTF-8";

/*로그인*/
.loginWrap {position: relative;padding: 20px 0px 5px;margin-top: 25px; background-color: #f9f5f5;}
.login .top-title{position: relative; width:100%;width: 100%;text-align: right;padding-right: 240px;}
.login .top-title:after{content: "";position: absolute;top: -40px;right: 0;width: 232px;height: 186px;background:url(/images/kor/sub06/sub06_05_02_img01.png) no-repeat center;z-index: 10;}
.login .top-title p{font-size:14px;line-height: 1.4;margin-top: 5px;}
.login .top-title strong{display:block;font-family: 'score';font-size: 50px;font-weight: bold;color: #fff;text-shadow: -1px 0 #f6ccc7, 0 1px #f6ccc7, 1px 0 #f6ccc7, 0 -1px #f6ccc7;letter-spacing: 10px;text-indent: 30px;line-height: 1;}
.login .top-title p b{display:block;color:#ef3e30;line-height: 1;margin-top: -2px;margin-bottom: 3px;}
.loginWrap_con,.login_forget{max-width:477px; margin:0 auto; width:100%;}

.loginWrap_con{position:relative;padding:0 120px 20px 10px; border-bottom: 1px dashed #ddd;}
.loginWrap_con input{box-sizing:border-box;display:block;width:100%;min-height:38px;height:auto;padding:0 5px;vertical-align:middle;border:1px solid #DDD;}
.loginWrap_con dl{display:table;width:100%; margin:10px 0; position:relative; padding-left:77px}
.loginWrap_con dl dt,
.loginWrap_con dl dd{display:table-cell;vertical-align:middle;}
.loginWrap_con dl dt{width:72px; font-weight:500; position: absolute;top: 50%;left: 0;transform: translateY(-50%);}
.loginWrap_con dl dd{width:100%;}
.loginWrap_con .btn_login{width:100px;height:85px;background: #ef3e30;color:#FFF;border:0;position:absolute;right:10px;top:0;font-weight: bold;border-radius: 5px;}
.login_forget{margin: 20px auto;}
.login_forget span{vertical-align: middle;}
.login_forget a{display:inline-block;float:right;margin-left:3px;padding: 10px 0 7px;width:120px;text-align:center;background:#9a9a9a;color:#FFF !important;font-size: 14px;border-radius: 5px;line-height: 1.2;}
.loginWrap_con .btn_login:hover,
.loginWrap_con .btn_login:focus,
.login_forget a:hover,
.login_forget a:focus{background:#52575c;transition: all 0.2s cubic-bezier(0.2, 0, 0.3, 1);}

@media only screen and (max-width:1145px){

    .login .top-title:after{width: 140px; height: 140px; background-size: 100%; top: 10px; }
    .login .top-title{padding-right: 156px;}
    .login .top-title strong{font-size: 45px;}
}

@media only screen and (max-width:1023px){

    .login .top-title:after{top: -40px; right: 0; width: 232px; height: 186px; }
    .login .top-title{padding-right: 240px;}
    .login .top-title strong{font-size: 50px;}
}

@media only screen and (max-width:860px){

    .login .top-title:after{width: 140px; height: 140px; background-size: 100%; top:10px }
    .login .top-title{padding-right: 156px;}
    .login .top-title strong{font-size: 40px;}
}

@media only screen and (max-width:730px){

    .loginWrap_con{width:80%;}
    .login_forget{text-align:center;width:80%;}
    .login_forget span{display:block;margin-bottom:20px;}
    .login_forget a{float:none;}

}

@media only screen and (max-width:670px){

    .login .top-title:after{display:none }
    .login .top-title{padding-right: 0}

}

@media only screen and (max-width:540px){

    .login .top-title{text-align: center;}
    .login .top-title strong{font-size: 30px;}

}


@media only screen and (max-width:480px){
    .loginWrap{padding:15px;}
    .loginWrap_con{width:100%; padding-right:0; padding-bottom:30px}
    .login_forget{width:100%}
    .loginWrap_con dl{display:block;width:100%;}
    .loginWrap_con dl dt,
    .loginWrap_con dl dd{display:block;width:100%;}

    .loginWrap_con .btn_login{width:100%;padding:10px 0;height:auto;position:relative;top:10px; right:0}

}

@media only screen and (max-width:340px){

    .login_forget a{width:100%; display:block}
    .login_forget a:first-of-type{margin-bottom: 5px;}

}


@media only screen and (max-width:320px){
    .login_forget a{display:block;margin-left:0;margin-bottom:5px;width:100%;}
}

.login_guide{margin-top: 150px;border:1px solid #bfbfbf;position:relative;border-top: 3px solid #2e3e73;}
.login_guide:after{content: ""; display: block; position: absolute;}
.login_guide:after {width: 204px;height: 111px;background: url(/images/kor/sub01/sub01_03_01_img07.png) no-repeat;top: -114px;right: 15px;/* background: #000; */}
.login_guide div{display:table;/* background-color: #f3f4f8; */position: relative;width: 100%;}
.login_guide dl{display:table-cell;width:21%;padding:0 2%;border-left:1px solid #bfbfbf;}
.login_guide dl.con_1{border-left:0;}
.login_guide dt{text-align:center;color:#0f5cb1;font-size:16px;font-weight:500;position:relative;padding-top:50px;}
.login_guide dd{padding:15px 0;}
.login_guide ul{}
.login_guide li{margin:10px 0;font-size:14px;position:relative;padding-left:8px;}
.login_guide li:before{content:"";display:block;width:2px;height:2px;position:absolute;left:0;top:10px;background:#7f7f7f;}
.login_guide dt:before{content:"";display:block;width:84px;height:84px;position:absolute;left:calc(50% - 42px);top:-45px;background-color:#f2f2f2 !important;border-radius:100%;display: none;}
.login_guide .title{position: absolute;top: -65px;left: 0;width:100%;display:block;}
.login_guide .title strong{font-family: 'score';font-size: 31px;font-weight: bold;color:#2e3e73;}
.login_guide .title strong span{font-weight: normal;color: #0f1a3e;}
@media only screen and (max-width:770px){
    .login_guide{border:0;}
    .login_guide div{display:block;}
    .login_guide dl{display:block;width:96%;padding:2%;border-left:0px;border-top:1px dashed #bfbfbf;}
    .login_guide dl.con_1{border-top:0;}
    .login_guide dt:before{left:0;top:5px;width:60px;height:60px;background-size:40px !important;}
    .login_guide dt{text-align:left;padding-top:0;padding-left:80px;}
    .login_guide .con_1 dt:before{background-position:center;}
    .login_guide dd{padding:10px 0 0 0;}
    .login_guide ul{padding-left:80px;}
    .login_guide li{margin:5px 0;}
}

@media screen and (max-width:500px) {

    .login_guide dt,.login_guide ul{padding-left:0px;}
    .login_guide:after{background-size: 100%; width:150px; height:85px; top:-109px}

}

@media screen and (max-width:390px) {

    .login_guide:after{display:none}

}

@media only screen and (max-width:300px){
    .login_guide{margin-top:50px;}
    .login_guide dt:before{display:none;}
    .login_guide dt{padding-left:0;}
    .login_guide ul{padding-left:0;}
}
/* 로그인 본인인증 */
.login .ui-topbox .inner .h-box{font-size: 24px;}
.login .ui-topbox .inner .h-box span{color:#ef3e30}


#ipin_realname {padding:40px; border-top:2px solid #ef3e30; background:#fafafa; text-align:center; }
#ipin_realname .icon {display:inline-block;width:85px;height:85px;margin: 10px 0;background: url(/pcms/dist/img/p03/ir_list_icon.png) no-repeat; background-position:-901px  -400px;}
#ipin_realname h2 {display:block;margin: 0 0 10px;font-weight:bold;font-size: 20px;color:#093055;}
#ipin_realname p {margin:10px 0; font-size:15px ; color:#63666e; }
#ipin_realname a {min-width:200px;}
#ipin_realname .list-box {margin:25px 0 0; padding:15px 0 0; border-top:1px dashed #8d8d8d; text-align:left;}
#ipin_realname .btn{padding:12px 19px; text-align: center;}


/* google-btn */
.login .txtwrap{position: relative;}
.login .ir-icon__md.icon2{background-position: -141px 0;}
.btn.g-btn{padding:14px 19px 12px 48px; position:absolute; font-weight: bold; margin-top: 15px; margin-left: 0; border:1px solid #e4e4e4; text-transform:capitalize}
.btn.g-btn:before{content:''; display:inline-block; position:absolute; top:11px; left:16px ;width:20px; height:20px; background-image:url(/pcms/common/images/common/google_logo.png); background-size:cover; background-position: center center; background-repeat: no-repeat;}