@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Nanum+Gothic&display=swap');

#loginPop .btn_login{display:block;width:170px;height:45px;line-height:45px;background:#ededed;font-size:14px;color:#333;text-align:center;-webkit-transition: .3s;transition: .3s;}
#loginPop .btn_login:hover{background:#474747;color:#fff;}
#loginPop{display: none; /*url(https://www.dfdgroup.com/images/bg/bg_hub_b1.png) no-repeat 50% 50% / cover;*/;}
#loginPop.on{display: block;}
.loginPop_wrap{position: fixed;top:0;left:0;bottom:0;right:0;background:rgba(0,0,0,.5);display: flex;justify-content: center;align-items: center;z-index: 10000000}
.loginPop_box{position: relative;width: 90%;max-width: 600px;background-color:#333;padding-bottom: 40px;}
.loginPop_box .btn_close{position: absolute;top: 10px;right: 10px;}
.sub_header{padding:50px 0 40px;text-align:center;}
    .sub_header h2{margin-bottom:15px;background: none;-webkit-background-clip: inherit;-webkit-text-fill-color: inherit;font-family:'Cinzel';font-size:31px;font-weight:400;color:#fff;line-height:1;}
    .sub_header h2 .line{display:inline-block;width:30px;height:1px;background:#fff;vertical-align:middle;}
    .sub_header h2 .line_left{margin-right:20px;}
    .sub_header h2 .line_right{margin-left:20px;}
    .sub_header .desc{font-family: 'Nanum Gothic';font-size:15px;color:#d2d2d2;}

  .login_wrap{width:90%;padding:0;margin: 0 auto;}
    .login_form{position:relative;width:100%;background: #333;}
    .login_form h3{background: none;-webkit-background-clip: inherit;-webkit-text-fill-color: inherit;}
    .login_form h3 .ico{position:absolute;top:0;left:0;width:59px;height:59px;}
    .login_form h3 .ico img{margin-top: 19px;vertical-align:top}
    .login_form .hub_form{padding: 0}
    .login_form .login_info{margin:40px 0 30px;font-size:14px;color:#c3c3c3;text-align:center;line-height: 1.3;}
    .login_form .login_info strong{font-family: 'Nanum othic';font-weight:bold;color:#fff;}
    .login_form .login_info .br{display: none}
    .login_form .ipt_wrap{width:100%;margin:0 auto 15px;padding-right:30px;}
    .login_form .ipt_wrap label{display:block;width:30%;padding-right:30px;font-size:15px;color:#d2d2d2;text-align:right;float:left;line-height:35px;}
    .login_form .ipt_wrap input{width:70%;height:35px;padding:0 20px;background:#fff;border:none;line-height:35px;}
    .login_form .btn_login{position:static;margin: 30px 0 0 0;color: #333}
    .login_form .btn_login:hover{color: #fff}
    .login_form .login_sys{width:100%;margin:5px auto 0;padding-left:calc((100% - 30px)*.3);padding-right:30px;color:#d2d2d2;overflow:hidden;}
    .login_form .login_sys .login_sys_btn{overflow:hidden}
        .login_sys .login_find{float:left;}
        .login_sys .login_find .btn_link_yl{display:inline;background: none;font-family: 'Nanum Gothic';font-size:12px;color: #fdff2c;line-height: 1;text-decoration:underline;-webkit-transition: .3s;transition: .3s;}
        .login_sys .login_save{float:right;}

.sub_panel h3{position:relative;height:60px;font-family:'Cinzel';font-size:24px;font-weight:400;color:#212121;text-align:center;line-height:60px;}
.sub_panel .panel_dk h3{border-bottom:1px solid #5c5c5c;color:#fff;}

.sns_login_wrap{margin-top:30px;border-top:1px solid #5c5c5c;padding-top:20px;}
.sns_login_wrap .sns_login{display:flex;width:100%;margin:0 auto;padding-right:30px;}
.sns_login_wrap .sns_login .inlabel{display:block;width:30%;padding-right:30px;font-size:15px;color:#d2d2d2;text-align:right;float:left;line-height:35px;}
.sns_login_wrap .sns_login .sns_btn_wrap{display:flex;width:70%;gap:10px;}
.sns_login_wrap .sns_login .sns_btn_wrap .btn{position:relative;display:block;width:45px;height:45px;border-radius:100%;overflow:hidden;text-indent:-9999px}
.sns_login_wrap .sns_login .sns_btn_wrap .btn::after{content:'';position:Absolute;top:0;left:0;width:100%;height:100%;background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,.3));}
.sns_login_wrap .sns_login .sns_btn_wrap .btn_kakao{background: url(../../images/menu/sns_kakao.png) no-repeat 50% 50% / auto 100%;}
.sns_login_wrap .sns_login .sns_btn_wrap .btn_naver{background: url(../../images/menu/sns_naver.png) no-repeat 50% 50% / auto 100%;}

@media screen and (max-width:500px){ 
  .loginPop_box{padding-bottom:30px;background-color: #333;}
  .sub_header{padding: 40px 0 20px}
  .sub_header h2{font-size: 24px}
  .sub_panel .panel_dk h3{height: 50px;line-height: 49px;font-size: 18px}
  .login_form h3 .ico{height: 49px;width: 49px;}
  .login_form h3 .ico img{margin-top: 14px}
  .login_form .login_info{font-size: 13px;margin: 30px 0 20px}
  .login_form .login_info .br{display: block;}
  .login_sys .login_find{width: 100%;}
  #loginPop .btn_login{margin-top:20px;}

  .login_sys .login_save{width: 100%;margin-top: 10px;float: left;}
}
@media screen and (max-width:415px){ 
  .login_form .ipt_wrap label{display:none}
  .login_form .ipt_wrap input{width:100%;}
  .login_form .ipt_wrap{padding-right:0;}
  .login_form .login_sys{padding:0;}
  #loginPop .btn_login{width:100%;}
  .sns_login_wrap{margin-top:20px;padding-top:15px}
  .sns_login_wrap .sns_login{flex-direction: column;padding:0;justify-content: center;align-items:center;}
  .sns_login_wrap .sns_login .inlabel{width:100%;padding:0;text-align:center;font-size:14px;}
  .sns_login_wrap .sns_login .sns_btn_wrap{width:100%;justify-content: center;;}
  .sns_login_wrap .sns_login .sns_btn_wrap .btn{width:40px;height:40px;}
}
@media screen and (max-width:375px){ 
  .sub_header h2{font-size: 21px}
  .sub_header .desc{font-size: 13px}
  .login_form .hub_form{padding: 0}
}