@charset "utf-8";

/****************************************************
 * 로그인 페이지
 ****************************************************/
.login_body {letter-spacing:-0.5px;overflow-x:hidden !important;width:100%;}
.bg	{display:block;width:100%;height:50px;background:#910d0d;margin-bottom:80px;}
.login {position:relative;max-width:1200px;margin:0 auto;width:calc(100% - 40px);}
.login:before	{z-index:-1;content:'';position:absolute;left:-360px;bottom:0;width:280px;height:284px;background:url('../images/login/bg_02.png') no-repeat 50% 50%;}
.login:after	{z-index:-1;content:'';position:absolute;right:-160px;top:0;width:394px;height:331px;background:url('../images/login/bg_01.png') no-repeat 50% 50%;}
.logo	{display:block;width:160px;height:56px;font-size:0;background:url('../images/common/logo.png') no-repeat 0 0;}
.top h1	{text-align:center;font-size:36px;color:#111;font-weight:600;}
.login-wrap	{max-width:495px;width:100%;margin:20px auto;}
.login input	{line-height:65px;height:65px;border:1px solid #dee3e6;border-radius:10px;padding:0 20px;width:100%;color:#b1b3b5;font-weight:600;font-size:16px;}
.login input ~input, .login input ~div	{margin-top:10px;}
.add_search	{display:flex;margin:20px 0 30px;justify-content: space-between;}
.add_search p	{color:#111;}
.add_search p a ~ a{position:relative;padding-left:18px;}
.add_search p a ~ a:before	{content:'';position:absolute;left:7px;top:3px;width:1px;height:9px;background:#bababa;}
.login-wrap	button	{display:block;width:100%;line-height:56px;background:#b02b2b;color:#fff;text-align:center;font-size:18px;font-weight:600;border-radius:10px;margin-bottom:25px;}
.login-wrap	p	{line-height:22px;font-weight:300;}
.login-wrap p.textmore	{text-align:center;color:#495057;font-size:16px;margin-top:45px;}
.login-wrap p.textmore strong	{font-weight:600;color:#b02b2b;display:inline-block;border-bottom:1px solid #b02b2b;}
.text_add	{display:block;width:100%;margin:60px 0;font-weight:300;line-height:26px;}
.text_add h2	{font-size:16px;font-weight:600;color:#111;}
.text_add .gray_box	{margin:15px 0 20px 0;background:#f3f5f7;border-radius:15px;padding:20px;}
.text_add b	{font-weight:600;}
.text_add li	{position:relative;padding-left:10px;}
.text_add li:before	{content:'';position:absolute;left:0;top:11px;width:3px;height:3px;border-radius:100%;background:#b2b7bc;}
.text_add li a	{font-weight:600;color:#b02b2b;display:inline-block;border-bottom:1px solid #b02b2b;}
.login-input .ico_view	{position:absolute;right:30px;top:0;width:25px;font-size:0;cursor:pointer;height:100%;background:url(../images/contents/ico_pw_on.png) no-repeat 50% 50%;background-size:100% auto;}
.login-input .ico_view.on	{background-image:url(../images/contents/ico_pw_off.png)}

/* 레이어 팝업창 */
body.fixed header, body.fixed .floating {z-index:0;}
.pop_layer  {z-index:999999;position:fixed;top:0;left:0;width:100%;height:100%; display: none;padding: 0;}
.pop_layer:before{content:'';position:fixed;top:0;left:0;width:100%;height:100%;background:#000;opacity:.7;text-indent:-9999em;font-size:0;}
.pop_layer .pop_area{position:absolute;top:50%;left:0;right:0;margin:auto;background:#fff;transform:translateY(-50%);height:100%;}
.pop_layer a.close  {z-index:3;font-size:0;position:absolute;top:20px;right:20px;width:18px;height:18px;opacity:1 !important;}
.pop_layer a.close:before   {content:'';position:absolute;right:10px;top:0px;width:1px;height:18px;background:#000;border-radius:2px;transform:rotate(135deg);}
.pop_layer a.close:after    {content:'';position:absolute;right:10px;top:0px;width:1px;height:18px;background:#000;border-radius:2px;transform:rotate(45deg);}
.pop_layer.hp .pop_area  {width:450px;height:400px;border-radius:15px;overflow:hidden;}
.pop_layer.ip .pop_area  {width:350px;height:250px;border-radius:15px;overflow:hidden;}
.pop_tit    {display:block;width:100%;height:55px;line-height:55px;padding:0 30px;color:#111;font-size:16px;background:#f5f5f5;font-weight:600;}
.pop_layer .pop_area > div{padding:20px;}
.pop_layer .text_add {margin:0 0 20px 0;}
.pop_layer .text_add li {font-size:14px;font-weight:500;}
.pop_layer .button_area {position:absolute;left:0;bottom:0;margin-top:0;text-align:center;display:flex;width:100%;}
.button_area > a    {width:100%;background:#b02b2b;line-height:55px;height:55px;font-size:16px;color:#fff;font-weight:600;padding:0;letter-spacing:5px;}
.button_area > a.BtnOk  {background:#888;}
.certifi_area   {width:100%;margin:0 auto;display:flex;flex-wrap: wrap;gap:20px;border-top:2px solid #d43f3a;border-bottom:1px solid #444;padding:20px 10px;}
.certifi_area p {display:flex;align-items: center;width:100%;position:relative;line-height:35px;font-size:17px;}
.certifi_area p span {font-size:15px;font-weight:500;color:#111;width:80px;}
.certifi_area button    {position:absolute;right:0;top:0;display:block;line-height:35px;background:#888;color:#fff;font-size:13px;font-weight:500;padding:0 15px;margin-left:10px;min-width:100px;}
.certifi_area button.extend {background:#5cb85c;}
.certifi_area input {border:1px solid #ccc;position:relative;padding-right:50px;width:200px;line-height:35px;}
.certifi_area i {position:absolute;right:120px;top:0;font-size:12px;font-weight:500;color:#111;line-height:35px;}

@media (max-width: 420px) {
    .login_body {font-size:13px;font-weight:400 !important;padding-top:50px;}
    .login_body:before  {height:30px;}
    .top h1 {margin-top:20px;font-size:25px;}
    .top p  {font-size:15px;margin-top:15px;}
    .login:after    {display:none;}
    .login input    {line-height:55px;height:55px;font-size:14px;}
    .add_search p a ~ a{padding-left:12px;}
    .add_search p a ~ a:before  {left:4px;top:4px;height:7px;}
    .login-wrap button  {line-height:50px;font-size:16px;margin-bottom:20px;}
    .text_add   {line-height:22px;margin:30px 0 0 0;}
    /* 레이어 팝업 */
    .pop_area   {max-width:calc(100% - 20px);height:calc(100vh - 40px);overflow-y:auto;border-radius:0 !important;}
    .pop_layer a.close  {top:15px;}
    .pop_layer.apply .pop_area > div{padding:10px;}
    .certifi_area p {font-size:15px;}
    .certifi_area p span {font-size:13px;width:70px;}
    .certifi_area button    {font-size:12px;min-width:95px;}
    .certifi_area input {width:150px;}
}