@CHARSET "UTF-8";
@import url('https://fonts.googleapis.com/css?family=Noto+Sans+KR:300,400,500,700');

/*** login ***/


#loginWrap{position:absolute; left:0; top:0; width:100%; height:100%; background: linear-gradient(to bottom, #32d3c8, #0fb5bf);}
#loginWrap .companyLogo{text-align:center;}
#loginWrap .login{position:absolute; left:50%; top:50%; margin: -238px 0 0 -300px; padding: 52px 136px 0; width:600px; height:476px; background:#fff; box-shadow: 11px 11px 22px -7px rgba(0, 0, 0, 0.45); border-radius: 30px; box-sizing:border-box;}
.login fieldset{border:0; padding:0; margin:0;}
.login .loginInput input[type="text"],
.login .loginInput input[type="password"]{display:block; width:100%;  height:45px; padding:0 10px 0 50px; border:1px solid #dedede;  line-height:45px; font-size:14px; font-weight:400; color:#999999; font-family: 'Noto Sans KR', sans-serif; background:#fff; box-sizing:border-box;}
.login .loginInput input[type="text"]{margin:44px 0 0; background:url("../../../resources/pandora3/images/login/img_login_user.png") no-repeat 20px 50%;}
.login .loginInput input[type="password"]{margin:7px 0 0; background:url("../../../resources/pandora3/images/login/img_login_password.png") no-repeat 20px 50%;}
.login .idSave{position:relative; margin:10px 0 0; font-size:12px; line-height:14px; color:#666;}
.login .idSave:after{content:''; display:block; clear:both;}
.login .idSave .saveId{float:left; }
.login .idSave .saveMore{float:right;}
.login .idSave .saveMore a{ font-size:12px; cursor:pointer;}
.login .idSave .saveMore .preMore{margin-right:9px; padding-right:8px; position:relative;}
.login .idSave .saveMore .preMore:after{content:''; position:absolute; right:0; top:50%; margin-top:-7px; display:inline-block; vertical-align:top; width:1px; height:14px; background:url("../../../resources/pandora3/images/login/img_login_text_line.png") no-repeat 0 50%;}
.login input[type="checkbox"]{display:none; vertical-align:top; width:0; height:0; border:0 none;}
.login label{padding-left:21px; display:inline-block; cursor:pointer; background:url("../../../resources/pandora3/images/login/img_login_checkbox.png") no-repeat 0 0;}
.login input[type="checkbox"]:checked + label{background:url("../../../resources/pandora3/images/login/img_login_checkbox_active.png") no-repeat 0 0;}
.login .idSave .type_right{position:absolute; right:0; top:0; }
.login .idSave .type_right > a{display:inline-block; vertical-align:top; font-size:12px; color:#666; font-family: Dotum, '돋움';}
.login .login_copy_right{position:absolute; left:0; bottom:-35px; width:100%; font-size:12px; font-weight:300; color:#fff; font-family:'Noto Sans KR', sans-serif; text-align:center;}

.login #login-button{width:100%; margin: 50px 0 0; line-height:60px; background:#0fb5bf; color:#fff; font-size:18px; font-family: 'Noto Sans KR', sans-serif; font-weight:700; text-align:center;}
.foot_btn button.btn_confirm{display:inline-block; vertical-align:top;padding:0 20px;font-size: 11px; height: 27px; line-height: 27px;font-weight: 400;border: 1px solid #0e91c8 !important;background: #26aae1 !important;color: #fff;}

/* 210916 디자인 수정 */
#loginWrap .login{padding: 66px 136px 0;}
.login .select{border: none;text-align: right;font-family: 'Noto Sans KR', sans-serif;font-weight: 400;padding: 0 14px 0 0;color: #333333;}
.login .select{background: #fff url(../../pandora3/images/login/img_bottom_arrow.png) no-repeat right 2px top 13px/8px auto;}
.login select:disabled, .login select[disabled]{background: #fff url(../../pandora3/images/login/img_bottom_arrow_off.png) no-repeat right 2px top 13px/8px auto !important;color: #bbbbbb;}
.login label{line-height: 30px;background: url(../../../resources/pandora3/images/login/img_login_checkbox2.png) no-repeat 0 9px/11px 11px;padding-left: 16px;font-family: 'Noto Sans KR', sans-serif;}
.login input[type="checkbox"]:checked + label{background: url(../../../resources/pandora3/images/login/img_login_checkbox_active2.png) no-repeat 0 9px/11px 11px;font-family: 'Noto Sans KR', sans-serif;}
.login .loginInput input[type="text"], .login .loginInput input[type="password"]{border-radius: 5px;}
.login .loginInput input[type="text"]{background: url(../../../resources/pandora3/images/login/img_login_user2.png) no-repeat 18px 50%/17px auto;}
.login .loginInput input[type="password"]{background: url(../../../resources/pandora3/images/login/img_login_password2.png) no-repeat 18px 50%/16px auto;}
.login #login-button{border-radius: 30px;}
/* // 210916 디자인 수정 */

/* 210916 모바일디자인 추가 */
@media screen and (max-width: 650px) {
	#loginWrap .login{width: 325px;height: 373px;margin: -186px 0 0 -162px;padding: 50px 31px 0;border-radius: 15px;box-shadow: 9px 16px 30px -11px rgb(0 0 0 / 30%);}
	#loginWrap .companyLogo img{width: 143px;}
	.login .loginInput input[type="text"]{margin: 35px 0 0;}
	.login .loginInput input[type="text"], .login .loginInput input[type="password"]{padding: 0 15px 0 48px;border-radius: 5px;}
	.login .loginInput input[type="password"]{margin: 10px 0 0;}
	.login .idSave{margin-top: 8px;}
	.login label{line-height: 32px;color: #333333;font-size: 12px;letter-spacing: -0.5px;}
	
	.login .select{font-size: 12px;letter-spacing: -0.5px;height: 32px;line-height: 32px;color: #333333;font-size: 12px;letter-spacing: -0.5px;font-family: 'Noto Sans KR', sans-serif;font-weight: 400;    background: #fff url(../../pandora3/images/login/img_bottom_arrow.png) no-repeat right 2px top 14px/8px auto;}
	.login #login-button{margin-top: 24px;line-height: 50px;border-radius: 25px;font-size: 16px;letter-spacing: -0.5px;}
	.login .login_copy_right{color: #a18872;}
}
@media screen and (max-width: 320px) {
	#loginWrap .login{width: 86%;margin: -186px 0 0 -43%;padding: 50px 20px 0;}
}
@media (max-height: 600px) and (orientation: landscape) {
	#loginWrap{height: 600px;}
	#loginWrap .login{margin: 0;transform: translate(-50%, -50%);}
}
/* // 210916 모바일디자인 추가 */

/* 210916 otp 팝업 추가 */

.pop_wrap{z-index: 100; overflow: auto; display: none; position: fixed; left: 0; top: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.5);font-family: 'Noto Sans KR', sans-serif;}
.pop_wrap.on{display: block;}
.pop_wrap .pop_in{overflow: hidden;position: absolute;top: 50%;transform: translateY(-50%);-ms-transform: translateY(-50%);-webkit-transform: translateY(-50%);-moz-transform: translateY(-50%);box-sizing: border-box;max-height: 80%;overflow-y: auto;width: 80%;max-width: 500px;left: 50%;transform: translate(-50%, -50%);box-sizing: border-box; background: #fff;}
.pop_wrap .pop_in3{background: #f6f7fb;}
.pop_wrap .pop_in .top{position: relative; padding: 0 20px; border-bottom: 1px solid #e4e6ea;background: #fff;}
.pop_wrap .pop_in .top .title{height: 54px; line-height: 54px; font-size: 16px; color: #1a1a1a; letter-spacing: -0.5px; font-weight:bold;}
.pop_wrap .pop_in .top .btn_close{position: absolute; right: 20px; top: 20px;}
.pop_wrap .pop_in .top .btn_close img{width: 11px;}
.pop_wrap .pop_in .content_area{margin-top: 0;padding-bottom: 30px;margin-bottom: 10px; padding: 0 20px; box-sizing: border-box; background: #fff;}
.pop_wrap .pop_in .content_area .title_area{padding: 28px 0 18px;}
.pop_wrap .content_area .sub_txt{margin-top: 10px;color: #999999;font-size: 12px;font-weight: 400;letter-spacing: -0.5px;line-height: 17px;}

#userOTP .phone_area3{font-size: 0;}
#userOTP .phone_area3 input{margin-right: 10px;width: calc(100% - 123px);display: inline-block; vertical-align: top; padding: 0 21px; height: 50px; line-height: 48px;-webkit-border-radius: 5px; border-radius: 5px; -webkit-box-sizing: border-box; box-sizing: border-box; font-size:18px; font-weight: 400; color: #1a1a1a; letter-spacing: -0.5px; border: 1px solid #e6e6e6;background: #fff;transition: border .2s;font-family: 'Noto Sans KR', sans-serif;}
#userOTP .phone_area3 button{display: inline-block;width: 113px;box-sizing: border-box;height: 50px;line-height: 50px;font-size: 16px;font-weight: 500;letter-spacing: -0.5px;color: #fff;background: #a1a1a1;border-radius: 5px;font-family: 'Noto Sans KR', sans-serif;}
#userOTP .phone_area3 button.on{background: #47645f;}
#userOTP .type_otp.off{pointer-events: none;}
#userOTP .type_otp.off input{background: #f6f7fb;pointer-events: none;font-family: 'Noto Sans KR', sans-serif;}
#userOTP .type_otp.off .sub_txt{opacity: 0;}
#userOTP .otp_area{font-size: 0;}
#userOTP .otp_area input{margin-right: 10px;width: calc(100% - 123px);display: inline-block; vertical-align: top; padding: 0 21px; height: 50px; line-height: 48px;-webkit-border-radius: 5px; border-radius: 5px; -webkit-box-sizing: border-box; box-sizing: border-box; font-size:18px; font-weight: 400; color: #1a1a1a; letter-spacing: -0.5px; border: 1px solid #e6e6e6;background: #fff;transition: border .2s;font-family: 'Noto Sans KR', sans-serif;}
#userOTP .otp_area button{width: 113px;box-sizing: border-box;height: 50px;line-height: 50px;font-size: 16px;font-weight: 500;letter-spacing: -0.5px;color: #fff;background: #a1a1a1;border-radius: 5px;display: inline-block; font-family: 'Noto Sans KR', sans-serif;}
#userOTP .otp_area button.on{background: #47645f;}
#userOTP .type_otp .sub_txt .red{color: #e43434;}

@media screen and (max-width: 320px) {
	.pop_wrap .pop_in{}
    #userOTP .phone_area3 input, #userOTP .otp_area input{width: calc(100% - 95px);margin-right: 5px;}
    #userOTP .phone_area3 button, #userOTP .otp_area button{width: 90px;font-size: 14px;}
}
/* // 210916 otp 팝업 추가 */

/* alertCSS 추가*/
.pop_wrap#commonPopup, .pop_wrap#commonPopup2{z-index: 101;}
.pop_wrap .pop_in .txt_area{padding: 28px 20px; }
.pop_wrap .pop_in .txt_area p{font-size: 16px;text-align: center;font-weight: 400;letter-spacing: -0.5px;line-height: 20px;margin-bottom: 10px;word-break: keep-all;}
.pop_wrap .pop_in .txt_area span{display: block;text-align: center;font-size: 13px;font-weight: 300;color: #999999;line-height: 18px;word-break: keep-all;}
.pop_wrap .pop_in .txt_area pre{font-family:'Noto Sans KR', 'Malgun Gothic','맑은 고딕', dotum,'돋움', sans-serif; text-align: center; font-size: 14px; line-height: 14px; font-weight: 300; letter-spacing: -0.25px; color: #2b2b2b; -webkit-text-size-adjust: 100%;}
.pop_wrap .pop_in .btn_area{padding: 0 65px 20px;text-align: center;background: #fff;}
.pop_wrap .pop_in .btn_area button, .pop_wrap .pop_in .btn_area a{height: 50px;line-height: 50px; color: #fff;}
.pop_wrap .pop_in .btn_area.type_2, .pop_wrap .pop_in .btn_area.type_3{padding: 0 20px 20px;}

.btn_area{padding: 30px 20px 55px; box-sizing: border-box;font-size: 0;}
.btn_area button,
.btn_area a{display: inline-block; vertical-align: top; width: 100%; height: 55px; line-height: 55px; font-size: 16px; font-weight: 500; color: #fff; text-align: center; background: #47645f; -webkit-border-radius: 20px; border-radius: 25px;margin-bottom: 15px;}
.btn_area button:last-child, .btn_area a:last-child{margin-bottom: 0;}
.btn_area button.off,
.btn_area a.off{background: #a1a1a1;}

.btn_area.off {display: none;} /* 동적 버튼 타입 */
/* .btn_area.type_2.off {display: none;}  */
.btn_area.type_2 a, .btn_area.type2 button, .btn_area.type_2 button, .btn_area.type_3 button {width: 49%;margin-right: 2%;margin-bottom: 0;}
.btn_area.type_2 a:nth-child(2n), .btn_area.type2 button:nth-child(2n), .btn_area.type_2 button:nth-child(2n), .btn_area.type_3 button:nth-child(2n){margin-right: 0;}
/* .btn_area.disabled a, .btn_area.disabled button{opacity: 0.5;pointer-events: none;} */