@charset "utf-8";

/*login*/
.login_wrap{width:100%; height:100vh; background: url(../images/bg/login_back.png) no-repeat 0 0; position:relative; background-size: cover; overflow: hidden;}
.login_wrap .login_logo{margin:0; position:absolute; left:48px; top:42px;}
.login_wrap .logotype{position:absolute; right:50px; top:40px; color:#001C48; font-size:1.5rem; font-weight: 600;}
.login_wrap .input_box{position:absolute; left:50%; top:calc(50% - 20px); transform: translate(-50%, -50%); background: rgba( 255, 255, 255, 0.85 );box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 );backdrop-filter: blur( 10px );-webkit-backdrop-filter: blur( 10px ); border-radius: 31px; text-align: center; width:420px; height:550px; padding:78px 38px 45px 38px; box-sizing:border-box}
.login_wrap .logo_scdms{display:block; }
.login_wrap .logo_scdms img{margin:0 auto }
.login_wrap span{display:block; color:#fff}
.login_wrap .txt{font-size:1.4em; font-weight: 500; margin:1.3em 0 1.8em 0; color:#001C48}
.login_wrap .input_box input{background: #fff; border:1px solid #D3D5DB; border-radius: 12px; padding:5px 25px 5px 60px; height:50px; width:93%; box-sizing: border-box; font-size:18px; border:1px solid #D3D5DB}

.login_wrap .input_box input::placeholder { color:#AFB5C9; font-size:18px; font-weight: 500;} 
.login_wrap .id{position:relative} 
.login_wrap .id svg{width:35px; height:35px; position:absolute; left:21px; top:3px; z-index: 100;} 
.login_wrap .password{position:relative; margin:5px 0 22px 0} 
.login_wrap .password svg{width:35px; height:35px; position:absolute; left:24px; top:7px; z-index: 100;} 
.login_wrap .search{display:flex; padding:0 13px; justify-content: space-between; margin:15px 0 35px 0}
.login_wrap .search li button{color:#001C48; font-size:16px; font-weight: 500; background: none;}
.login_wrap .search li button:hover{color:#0077B6;}
.login_wrap .btn_login{color:#fff; font-size:25px; font-weight: 500; background: #14366D; display:block; width:93%; line-height: 50px; border-radius: 14px; margin:0 auto}
.login_wrap .btn_login:hover{background: #0077B6;}
.login_wrap .foot_img{position:absolute; bottom:120px; left:50%; transform: translateX(-50%);}
.login_wrap .copyright{position:absolute; bottom:78px; text-align: center; font-size:16px; font-weight: 500; color:#fff; width:100%}

/*join*/
.join_search_wrap{background: #FCFCFC; }
.join_search_wrap .top{height:45px; position:relative; border-bottom:1px solid #BFC1C8; margin:0 18px}
.join_search_wrap .top .tit{display:inline-block; font-size:28px; font-weight: 600; color:#364762; margin:7px 0 0 7px}
.join_search_wrap .top .close{position:absolute; right:-7px; top:6px; padding:0} 
.join_search_wrap .top .close svg{width:36px; height:36px}
.join_search_wrap .cont{padding:25px 35px 0 35px; box-sizing: border-box;}
.join_search_wrap .cont .user_register{width:100%; padding:0}
.join_search_wrap .cont .label{width:55px; display:inline-block; color:#444; font-weight: 500;}
.join_search_wrap .cont .join_search_input{margin:0 0 8px 0; padding:0 15px 0px 17px}
.join_search_wrap .cont .join_search_input div{margin:0 0 40px 0}
.join_search_wrap .cont .join_search_input div:last-child{margin:0}
.join_search_wrap .cont .roles_group{border-top:1px solid #D3D5DB; border-bottom:1px solid #D3D5DB; background: #F7F7F7; padding:31px 15px 27px 0; margin-top:14px}
.join_search_wrap .cont .user_register .button_group{margin:76px 0 0 0; float:none; text-align: center;}

.join_search_wrap .register_table td{padding:15px 0 }
.join_search_wrap .cont .regpasswd{padding:50px 0}
.join_search_wrap .regpasswd .label{width:95px}
.join_search_wrap .regpasswd .button_group{margin:60px 0 0 0}


.join_search_wrap.join{width:840px; height:560px; box-shadow: 0px 0px 4px 4px rgba(0, 0, 0, 0.08)}
.join_search_wrap.join .label{width:84px}
.join_search_wrap.join .user_register .auth_table th{background: #FCFCFC;}
.join_search_wrap.join .user_register .auth_table td.tit{background: #FCFCFC;}
.join_search_wrap.join .user_register .button_group{margin:25px 0 0 0; padding:40px 0 0 0; border-top:1px solid #ccc}
.join_search_wrap.join .user_register .button_group button{margin:0 5px}
.join_search_wrap.idpw{width:600px; height:416px; box-shadow: 0px 0px 4px 4px rgba(0, 0, 0, 0.08)}
.join_search_wrap.idpw .cont{padding:45px 50px 0 50px}
.join_search_wrap.idpw .toggle button.on{font-size:23px; font-weight: 600;}

.join_search_wrap.idpw .join_search_input{border-top:1px solid #D3D5DB; border-bottom:1px solid #D3D5DB; background: #F7F7F7; padding:31px 15px 29px 33px; margin-top:14px}
.join_search_wrap.idpw .join_search_input div{margin:0 0 20px 0}
.join_search_wrap.idpw .user_register input[type="text"]{width:348px}
.join_search_wrap.idpw .user_register input[type="email"]{width:348px}
.join_search_wrap.idpw .cont .user_register .button_group{margin:30px 0 0 0}
.join_search_wrap.idpw .cont .user_register .button_group button{margin:0 5px}



.star{color:#D84444; width:10px; display:inline-block}
.nostar{width:10px; display:inline-block}

/* -------------모바일 미디어쿼리------------ */

@media all and (max-width: 600px) {
    .login_wrap .login_logo{position:static;}
    .login_wrap .login_logo img{margin:40px auto 20px auto; width:150px; height:50px;}
    .login_wrap .logotype{position:static; text-align: center; font-size:1.4rem}
    .login_wrap .logo_scdms img{width:180px }
    .login_wrap .txt{font-size:1.1em; font-weight: 500; margin:1rem 0 1rem 0; color:#001C48}
    .login_wrap .input_box{width:80%; height:400px; padding:40px 20px; top: calc(50% + 20px);}
    .login_wrap .input_box input{width:90%; height:45px; font-size:1rem; padding: 5px 15px 5px 15px;}
    .login_wrap .input_box input::placeholder { font-size:1rem} 
    .login_wrap .input_box .id svg{display:none} 
    .login_wrap .input_box .password svg{display:none} 
    .login_wrap .search{margin:0 0 25px 0; padding:0 10px}
    .login_wrap .search li button{font-size:14px}
    .login_wrap .btn_login{width:90%; font-size:22px; line-height: 45px;}
    .login_wrap .copyright{bottom:40px}
}