/**
------------------------------------------------------------
 * @프로그램명 :login_big 스타일시트
 * @파일명 :login_big.css
 * @작성일 :2023. 11. 06.
 * @작성자 :엄윤섭
------------------------------------------------------------
*/

/*===========================================================================================================================
													공통사항
=============================================================================================================================*/

@font-face {
    font-family:'KoPubWorldDotum'; 
    font-weight:300; 
    font-style:normal; 
    src:url('../font/KoPubWorldDotum/KoPubWorldDotumLight.eot'); 
    src:url('../font/KoPubWorldDotum/KoPubWorldDotumLight.eot?#iefix') format('embedded-opentype'),
        url('../font/KoPubWorldDotum/KoPubWorldDotumLight.woff2') format('woff2'),
        url('../font/KoPubWorldDotum/KoPubWorldDotumLight.woff') format('woff'),
        url('../font/KoPubWorldDotum/KoPubWorldDotumLight.ttf') format("truetype"); 
    font-display:swap; 
}
@font-face {
    font-family:'KoPubWorldDotum'; 
    font-weight:500; 
    font-style:normal; 
    src:url('../font/KoPubWorldDotum/KoPubWorldDotumMedium.eot'); 
    src:url('../font/KoPubWorldDotum/KoPubWorldDotumMedium.eot?#iefix') format('embedded-opentype'),
        url('../font/KoPubWorldDotum/KoPubWorldDotumMedium.woff2') format('woff2'),
        url('../font/KoPubWorldDotum/KoPubWorldDotumMedium.woff') format('woff'),
        url('../font/KoPubWorldDotum/KoPubWorldDotumMedium.ttf') format("truetype"); 
    font-display:swap; 
}
@font-face {
    font-family:'KoPubWorldDotum'; 
    font-weight:700; 
    font-style:normal; 
    src:url('../font/KoPubWorldDotum/KoPubWorldDotumBold.eot'); 
    src:url('../font/KoPubWorldDotum/KoPubWorldDotumBold.eot?#iefix') format('embedded-opentype'),
        url('../font/KoPubWorldDotum/KoPubWorldDotumBold.woff2') format('woff2'),
        url('../font/KoPubWorldDotum/KoPubWorldDotumBold.woff') format('woff'),
        url('../font/KoPubWorldDotum/KoPubWorldDotumBold.ttf') format("truetype"); 
    font-display:swap; 
}

/* ********** Chrome Scroll Style ********** */
::-webkit-scrollbar {width:8px; height:8px;} /* width */
::-webkit-scrollbar-track {background:rgba(255,255,255,0.7);} /* Track */
::-webkit-scrollbar-thumb {background:rgba(0,0,0,0.15); border-radius:4px;} /* Handle */
::-webkit-scrollbar-thumb:hover {background:rgba(0,0,0,0.3);} /* Handle on hover */

*, *:before, *:after {box-sizing:border-box}
body {font-family:"KoPubWorldDotum", "맑은고딕", "Malgun Gothic", 'Apple SD Gothic Neo', "돋움", dotum, Arial, sans-serif; color:#000; font-size:14px; font-weight:500; line-height:1.4271; background:#fff;
	overflow-x:auto; overflow-y:hidden;}
html, body {width:100%; height:100%;}

/* input checkbox */
.m_check {display:inline-flex; align-items:center; height:20px; margin:0; font-size:15px;}
.m_check > input[type=checkbox] {width:0; height:0; min-height:0; margin:0; position:absolute;}
.m_check > input[type=checkbox] + label {display:inline-flex; align-items:center; height:18px; padding-left:25px; margin:0; position:relative; font-weight:normal; word-break:break-word; cursor:pointer;}
.m_check > input[type=checkbox] + label:before,
.m_check > input[type=checkbox] + label:after {display:block; content:''; clear:both;}
.m_check > input[type=checkbox] + label:before {display:block; width:16px; height:16px; position:absolute; left:0; border:1px solid #e1e3e7; border-radius:0; background-color:#fff; z-index:0; overflow:hidden;}
.m_check > input[type=checkbox] + label:after {content:"\eed6"; width:0; height:0; position:absolute; left:0; color:#fff; font-family:"IcoFont"; font-size:0; text-align:center; transition:all 0.1s ease; overflow:hidden;}
.m_check > input[type=checkbox]:checked + label:before {border:1px solid #1dbae1; background-color:#1dbae1;}
.m_check > input[type=checkbox]:checked + label:after {width:16px; height:16px; line-height:16px; font-size:16px;}

.m_check > input[type=checkbox][disabled] + label,
.m_check > input[type=checkbox][readonly] + label {color:#a3a3a3;}
.m_check > input[type=checkbox][disabled] + label:before,
.m_check > input[type=checkbox][readonly] + label:before {background-color:#e9edf1;}
.m_check > input[type=checkbox][disabled] + label:after,
.m_check > input[type=checkbox][readonly] + label:after {color:#e9edf1;}
.m_check > input[type=checkbox][disabled]:checked + label:before,
.m_check > input[type=checkbox][readonly]:checked + label:before {border:1px solid #d6d6d6; background-color:#e9edf1;}
.m_check > input[type=checkbox][disabled]:checked + label:after,
.m_check > input[type=checkbox][readonly]:checked + label:after {color:#c8cacc;}

/*===========================================================================================================================
													smartBIG 로그인
=============================================================================================================================*/
/* body {width:100%; height:100%; background:#88b3dc url(../images/login/login_bg.png) no-repeat center bottom; background-size:auto 437px; overflow:auto;} */

body {width:100%; height:100%; background:#fff url(../images/login/bg_wave.png) no-repeat center bottom; background-size:contain;}
body:after {content:""; width:100%; height:100%; position:absolute; left:0; top:0; opacity:0.5;
background:linear-gradient(180deg,  rgba(0,45,109,0.3) 0%,rgba(67,120,175,0.3) 52%,rgba(125,185,232,0.3) 97%);}
.big_login_area {width:100%; margin:0 auto; height:auto; position:absolute; padding:0; z-index:100; top:125px; left:50%; transform:translate(-50%,0);}
h1 {display:block; position:fixed; left:70px; top:50px; z-index:10;}

.big_login_area .login_top_txt {display:inline-block; margin:0 auto; width:auto; text-align:right; position:relative; left:50%; transform:translate(-50%,0);}
.big_login_area .login_top_txt h3 {color:#fff; font-size:22px; margin:0 0 30px; font-weight:300; display:block; width:auto;}
.big_login_area .login_top_txt h2 {padding:0; color:#fff; font-size:40px; margin:0 auto; display:block; width:auto;}

.big_login_area .login_top_txt h2 img {width:auto; max-height:200px; display:inline-block;}
.big_login_area .login_top_txt h2 svg {width:auto; max-height:200px; display:inline-block;}
.big_login_area .login_top_txt h2 line, .big_login_area h2 path {stroke-width:16px; stroke-linecap:round; stroke-linejoin:round; fill:none;}

.color-1 {stroke:#51c8e6; stroke-width:6px;}
.color-3 {stroke:#003f98; /* transform:translate3d(2px, 2px, 0); */ stroke-width:6px;}
.color-2 {stroke:#F2F2F2; /* transform:translate3d(2px, 2px, 0); */ stroke-width:6px; z-index:9999;}

/* Main SVG */
.letters {position:relative; stroke-miterlimit:3; fill:none; top:0px; display:block; height:200px; margin:0 auto;}
.letter {max-height:200px;}

/* Letter path */
.letter__layer {fill:none;}




.big_login_area .big_login {background:transparent; padding:0; max-width:475px; margin:70px auto 120px; position:relative; left:-20px; /* border:1px solid #fff; */}

.big_login ul {padding:0; margin:0;}
.big_login ul li {position:relative; list-style:none; padding:0 0 20px; margin:0; overflow:hidden;}
.big_login ul li label {display:block; float:left; background:none; z-index:2; padding:0 5px; font-size:18px; color:#fff; font-weight:500; letter-spacing:3px; line-height:40px; width:75px;	
	text-align:right; padding-right:20px;}
.big_login ul li input {position:relative; margin-top:0px; width:calc(100% - 75px); max-width:400px; height:40px; border:1px solid #fff; border-radius:5px; transition:0.2s; padding:0 10px; background:#3f77be; color:#fff !important; 
	float:left; display:block; font-size:16px !important;}
.big_login ul li input:focus {border-color:#28a2ff; outline:none;}
.big_login ul li input + button.btn_toggle_pwd {position:absolute; right:0; top:0; width:40px; height:40px; background:url(../images/login/icon_eye_on.png) no-repeat center center; border:none; outline:none; cursor:pointer;}
.big_login ul li input[type=text] {padding-right:40px;}
.big_login ul li input[type=password] + button.btn_toggle_pwd {background:url(../images/login/icon_eye_off.png) no-repeat center center;}
.big_login ul li input::placeholder {font-size:16px;}
/* 자동완성 수정 */
.big_login ul li input:-webkit-autofill,
.big_login ul li input:-webkit-autofill:hover,
.big_login ul li input:-webkit-autofill:focus,
.big_login ul li input:-webkit-autofill:active {
    transition:background-color 5000s ease-in-out 0s;
    -webkit-transition:background-color 9999s ease-out;
    -webkit-box-shadow:0 0 0px 1000px #3f77be inset !important;
    -webkit-text-fill-color:#fff !important;
    font-size:inherit;}
.big_login ul li input:-internal-autofill-previewed {font-size:16px !important;}

.big_login .border-checkbox-section {margin-left:75px;}
.big_login .border-checkbox-section label {color:#fff;}

.big_login .m_check {margin-left:75px;}
.big_login .m_check label {color:#fff;}

.big_login .m_check > input[type=checkbox] + label:before {background:transparent;}
.big_login .m_check > input[type=checkbox]:checked + label:before {border-color:#fff;}

.big_login button.login_btn {width:100px; height:100px; border-radius:50px; background:#0d5ac7; color:#fff; font-size:40px; line-height:1; font-weight:700; text-align:center;
	position:absolute; top:-6px; right:-200px; border:none; outline:none; box-shadow:0 15px 20px rgba(24,27,70,0.2); transition:0.3s; font-style:italic;}
.big_login button.login_btn span {position:relative; top:-4px;}
.big_login button.login_btn:hover,
.big_login button.login_btn:focus {background:#54b9ff; color:#fff;}
.big_login button.login_btn:before {content:""; display:block; width:76px; height:11px; background:url(../images/login/icon_login_arrow.png) no-repeat left top;
	position:absolute; left:-57px; top:44px;}
.big_login button.login_btn:hover:before {background:url(../images/login/icon_login_arrow_white.png) no-repeat left top;}

.login_info {background:#4079be; padding:10px 30px; display:inline-block; width:100%; position:fixed; left:0; bottom:0; z-index:20; text-align:center;}
.login_info p {font-size:12px; color:#fff; font-weight:300; line-height:20px; display:inline-block; margin:0 30px 0 0;}
.login_info p:last-child {margin-right:0;}
.login_info p img {margin-right:10px; vertical-align:middle; opacity:0.5; height:15px; width:auto; margin-top:-3px;}



@media (max-width:900px) {
	.big_login_area {}
	
	.big_login_area h2 svg {width:100%; height:auto; max-width:518px;}
	
	.big_login button.login_btn {top:160px; right:50%; margin-right:-88px;}
}







/* ************************* 멤버 팝업 ***************************** */
.form_member {display:block; width:700px; padding:55px 75px 45px; border-radius:10px; z-index:1; cursor:auto; box-sizing:border-box; background:#fff; margin:0 auto; box-shadow:10px 5px 70px rgba(0,0,0,0.05);}
.form_member h2 {padding:0 0 20px; margin:0; font-size:26px; color:#333333; font-weight:700; letter-spacing:-1px; line-height:36px; text-align:left;}
.form_member .member_form {display:flex; flex-direction:column; padding:0; margin:0;}
.form_member .member_form > li {padding:5px 0; margin:0; list-style:none; position:relative;}
.form_member .member_form label {padding:0 5px; position:absolute; top:15px; left:15px; color:#1fa0dc; font-size:14px; font-weight:100; border-radius:5px; background-color:transparent; opacity:0; transition:all ease 0.2s;}
.form_member .member_form input {width:100%; height:40px; padding:0 10px 0 10px; position:relative; border-radius:5px; border:1px solid #d6d6d6; background-color:#fff !important; outline:0; 
	box-shadow:2px 3px 10px -4px inset rgba(0,0,0,0.2); transition:0.2s; box-sizing:border-box;}
.form_member .member_form > li:after {content:""; display:block; width:30px; height:40px; position:absolute; right:0; top:5px; font-family:"Icofont"; line-height:40px; text-align:center; font-size:18px;}

/* 인풋 스타일 */
.form_member .member_form input::placeholder {color:#c1c1c1;}
.form_member .member_form input + button,
.form_member .member_form input + label + button,
.form_member .member_form input + label + i,
.form_member .member_form input + label + span.icon_check {display:inline-block; padding:0 10px; line-height:40px; position:absolute; top:5px; right:0; border:0; font-size:12px; background-color:inherit;}
.form_member .member_form input + label + i {padding:0 6px; color:#999; display:none;}

.form_member .member_form input + button:hover,
.form_member .member_form input + label + button:hover {text-decoration:underline;}

.form_member .member_form input + label + i {display:none; font-size:18px;}
.form_member .member_form input:focus + label + i {display:inline-block;}

.form_member .member_form input:focus {border-color:#4eb0f5;}
.form_member .member_form input:focus + label {top:0; left:10px; font-size:10px; color:#1fa0dc; background-color:#fff; opacity:1;}
.form_member .member_form input.input_error {border-color:#ff2b2b;}
/* input placeholder focus 크로스브라우징 */
.form_member .member_form input:focus::placeholder{color:transparent;}
.form_member .member_form input:focus::-ms-input-placeholder{color:transparent;}

.form_member .member_form .msg_info {display:block; padding:5px 5px 0 5px; color:#7b7e85; font-size:14px; font-weight:300;}
.form_member .member_form .msg_error {display:none; padding:5px 5px 0 5px; color:#ff2b2b; font-size:14px; font-weight:300;}
.form_member .member_form input.input_error + label + .msg_error,
.form_member .member_form input.input_error + label + i,
.form_member .member_form input.input_error + label + i + .msg_error,
.form_member .member_form input.input_error + label + span.icon_check,
.form_member .member_form input.input_error + label + span.icon_check + .msg_error,
.form_member .member_form input.input_error + label + button + .msg_error,
.form_member .member_form input.input_error + label + button + .msg_error,
.form_member .member_form input.input_error + label + button + .time + .msg_error,
.form_member .member_form input.input_error + label + span.time_count,
.form_member .member_form input.input_error + label + span.time_count + button.reset_resend,
.form_member .member_form input.input_error + label + span.time_count + button.reset_resend + .msg_error,
.form_member .member_form input.input_sended + label + span.time_count,
.form_member .member_form input.input_sended + label + span.time_count + button.reset_resend,
.form_member .member_form input.input_sended + label + span.time_count + button.reset_resend + .msg_total_time,
.form_member .member_form input.input_sended + label + span.time_count + button.reset_resend + .msg_error + .msg_total_time
{display:block;}
.form_member .member_form input.input_error + label + i {color:#ff2b2b; display:block;}

.form_member .member_form > li.login_password input,
.form_member .member_form > li.join_id input {padding-right:30px;}

.form_member .member_form .btn_checking:before {display:none;}
.form_member .member_form input.input_ok + .btn_checking,
.form_member .member_form input.input_ok + label + .btn_checking {padding:0; font-size:0;}
.form_member .member_form input.input_ok + .btn_checking:before,
.form_member .member_form input.input_ok + label + .btn_checking:before {display:inline-block; content:'\eed8'; padding:0 10px; position:absolute; top:0; right:0; color:#1fa0dc; font-size:20px; font-family:'IcoFont';}

.form_member .member_form .time {display:inline-block; padding:0 10px; line-height:40px; position:absolute; top:10px; right:65px; font-size:12px;}
.form_member .member_form input.input_error + .btn_resent + .time {color:#ff2b2b;}

.form_member p.id_info {font-size:15px; color:#007eff; margin:15px 0 5px;}
.form_member p.id_info i {margin-right:6px;}

.form_member .login_fnc {padding:0; margin:0; overflow:hidden;}
.form_member .login_fnc > li {padding:10px 0; margin:0; list-style:none; position:relative;}
.form_member .login_fnc > li.maintain_login {float:left;}
.form_member .login_fnc > li.forget_password {float:right;}
.form_member .login_fnc .forgot_pwd {color:#000; cursor:pointer; transition:0.2s; text-decoration:underline;}
.form_member .login_fnc .forgot_pwd:hover {color:#1fa0dc;}

.form_member .btn_login_area {padding:20px 0; text-align:center;}
.form_member .btn_login_area .login_btn,
.form_member .btn_login_area .join_btn,
.form_member .btn_login_area .password_btn {display:block; width:100%; max-width:360px; line-height:43px; color:#fff; font-size:18px; text-align:center; border-radius:23px; border:0; background-color:#000; 
	transition:0.2s; margin:0 auto;}
.form_member .btn_login_area .password_btn {width:150px; display:inline-block; margin:0;}
.form_member .btn_login_area .password_btn:hover {background-color:#1fa0dc;}
.form_member .btn_login_area .default_btn {width:150px; display:inline-block; width:150px; line-height:43px; color:#1fa0dc; font-size:18px; text-align:center; border-radius:23px; border:0; background:#fff; 
	transition:0.2s; margin:0 10px 0 0; border:1px solid #1fa0dc; transition:0.2s;}
.form_member .btn_login_area .default_btn:hover {background:#1fa0dc; color:#fff;}
.form_member .btn_login_area .login_btn:hover {background-color:#1fa0dc;}
.form_member .btn_login_area .login_btn:disabled,
.form_member .btn_login_area .join_btn:disabled {color:#aaadb0; background-color:#edeff1;}
.form_member .member_join {padding:5px 0; color:#7b7e85; text-align:center;}
.form_member .member_join #div_memberJoin, .form_member .member_join #go_login {margin-left:2px; border-bottom:1px solid transparent; color:#28a2ff; cursor:pointer; transition:0.2s;}
.form_member .member_join #div_memberJoin:hover, .form_member .member_join #go_login:hover {border-bottom:1px solid #1fa0dc; color:#1fa0dc; text-decoration:none;}
.form_member .member_join #next_time {color:#000; text-decoration:underline;}
.form_member .member_join p {margin:0;}
.form_member .member_join p.blocking_connection {color:#f5311d;}
.form_member .member_join p.blocking_connection button.btn_blocked {width:110px; display:block; margin:5px auto 0;}
.form_member .member_join p a {border-bottom:1px solid transparent; color:#28a2ff; cursor:pointer; transition:0.2s;}
.form_member .member_join p a:hover {border-bottom:1px solid #1fa0dc; color:#1fa0dc; text-decoration:none;}
.form_member .login_lock {padding:5px 0; text-align:center; color:#ff2b2b;}
.form_member .login_lock #unblock_request {display:inline-block; position:relative; font-size:13px;}
.form_member .login_lock #unblock_request:after {display:inline-block; content:'\eaa0'; margin-left:5px; font-family:'IcoFont';}



/* 사용자 확인 */
#formUserCheck.form_member {width:100%; max-width:700px;}
#formUserCheck .user_check_title {}
#formUserCheck .user_check_title p {font-size:16px; color:#797979; margin:0 0 40px;}

#formUserCheck li.user_check_id input#userCheckId {padding-right:100px;}
#formUserCheck li.user_check_id .btn_certified {font-size:12px; color:#fff; background:#000; transition:0.2s; outline:none; border:none; width:70px; height:20px; text-align:center;
	line-height:20px; border-radius:10px; top:15px; right:15px;}
#formUserCheck li.user_check_id .btn_certified:hover {background:#1fa0dc; text-decoration:none;}

#formUserCheck li.user_check_num input#userCheckNum {}
	li.user_check_num span.time_count {position:absolute; right:70px; top:15px; color:#000; font-size:14px; display:none;}
	li.user_check_num span.time_count strong {color:#ff0000; font-weight:400; display:inline-block; margin-right:5px;}
	li.user_check_num button.reset_resend {position:absolute; right:15px; top:15px; padding:0; border:none; outline:none; margin:0; background:none; display:none;
		border-bottom:1px solid #000; padding-bottom:1px; transition:0.2s;}
	li.user_check_num button.reset_resend:hover {color:#1fa0dc; border-bottom:1px solid #1fa0dc;}
	li.user_check_num .msg_error {display:none;}
	li.user_check_num .msg_total_time {display:none; color:#606060; font-size:12px; padding:5px 5px 0 5px}

#formUserCheck .reset_info_txt {text-align:center; margin-top:50px;}

/* 비밀번호 재설정 */
#passwordReset.form_member {width:700px;}
#passwordReset.form_member ul.member_form {margin:20px 0 30px;}
#passwordReset.form_member .msg_password {padding:5px 5px 0 5px; color:#606060; font-size:12px;}

/* 비밀번호 변경 */
#passwordSetting.form_member {width:700px;}
#passwordSetting .user_check_title p {font-size:16px; color:#797979; margin:0 0 40px;}
#passwordSetting.form_member .msg_password {padding:5px 5px 0 5px; color:#606060; font-size:12px;}

#passwordSetting .btn_login_area {margin-top:25px;}



@media (max-width:500px) {
	h1 {left:30px;}
	.form_member {padding:35px 20px 25px;}
}


/* ************************* 테마 ************************* */
/* body.theme_white {background:#fff url(../images/login/login_bg.png) no-repeat center bottom;} */
body.theme_white {background:#fff url(../images/login/bg_wave.png) no-repeat center bottom; background-size:contain;}
body.theme_white:after {background:#fff; opacity:0.5; opacity:0;}

body.theme_white .big_login_area h3 {color:#000;}

body.theme_white .color-2 {stroke:#333;}

body.theme_white .big_login ul li label {color:#000;}

body.theme_white .big_login ul li input {border:1px solid #d9d9d9; background:#fff; color:#000 !important;}
body.theme_white .big_login ul li input:-webkit-autofill,
body.theme_white .big_login ul li input:-webkit-autofill:hover,
body.theme_white .big_login ul li input:-webkit-autofill:focus,
body.theme_white .big_login ul li input:-webkit-autofill:active {
    -webkit-box-shadow:0 0 0px 1000px #fff inset !important;
    -webkit-text-fill-color:#000 !important;}
body.theme_white .big_login ul li input + button.btn_toggle_pwd {background:url(../images/login/icon_eye_on_black.png) no-repeat center center;}
body.theme_white .big_login ul li input[type=password] + button.btn_toggle_pwd {background:url(../images/login/icon_eye_off_black.png) no-repeat center center;}

body.theme_white .big_login .m_check label {color:#000;}

body.theme_white .big_login .m_check > input[type=checkbox] + label:before {background:#fff; border:1px solid #e1e3e7;}
body.theme_white .big_login .m_check > input[type=checkbox]:checked + label:before {border-color:#0d5ac7; background-color:#0d5ac7;}

body.theme_white .big_login button.login_btn:hover:before {background:url(../images/login/icon_login_arrow.png) no-repeat left top;}