table { border-collapse:collapse; }
.wrap { 
	height:100vh;
	background:linear-gradient(to right, rgb(165 216 255) 0%, rgb(170 255 232) 100%);
	background-color:#bbb;
	background-image:url("data:image/svg+xml,%3Csvg width='42' height='44' viewBox='0 0 42 44' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='Page-1' fill='none' fill-rule='evenodd'%3E%3Cg id='brick-wall' fill='%2386899f' fill-opacity='0.4'%3E%3Cpath d='M0 0h42v44H0V0zm1 1h40v20H1V1zM0 23h20v20H0V23zm22 0h20v20H22V23z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.login_wrap { position:fixed; top:50%; left:50%; transform:translate(-50%, -50%); }

.login_box { display:flex; flex-flow:row wrap; width:940px; height:600px; border-radius:10px; background:#fff; position:relative; box-shadow:0 0 20px rgba(30,30,30,0.1); overflow:hidden; }
.login_box .left { display:flex; flex-flow:column wrap; justify-content:center; align-items:center; width:45%; padding:0 40px; box-sizing:border-box; }
.login_box .left .tit { width:100%; margin:0 auto 15px; font-size:24px; font-weight:bold; text-align:center; letter-spacing:-0.05em; }
.login_box .left .txt { width:100%; margin:0 auto 50px; font-size:13px; color:#555; text-align:center; }
.login_box .left .username { width:320px; height:45px; margin-bottom:15px; padding:10px 20px; border:0; border-radius:5px; background:#f6f7f8; box-shadow:inset 0 0 6px rgb(130 130 130 / 15%); }
.login_box .left .password { width:320px; height:45px; padding:10px 20px; border:0; border-radius:5px; background:#f6f7f8; box-shadow:inset 0 0 6px rgb(130 130 130 / 15%); }
.login_box .left .idremember_wrap { width:320px; margin-top:15px; }
.login_box .left .idremember_wrap label { display:inline-flex; align-items:center; color:#777; letter-spacing:-0.05em; }
.login_box .left .idremember_wrap #idremember { margin:0 5px 0 0; }
.login_box .left .btn { display:flex; justify-content:center; align-items:center; width:320px; height:45px; margin-top:10px; padding:10px 20px; border:0; border-radius:5px; background:#000; color:#fff; cursor:pointer; }
.login_box .left .login_btn { margin-top:30px; }
.login_box .left .join_wrap { display:flex; justify-content:space-between; width:320px; }
.login_box .left .join_wrap .join_btn { width:calc(50% - 4px); border:1px solid rgba(0,0,0,0.15); background:#fff; font-size:11px; color:#777; letter-spacing:-0.05em; }
.login_box .left .ip_txt { margin-top:30px; text-align:center; letter-spacing:-0.05em; }
.login_box .left .ip_txt span { color:#cc3e3e; }

.login_box .left table { width:350px; border-collapse:collapse; }
.login_box .left table tr {}
.login_box .left table td {}
.login_box .left table td .titbox { display:inline-block; width:65px; font-size:13px; vertical-align:middle; }
.login_box .left table td .txtbox { width:calc(100% - 65px); height:22px; border:1px solid #858585; }
.login_box .left table td .btn { 
	display:flex; justify-content:center; align-items:center; width:100px; height:50px; border:1px solid #858585; border-radius:3px; font-size:13px; font-weight:bold; color:#333; letter-spacing:-0.05em; 
	background:radial-gradient(at left top,#ffffff 50%,#efefef 100%); cursor:pointer; transition:all 0.3s;
}
.login_box .left table td .btn:hover { background:radial-gradient(at left top,#fafafa 50%,#d5d5d5 100%); }
.login_box .left table td .submitBtnJoin { margin-top:6px; }
.login_box .left table td .idremember_wrap { display:flex; align-items:center; font-size:12px; letter-spacing:-0.05em; }
.login_box .left table td .idremember_wrap #idremember { margin-left:0; vertical-align:-2px; }
.login_box .left table td .ip_txt { display:inline-block; margin:0; font-size:12px; color:#e45f5f; letter-spacing:-0.05em; }
.login_box .right { width:55%; background:url('./img/right_img.jpg') no-repeat top center; background-size:cover; }

.login_box .member_join { display:none; width:512px; padding:50px 30px 40px; border-radius:10px; background:#fff; letter-spacing:-0.05em; box-shadow:0 0 30px rgb(30 30 30 / 30%); position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); overflow:hidden; }
.login_box .member_join .tit { font-size:24px; font-weight:bold; text-align:center; letter-spacing:-0.05em; }
.login_box .member_join .privacy { width:100%; height:80px; margin:20px auto 10px; padding:10px; border:2px solid #f1f1f1; background:#f8f8f8; box-sizing:border-box; overflow-y:scroll; }
.login_box .member_join .privacy p { margin-bottom:10px; font-size:12px; font-weight:400; color:#888; }
.login_box .member_join .privacy div { font-size:12px; color:#999; word-break:keep-all; }
.login_box .member_join .privacy_agree {}
.login_box .member_join .privacy_agree #idcheck { margin-left: 0; vertical-align: -2px; }

.login_box .member_join .member_info { margin-bottom:30px; font-size:11px; font-weight:400; color:#555; border-collapse:collapse; }
.login_box .member_join .member_info input[type=text], input[type=password], input[type=email] { width:135px; height:24px; border:1px solid #f1f1f1; border-radius:2px; background:#f6f7f8; font-size:11px; box-shadow:inset 0 0 2px rgb(130 130 130 / 15%); cursor:auto; }
.login_box .member_join .member_info tr { height: 35px; border-bottom:1px solid #e5e5e5; }
.login_box .member_join .member_info th { width:80px; padding-right:8px; font-weight:500; color:#999; text-align:right; }
.login_box .member_join .member_info td { width:145px; }
.login_box .member_join .member_info td .joinid_check { display:inline-block; width:60px; height:24px; line-height:24px; background:radial-gradient(at left top,#777 30%,#555 100%); border-radius:2px; color:#fff; text-align:center; vertical-align:middle; cursor:pointer; }
.login_box .member_join .member_info td .bank_select { width:100px; height:24px; border:1px solid #f1f1f1; border-radius:2px; background:#f6f7f8; font-size:12px; box-shadow:inset 0 0 2px rgb(130 130 130 / 15%); }
.login_box .member_join .member_info td .account_number { width:calc(100% - 216px); }
.login_box .member_join .member_info td .account_holder { width:100px; }
.login_box .member_join .member_info td .EMP_ADDR_1 { width:100px; }
.login_box .member_join .member_info td .EMP_ADDR_2 { width:213px; }
.login_box .member_join .member_info td .EMP_ADDR_3 { width:360px; margin-top:4px; }
.login_box .member_join .member_info td .joinaddress_btn {  display:inline-block; height:24px; line-height:24px; padding:0 10px; background:radial-gradient(at left top,#777 30%,#555 100%); border-radius:2px; color:#fff; vertical-align:middle; cursor:pointer; }

.login_box .title { font-size:14px; font-weight:bold; color:#333; margin:20px 0 10px; }
.login_box .member_join .company_info { margin-bottom:20px; font-size:11px; font-weight:400; color:#555; border-collapse:collapse; }
.login_box .member_join .company_info input[type=text], input[type=password], input[type=email] { width:135px; height:24px; border:1px solid #f1f1f1; border-radius:2px; background:#f6f7f8; font-size:11px; box-shadow:inset 0 0 2px rgb(130 130 130 / 15%); cursor:auto; }
.login_box .member_join .company_info tr { height: 35px; border-bottom:1px solid #e5e5e5; }
.login_box .member_join .company_info th { width:80px; padding-right:10px; font-weight:500; color:#999; text-align:right; }
.login_box .member_join .company_info td { width:145px; position:relative; }
.login_box .member_join .company_info td #AGNC_NM { width:222px; position:relative; }
.login_box .member_join .company_info td #AGNC_NM:focus { border:1px solid #a6a6a6; }
.login_box .member_join .company_info td .list_wrap { display:none; width:222px; border:1px solid #a6a6a6; background:#fff; position:absolute; top:30px; left:0; z-index:10; }
.login_box .member_join .company_info td .list_wrap.on { display:block; }
.login_box .member_join .company_info td .list_wrap .companyName_list { overflow: auto; height: 90px; padding: 5px 5px 5px 10px; }
.login_box .member_join .company_info td .list_wrap .companyName_list li { padding:4px 0; border-bottom:1px solid #d5d5d5; }
.login_box .member_join .company_info td .list_wrap .companyName_list li a { display:block; font-size:11px; color:#555; }
.login_box .member_join .company_info td .list_wrap .companyName_list li a:hover { background:#eee; }
.login_box .member_join .company_info td .search_btn { display:inline-block; height:24px; line-height:24px; padding:0 10px; background:radial-gradient(at left top,#777 30%,#555 100%); border-radius:2px; color:#fff; vertical-align:middle; cursor:pointer; }


.login_box .agency_join { display:none; width:512px; padding:50px 30px 40px; border-radius:10px; background:#fff; letter-spacing:-0.05em; box-shadow:0 0 30px rgb(30 30 30 / 30%); position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); overflow:hidden; }
.login_box .agency_join .tit { font-size:24px; font-weight:bold; text-align:center; letter-spacing:-0.05em; }
.login_box .agency_join .privacy { width:100%; height:80px; margin:20px auto 10px; padding:10px; border:2px solid #f1f1f1; background:#f8f8f8; box-sizing:border-box; overflow-y:scroll; }
.login_box .agency_join .privacy p { margin-bottom:10px; font-size:12px; font-weight:400; color:#888; }
.login_box .agency_join .privacy div { font-size:12px; color:#999; word-break:keep-all; }
.login_box .agency_join .privacy_agree {}
.login_box .agency_join .privacy_agree #idcheck { margin-left: 0; vertical-align: -2px; }

.login_box .agency_join .agency_info { margin-bottom:30px; font-size:11px; font-weight:400; color:#555; border-collapse:collapse; }
.login_box .agency_join .agency_info input[type=text], input[type=password], input[type=email] { width:135px; height:24px; border:1px solid #f1f1f1; border-radius:2px; background:#f6f7f8; font-size:11px; box-shadow:inset 0 0 2px rgb(130 130 130 / 15%); cursor:auto; }
.login_box .agency_join .agency_info tr { height: 35px; border-bottom:1px solid #e5e5e5; }
.login_box .agency_join .agency_info th { width:80px; padding-right:8px; font-weight:500; color:#999; text-align:right; }
.login_box .agency_join .agency_info td { width:145px; }
.login_box .agency_join .agency_info td .biznum_check { display:inline-block; width:60px; height:24px; line-height:24px; background:radial-gradient(at left top,#777 30%,#555 100%); border-radius:2px; color:#fff; text-align:center; vertical-align:middle; cursor:pointer; }
.login_box .agency_join .agency_info td .bank_select { width:100px; height:24px; border:1px solid #f1f1f1; border-radius:2px; background:#f6f7f8; font-size:12px; box-shadow:inset 0 0 2px rgb(130 130 130 / 15%); }
.login_box .agency_join .agency_info td .account_number { width:calc(100% - 216px); }
.login_box .agency_join .agency_info td .account_holder { width:100px; }
.login_box .agency_join .agency_info td .EMP_ADDR_1 { width:100px; }
.login_box .agency_join .agency_info td .EMP_ADDR_2 { width:213px; }
.login_box .agency_join .agency_info td .EMP_ADDR_3 { width:360px; margin-top:4px; }
.login_box .agency_join .agency_info td .joinaddress_btn {  display:inline-block; height:24px; line-height:24px; padding:0 10px; background:radial-gradient(at left top,#777 30%,#555 100%); border-radius:2px; color:#fff; vertical-align:middle; cursor:pointer; }
.login_box .agency_join .agency_info td .filebox .upload_name { width:calc(100% - 78px); }
.login_box .agency_join .agency_info td .filebox label { display:inline-block; width:65px; height:24px; line-height:24px; padding:0 10px; background:radial-gradient(at left top,#777 30%,#555 100%); border-radius:2px; color:#fff; vertical-align:middle; cursor:pointer; }
.login_box .agency_join .agency_info td .filebox .upload_hidden { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); border:0; }




.login_box .btnArea { width:100%; margin-top:20px; font-size:0; text-align:center; }
.login_box .btnArea .btn { 
	display:inline-block; width:120px; line-height:35px; margin:0 2px; padding:0 10px; border:1px solid #bebebe; border-radius:2px; vertical-align:middle;
	background:radial-gradient(at left top,#ffffff 50%,#efefef 100%); font-size:12px; font-weight:bold; color:#444; letter-spacing:-0.05em; cursor:pointer;
}
.login_box .btnArea .btn:hover { background:radial-gradient(at left top,#fafafa 45%,#d5d5d5 100%); border:1px solid #aaa; }