@charset "utf-8";
/* ------------------------------------------
* Filename: login.css
* Author: CanDelain
------------------------------------------ */

#login {width:100%; min-width:1200px; min-height:800px; position:relative; background:url('../img/login/bg_login.jpg') 0 0 no-repeat; background-size:cover}
#login .box {width:460px; height:450px; position:absolute; top:50%; left:50%; margin:-225px 0 0 -230px;border:0;}
#login h1 {display:block; width:50%; height:104px; background:url('../img/login/login_logo.png') 22px 22px no-repeat; text-indent:-9999px}

#login .login_form {background-color:rgba(8,3,0,0.4);padding-bottom:20px;}
#login .login_form fieldset {display:block;width:340px; height:410px; margin:0 auto;}
#login fieldset h2 {display:block; background:url('../img/login/login_bi.png') 0 0 no-repeat; width:190px; height:40px; margin:72px auto 40px; text-indent:-9999px}
#login select {position:relative;display:block;float:right;width:160px;margin-top:7px;}
#login fieldset input[type="text"], fieldset input[type="password"] {display:block; width:100%; background:#fff; line-height:50px; height:50px; border:0; color:#666; border-radius:5px; margin-top:10px; padding-right:0}
#login fieldset button.btn {display:block; background:#f47320; color:#fff; font-size:20px; border:0; width:100%; height:60px; line-height:60px; text-align:center; border-radius:5px; margin-top:10px}

.chk_id {display:block; margin-top:20px}
.chk_id label {height:18px; line-height:18px; display:block; color:#fff; font-size:13px; font-weight:bold; text-shadow:1px 1px 1px #333}
.chk_id input[type="checkbox"] + label::before {content:''; display:inline-block; width:18px; height:18px; vertical-align:middle; background:url('../img/common/check_off.png') 0 0 no-repeat; padding-left:5px}
.chk_id input[type="checkbox"]:checked + label::before {background:url('../img/common/check_on.png') 0 0 no-repeat}


.find_info {text-align:center;}
.find_info button {display:inline-block; color:#fff; font-size:13px; font-weight:bold; text-shadow:1px 1px 1px #333; border:0; background:url('../img/login/bg_line.png') 0 4px no-repeat; line-height:20px; padding-left:11px; margin-left:10px}
.find_info button:first-child {padding-left:0; margin-left:0; background:none}

#login table {width:100%; word-wrap: break-word; border-spacing:0; border-collapse:0; border-top:solid 1px #dddfe4; line-height:28px; color:#666}
#login table th {background:#f5f5f5; border:solid 1px #dddfe4; border-top:0; color:#000; text-align:left; padding:4px 10px 4px 24px; line-height:28px; height:28px}
#login table th.required {background:url('../img/common/bul_required.png') 13px 17px no-repeat #f5f5f5;}
#login table td {border:solid 1px #dddfe4; border-top:0; padding:4px 10px; line-height:28px; height:28px}
#login table input[type="text"] {width:calc(100% - 12px)}

#login .login_footer {position:fixed;bottom:0;left:0;width:100%;height:40px;background-color:rgba(0,0,0,0.4);padding:0 20px;box-sizing:border-box;overflow:hidden;}
#login .login_footer > strong {display:block;float:left;color:rgba(255,255,255,0.5);line-height:40px;}

.find_popup {width:460px; position:relative;}
.find_area {background:#fff; padding:30px}
.find_area .title {border-bottom:solid 2px #555; padding-bottom:20px; margin-bottom:20px}
.find_area .title:after {content:''; display:block; clear:both}
.find_area .title h3 {display:block; float:left; color:#333; font-size:18px; line-height:24px}
.find_area .title span {display:block; float:right; background:url('../img/login/join_bi_title.png') 0 0 no-repeat; width:85px; height:17px; text-indent:-9999px; margin-top:5px}
.close_btn {background:url('../img/login/close_guide.png') center center no-repeat #fff; width:19px; height:19px; border:solid 1px #ccc; display:block; text-indent:-9999px; position:absolute; right:4px; top:4px; border-radius:3px}
button.btn {display:block; background:#f47320; border:0; color:#fff; border-radius:5px; width:120px; height:40px; line-height:40px; text-align:center; font-size:15px; margin:20px auto 0}
p.guide {display:block; background:#fafafa; text-align:center; padding:15px 0; line-height:22px; color:#666; margin-top:20px}
p.guide span {color:#ff1c32}
.find_popup input[type="text"] {background:#fff9eb}
.find_popup input[type="text"]:focus {border:solid 1px #f47320}

#join_wrap {width:962px; margin:0 auto; padding-bottom:50px}
#join_wrap .join_title {border-bottom:solid 2px #888; margin-top:30px; padding-bottom:20px}
.join_title:after {content:''; display:block; clear:both}
.join_title strong {display:block; float:left; color:#333; font-size:23px; line-height:26px}
.join_title h1 {display:block; float:right; background:url('../img/login/join_bi_title.png') 0 0 no-repeat; width:100px; height:21px; text-indent:-9999px; line-height:26px}

#join_wrap .step_01 {}
#join_wrap .flow {background:url('../img/login/join_step_bar.png') 0 0 no-repeat; margin-top:30px}
#join_wrap .step_01 .flow {background-position:0 0}
#join_wrap .step_02 .flow {background-position:0 -45px}
#join_wrap .step_03 .flow {background-position:0 -90px}
#join_wrap .step_04 .flow {background-position:0 -135px}
#join_wrap .flow:after {content:''; display:block; clear:both}
#join_wrap .flow li {display:block; float:left; width:25%; height:45px; line-height:45px; text-align:center; font-size:15px; color:#333}
#join_wrap .step_01 .flow li:nth-child(1) {color:#fff}
#join_wrap .step_02 .flow li:nth-child(2) {color:#fff}
#join_wrap .step_03 .flow li:nth-child(3) {color:#fff}
#join_wrap .step_04 .flow li:nth-child(4) {color:#fff}

#join_wrap [class^="step_"] dl {margin-top:20px}
#join_wrap [class^="step_"] dt {display:block; background:url('../img/common/icon_bul.png') 0 -38px no-repeat; padding-left:18px; font-size:15px; font-weight:normal; line-height:28px}
#join_wrap [class^="step_"] dt:after {content:''; display:block; clear:both}
#join_wrap [class^="step_"] dd {margin-top:5px}
#join_wrap .box {border:0;}
#join_wrap .step_01 .lst dd {display:block; margin-top:10px; border:solid 1px #dddfe4; padding:15px}
#join_wrap .step_01 .lst p {background:url('../img/common/bul_square.png') 0 10px no-repeat; line-height:20px; font-size:13px; padding-left:10px; margin-top:3px; display:block}
#join_wrap .step_01 .lst p:first-child {margin-top:0}

#join_wrap .step_02 .cop_search {margin-top:30px}
#join_wrap .step_02 .cop_search td.search div {}
#join_wrap .step_02 .cop_search td.search div:after {content:''; display:block; clear:both}
#join_wrap .step_02 .cop_search td.search input[type="text"] {width:calc(100% - 66px); margin:0}
#join_wrap .step_02 .cop_search td.search button {width:28px; height:28px; display:block; float:left; background:url('../img/login/close_search.png') center center no-repeat #fff; border:solid 1px #ccc; border-radius:3px; text-indent:-9999px; margin-left:5px}
#join_wrap .step_02 .cop_search td.search button.search_btn {background:url('../img/common/icon_search.png') center center no-repeat #fff}
#join_wrap .step_02 .cop_search .dot_list {padding:10px 0}
#join_wrap .step_02 .cop_search .dot_list:after {content:''; display:block; clear:both}
#join_wrap .step_02 .cop_search .dot_list ul {display:block; float:left}
#join_wrap .step_02 .cop_search .dot_list li {background:url('../img/common/bul_square.png') 0 10px no-repeat; line-height:20px; font-size:13px; padding-left:10px; display:block}
#join_wrap .step_02 .cop_search .dot_list button {display:block; float:right; height:40px; line-height:40px; border-radius:3px; border:0; color:#fff; background:#666; width:120px; text-align:center}

#join_wrap .step_02 select {width:100%}
#join_wrap .step_02 .complex {}
#join_wrap .step_02 .complex:after {content:''; display:block; clear:both}
#join_wrap .step_02 .complex input[type="text"] {display:block; float:left; margin-right:10px}
#join_wrap .step_02 .complex ul {display:block; float:left}
#join_wrap .step_02 .cop_name {}
#join_wrap .step_02 .cop_name:after {content:''; display:block; clear:both}
#join_wrap .step_02 .cop_name input[type="text"] {width:calc(100% - 86px); float:left; display:block}
#join_wrap .step_02 .cop_name button {width:76px; height:28px; line-height:28px; text-align:center; display:block; float:left; color:#fff; background:#666; border:0; border-radius:3px; margin-left:10px}

#join_wrap .step_03 th div {position:relative}
#join_wrap .step_03 .icon_guide {width:16px; height:16px; background:url('../img/login/icon_guide_layer.png') 0 0 no-repeat; display:block; text-indent:-9999px; border:0; position:absolute; right:0; top:6px}
#join_wrap .step_03 .pw_guide {position:absolute; left:120px; top:10px; z-index:100; background:#fff; border:solid 1px #ced3d6; border-radius:5px; padding:15px; display:none}
#join_wrap .step_03 .pw_guide.open {display:block}
#join_wrap .step_03 .pw_guide ul {font-weight:normal; font-size:12px; color:#666; width:330px}
#join_wrap .step_03 .pw_guide li {display:block}
#join_wrap .step_03 .pw_guide .close_guide {position:absolute; top:10px; right:10px; width:10px; height:10px; display:block; border:0; text-indent:-9999px; background:url('../img/login/close_guide.png') 0 0 no-repeat}
#join_wrap .step_03 .id_field {}
#join_wrap .step_03 .id_field:after {content:''; display:block; clear:both}
#join_wrap .step_03 .id_field button {width:76px; height:28px; line-height:28px; text-align:center; display:block; float:left; color:#fff; background:#666; border:0; border-radius:3px; margin-left:10px}
#join_wrap .step_03 .id_field span {display:block; float:left; color:#ff1c32; margin-left:10px; line-height:28px}
#join_wrap .step_03 .box div {background:#f5f5f5; min-height:200px; margin-top:10px}
#join_wrap .step_03 td input[type="text"]:disabled {width:calc(100% - 13px)}

#join_wrap .step_04 {}
#join_wrap .welcome_message {margin-top:30px; border:solid 1px #dddfe4; text-align:center; padding-top:30px; background:url('../img/login/join_img.png') center 255px no-repeat; height:488px}
#join_wrap .welcome_message strong {line-height:100px; display:block; color:#333; font-size:27px; font-weight:normal}
#join_wrap .welcome_message li {line-height:30px; font-size:15px}
#join_wrap .welcome_message span {color:#ff691f}

#join_wrap td input[type="text"] {display:block; float:left; width:309px}

#join_wrap .rules {line-height:24px; height:110px; overflow-y:auto; border:solid 1px #d9d9d9; width:100%; padding:20px; display:block}
#join_wrap .agree {background:#f5f5f5; padding:10px 20px; border:solid 1px #dddfe4; border-top:0}
#join_wrap .agree input[type="checkbox"] + label::before {content:''; display:inline-block; width:18px; height:18px; vertical-align:middle; background:url('../img/common/check_off.png') 0 0 no-repeat; padding-left:5px}
#join_wrap .agree input[type="checkbox"]:checked + label::before {background:url('../img/common/check_on.png') 0 0 no-repeat}

#join_wrap .basic_btn {text-align:center; margin-top:30px}
#join_wrap .basic_btn button {background:#f47320; height:40px; line-height:40px; padding:0; width:120px; float:none; display:inline-block; font-size:15px}
#join_wrap .basic_btn button.sub {background:#888}






#pw_wrap {width:962px; margin:0 auto; padding-bottom:50px}
#pw_wrap .title {border-bottom:solid 2px #888; margin-top:30px; padding-bottom:20px}
#pw_wrap .title:after {content:''; display:block; clear:both}
#pw_wrap .title strong {display:block; float:left; color:#333; font-size:23px; line-height:26px}
#pw_wrap .title h1 {display:block; float:right; background:url('../img/login/join_bi_title.png') 0 0 no-repeat; width:100px; height:21px; text-indent:-9999px; line-height:26px}
#pw_wrap .pwchange {border:solid 1px #dddfe4; padding:30px; margin-top:30px}
#pw_wrap .pwchange > p {border:solid 1px #dddfe4; text-align:left; padding:15px 20px; height:90px; overflow-y:scroll; line-height:24px; display:block; margin-bottom:20px; background:#fafafa}
.pwchange .box {border:0;} /*202001 css추가*/
.pwchange .box ul {margin-top:10px; border-top:solid 1px #dddfe4; border-left:solid 1px #dddfe4}
.pwchange .box ul:first-child {margin-top:0}
.pwchange .box > ul > li {background:#f3f4f4; border-bottom:solid 1px #dddfe4}
.pwchange .box > ul > li:after {content:''; display:block; clear:both}
.pwchange .box > ul > li > strong {display:block; float:left; letter-spacing:-2px; width:130px; line-height:28px; padding:3px 10px 3px 14px; color:#333; font-weight:normal; position:relative;}
.pwchange .box > ul > li > strong.required {background:url('../img/common/icon_bul.png') 5px -72px no-repeat}
.pwchange .box > ul > li > span {display:block; float:left; background:#fff; line-height:28px; width:calc(100% - 130px); padding:3px 10px; border-left:solid 1px #dddfe4; border-right:solid 1px #dddfe4}
.pwchange .box input[type="password"] {width:calc(310px - 12px); display:block; background:#fff9eb}
.pwchange .box .pw_guide_btn {position:absolute; top:10px; right:10px; width:16px; height:16px; background:url('../img/common/icon_gnb.png') 0 -828px no-repeat; display:block; text-indent:-9999px; border:0}
.pwchange .box .pw_guide {background:#fff; width:300px; position:absolute; left:139px; top:2px; border:solid 1px #ced3d6; border-radius:3px; z-index:202; display:none}
.pwchange .box .pw_guide.open {display:block}
.pwchange .box .pw_guide i {padding:10px; display:block; line-height:22px; font-size:12px; font-style:normal;}
.pwchange .box .pw_guide .close {position:absolute; right:5px; top:5px; width:10px; height:10px; display:block; text-indent:-9999px; border:0; background:url('../img/main/close_help.png') 0 0 no-repeat}
#pw_wrap .basic_btn {text-align:center; margin-top:30px}
#pw_wrap .basic_btn button {background:#f47320; height:40px; line-height:40px; padding:0; width:120px; float:none; display:inline-block; font-size:15px}
#pw_wrap .basic_btn button.sub {background:#888}





@media (max-width:760px){
#login {min-width:320px; min-height:100%; background:url('../img/login/mobile_bg_login.jpg') center center no-repeat; background-size:cover}
#login h1 {height:80px; background-position:15px 18px}
/*#login .box {width:calc(100% - 60px); position:static; margin:0 auto; top:0; left:0; height:auto}*/
#login .box {width:calc(100% - 60px); margin:-230px auto 0; height:460px; left:30px}
#login .login_form fieldset {width:calc(100% - 60px); padding:0 30px 40px; height:auto}
#login fieldset h2 {margin:40px auto 20px}
.find_popup {width:calc(100% - 40px)}
table col:first-child {width:100px}
.find_info button:first-child {display:none}
.find_info button:nth-child(2) {background:none; padding-left:0; margin-left:0}


#pw_wrap {width:calc(100% - 20px); min-width:300px; padding:0 10px}
#pw_wrap .pwchange {padding:0; border:0}
.pwchange .box input[type="password"] {width:calc(100% - 12px)}
.pwchange .box .pw_guide {top:-1px; left:-1px; width:calc(100vw - 22px)}
}

@media (max-width:320px){
#login .login_form fieldset {width:calc(100% - 40px); padding:0 20px 30px}
#login .box {margin-top:-200px}
#login fieldset h2 {margin:30px auto 20px}
.find_area {padding:30px 15px}
p.guide br {display:none}
table col:first-child {width:80px}
}