/**************************************************
* 버전관리
* version : v=1
* Last Update : 
**************************************************/

/********************************************************
■ 공통 - 체크박스
********************************************************/
.chks {display:inline-block;position:relative; font-weight:normal;}
.chks input[type="checkbox"] {position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0}
.chks input[type="checkbox"] + label {display:inline-block; vertical-align:middle; line-height:1.1rem; height:1.1rem; position:relative; padding-left:1.5rem; cursor:pointer; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none;margin-bottom: 0.15rem;}
.chks input[type="checkbox"] + label:before {content:''; position:absolute; left:0px; top:0px; margin:0; width:1.1rem; height:1.1rem; text-align:center; background:#fff; border:1px solid #E6E6E6; box-sizing:border-box; transition: all 0.2s ease-out 0s;}
.chks input[type="checkbox"] + label:active:before,
.chks input[type="checkbox"]:checked + label:active:before {}
.chks input[type="checkbox"]:checked + label:before { border-color:var(--main); border-width:0.57rem;}
.chks input[type="checkbox"]:checked + label:after {content:""; display:block; position:absolute; width:.45rem; height:.25rem; left:0.3rem;top:0.25rem; border-width:0 0 2px 2px; border-style:solid; border-color:transparent transparent #fff #fff; transform:rotate(-45deg); -ms-transform:rotate(-45deg)}
.chks input[type="checkbox"]:focus + label:before {}

.chks{display:inline-block; margin-right:10px;}
.chks input[type="radio"] {position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}
.chks input[type="radio"] + label {display:inline-block;vertical-align:middle;line-height:1.1rem;position:relative;padding-left:1.5rem;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}
.chks input[type="radio"] + label:before {content:'';position:absolute;left:0px;top:0px;margin:0;width:1.1rem; height:1.1rem;text-align:center;background:#f0f0f0;border:1px solid #B8B8B8;box-sizing:border-box; border-radius:50%;}
.chks input[type="radio"] + label:active:before,
.chks input[type="radio"]:checked + label:active:before {}
.chks input[type="radio"]:checked + label:before {background:var(--main); border:1px solid var(--main);}
.chks input[type="radio"]:checked + label:after {content:""; display:block; position:absolute; width:.45rem; height:.25rem; left:0.3rem;top:0.25rem; border-width:0 0 2px 2px; border-style:solid; border-color:transparent transparent #fff #fff; transform:rotate(-45deg); -ms-transform:rotate(-45deg)}
.chks input[type="radio"]:focus + label:before {}

.radio{display:inline-block; position:relative;}
.radio input[type="radio"] {position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0;}
.radio input[type="radio"] + label {display:inline-block; position: relative; padding-left:30px; margin-left:0px; color:#555; line-height:20px; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none;}
.radio input[type="radio"] + label:before {content: ' '; position:absolute; top:0; left:0; display: inline-block; width: 25px; height: 23px; line-height: 20px; background:url("/images/default/content/radio.png") no-repeat 0 50%;}
.radio input[type="radio"].disabled + label:before {background:url("/images/default/content/radio.png") no-repeat 0 50%;}
.radio input[type="radio"]:checked + label:before{background:url("/images/default/content/radio_on.png") no-repeat 0 50%}



/* 버튼 */
.btn_wrap{display:flex; justify-content: center;  gap:0.5rem; text-align:center; margin-top:2.5rem; overflow:hidden;}
.btn_confirm {display:inline-block; width:10rem; height:3rem; line-height:3rem;  font-weight: 400;  color: #fff; border: 1px solid var(--sub); background-color: var(--sub); cursor:pointer; transition: all 0.2s ease-out 0s;}
.btn_cancel {display:inline-block;  width:10rem; height:3rem; line-height:3rem;  font-weight: 400;  color: var(--sub);  background-color: #fff; border:1px solid var(--sub); cursor:pointer; transition: all 0.2s ease-out 0s;}
.btn_confirm:hover{background-color:var(--main);}
.btn_cancel:hover{background-color: #f7f8f9;}



@media (max-width:767px){
	.btn_confirm{width:calc(50% - 0.25rem); }
	.btn_cancel{width:calc(50% - 0.25rem); }
}

/********************************************************
■ 로그인
********************************************************/
/* 로그인 */
.login_wrap{position:relative; padding:4rem 0; }
.login_wrap:before{content:""; position:absolute; left:50%; top:0px; width:100vw; height:100%; background:#f7f7f7; transform:translateX(-50%); z-index:-1; }
.login_wrap .top_box{text-align:center;}
.login_wrap .top_box h3{font-size:2.4rem; font-weight:700; color:var(--black); margin-bottom:0.5rem;}
.login_wrap .top_box h3 b{color:var(--main);}
.login_wrap .top_box p{color:#555; margin-bottom:2.5rem;}

.login_wrap .login_cont{max-width: 60rem; margin:0 auto; background:#fff; min-height:28rem; padding:1rem;}
.login_wrap .login_cont .inn{max-width: 30rem; margin:0 auto;}

.login_wrap .login_tab{background:#fff;  }
.login_wrap .login_tab ul{display:flex;}
.login_wrap .login_tab ul li{flex:1; height:3.5rem; line-height:3.5rem; text-align:center; font-size:1.05rem; color:#777; font-weight:500; cursor:pointer; border-bottom:1px solid #e0e0e0;}
.login_wrap .login_tab ul li a{display:block;}
.login_wrap .login_tab ul li.on{color:var(--black); border-bottom:3px solid var(--black);}

.login_wrap .loginArea{ padding-top:2rem;}
.login_wrap .loginArea .out_txt{color:#555; margin-bottom:1rem; text-align:center;}
.login_wrap .loginArea .out_txt b{color:var(--sub);}

.login_wrap .find_idpw{display: flex; align-items: center; justify-content: center; flex-direction: column; margin-top:2.5rem;}
.login_wrap .find_idpw .find_p{width:100%; background:#f5f5f5; padding:2rem 1rem;text-align:center; }
.login_wrap .find_idpw .find_p i{display:inline-block; font-size:4rem; color:var(--sub); margin-bottom:1.5rem;}
.login_wrap .find_idpw p{text-align:center; font-size:1rem; color:var(--black) !important; }
.login_wrap .find_idpw p strong{color:var(--sub);}

.login_wrap .loginInput dt label {  position: absolute;  top: -999em;  height: 0;  line-height: 0;  font-size: 0;}
.login_wrap .loginInput dt label { position: absolute;  top: -999em;  height: 0;  line-height: 0;  font-size: 0;}
.login_wrap .loginInput dd{position: relative;}
.login_wrap .loginInput input.i_text {position: relative; width:100%; height:3.25rem; line-height:3.25rem; padding:0 1rem; border: 1px solid #f5f5f5;    border-radius: inherit; background-clip: padding-box;  -webkit-appearance: none; box-sizing: border-box;background-color:#f5f5f5; transition: all 0.3s ease 0s;}
.login_wrap .loginInput input.i_text:focus{border-color:var(--sub); background-color:#fff;}
.login_wrap .loginInput dd.inputPw { margin-top:0.5rem;}
.login_wrap .loginInput dd.inputPw p{color:#777; font-size:0.8rem; margin-top:0.25rem;}

.login_wrap .btnLogin {display:block; width: 100%; height: 4rem; line-height:4rem; text-align:center;    border: inherit;  font-size: 1rem;color: #FFF; cursor: pointer;  transition:all 0.5s cubic-bezier(0, 0, 0.21, 0.87) 0s;margin-top:1rem; background-color: var(--main);}
.login_wrap .btnLogin:hover{ opacity: 1;  box-shadow:0.25rem 0.75rem 1rem rgba(0,0,0,0.15);}
.login_wrap .btnLogin:focus-visible{outline-color:var(--main)}

.login_wrap .lost_box{width: 100%; margin-top:1rem; text-align:right;}
.login_wrap .join{margin-top:2rem; display:flex; justify-content: center}
.login_wrap .join .join_btn{display:inline-block; margin-left:1rem; color:var(--main); font-weight:500; text-decoration:underline; text-underline-position: under;}

.login_wrap .loginFail{position: relative; clear:both; }
.login_wrap .loginFail input{ height: 1.4rem; border: 1px solid #b4b4b4;}
.login_wrap .loginFail p{margin-top:0.25rem;}
.login_wrap .error{color: #ff0000; padding-top:0.25rem;  }

@media (max-width: 767px){
	.login_wrap{padding:3rem 0;}
	.login_wrap .loginArea{}
	.login_wrap .find_idpw{min-height:auto; padding:1rem;}

	.login_wrap .top_box h3{font-size:1.5rem;}
	.login_wrap .top_box p{font-size:.9rem;}
	
	
	.login_wrap .join{justify-content: space-between}
}


/********************************************************
■ 회원가입완료
********************************************************/

.signup03{text-align:center; padding:3rem 0;}
.signup03 h3{margin-top:1rem; font-size:1.8rem; color:var(--black);}
.signup03 h3 strong{color:var(--sub);}
.signup03 p{margin-top:1rem; color:#888; font-size:1rem;}

/* 텍스트 */
.t_red{color: #dd1508;}
.mallLog{width:853px; margin:0 auto;}

/********************************************************
■ 이용약관
********************************************************/
/* 멤버 Step */
.sign_step{margin-bottom:1.5rem; text-align:center;}
.sign_step ol{display:inline-block;position:relative; z-index: 0;}
.sign_step ol:before{content: ""; position: absolute; left: 1.5rem;  top: 33%;  width: calc(100% - 3rem); height: 2px; background: #ededed; z-index: -1;}
.sign_step ol li{float:left; width:3.5rem; margin:0 1.5rem; }
.sign_step ol li .num{position:relative; width:3.5rem; height:3.5rem; line-height:3.5rem; color:#999; font-size:1rem; font-weight:600; text-align:center; background-color:#fff;border-radius:50%; margin-bottom:.5rem;}
.sign_step ol li p{color:#999; font-size:.8rem; font-weight:400;}
.sign_step ol li.on .num{font-size:0; }
.sign_step ol li.on .num:before{content: ""; position: absolute; left:50%; top:50%; font-family: 'remixicon' !important; color:#fff; font-size:1.5rem; font-weight:400; transform:translate(-50%,-50%);}
.sign_step ol li.on.step1 .num{background-color:var(--sub2);}
.sign_step ol li.on.step2 .num{background-color:var(--sub);}
.sign_step ol li.on.step3 .num{background-color:var(--main);}
.sign_step ol li.on.step1 .num:before{content: "\ecef"; }
.sign_step ol li.on.step2 .num:before{content: "\ecbb"; }
.sign_step ol li.on.step3 .num:before{content: "\ed13"; }
.sign_step ol li.on p{color:#111;}

@media (max-width:767px){
	.sign_step ol li{width:3rem; margin:0 .7rem; }
	.sign_step ol li .num{width:3rem; height:3rem; line-height:3rem;}
	.sign_step ol li.on .num:before{font-size:1.3rem;}
}

.user_agree{ padding-bottom:2rem;}
.user_agree .chks.al{padding-bottom:1rem; border-bottom:1px solid #1a1a1a; }
.user_agree .chks.al input[type="checkbox"] + label:before {border-color:#1a1a1a;}
.user_agree .chks.al input[type="checkbox"]:checked + label:before {border-color:var(--main);}
.user_agree input{vertical-align:middle;}
.user_agree dt{margin:1.5rem 0 1rem;}
.user_agree dd textarea{font-size:0.8rem; color:#848C8E; height:10rem; border-color:#e6e6e6; padding:.75rem; line-height:1.4;}
.user_agree .chks{margin-top:2rem; color:#333; font-weight:500; display:block; }
.user_agree .chks div{font-size:.75rem; font-weight:400; margin-top:.2rem; padding-left:1.5rem;}

/* 개인정보처리방침 이용약관 */
/*  1차는 h3, 2차는 h4, 3차는 txt_indent(들여쓰기)  */
.agree-conts{padding-top:4rem;}
.agree-conts h2{font-weight:600; font-size:2.4rem; color:var(--black); padding: 0 0 3rem 0; margin: 0 0 4rem 0;  border-bottom: 1px solid #e0e0e0; line-height: 1;}
.agree-conts h3{font-size:1.3rem; margin:2.5rem 0 .5rem; font-weight:700;}
.agree-conts h3 + h4{margin-top:0}
.agree-conts h4{font-size:1.1rem; margin:1rem 0 .2rem; font-weight:500; color:var(--main);}
.agree-conts h5{font-size:1rem; margin:.5rem 0 .5rem;}
.agree-conts ul li{margin-top:.5rem; padding-left:1em; text-indent:-1em }
.agree-conts ul li.list2{text-indent:0px; line-height:2;}


/*이메일무단수집거부*/

div.emailPolicy {}
div.emailPolicy li.law_tit {color:var(--black); margin-bottom:0.5rem; font-weight:bold;}
div.emailPolicy li.list2 {font-size:0.8rem; padding-left:0.5rem;margin-top:0.5rem;}
div.emailPolicy p {margin-bottom:0.5rem;}
div.emailPolicy p span.point {font-weight:bold;color:var(--main);}


@media (max-width:767px){
	.user_agree{}
}

/********************************************************
■ 회원입력
********************************************************/
.member_form{width:30rem; margin:0 auto; padding-bottom:2rem;}
.mem_tb h4{display:flex; justify-content: space-between; align-items: flex-end; border-bottom:2px solid #000; color:#191919; font-size:1.2rem; padding-bottom:.25rem; margin-top:2rem;}
.mem_tb h4 p{font-size:0.9rem; font-weight:400; }
.mem_tb h4 p b{color:var(--sub)}
.mem_tb ul{width:100%; }
.mem_tb ul li{display:flex; -webkit-align-items: stretch;　align-items: stretch}
.mem_tb ul li input{transition: all 0.2s ease-out 0s;}
.mem_tb ul li input:focus{ border-color:var(--main);}
.mem_tb ul li .th,
.mem_tb ul li .td{ border-bottom:1px solid #ddd; display:flex; padding:1rem 0.75rem;}
.mem_tb ul li .th{ text-align:center; flex-basis: 21%; align-items: center; font-weight:600;}
.mem_tb ul li .td{flex:1; flex-direction: column;}
.mem_tb ul li .arBtn{display:flex; align-items: center;gap:0.2rem;}
.mem_tb ul li .td p{margin-top:0.25rem; font-size:0.75rem; color:#666;}
.mem_tb ul li .td p em{color:var(--sub); margin-right:5px;}
.mem_tb ul li .th em{color:var(--sub); margin-left:5px;}
.mem_tb ul li.phone .td{ flex-direction: row;align-items: center; gap:0.2rem;}
.mem_tb ul li.phone .td input{vertical-align:middle;}
.mem_tb ul li.phone .td span{margin:0 0.5rem;}
.mem_tb ul li input[name="memberCompanyAddrState"] {display: inline-block;margin-bottom: 5px;}
.mem_tb ul li .reload_captcha{flex-shrink: 0; display:inline-block; font-size: 0.9rem; width:4rem; height:40px; line-height:40px; text-align:center;  background-color: #242424;  color: #fff;}
.mem_tb ul li .btnChkUnique,
.mem_tb ul li .phoneCheck{flex-shrink: 0; display:inline-block; font-size: 0.7rem; width:4rem; height:40px; line-height:40px; text-align:center;  background-color: #242424;  color: #fff; }

.mall_container .mem_tb ul li .td{padding-right:45%;}
.mall_container .mem_tb ul li  input{background:#f7f7f7; border: 1px solid #e1e1e1;}
.mall_container .mem_tb ul li  input[type="checkbox"]{vertical-align:middle; display: inline-block; width: 1rem;  height: 1rem; border: 1px solid #E6E6E6 ; background-color:#fff;}
.mall_container .mem_tb ul li  input[type="checkbox"]:checked{background-color:var(--main); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M17.1824 8.23105L8.97611 15.8903L4.29297 11.2071L5.70718 9.79289L9.02404 13.1097L15.8178 6.76894L17.1824 8.23105Z' fill='white'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position: 50% 50%; background-size:100% 100%; border: 1px solid var(--main);}
.mall_container .mem_tb ul li  input[type="checkbox"]:disabled{background:#E8E8E8; border-color:#E6E6E6}
.mall_container .mem_tb ul li  input[type="checkbox"]:checked:disabled{background-color:#E8E8E8; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M17.1824 8.23105L8.97611 15.8903L4.29297 11.2071L5.70718 9.79289L9.02404 13.1097L15.8178 6.76894L17.1824 8.23105Z' fill='%23838383'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position: 50% 50%; background-size:100% 100%; border-color:var(--lgray7)}


@media (max-width:1300px){
	.mall_container .mem_tb ul li .td{padding-right:25%;}
}
@media (max-width:1030px){
	.mem_tb ul li{display:block; }
	.mem_tb ul li .th{border:none;padding:1rem 0 0 ;}
	.mem_tb ul li .td{padding:0.5rem 0 1rem;}
	.mall_container .mem_tb ul li .td{padding-right:0;}
}
@media (max-width:767px){
	.member_form{width: 100%;}
}


/********************************************************
■ 회원탈퇴
********************************************************/
.withdriw-box{margin-bottom:1.5rem;}
.withdriw-box .mall_title{border-bottom:1px solid #ddd; margin-bottom:2rem;}
.withdriw-box h4{color:var(--main); font-size:1.3rem; margin-bottom:0.5rem;}
.withdriw-box p{font-size:1rem;}
.withdriw-box p b{color:var(--red);}

/* 온라인문의 테이블*/
table.online_tb {width:100%; border-top: 2px solid #000;}
table.online_tb td input[type="text"],
table.online_tb td input[type="password"]{border:1px solid #e1e1e1; color:#555; background:#f7f7f7;}
table.online_tb td, 
table.online_tb th{overflow:hidden; vertical-align:middle; border-bottom:1px solid #e2e2e2; padding:10px 10px; font-size:15px; }
table.online_tb th{font-weight:500;}
table.online_tb label {margin-right:20px;}
table.online_tb .file {position:relative;}
table.online_tb .file input[type="file"] {position:absolute; top:0; left:0; width:458px; opacity:0;}
table.online_tb .file input[type="text"] {width:358px;}
table.online_tb .file a {margin-left:10px; vertical-align:middle;}
table.online_tb .file span {margin-left:20px; font-size:15px; color:#767676}
table.online_tb .fileBtn {display:inline-block; width:90px; height:38px; line-height:38px; background:#626262; font-weight:normal; font-size:15px; color:#fff; text-align:center;margin-left:0px !important;}
table.online_tb input[type="text"],
table.online_tb input[type="password"],
table.online_tb input[type="file"]{width:350px; height:35px; text-indent:10px;}
table.online_tb .w30 input[type="text"]{width:100px;}

/* 첨부파일 */
.file {position:relative;  display:flex; align-items: center; gap:5px; margin:5px 0;}
.file_in{width:450px; display:flex; align-items: center;}
.file input[type="file"] {position:absolute; top:0; left:0; opacity:0;}
.file input[type="text"] {}
.file a{font-size:0.7rem;}
.file span {margin-left:20px; font-size:15px; color:#767676}
.fileBtn {display:inline-block; flex-shrink:0; width:4.5rem; padding:0 10px; height:40px; line-height:40px; background:#919190; font-weight:normal; font-size:0.75rem; color:#fff; text-align:center; margin-left:0px !important;}

@media (max-width:767px){
	.file{width:100%;}
	.fileBtn{width:auto; font-size:0.8rem;}
}

.btn2{padding:10px; background-color: #999; color: #fff; font-size: 14px;}
.ast{margin-top:5px; font-size:15px;}
.ast input{margin-left:5px;}


.datepicker{background:url("/images/board/clip/Date.svg") no-repeat right+15px 50%; background-size: 20px auto;}