/**
	login skin css
*/
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300&display=swap');
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css");
@font-face {
	font-family: 'Interop';
	src: url('https://raw.githubusercontent.com/payw-org/Interop/main/web/fonts/Interop-Regular.woff2')
		format('woff2'),
	  url('https://raw.githubusercontent.com/payw-org/Interop/main/web/fonts/Interop-Regular.woff')
		format('woff');
	font-weight: normal;
	font-style: normal;
	font-display: block;
  }

  
/* ========================================================
	ppAlert 스타일
======================================================== */
.popup{display: none; position: fixed; left: 0; top: 0; z-index:1000; width: 100%; height: 100%;}
.popup .pop_wrap{display: flex; width:1200px; height: 100%; margin:0 auto; justify-content: center; align-items: center;}
.popup .size{width: 100%; max-width: 905px; margin: 0 auto;}
.popup .pop_inner{width:100%; background-color: #fff; padding: 50px 40px 50px; box-sizing: border-box; position: relative; box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);}
.popup .pop_cont{margin-top: 20px;}
.popup .btnSet{margin-top: 40px;}
.small_modal{display: block;}
.small_modal .size{max-width: 480px;}
.small_modal .pop_inner{padding: 35px;}
.small_modal .pop_cont{margin-top: 0; text-align: center;}
.small_modal .txt_box p{font-size: 1.9rem; text-align: center; font-weight:500; font-family:Pretendard, -apple-system, BlinkMacSystemFont, system-ui, 'Noto Sans KR', sans-serif;}
.small_modal .btnSet{margin-top: 30px;}
.btn.gr{background-color: #444949;}
.btn.gr{background-color: #444949;}
.btnSet .btn{margin-left: 5px; font-size:1.4rem; padding:0 10px; box-sizing: border-box; height:40px; line-height:40px; min-width:120px; color:#fff; text-align:center; font-weight:700; text-decoration:none; white-space:nowrap; display:inline-block; vertical-align:baseline; cursor:pointer; text-align:center; border-radius: 5px; outline: none; border: none;}
.btnSet .btn:first-child{margin-left: 0;}




/* ========================================================
	공통 스타일
======================================================== */
.mb5{margin-bottom:5px;}
input[readonly], input[readonly="readonly"], input:read-only {background:#fafafa;}
.access input[type="text"]:focus, .access input[type="password"]:focus {outline-width:2px; outline-color:#88bfff; border:2px solid #88bfff !important;}
.access input[type="text"], .access input[type="password"] {outline-width:2px; outline-color:#88bfff; font-weight:500; color:#111111;}
.access input[type="text"]::placeholder, .access input[type="password"]::placeholder, .acess .nice-select {font-family: 'Interop';}
.access #mem_zipcode:focus, .access #mem_address1:focus {border:1px solid #ccc !important;}
.access #mem_zipcode, .access #mem_address1 {border:1px solid #ccc; outline:none; background-color:#f3f1f1;;}


#main{padding:0; display:flex; align-items:center; max-width:none; width:100%;  min-width:1400px; height:calc(100% - 220px); min-height:calc(100vh - 220px); background-image:url('/assets/images/login_bg.jpg'); background-size:cover; background-position:center; background-repeat:no-repeat; box-sizing:border-box;}
#main > .container{min-height:auto !important; padding:0 20px; width:100%; box-sizing:border-box; }
.access{height:100%; display:flex; flex-direction:column; align-items:center;}
.access .title-box .logo_img{font-size:0; text-align:center;}
.access .title-box .sub_tit{margin-top:10px;}
.access .table-box{max-width:700px; margin-top:35px; padding:77px 120px; box-sizing:border-box; position:relative; border-radius:60px; box-shadow:0px 4px 40px 0px rgba(0, 0, 0, 0.25); backdrop-filter:blur(9px); font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif; background-color:rgba(255, 255, 255, 0.05);}
.access .table-box .tit-area h3 {font-size:3rem; color:rgba(255, 255, 255, 1); font-weight:700; line-height:3.9rem; letter-spacing:-0.05rem;}
.access .table-box .tit-area p {font-size:1.6rem; color:rgba(255, 255, 255, 1); font-weight:400; line-height:2.08rem; letter-spacing:-0.05rem; margin-top:2px;}
.access .loginform {margin-top:33px;}
.access .loginform > li{margin-top:10px;}
.access .loginform > li:first-child{margin-top:0;}
.access .loginform input[type="text"], .access .loginform input[type="password"] {min-width:460px; height:50px; padding:5px 5px 5px 40px; letter-spacing:-0.05rem;}
/* .access .loginform input[type="text"], .access .loginform input[type="password"]:focus {border-color:unset !important;} */
.access .loginform input[type="text"]::placeholder, .access .loginform input[type="password"]::placeholder {font-family: 'Interop'; color:rgba(153, 153, 153, 1); font-weight:500; font-size:1.6rem; line-height:20.8rem; letter-spacing:-0.05rem;}
.access .loginform li .bsc_ipt{position:relative;}
.access .loginform li .bsc_ipt:before {width:24px; height:24px; position:absolute; content:''; display:block; clear:both; background-position:center; background-repeat:no-repeat; background-size:24px 24px; left:10px; top:50%; margin-top:-12px;}
.access .loginform li .id:before {background-image:url('/assets/images/login_id.svg');}
.access .loginform li .pw:before {background-image:url('/assets/images/login_pw.svg');}
.access .auto_login{margin-top:15px;}
.access .login_util{margin:30px 0;}
.access .login_util > a{display:block; font-size:1.6rem; color:rgba(255, 255, 255, 1); line-height:2.08rem; letter-spacing:-0.05rem;}
.access .login_util.left > a {color:rgba(90, 210, 210, 1); font-weight:700;}
.access .login_util.right > a { color:rgba(255, 255, 255, 1); font-weight:500;}
.access .login_util.right > a {position:relative; padding: 0 10px;}
.access .login_util.right > a:before{display:block; content:''; clear:both; width:1px; height:15px; background:rgba(255, 255, 255, 0.3); position:absolute; top:50%; margin-top:-7.5px; right:100%; z-index:5;}
.access .login_util > a:first-child:before{display:none;}
.access .member_login .login_submit .smBtn {min-width:460px; height:60px; background-color:rgba(12, 24, 48, 1); border:1px solid rgba(255, 255, 255, 0.1); border-radius:5px; padding:10px; box-sizing:border-box; color:#fff; font-family: 'Interop'; letter-spacing:0.8rem; font-weight:700; font-size:1.6rem; line-height:2.08rem; transition:.3s;}
.access .member_login .login_submit .smBtn:hover {background-color:rgba(90, 210, 210, 1); box-shadow:2px 2px 10px 0px rgba(90, 210, 210, 0.5); color:rgba(12, 24, 48, 1);}


/* ========================================================
	아이디 찾기, 비밀번호 찾기
======================================================== */
.access.write .loginform input[type="text"], .access.write .loginform input[type="password"] {padding:5px 10px;}
.access.write .table-box {padding:35px 120px 77px 120px;}
.access.write .table-box .tap-wrap {margin-bottom:38px;}
.access.write .table-box .tap-wrap ul {display:flex; align-items:center; justify-content:center;}
.access.write .table-box .tap-wrap ul > li {width:50%;}
.access.write .table-box .tap-wrap ul > li > a {display:block; width:100%; height:50px; line-height:50px; font-size:1.4rem; font-weight:700; border-bottom:1px solid rgba(255, 255, 255, 0.1);  color:#fff; text-align:center; box-sizing:border-box;}
.access.write .table-box .tap-wrap ul > li.on > a {border-color:rgb(255, 255, 255);}
.access.write .table-box #flogin li .tel {display:flex; gap:10px;}
.access.write .table-box #flogin li .tel #mem_usertel {min-width:unset; width:calc(100% - 130px);}
.access.write .table-box #flogin li .tel a {display:block; width:120px; height:50px; line-height:50px; border-radius:5px; background-color:#666666; color:#fff; font-weight:600; font-size:1.4rem; box-sizing:border-box; text-align:center; transition:.3s;}
.access.write .table-box #flogin li .tel a:hover {background-color:#303030;}
.access.write .member_login .login_submit {margin-top:33px;}
.access.write .member_login .login_submit .smBtn {font-weight:500;}
.access .member_login .login_submit .smBtn:hover  {font-weight:700;}

/* ========================================================
	아이디 찾은 후
======================================================== */
.access.write .table-box .id-after {width:460px; height:150px; border-radius:10px; background-color:#fff; margin-top:25px; display:flex; align-items:center; justify-content:center;}
.access.write .table-box .id-after .txt-area p {font-size:1.8rem; font-weight:600; line-height:2.7rem; text-align:center; color:#333333;}
.access.write .table-box .id-after .txt-area p:first-child > span {font-weight:800; color:#002060;}
.access.write .table-box .id-after .txt-area p:last-child > span {font-weight:800;}
.access.write .table-box .member_login.id-after-btn .login_submit .smBtn {display:flex; align-items:center; justify-content:center;}

/* ========================================================
	회원가입
======================================================== */
.access.join {padding:100px 0; box-sizing:border-box;}
.access.join input[type="text"], .access.join input[type="password"] {width:100%; box-sizing:border-box; font-size:1.6rem; outline:none; font-weight:500; color:#111; background:#fff; border-radius:5px; border:1px solid #ccc}
.access.join input[type="text"] {outline-width:1px; outline-color:#88bfff;}
.access.join input[type="text"]:focus {outline-color:#88bfff; border:2px solid #88bfff;}
.access.join .table-box p {position:relative; margin-top:0;}
.access.join .table-box p > .dot {position:absolute; width:5px; height:5px; border-radius:2.5px; background-color:#5AD2D2;}
.access.join .table-box .tit-area p > .dot {left:-14px; top:50%; margin-top:-2.5px;}
.access.join .table-box .member_login .loginform {display:flex; flex-direction:column; gap:15px;}
.access.join .table-box .member_login .loginform .bsc_ipt:before {display:none;}
.access.join .table-box .member_login .loginform li p {width:fit-content; font-size:1.6rem; font-weight:600; line-height:2.08rem; color:#fff; margin-bottom:3px;}
.access.join .table-box .member_login .loginform li p > .dot {top:0; right:-10px;}
.access.join .table-box .member_login .loginform li .chk-btn {display:block; width:120px; height:50px; line-height:50px; border-radius:5px; background-color:#666666; color:#fff; font-weight:600; font-size:1.4rem; box-sizing:border-box; text-align:center; transition:.3s;}
.access.join .table-box .member_login .loginform li .chk-btn:hover {background-color:#303030;}
.access.join .table-box .member_login .loginform li .wid-calc {width:calc(100% - 130px); min-width:unset;}
.access.join .table-box .member_login .loginform li.email .sel {display:flex; justify-content:space-between;}
.access.join .table-box .member_login .loginform li .sel .nice-select {width:100%; height:50px; line-height:48px; font-size:1.6rem; font-weight:400;}
.access.join .table-box .member_login .loginform li .email-box {display:flex; gap:8px; align-items:center; margin-bottom:5px;}
.access.join .table-box .member_login .loginform li .email-box input[type="text"] {min-width:unset;}
.access.join .table-box .member_login .loginform li .email-box span {color:#fff;}
.access.join .table-box .member_login .loginform li.tax-mail .check_box input[type="checkbox"]:checked + label:before {border-color: #081634; background-color: #081634; background-image: url('/assets/images/ico_checkbox.svg');}
.access.join .table-box .member_login .loginform li.tax-mail .sel {height:50px;}
.access.join .table-box .member_login .loginform li.tax-mail .check_box label {font-size:1.5rem; font-weight:500; line-height:1.95rem; color:#fff; top:-5px;}
.access.join .table-box .member_login .loginform li.tax-mail .check_box label:before {width:24px; height:24px; margin-top:-12px; box-sizing:border-box;} 
.access.join .table-box .member_login .agree-wrap {margin-top:25px;}
.access.join .table-box .member_login .agree-wrap .agree-area > p, .access.join .table-box .member_login .agree-wrap .agree-area ul > li .ipt-box .check_box > label {width:fit-content; font-size:1.6rem; line-height:2.08rem; color:#fff;}
.access.join .table-box .member_login .agree-wrap .agree-area > p { font-weight:600; }
.access.join .table-box .member_login .agree-wrap .agree-area p > .dot {top:0; right:-10px;}
.access.join .table-box .member_login .agree-wrap .agree-area ul {margin-top:10px;}
.access.join .table-box .member_login .agree-wrap .agree-area ul > li .ipt-box .check_box > label[for="chkall"] {font-weight:600;}
.access.join .table-box .member_login .agree-wrap .agree-area ul > li .ipt-box .check_box > label {font-weight:500;}
.access.join .table-box .member_login .agree-wrap .agree-area ul > li .ipt-box .check_box > label > span {font-weight:600;}
.access.join .table-box .member_login .agree-wrap .agree-area ul > li .ipt-box .check_box > label > span:not(.require) {color:#fff}
.access.join .table-box .member_login .agree-wrap .agree-area ul > li .ipt-box .check_box > label > span.require {color:#5AD2D2}
.access.join .table-box .member_login .agree-wrap .agree-area ul > li .detail-view > a {width:78px; height:26px; box-sizing:border-box; border-radius:4px; border:1px solid rgba(255, 255, 255, 0.2); padding:6px 5px; display:flex; align-items:center; justify-content:center; font-size:1.2rem; font-weight:400; color:#fff;}

/* ========================================================
	회원가입 신청완료
======================================================== */
.access.write .afterjoin.table-box {padding:77px 120px;}
.access.write .afterjoin.table-box .txt-area {margin-top:32px;}
.access.write .afterjoin.table-box .txt-area p {font-size:1.8rem; line-height:2.7rem; font-weight:700; color:#fff;}
.access.write .afterjoin.table-box .txt-area .top-txt .fs20 {font-size:2rem;}
.access.write .afterjoin.table-box .txt-area .top-txt .fw600 {font-weight:300; color:#fff; font-size:1.8rem; line-height:2.7rem; }
.access.write .afterjoin.table-box .txt-area .btm-txt {margin-top:30px;}
.access.write .afterjoin.table-box .txt-area .btm-txt .point {color:#5ad2d2; font-weight:600;}
.access.write .afterjoin.table-box .txt-area .btm-txt .fw300 {font-weight:300; }
.access.write .afterjoin.table-box .member_login .login_submit .main {color:#5AD2D2; font-weight:700;}
.access.write .afterjoin.table-box .member_login .login_submit .main:hover {color:rgba(12, 24, 48, 1);}