@charset "utf-8";
/* *******************************************************
 * filename : member.css
 * description : 로그인,회원가입,회원정보 수정등 회원메뉴에 관련된  CSS
 * date : 2020-02-21
******************************************************** */

/* ******************   공통  ********************** */
.member-wrapper{padding:8.5rem 1rem; border-radius: 4rem; box-shadow: 0rem 0rem 6.5rem 0 rgba(0,0,0,0.08); box-sizing: border-box; font-family:var(--font-family2);}

/* 공통 :: 상단 진행과정 바 */
.join-process-bar-con > ol{overflow:hidden;  margin:50px auto; text-align:center;}
.join-process-bar-con > ol > li{display:inline-block; padding-left:80px; overflow:hidden; text-align:center; letter-spacing: -0.5px; background:url(/images/board/process_arrow.png) no-repeat 0 50%}
.join-process-bar-con > ol > li:first-child{background:none;}
.join-process-bar-con > ol > li .process-icon{float:left; width:48px; height:48px; color:#fff; background-color:#ccc; -webkit-border-radius:50%;-moz-border-radius:50%;-o-border-radius:50%;border-radius:50%;}
.join-process-bar-con > ol > li.current .process-icon{background-color:#424446}
.join-process-bar-con > ol > li .process-icon i{font-size:24px; line-height:48px; }
.join-process-bar-con > ol > li dl{float:left; width:120px; padding-left:15px; text-align:left; padding-top:5px;}
.join-process-bar-con > ol > li dl dt{height:20px; font-size:13px; color:#888;}
.join-process-bar-con > ol > li dl dd{height:28px; font-size:17px; color:#333;}


/* 공통 :: 회원폼 레이아웃 */
.member-con-inner{}
.member-search-con-inner{padding:75px 0; border:1px solid #ddd; border-top:0;}
.member-form-con{width:96%; max-width:480px; margin:0px auto;}	/* 가로값 설정 */
.member-form-con-txt{margin-bottom: 3rem; font-size: 2.4rem; letter-spacing: -0.05em; font-weight: 700; color: #000; text-align: center;}
.member-form-con-txt strong{display:block; font-size: inherit; font-weight: inherit; color:inherit;}
.member-form-con-txt b{font-weight:600; color:#000;}
.member-form-con-txt p{font-size: 1.5rem; line-height:1.5; letter-spacing: -0.025em; font-weight: 600; color:#333;}
.member-form-con-txt .member-con-tit + p{margin-top: 1.5rem;}
.form-tit{display:block; font-size: 2rem; line-height:1.3; letter-spacing: -0.025em; font-weight: 700; color:#000; margin-bottom:1.5rem;}
.form-list li{overflow:hidden; margin-top:-1px;}
.form-list li:first-child{margin-top:0;}
.form-list li label{line-height: 30px; color:#222; font-size:13px; letter-spacing:-0.5px;}
.form-input-box{float:left; width:80%;}
.form-input{
   padding:0 3rem !important; width:100%; height:5rem; font-size:1.6rem; letter-spacing: -0.05em; font-weight: 700; color: #000; box-sizing: border-box; background: #f2f2f2; border:2px solid #f2f2f2; outline: none; border-radius: 6rem !important; font-family:var(--font-family2); transition:var(--transition-custom); transition-property: border-color, background, box-shadow;
}
.form-input:focus{outline: none; border-color: var(--main-color); background:#fff; box-shadow: 2.1rem 2.1rem 2.4rem -1.05rem rgba(0,0,0,0.1);}
.form-input::placeholder{color: #000;}
.form-select{
   width:30%; background:none; border:0px;  color:#707070; font-size:15px; border:1px solid #ddd; letter-spacing:-0.3px; font-weight:400; height:50px; color:#aaa;
    -webkit-transition:all 0.3s;-moz-transition:all 0.3s;-o-transition:all 0.3s;-ms-transition:all 0.3s;transition:all 0.3s
}
.form-select:focus{border-color:var(--main-color); z-index:1;}

/* 공통 :: 회원관련 ::  탭 */
.member-tab-list-con,
.member-tab-list-con + .member-wrapper{max-width: 800px; margin: 0 auto;}
.member-tab-list-con{position: relative; top: 0;}
.member-tab-list-con + .member-wrapper{margin-top: calc(-1 * (6rem + 2px)); padding-top: calc(6rem + 2px + 8.5rem);}
.member-tab-list-con ul{overflow:hidden;}
.member-tab-list-con ul li{float:left; width:50%; position:relative; }
.member-tab-list-con ul li:first-child{margin-left:0;}
.member-tab-list-con ul li a{display:block; height:6rem; line-height:6rem; text-align:center; border:2px solid #fff; border-bottom:2px solid #3a4050; font-size:1.8rem; font-weight:700; color: #686767; letter-spacing:-0.025em; border-radius: 0 4rem 0 0; font-family:var(--font-family2);}
.member-tab-list-con ul li:first-child a{border-radius: 4rem 0 0 0; border-right: 0;}
.member-tab-list-con ul li.selected{z-index:1;}
.member-tab-list-con ul li.selected a{height:calc(6rem + 2px); border-color:#000; color:#000; border-bottom:0;}
.member-tab-list-con ul li:first-child.selected a{border-right: 2px solid #000;}
.member-tab-list-con ul li:first-child.selected + li a{border-left: 0;}
.member-tab-list-con + .member-con-inner{border-top:0}

/* 공통 :: 회원가입 필수입력 */
.essential-txt{position:absolute; top:-30px; right:0px; color:#464646; font-size:13px; letter-spacing:-0.3px;}
.essential-icon{color:#000; margin:0 3px 0 0; vertical-align:middle;}


/* ******************   LOGIN  ********************** */
.login-page .member-con-inner{position: relative; display: flex; flex-wrap:wrap; align-items: center;}
.login-page .member-con-inner:before{position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; background-color: #ddd; content: '';}
.login-page .member-con-inner:after{position: absolute; top: 50%; left: 50%; margin-left: -3.4rem; margin-top: -3.4rem; width: 6.8rem; height: 6.8rem; border: 2px solid #ddd; background-color: #fff; border-radius: 0.8rem; font-size: 1.6rem; font-weight: 700; color: #000; content: 'OR'; font-family:var(--font-family2); box-sizing: border-box; display: flex; align-items: center; justify-content: center; text-align: center;}
.login-page .member-form-con{padding: 0 5.46%; width:50%; max-width:none; margin:0; box-sizing: border-box;}
.login-page .member-form-short-sns-con{padding: 0 5.46%; width:50%; box-sizing: border-box;}

/* LOGIN :: 아이콘로그인 */
.form-list-icon{text-align:left; margin-bottom:4rem;}
.form-list-icon > li{margin-top:1rem;}
.form-list-icon > li:first-child{margin-top:0;}
.form-list-icon > li .login-input{padding:0 3rem; width:100%; height:5rem; font-size:1.6rem; letter-spacing: -0.05em; font-weight: 700; color: #000; box-sizing: border-box; background: #f2f2f2; border:2px solid #f2f2f2; outline: none; border-radius: 6rem; font-family:var(--font-family2); transition:var(--transition-custom); transition-property: border-color, background, box-shadow;}
.form-list-icon > li i + .login-input{width:calc(100% - 50px);}
.form-list-icon > li .login-input:focus{outline: none; border-color: var(--main-color); background:#fff; box-shadow: 2.1rem 2.1rem 2.4rem -1.05rem rgba(0,0,0,0.1);}
.form-list-icon > li .login-input::placeholder{color: #999;}
.form-list-icon > li i{vertical-align:middle; color:#888; width:35px;}
/*  LOGIN :: 아이디저장 및 하단영역 */
.id-save-btn{text-align:right; color:#333;font-size:15px; letter-spacing:-0.3px;  margin-top:30px; }
.id-save-btn input[type="checkbox"]{vertical-align:middle;}
.form-box-list{display: flex; align-items: center; justify-content: center;}
.form-box-list a{font-size:1.6rem; letter-spacing:-0.05em; font-weight: 700; color: #000;}
.form-box-list a:first-child{margin-left:-1rem;}
.form-box-list a:before{display:inline-block; content:""; background-color:#cfcfcf; width:2px; height:1.1rem; vertical-align:middle; margin:-0.2rem 1rem 0 1rem;}
.form-box-list a:first-child:before{display:none;}
.form-box-list a:hover{color:#000}

/* ******************   LOGIN ::  SNS 로그인  ********************** */
/* LOGIN :: SNS LOGIN (Short Ver) */
.member-form-short-sns-con{}
.member-form-short-sns-con .short-sns-tit{margin-bottom: 3rem; font-size:2.4rem; letter-spacing:-0.05em; font-weight:700; color: #000; text-align: center;}
.short-sns-list-con{}
.short-sns-list-con ul{margin: 0 -0.75rem; display: flex; flex-wrap:wrap;}
.short-sns-list-con li{margin: 0 0.75rem; width: calc(33.33% - 1.5rem);}
.short-sns-list-con li button{position: relative; width: 100%; height: 0; padding-top: 100%; color: #666; background-color: #f2f2f2; border-radius:100%; transition:var(--transition-custom); transition-property: color, background-color;}
.short-sns-list-con li button div{position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;}
.short-sns-list-con li button i{font-size:4rem;}
.short-sns-list-con li:nth-child(2) button i{color: #395694;}
.short-sns-list-con li:nth-child(3) button i{color: #1dc800;}
.short-sns-list-con li button span{margin-top: 1rem; font-size: 1.4rem; line-height: 1.3; letter-spacing: -0.025em; font-weight: 700; display: block;}
.short-sns-list-con li button:hover{background-color: var(--main-color); color: #000;}

/* LOGIN :: SNS LOGIN (Long Ver) */
.member-con-inner-sns{position:relative; overflow:hidden;}
.member-con-inner-sns:before{position:absolute; top:30px; bottom:30px; left:50%; width:1px; background-color:#eee; content:"";}
.member-con-inner-sns .member-con-inner{padding:60px 30px;}
.member-con-inner-sns .member-form-con{float:left; width:50%; max-width:none; padding-left:30px; box-sizing: border-box;}
.member-con-inner-sns .member-form-con:first-child{padding-left:0; padding-right:30px;}
.member-con-inner-sns .member-form-sub-txt{font-size:13px; line-height:20px; color:#333;}
.member-con-inner-sns .member-form-con .sns-login-list li{overflow:hidden; position:relative; padding-top:10px; -webkit-border-radius:3px;-moz-border-radius:3px;-o-border-radius:3px;border-radius:3px;}
.member-con-inner-sns .member-form-con .sns-login-list li:first-child{padding-top:0;}
.member-con-inner-sns .member-form-con .sns-login-list li a,
.member-con-inner-sns .member-form-con .sns-login-list li button{display:block; width:100%; height:50px; background-color:#888; color:#fff; font-size:16px; text-align:left; text-indent:70px; }
.member-con-inner-sns .member-form-con .sns-login-list .sns-icon{position:absolute; width:50px; height:50px; border-right:1px solid rgba(255,255,255,0.5); text-align:center; line-height:50px;}
.member-con-inner-sns .member-form-con .sns-login-list .sns-icon i{color:#fff; font-size:20px; line-height:50px}

/* ******************   LOGIN ::  SHOP 로그인  ********************** */
/* LOGIN :: SHOP LOGIN ( 가로Ver ) */
.member-con-inner-shop{overflow:hidden;padding:75px 40px; border:1px solid #ddd;}
.member-con-inner-shop .member-form-con{display:inline-block; vertical-align:middle; width:44%; padding-left:20px;}	/* 오른쪽영역 */
.member-con-inner-shop .member-form-con:first-child{width:51.5%; border-right:1px solid #ddd; padding-right:20px; padding-left:0;}	/* 왼쪽영역 */ 
.member-con-inner-shop .member-form-con .cm-btn-controls{padding-top:10px;}
.member-con-inner-shop .member-form-nonmember{overflow:hidden; border-top:1px solid #ddd; padding-top:25px; margin-top:25px;}
.member-con-inner-shop .member-form-nonmember-con{position:relative; float:left; width:50%; padding:15px; box-sizing:border-box; }
.member-con-inner-shop .member-form-nonmember-con:first-child{padding-left:0;}
.member-con-inner-shop .member-form-nonmember-con:last-child{padding-right:0;}
.member-con-inner-shop .member-form-nonmember-con:last-child:before{display:inline-block; content:""; width:1px; height:100%; position:absolute;  top:0px; left:-1px; background-color:#ddd;}
.member-con-inner-shop .member-form-sub-txt{font-size:13px; line-height:20px; color:#333; word-break:keep-all;}

/* LOGIN :: SHOP LOGIN 2 ( 세로 Ver ) */
.nonmember-service-con{overflow:hidden;border-top:1px solid #ddd; padding:15px 0; }
.nonmember-service-con:first-child{margin-top:30px;}
.nonmember-service-con > p{float:left; width:200px; font-size:15px; line-height:20px; color:#444; font-weight:300; letter-spacing:-0.3px; word-break:keep-all;}
.nonmember-service-buttons{float:right;  width:calc(100% - 220px); text-align:right;}
.nonmember-service-buttons a{display:inline-block; width:45%; margin-left:10px; height:40px; line-height:40px; text-align:center; border:1px solid #333; color:#fff; background-color:#333; font-size:14px; letter-spacing:-0.3px;}
.nonmember-service-buttons .non-member-btn{background-color:#fff; color:#333;}
.nonmember-service-buttons a.nonmember-buy-btn{width:94%; margin-left:0;}

/* ******************  아이디, 비번 찾기  ********************** */
/* -------- 아이디 찾기 -------- */
/* 아이디 찾기 :: 결과 */
.id-check-inner .customer-id{color:#969696; font-size:18px; padding:50px 0; border-top:1px solid #ddd; border-bottom:1px solid #ddd; line-height:30px; text-align:center; font-weight:300; letter-spacing:-1px;}
.id-check-inner .customer-id strong{color:#343434; font-weight:500;}

/* ******************  JOIN  ********************** */
/* -------- JOIN 01 -------- */
.join-step-con{padding-bottom:50px;}
.join-step-con .join-tit{color:#222; font-size:20px; letter-spacing:-0.75px; font-weight:500; padding-bottom:15px;}
.join-agreement-con{
	border:1px solid #ddd; height:200px; overflow-x:hidden; overflow-y:auto; padding:20px; background-color:#fff;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	 box-sizing: border-box; 
}
.agree-txt{padding-top:15px; font-size:15px; letter-spacing:-0.3px; color:#333;}
 
.join-page{border-top: 2px solid #000;}
.join-page.member-wrapper{padding:0; border-radius: 0; box-shadow: none;}
.cm-join-con-box{padding: 5.5rem 0; display: flex; flex-wrap:wrap; border-bottom: 1px solid #e5e5e5;}
.cm-join-con-left{width: 40.38%; font-size: 3rem; line-height: 1.33; letter-spacing: -0.05em; font-weight: 700; color: #000;}
.cm-join-con-left b{font-weight: 700; color: var(--main-color);}
.cm-join-con-right{width: 59.62%;}
/* 토글박스 */
.join-toggle-item{width: 100%; border-bottom:1px solid #ebebeb;}
.join-toggle-item:last-child{border-bottom: none;}
.join-toggle-item:first-child dt{padding-top: 0;}
.join-toggle-item:last-child dt{padding-bottom: 0;}
.join-toggle-item dt,
.join-toggle-item dd{padding:2.5rem 1rem; padding-right: 4.5rem;}
.join-toggle-item dt{width: 100%; box-sizing: border-box; position:relative;}
.join-toggle-item dt .arrow{position:absolute; top:2.8rem; right:2.5rem; cursor: pointer;}
.join-toggle-item:not(.open) dt .arrow:hover i{animation: upDownArrow 0.6s ease-in-out both;}
.join-toggle-item dt i{color:#000; font-size:2.4rem;}
.join-toggle-item dd{display:none; position:relative; padding-top: 0; padding-left: 5.5rem;}
.join-toggle-item:last-child.open dd{padding-top: 2.5rem;}
.join-toggle-item .editor-con {height: 300px; overflow-x: hidden; overflow-y: auto;}

@keyframes upDownArrow {
	0% {
		transform:  translateY(0);
	}
	50% {
		transform: translateY(5px);
	}
	100% {
		transform:  translateY(0);
	}
}
@keyframes downUpArrow {
	0% {
		transform: rotate(-180deg) translateY(0);
	}
	50% {
		transform: rotate(-180deg) translateY(5px);
	}
	100% {
		transform:  rotate(-180deg) translateY(0);
	}
}
/* 토글박스 :: Open */
.join-toggle-item.open dt .arrow i{transform:rotate(-180deg);}
.join-toggle-item.open dt .arrow:hover i{animation: downUpArrow 0.6s ease-in-out both;}
/* 체크박스 */
.join-custom-checkbox{padding: 0; margin: 0; display: block; width: 100%;}
.join-custom-checkbox-item{display: block; width: 100%;}
.join-custom-checkbox-item input[type="checkbox"]{display:none;}
.join-custom-checkbox-item label{width: 100%; display:block; position:relative; padding-left:4rem; font-size:1.8rem; line-height: 1.5; font-weight: 700; letter-spacing:-0.025em; color: #000; box-sizing: border-box;}
.join-custom-checkbox-item label::before{font-family: 'xeicon'; content: "\e92b"; position:absolute; top:-0.3rem; left:0; font-size:2.4rem; font-weight: 400; color:#000; opacity: 0.2;}
.join-custom-checkbox-item input[type="checkbox"]:checked + label::before{color: var(--main-color); opacity: 1;}
/* 체크박스2 */
.join-custom-checkbox2-wrap {padding: 2rem 3rem; margin: 0; display: block; width: 100%; background: #f5f5f5; border-radius: 3rem; box-sizing: border-box;}
.join-custom-checkbox2{display: flex; flex-wrap: wrap; margin: -0.6rem -0.9rem;}
.join-custom-checkbox-item2{display: inline-flex; align-items: center; margin: 0.6rem 0.9rem;}
.join-custom-checkbox-item2 input[type="checkbox"]{display:none;}
.join-custom-checkbox-item2 label{width: 100%; display:block; position:relative; padding-left:2rem; font-size:1.4rem; line-height: 1.5; font-weight: 700; letter-spacing:0; color: #000; box-sizing: border-box;}
.join-custom-checkbox-item2 label::before{font-family: 'xeicon'; content: "\e92e"; position:absolute; top:0; left:0; font-size:1.4rem; font-weight: 400; color:#000;}
.join-custom-checkbox-item2 input[type="checkbox"]:checked + label::before{ content: "\e92d"}
/* 하단버튼 */
.join-page .cm-btn-controls, 
.join-page .cm-btn-controls{margin-top: 6rem;}
.join-page .cm-btn-controls button, 
.join-page .cm-btn-controls a{width: 30rem; height: 6rem; font-size: 2.4rem;}
/* fakeform */
.fakeform-selectbox{position: relative; display:inline-block; width: 100%; box-sizing: border-box;}
.fakeform-selectbox select{opacity: 0; visibility: hidden;}
.select-option.select-in-popup{z-index: 10000 !important;}
/* fake form - 기본 select 스타일 */
.fakeform-selectbox .select-title {width: 100% !important; text-align: left; line-height: 4.6rem; font-size:1.4rem; font-weight: 700; color: #000; border: 2px solid #f5f5f5; background-color: #f5f5f5; display: block; box-sizing: border-box; cursor: pointer; border-radius:3rem;}
.fakeform-selectbox .select-title:after{font-family: 'xeicon'; position:absolute; top:50%; right:2.5rem; transform:translateY(-50%); content: "\e936"; font-size:2.4rem; font-weight: 400; color: #000;}
.fakeform-selectbox .select-title strong {padding: 0 5rem 0 3rem; width: 100%; font-weight: 700; word-break: break-word; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family:var(--font-family2); box-sizing: border-box;}
.fakeform-selectbox .select-title.active{background-color: #fff; border-color: var(--main-color); border-radius: 3rem 3rem 0 0;}
.fakeform-selectbox .select-title.active:after{content: "\e930";}
.fakeform-selectbox .select-title.focus{}
.fakeform-selectbox .select-title.disabled{}

.fakeform-selectbox .select-title.active.upper {    border-radius: 0 0 3rem 3rem ;}


/* 옵션창 */
.select-option {margin-top: -2px; border: 2px solid var(--main-color); border-top: 0; background: #fff; max-height: 600px; overflow: auto; z-index: 99999 !important; border-radius: 0 0 3rem 3rem; box-sizing: border-box;}
.select-option::-webkit-scrollbar{
	width: 5px;
}
.select-option::-webkit-scrollbar-thumb{
	background-color:#333;
	border-radius:5px;
	transition:all 0.5s;
}
.select-option::-webkit-scrollbar-track{
	background-color:#f2f2f2; 
	border-radius:0;
}
.select-option ul {margin: 0; padding: 0;}
.select-option li {list-style: none;}
.select-option span,
.select-option strong {height: auto; font-size: 1.4rem; line-height: 1.5; color: #666; /* white-space: nowrap; text-overflow: ellipsis; */ text-decoration: none; padding: 1.8rem 3rem; display: block; overflow: hidden; word-break: break-word; cursor: pointer; box-sizing: border-box;}
.select-option span:hover {background: #eee;}
.select-option span.selected {color: #000; font-weight: 600;}
.select-option .disabled span,
.select-option .disabled strong {color: #bbb; text-decoration: line-through; background: none; cursor: default;}

.select-option.upper {margin-top: 4px; border-top: 2px solid  var(--main-color); border-bottom: 0; border-radius: 3rem 3rem 0 0;}

/* Datepicker */
.ui-datepicker{display: none; background-color:#fff; border:1px solid #eee; padding:10px; border-radius:5px;}
/* datepicker header  */
.ui-datepicker-header{position:relative;height:47px; line-height:47px; color:#333; text-align:center;}
.ui-datepicker-header a:hover{text-decoration:none;}
.ui-datepicker-prev,.ui-datepicker-next{position:absolute; top:0px; width:14.5%; text-align:center; cursor:pointer; font-size:18px; color:#000;}
.ui-datepicker-prev span,.ui-datepicker-next span{display:none;}
.ui-datepicker-prev{left:0; }
.ui-datepicker-prev:before{content:""; font-family:"xeicon"; content: "\e93c";}
.ui-datepicker-next{right:0; }
.ui-datepicker-next:before{content:""; font-family:"xeicon"; content: "\e93f";}
.ui-datepicker-title{font-size:16px; font-weight:600; letter-spacing:-0.3px;}
.ui-datepicker-title select{border:1px solid #eee; width: 70px; height:32px; border-radius:3px; padding:0 5px; font-size:13px; margin:0 5px; box-sizing: border-box;}
/* datepicker calendar */
.ui-datepicker-calendar{width:100%; box-sizing:border-box;  }
/* datepicker calnedar :: 요일 */
.ui-datepicker-calendar thead th{width:14.25%; height:35px; text-align:center; font-size:14px; font-weight:bold; color:#333;}
.ui-datepicker-calendar thead th:first-child{width:14.5%}
.ui-datepicker-calendar thead .ui-datepicker-week-end{/* color:#0000ff */} /* SAT */
.ui-datepicker-calendar thead .ui-datepicker-week-end:first-child{/* color:#ff0000 */} /* SUN*/
/* datepicker calnedar :: 날짜 */
.ui-datepicker-calendar td{height:30px;  text-align:center; vertical-align:top; font-size:14px;}
.ui-datepicker-calendar tr td:first-child{border-left:0;}
.ui-datepicker-calendar td a{display:block; position:relative;}
.ui-datepicker-calendar td a:hover{text-decoration:none;}
.ui-datepicker-calendar td.ui-datepicker-unselectable{color:#ccc}	/* 비활성화 */
.ui-datepicker-calendar td .ui-state-default{display:block; width:100%; height:100%; padding:10px; box-sizing:border-box; color:inherit; border-radius:3px;}
.ui-datepicker-calendar td .ui-state-hover{background:#eee;}		/* 마우스오버 */
.ui-datepicker-calendar td .ui-state-active{background-color:#0061f2; color:#fff;}	/*active */
.ui-datepicker-calendar td.ui-datepicker-today a:before{
	content: '';
	display: inline-block;
	border: solid transparent;
	border-width: 0 0 7px 7px;
	border-bottom-color: #0061f2;
	border-top-color: rgba(0, 0, 0, 0.2);
	position: absolute;
	bottom: 4px;
	right: 4px;
}
.ui-datepicker-calendar td a.ui-state-active:before{border-bottom-color:#fff;}
/* 정보 입력 영역 */
.join-info-profile-box{margin-bottom: 4rem; padding: 4rem 7.74%; border-radius: 3rem; background-color: #f2f2f2; display: flex; flex-wrap:wrap; align-items: center;}
/* 정보 입력 영역 :: 프로필 이미지 */
.join-info-profile-file{position: relative; width:17.4rem;}
.join-info-profile-file .tooltip-wrap{position: absolute; bottom: 1.3rem; right: -2.2rem;}
.join-info-profile-file .cm-tooltip-btn + .tooltip-box{width: 35rem;}
.member-img {position:relative; display:block; width:17.4rem; height:17.4rem; border-radius: 100%; overflow: hidden;}
.member-img .close-btn {position:absolute; top:0; left: 0; width: 100%; height: 100%; font-size: 1.4rem; font-weight: 500; color: #fff; background-color: rgba(0,0,0,0.3); border-radius: 100%; display: flex; align-items: center; justify-content: center; opacity: 0; transition:var(--transition-custom); transition-property: opacity;}
.member-img .close-btn i{margin-left: 0.5rem; font-size: 1.8rem; font-weight: 400;}
.member-img:hover .close-btn{opacity: 1;}
#previewId {position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: url('/images/content/member_base_img.png') center/cover no-repeat;}
#previewId img{object-fit: cover;}
.file-attach-bx {position: absolute; bottom: 1.3rem; right: 0.3rem;}
.file-attach-bx label {width: 3.4rem; height: 3.4rem; background-color: #e1e1e0; border: 0.2rem solid #fff; border-radius: 3.4rem; box-sizing: border-box; display: flex; align-items: center; justify-content: center; transition:var(--transition-custom); transition-property: background-color;} 
.file-attach-bx i {font-size: 1.6rem; color: #404040; transition:var(--transition-custom); transition-property: color;}
.file-attach-bx input[type="file"] { /* 파일 필드 숨기기 */ position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip:rect(0,0,0,0); border: 0; }
.upload-name {position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip:rect(0,0,0,0); border: 0; }                           
.file-attach-bx label:hover{background-color: #404040;}
.file-attach-bx label:hover i{color: #fff;}
/* 정보 입력 영역 :: 정보 */
.join-info-profile-form{padding-left: 11.34%; width: calc(100% - 17.4rem); box-sizing: border-box;}
.join-info-profile-form .join-form-tbl .input-basic{background-color: #fff; border-color: #fff;}
.join-info-profile-form .inner-gender-box{padding: 1.5rem 3rem; width: 100%; min-height: 6rem; border-radius: 3rem; background-color: #fff; display: flex; align-items: center; box-sizing: border-box;}

/* 동의하기 */
.cm-join-agree-txt-container {display: flex;justify-content: center; margin-top: 4rem;}
.cm-join-agree-txt-container + .cm-join-agree-txt-container {margin-top: 1.5rem;}
.cm-join-agree-txt input{display:none;}
.cm-join-agree-txt label{display: block; position:relative; padding-left:4rem; font-size: 1.6rem; font-weight: 700; letter-spacing: -0.025em; color: #000000; line-height: 1.3; -webkit-box-sizing: border-box;-moz-box-sizing: border-box; box-sizing: border-box;}
.cm-join-agree-txt label a {display: inline-block; color: var(--main-color); font-weight: 700;}
.cm-join-agree-txt label:before {position:absolute; content: '\e92b'; left:0px; top: -0.5rem; font-family: xeicon; font-size:2.4rem; color:#ddd;}
.cm-join-agree-txt input:checked + label:before { color:var(--main-color);}

@media all and (max-width:800px) {
	.cm-join-con-box{padding: 5rem 0;}
	.cm-join-con-left{margin-bottom: 2.5rem; width: 100%; font-size: 3rem; line-height: 1.33;}
	.cm-join-con-left br{display: none;}
	.cm-join-con-right{width: 100%;}
	/* 토글박스 */
	.join-toggle-item{border-bottom:1px solid #ebebeb;}
	.join-toggle-item:last-child{border-bottom: none;}
	.join-toggle-item:first-child dt{padding-top: 0.5rem;}
	.join-toggle-item:last-child dt{padding-bottom: 0;}
	.join-toggle-item dt,
	.join-toggle-item dd{padding:2.5rem 1rem; padding-right: 4.5rem;}
	.join-toggle-item dt .arrow{top:2.8rem; right:2.5rem;}
	.join-toggle-item dt i{font-size:2.4rem;}
	.join-toggle-item dd{display:none; padding-top: 0; padding-left: 5.5rem;}
	.join-toggle-item:last-child.open dd{padding-top: 2.5rem;}
	/* 체크박스 */
	.join-custom-checkbox-item label{width: 100%; display:block; padding-left:4rem; font-size:1.8rem; line-height: 1.5;}
	.join-custom-checkbox-item label::before{top:-0.3rem; font-size:2.4rem;}
	/* fakeform */
	.fakeform-selectbox .select-title {font-size: 1.4rem; line-height: 5rem; border-radius:3rem;}
	.fakeform-selectbox .select-title strong{padding: 0 4rem 0 2rem;}
	.fakeform-selectbox .select-title:after{right:1.5rem; font-size:2.4rem;}
	.fakeform-selectbox .select-title.active{border-radius: 3rem 3rem 0 0;}
	/* 옵션창 */
	.select-option span,
	.select-option strong {height: auto; font-size: 1.4rem; font-weight: 500; line-height: 1.5; padding: 1.8rem 2rem;}
	/* 하단버튼 */
	.join-page .cm-btn-controls, 
	.join-page .cm-btn-controls{margin-top: 6rem;}
	.join-page .cm-btn-controls button, 
	.join-page .cm-btn-controls a{max-width: 60rem; width: 100%; height: 6rem;}
	/* 정보 입력 영역 */
	.join-info-profile-box{margin-bottom: 4rem; padding: 4rem 3rem; border-radius: 3rem; background-color: #f2f2f2; display: flex; flex-wrap:wrap; align-items: center;}
	/* 정보 입력 영역 :: 프로필 이미지 */
	.join-info-profile-file{width:17.4rem; margin: 0 auto 2.5rem;}
	.join-info-profile-file .cm-tooltip-btn + .tooltip-box{width: 30rem;}
	.join-info-profile-file .cm-tooltip-btn[flow^="right"]::before {top: 100%; border-left-width: 5px; border-right-width: 5px; border-top-width: 0; border-bottom-width: 5px; border-bottom-color: #949494; border-right-color: transparent; right: auto;}
	.join-info-profile-file .cm-tooltip-btn[flow^="right"]::before {left: 50%; transform: translate(-50%, calc(0.6rem - 5px));}
	.join-info-profile-file .cm-tooltip-btn[flow^="right"] + .tooltip-box {top: 50%; left: 50%; transform: translate(-68%, calc(1.7rem + 5px));}

	.member-img {width:17.4rem; height:17.4rem;}
	.member-img .close-btn {font-size: 1.4rem;}
	.member-img .close-btn i{margin-left: 0.5rem; font-size: 1.8rem;}
	.file-attach-bx {bottom: 1.3rem; right: 0.3rem;}
	.file-attach-bx label {width: 3.4rem; height: 3.4rem; width: 34px; height: 34px; border-radius: 34px;}
	.file-attach-bx i {font-size: 1.6rem;font-size: 16px;}                    
	/* 정보 입력 영역 :: 정보 */
	.join-info-profile-form{padding-left: 0; width: 100%;}
	.join-info-profile-form .inner-gender-box{padding: 1.5rem 3rem; min-height: 6rem; border-radius: 3rem;}
}


/* -------- JOIN 02 / MODIFY -------- */
.modify-page{}
.modify-page .cm-join-con-box{max-width: 800px; margin: 0 auto; padding-top: 0;}
.modify-page .cm-join-con-box + .cm-join-con-box{padding-top: 5.5rem;}
.modify-page .cm-join-con-left{width: 100%; padding-right: 0; margin-bottom: 2.5rem;}
.modify-page .cm-join-con-left br{display: none;}
.modify-page .cm-join-con-right{width: 100%;}
.modify-page .cm-btn-controls{max-width: 480px; margin: 4rem auto 0;}
.join-form-con{position:relative; border-top:1px solid #464646;}
/* JOIN :: 기본 */
.join-form-tbl{width:100%; table-layout: fixed;}
.join-form-tbl th,
.join-form-tbl td{ padding:0.5rem 0;}
.join-form-tbl-th-style,
.join-form-tbl th{text-align:left; font-size:1.8rem; letter-spacing:-0.025em; font-weight: 700; line-height:1.3; color:#000; word-break:keep-all; font-family:var(--font-family2);}
.join-form-tbl th.va-top {    vertical-align: top; padding-top: 2rem;}
.date-select-input-wrap,
.join-form-tbl .input-basic,
.join-form-tbl .textarea-basic,
.join-form-tbl .select-basic{width:100%; height:5rem; /* max-width:300px; */ text-indent: 3rem; background-color:#f5f5f5; border:2px solid #f5f5f5; font-size:1.4rem; font-weight: 700; color: #000; border-radius: 6rem !important; outline: none; transition:var(--transition-custom); transition-property:background-color, border-color; font-family: var(--font-family2); box-sizing: border-box;}
.join-form-tbl .input-basic.input-inner {width: 13rem; height: 3rem; background-color: #fff; border: 0;    border-radius: 1.5rem !important; margin-left: 1rem;}
.date-select-input-wrap{position: relative; text-indent: 0; border: 0;}
.date-select-input-wrap .input-basic{background-color: transparent; padding-right: 5rem; box-sizing: border-box;}
.date-select-input-wrap:before{position: absolute; top: 50%; margin-top: -1.2rem; right: 2.5rem; font-size: 2.4rem; color: #000; font-weight: 400; font-family:"xeicon"; content: "\e9a5";}
.join-form-tbl .width100{max-width:none;}
.join-form-tbl .textarea-basic{margin: 1.5rem 0; padding: 3rem; height: 30rem; text-indent: 0; resize: none; border-radius: 3rem !important;}
.modify-page .join-form-tbl .textarea-basic {margin: 0;}
.join-form-tbl .textarea-basic:focus,
.join-form-tbl .input-basic:focus{background-color: #fff; border-color:var(--main-color);}
.join-form-tbl .textarea-basic::placeholder,
.join-form-tbl .input-basic::placeholder,
.join-form-tbl .select-basic::placeholder{color: #000;}
.join-form-tbl .select-basic{height:6rem;}
.join-form-tbl .join-sub-btn{display:inline-block; min-width:114px; padding:0 1rem; height:5rem; background-color: #000; border:2px solid #000; vertical-align:middle; text-align:center; color:#fff; font-size:1.5rem; letter-spacing: -0.025em; font-weight:600; margin-left:1rem; border-radius: 6rem; transition:var(--transition-custom); transition-property:background-color, border-color, color; font-family:var(--font-family2);}
.join-form-tbl .join-sub-btn:hover{background-color:#fff; color:#000;}
.join-form-tbl .join-sub-btn.join-sub-btn01,
.join-form-tbl .join-sub-btn.join-sub-loading-btn {background-color: var(--main-color); border:2px solid  var(--main-color); }
.join-form-tbl .join-sub-btn.join-sub-btn01:hover {background-color:#fff;  color: var(--main-color);}

.join-form-tbl .join-sub-txt{display:inline-block; margin-left:10px; color:#828282; font-weight:400; font-size:11px; letter-spacing:-0.5px;}
.join-form-tbl .join-sub-txt2{display:block; margin-top:10px; color:#828282; font-weight:400; font-size:11px; letter-spacing:-0.5px;}
.join-form-tbl .font-ok{color:#0095ff; font-weight:400;}
.join-form-tbl .font-caution{display: block; color:#ff3800; font-weight:400; margin-top: 0.5rem;}
.join-form-tbl .hypen{display:inline-block; vertical-align:middle;width:12px; margin:0 5px; text-align:center;}
/* JOIN :: 추가스타일 */
.join-form-tbl fieldset{padding:8px 0;}
.join-form-tbl .email-input, .join-form-tbl .birth-input, .join-form-tbl .address-input, .join-form-tbl .tel-input{padding:0;} 
.join-form-tbl label,.join-form-tbl input[type="checkbox"],.join-form-tbl input[type="radio"]{vertical-align:bottom;}
.join-form-tbl .read-only-data{padding:10px 0; font-size:15px; color:#333;}
.join-form-tbl .id-input{padding:0;}
.birth-input .select-basic, .tel-input .input-basic, .tel-input .select-basic{max-width:100px}
.birth-input br{display:none;}
.email-input .input-basic, 
.email-input .select-basic{width:30%; max-width:150px; margin-bottom:3px;}
.address-input .input-basic{margin-top:6px;}
.address-input .input-basic:first-child{margin-top:0;}
.email-verification-box{position: relative; width: 100%; display: flex; align-items: center; justify-content: space-between;}
.email-verification-box .email-vtime {position: absolute;top:50%; right: 21rem; font-size: 1.2rem;color:#000; transform: translate(0,-50%);}
.email-verification-box .input-basic{width: calc(100% - 19rem) !important;}
.email-verification-box .join-sub-btn{width: 18rem; margin-left: 0;}
.join-form-tbl .join-sub-btn.join-sub-loading-btn {display: none;     pointer-events: none;}
.join-form-tbl .email-verification-box.ontime .join-sub-btn.join-sub-btn01 {display: none;}
.join-form-tbl .email-verification-box.ontime .join-sub-btn.join-sub-loading-btn {display: block; }

.gender-input-selectbox{width: 100%; display: flex; align-items: center; justify-content: space-between;}
/* .gender-input-selectbox .fakeform-selectbox{width: calc(100% - 21rem) !important;} */
.gender-input-selectbox .input-basic{width: 20rem; margin-left: 0;}
.gender-input-selectbox .input-basic::placeholder{color: rgba(0,0,0,0.3);}

.nation-box {display: flex; align-items: center; justify-content: space-between; margin: 0 -0.7rem;}
.nation-box .nation-box-item{width: calc(50% - 1.4rem) !important; margin: 0 0.7rem;}
.nation-box .input-basic {width: calc(50% - 1.4rem) !important; margin: 0 0.7rem;}

.member-img-wrap {display: flex; align-items: center;}
.member-img-wrap .join-custom-checkbox2 {padding: 0 0 0 1rem;}
.member-img-wrap button {margin-left: 1.5rem; display: inline-block; width: 10rem; height: 3rem; border-radius: 0.5rem; border: 1px solid #000; color: #000; font-size: 1.2rem; font-weight: 500;}
.modify-page .member-img {width: 8rem; height: 8rem;}
.modify-page .file-attach-bx {position: relative; bottom: 0; right: 0; }
.modify-page .file-attach-bx label {position: absolute; top: 1rem; left: 1.5rem; width: 16rem; height: 4rem; background: #fff; border: 1px solid #eeeeee; border-radius: 2rem; font-size: 1.6rem; font-weight: 600; color: #000; letter-spacing: -0.025em; z-index: 10;}
.modify-page .file-attach-bx label i {margin-right: 1rem;}
.modify-page .file-attach-bx .upload-name {position: relative; width: 100% !important; text-align: left; height: 6rem; line-height: 5.6rem; font-size: 1.4rem;  font-weight: 700;color: #000; border: 2px solid #f5f5f5; background-color: #f5f5f5; display: block; box-sizing: border-box; cursor: pointer; border-radius: 3rem; padding: 0 5rem 0 18rem;}
.modify-page #previewId img {width: 100%; height: 100%;}

.community-page .file-attach-bx {position: relative; bottom: 0; right: 0; }
.community-page .file-attach-bx label {position: absolute; top: 1rem; left: 1.5rem; width: 16rem; height: 4rem; background: #fff; border: 1px solid #eeeeee; border-radius: 2rem; font-size: 1.6rem; font-weight: 600; color: #000; letter-spacing: -0.025em; z-index: 10;}
.community-page .file-attach-bx label i {margin-right: 1rem;}
.community-page .file-attach-bx label:hover i{color: #000;}
.community-page .file-attach-bx .upload-name {position: relative; width: 100% !important; text-align: left; height: 6rem; line-height: 5.6rem; font-size: 1.4rem;  font-weight: 700;color: #000; border: 2px solid #f5f5f5; background-color: #f5f5f5; display: block; box-sizing: border-box; cursor: pointer; border-radius: 3rem; padding: 0 10rem 0 18rem;}

.name-box {display: flex; align-items: center; justify-content: space-between; margin: 0 -0.5rem;}
.name-box .input-basic ,
.name-box .form-input {width: calc(50% - 1rem) !important; margin: 0 0.5rem;}

.phone-num-box{width: 100%; display: flex; align-items: center; justify-content: space-between;}
.phone-num-box .fakeform-selectbox{width: 19rem !important;}
.phone-num-box .input-basic,
.phone-num-box .form-input {width: calc(100% - 20rem) !important;  margin-left: 1rem;}

.residence-row .join-custom-checkbox2 {padding: 8px;}
.residence-row .join-custom-checkbox-item2 label {display: flex; align-items: center;}
.residence-row .join-custom-checkbox-item2 label::before {top: 0.5rem;}
.residence-row .join-custom-checkbox-item2 label .tooltip-wrap {margin-left: 0.8rem;}
.residence-row  .cm-tooltip-btn + .tooltip-box {width: 40rem;}

/* IFWY information 썸네일 수정하기 */
.member-img-wrap.modify-ifwy-css{justify-content: space-between; flex-direction: initial; align-items: center;}
.member-img-wrap.modify-ifwy-css .file-attach-bx{width: calc(100% - 9rem);}

@media all and (max-width:800px){
	.member-img-wrap  {flex-direction:column; align-items: start;}
	.member-img-wrap .join-custom-checkbox2  {padding: 1rem 0 0 0;}

	.nation-box {flex-wrap: wrap; margin: -0.5rem 0;}
	.nation-box .nation-box-item{width: 100% !important; margin: 0.5rem 0;}
	.nation-box .input-basic {width: 100% !important; margin: 0.5rem 0;}

	.phone-num-box .fakeform-selectbox{width: 49% !important;}
	.phone-num-box .input-basic,
	.phone-num-box .form-input {width: calc(49% - 0.5rem) !important; margin-left: 0.5rem;}

	.residence-row  .cm-tooltip-btn + .tooltip-box {width: 26rem;}
}
@media all and (max-width:640px){
	/* IFWY information 썸네일 수정하기 */
	.member-img-wrap.modify-ifwy-css{flex-direction: column; /* align-items: start; */}
	.member-img-wrap.modify-ifwy-css .file-attach-bx{margin-top: 1.5rem; width: 100%;}
	.member-img-wrap.modify-ifwy-css .file-attach-bx .upload-name {padding: 0 1.5rem 0 18rem;}

	.name-box {flex-wrap:wrap; margin: 0;}
	.name-box .input-basic ,
	.name-box .form-input {width: 100% !important; margin: 0;}
	.name-box input + input{margin-top: 1rem !important;}

	.phone-num-box{flex-wrap:wrap;}
	.phone-num-box .fakeform-selectbox{width: 100% !important;}
	.phone-num-box .input-basic,
	.phone-num-box .form-input {width: 100% !important; margin-left: 0; margin-top: 1rem;}
}

/* -------- JOIN FINISH  -------- */
/* JOIN FINISH :: 01 */
.join-finish-con{width:90%; margin:0px auto; max-width:570px; }
.join-finish-icon{margin:0 auto 3rem; width:12rem; height:12rem; text-align:center; background-color:#ccc; color:#fff; border-radius:100%; display: flex; align-items: center; justify-content: center;}
.join-finish-icon i{font-size:7rem;}
.join-finish-txt{text-align:center; line-height:1.5; font-size:1.8rem; color:#000;}
.join-finish-txt strong{font-weight:700;}
/* JOIN FINISH :: 02 */
.join-finish-tit-con{height:80px; border-bottom:1px solid #ddd;  text-align:center;  letter-spacing:-0.3px; margin-bottom:40px;}
.join-finish-tit{font-weight:400; color:#5e5e5e; font-size:24px; }
.join-finish-tit strong{color:#333; font-weight:600;}
.join-finish-sub-tit{padding-top:10px; color:#9b9b9b; font-size:18px; font-weight:400; line-height:24px;}
.join-finish-sub-tit b{color:#000; font-weight:500; }
.join-finish-member-info{overflow:hidden; padding:0 2% 20px 2%;}
.join-finish-member-info .member-info-left-icon{float:left; width:30%; max-width:178px;}
.join-finish-member-info .member-info-left-icon i{display:block; width:120px; height:120px; line-height:110px; font-size:70px; vertical-align:top; text-align:center; background-color:#8c98aa; color:#fff; }
.member-info-right-con{float:left; width:70%; padding-top:8px;}
.member-info-right-con dl{overflow:hidden;}
.member-info-right-con dl dt, .member-info-right-con dl dd{float:left; letter-spacing:-0.3px; padding:10px 0;}
.member-info-right-con dl dt{width:30%; color:#686767; font-size:15px; }
.member-info-right-con dl dt i{font-size:16px; color:#ccc; margin-right:3px; }
.member-info-right-con dl dd{width:70%; color:#838383; font-size:14px;}
.member-info-right-con dl .member-divine{display:inline-block; vertical-align:middle; color:#fff; padding:5px 10px; font-size:13px; background-color:#6b6b6b; margin-left:5px; margin-top:-3px;}


/* ******************   공통  ********************** */
@media all and (max-width:1220px){
	/* 공통 :: 상단 진행과정 바 */
	.join-process-bar-con > ol > li dl{width:100px; padding-left:10px;}
	.join-process-bar-con > ol > li dl dt{font-size:12px;}
	.join-process-bar-con > ol > li dl dd{font-size:13px;}
}
@media all and (max-width:800px){
	.modify-page .join-form-tbl th{width:35%;}
	.modify-page .join-form-tbl td{width:65%;}
	
	.member-wrapper {padding: 5rem var(--area-padding); border-radius: 4rem; box-shadow: 0rem 0rem 6.5rem 0 rgba(0, 0, 0, 0.08);}
	.member-tab-list-con + .member-wrapper {padding-top: calc(6rem + 2px + 5rem);}
	
	/* 공통 :: 상단 진행과정 바 */
	.join-process-bar-con > ol > li{display:block; float:left; width:33.33%; padding-left:0; background-size:8px auto}
	.join-process-bar-con > ol > li .process-icon{float:none; display:block; width:40px; height:40px; line-height:40px; margin:0px auto;}
	.join-process-bar-con > ol > li .process-icon i{font-size:18px; line-height:40px;}
	.join-process-bar-con > ol > li dl{float:none; width:auto; padding-left:0; padding-top:10px; text-align:center;}
	.join-process-bar-con > ol > li dl dt, .join-process-bar-con > ol > li dl dd{height:auto;}
	.join-process-bar-con > ol > li dl dd{padding-top:3px;}

	/* 공통 :: 회원폼레이아웃 */
	.member-con-inner{/* padding:30px 0; */}
	.member-form-con{padding:30px 0;}
	.member-form-con:last-child{padding-top:0}
	.member-form-con.pb0{padding-bottom:0}
	.member-form-con-txt{margin-bottom: 3rem; font-size: 2.4rem;}
	.member-form-con-txt p{width:80%; margin:0px auto; font-size: 1.6rem; line-height:1.5; word-break:keep-all;}
	.form-tit{text-align:center; font-size: 2rem; margin-bottom:1.5rem;}
	.form-input{padding:0 2rem !important; width:100%; height:6rem; font-size:1.6rem;}

	/* 공통 :: 회원관련 ::  탭 */
	.member-tab-list-con ul li a{height:6rem; line-height:6rem; font-size:1.8rem;}
	.member-tab-list-con ul li.selected a{height:calc(6rem + 2px);}
}

/* @media all and (max-width:480px){
	공통 :: 회원폼레이아웃
	.member-form-con{width:auto; padding:20px;}
} */

/* ******************   LOGIN  ********************** */
@media all and (max-width:800px){
	.login-page .member-con-inner:before{top: 34rem; bottom: auto; left: 0; right: 0; width: 100%; height: 1px;}
	.login-page .member-con-inner:after{top: 34rem; margin-left: -3.4rem; margin-top: -3.4rem; width: 6.8rem; height: 6.8rem; border-radius: 0.8rem; font-size: 1.6rem;}
	.login-page .member-form-con{padding: 0 0 5rem; width:100%; max-width:none; margin:0;}
	.login-page .member-form-short-sns-con{padding: 7rem 0 0; width:100%;}
	
	/* LOGIN :: 아이콘로그인 */
	.form-list-icon{margin-bottom:4rem;}
	.form-list-icon > li{margin-top:1rem;}
	.form-list-icon > li:first-child{margin-top:0;}
	.form-list-icon > li .login-input{padding:0 2rem; width:100%; height:6rem; font-size:1.6rem;}
	.form-list-icon > li i{width:25px; font-size:20px;}
	/*  LOGIN :: 아이디저장 및 하단영역 */
	.id-save-btn{font-size:12px; margin-top:0px;}
	.id-save-btn input[type="checkbox"]{width:20px; height:20px;}
	.id-save-btn + .cm-btn-controls{padding-top:15px;}
	.form-box-list{display: flex; align-items: center; justify-content: center;}
	.form-box-list a{font-size:1.6rem;}
	.form-box-list a:first-child{margin-left:-1rem;}
	.form-box-list a:before{width:1px; height:1.1rem; margin:-0.2rem 1rem 0 1rem;}
}

/* ******************   LOGIN ::  SNS  ********************** */
@media all and (max-width:1220px){
	.member-con-inner-shop, .member-con-inner-sns{padding:25px}
	/* LOGIN :: SNS LOGIN */
	.member-con-inner-sns .member-form-con{padding-left:15px;}
	.member-con-inner-sns .member-form-con:first-child{padding-right:15px;}
}
@media all and (max-width:800px){
	.member-con-inner-sns .member-con-inner{padding:35px 20px}
	.member-con-inner-sns:before{display:none;}
	.member-con-inner-shop, .member-con-inner-sns{padding:40px 0px;}
	/* LOGIN :: SNS LOGIN (Short Ver) */
	.member-form-short-sns-con{}
	.member-form-short-sns-con .short-sns-tit{margin-bottom: 3rem; font-size:2.4rem;}
	.short-sns-list-con{}
	.short-sns-list-con ul{margin: 0 -0.75rem;}
	.short-sns-list-con li{margin: 0 0.75rem; width: calc(33.33% - 1.5rem);}
	.short-sns-list-con li button i{font-size:3rem;}
	.short-sns-list-con li button span{margin-top: 0.5rem; font-size: 1.4rem; line-height: 1.3;}
	/* LOGIN :: SNS LOGIN (Long Ver) */
	.member-con-inner-sns .member-form-con, .member-con-inner-sns .member-form-con:first-child{
		display:block; float:none; width:100%; padding:0; max-width:480px; margin:0px auto;
	}
	.member-con-inner-sns .member-form-con:first-child{border-right:0; padding-bottom:50px;}
	.member-con-inner-sns .member-form-con .sns-login-list li{padding-top:5px;}
	.member-con-inner-sns .member-form-con .sns-login-list li a,
	.member-con-inner-sns .member-form-con .sns-login-list li button{height:40px; text-indent:50px; font-size:14px;}
	.member-con-inner-sns .member-form-con .sns-login-list .sns-icon{width:40px; height:40px; line-height:40px;}
	.member-con-inner-sns .member-form-con .sns-login-list .sns-icon i{line-height:40px;}
}

/* ******************   LOGIN ::  SHOP 로그인  ********************** */
@media all and (max-width:1220px){
	/* LOGIN :: SHOP LOGIN ( 가로Ver ) */
	.member-con-inner-shop .member-form-con, 
	.member-con-inner-shop .member-form-con:first-child{display:block; width:auto; padding:20px; }
	.member-con-inner-shop .member-form-con:first-child{border-right:0; padding-bottom:30px;}
}
@media all and (max-width:800px){
	/* LOGIN :: SHOP LOGIN ( 가로Ver ) */
	.nonmember-form-con{text-align:center;}
	.nonmember-form-con .form-tit{margin-bottom:15px;}
	.nonmember-form-con .cm-btn-controls button, 
	.nonmember-form-con .cm-btn-controls a{min-width:none; width:100%; margin:0;}
	.member-con-inner-shop .member-form-nonmember{border-top:0; margin-top:20px; padding-top:0;}
	.member-con-inner-shop .member-form-nonmember-con{float:none; width:100%; padding:20px 0; border-top:1px solid #ddd;}
	.member-con-inner-shop .member-form-nonmember-con:last-child:before{display:none;}

	/* LOGIN :: SHOP LOGIN 2 ( 세로Ver ) */
	.nonmember-service-con{text-align:center;}
	.nonmember-service-con:first-child{margin-top:0}
	.nonmember-service-con > p,
	.nonmember-service-buttons{float:none; width:auto;}
	.nonmember-service-con > p{margin-bottom:10px; font-size:13px; }
	.nonmember-service-con > p br{display:none;}
	.nonmember-service-buttons{margin:0 -1%;}
	.nonmember-service-buttons a{float:left; width:48%; margin:0 1%; box-sizing:border-box; font-size:13px;}
	.nonmember-service-buttons a.nonmember-buy-btn{float:none; display:block; width:auto; margin:0 1%;}
}
/* ******************  아이디, 비번 찾기  ********************** */
@media all and (max-width:800px){
	/* 아이디 찾기 :: 결과 */
	.id-check-inner .customer-id{font-size:15px; padding:30px 0; line-height:24px;}
}

 /* ******************  JOIN 02 / MODIFY  ********************** */
@media all and (max-width:800px){
	/* JOIN 01 */
	.join-step-con{padding-bottom:30px;}
	.join-step-con .join-tit{font-size:16px; padding-bottom:10px;}
	.join-agreement-con{height:150px; padding:15px}
	/* JOIN 02 */
	.essential-txt{font-size:11px; top:-20px; font-weight:300;}
	.join-form-tbl th,.join-form-tbl td{padding: 0.5rem 0; padding-right:0}
	.join-form-tbl th{width:25%; font-size:1.7rem;}
	.join-form-tbl td{width:75%;}
	.join-form-tbl .input-basic,
	.join-form-tbl .select-basic{width:100%; height:5rem; font-size:1.4rem; text-indent:2rem; max-width:none; }
	.join-form-tbl .select-basic{height:6rem;}
	.join-form-tbl .join-sub-btn{min-width:auto; width:80px; height:5rem; margin-left:1rem; font-size:1.3rem; padding:0; box-sizing:border-box;}
	.join-form-tbl .join-sub-txt, .join-form-tbl .join-sub-txt2{display:block; margin-left:0; margin-top:5px; word-break:keep-all; line-height:15px; }
	
	/* JOIN 02::기타 */
	.ios-os .join-form-tbl fieldset{
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex-wrap: wrap;
	}
	.id-input .input-basic,
	.address-input .input-basic:first-of-type{float:left; width:calc(100% - 85px) !important;}
	.birth-input .select-basic{width:calc(33.33% - 30px) !important;}
	.birth-input .select-basic:first-child{width:calc(33.33% - 4px) !important;}
    .tel-input .select-basic{width:calc(33.33% - 14px) !important;}
	.tel-input .input-basic{width:calc(33.33% - 15px) !important;}
	.email-input .input-basic{width:calc(50% - 11px) !important;}
	.email-input .select-basic{width:100% !important; margin-top:5px;}
	.address-input .input-basic{margin-top:3px;}
	.join-form-tbl .hypen{margin:0 2px;}
	.email-verification-box{width: 100%; display: flex; align-items: center; justify-content: space-between;}
	.email-verification-box .input-basic{width: calc(100% - 11.5rem) !important;}
	.email-verification-box .join-sub-btn{width: 11rem; margin-left: 0;}
	.gender-input-selectbox{width: 100%; display: flex; flex-wrap:wrap; align-items: center; justify-content: space-between;}
	.gender-input-selectbox .fakeform-selectbox{width: 100% !important;}
	.gender-input-selectbox .input-basic{margin-top: 1rem; width: 100%; margin-left: 0;}
}

@media all and (max-width:480px){
	.join-info-profile-box {margin-bottom: 2rem;}
	.join-form-tbl colgroup {display: none;}
	.join-form-tbl th, .join-form-tbl td {display: block; width: 100% !important;}
	.join-form-tbl th {padding-top: 2rem !important;}
	.join-form-tbl .textarea-basic {margin-bottom: 0;}
}

@media all and (max-width:359px){
	.join-form-tbl .join-sub-btn{font-size:11px;}
}


 /* ******************  JOIN FINISH ********************** */
@media all and (max-width:800px){
	/* JOIN FINISH :: 01 */
	.join-finish-icon{margin: 0 auto 3rem; width:10rem; height:10rem;}
	.join-finish-icon i{font-size:6rem;}
	.join-finish-txt{font-size:1.6rem; line-height:1.5; word-break:keep-all;}
	/* JOIN FINISH :: 02 */
	.join-finish-tit-con{height:auto; margin-bottom:20px; padding-bottom:20px; }
	.join-finish-tit{font-size:18px; line-height:20px;  word-break:keep-all;}
	.join-finish-sub-tit{font-size:12px; word-break:keep-all;}
	.join-finish-member-info{padding:15px;}
	.join-finish-member-info .member-info-left-icon{display:none;}
	.member-info-right-con dl {margin-bottom:15px;}
	.member-info-right-con dl dt, .member-info-right-con dl dd{float:none; width:auto; padding:0; }
	.member-info-right-con dl dt{font-size:13px; padding-bottom:7px; }
	.member-info-right-con dl dt i{margin-top:-2px; vertical-align:middle;}
	.member-info-right-con dl dd{font-size:15px; color:#222; line-height:1.5; font-weight:500; padding-left:22px;}
}

.tooltip-wrap {position: relative; display: inline-block; position: relative;}
.cm-tooltip-btn{position: relative; font-size: 2rem; color: #000 !important; border: 0 !important; padding: 0; outline: none !important; display: inline-block; background-color: transparent !important; box-shadow: none !important; position: relative; top: 0.2rem;}
/* START TOOLTIP STYLES */
.cm-tooltip-btn {position: relative; }

/* Applies to all tooltips */
.cm-tooltip-btn::before,
.cm-tooltip-btn + .tooltip-box{ text-align:left;  text-decoration:none; text-transform: none; font-size:1.3rem; font-weight:600;line-height:1.53;user-select: none; pointer-events: none; position: absolute; visibility:hidden;  filter:alpha(opacity=0); opacity:0; transition: all 0.4s;  transition-property:visibility, opacity;}
.cm-tooltip-btn::before { content: ''; border: 5px solid transparent;  z-index: 1001; }
.cm-tooltip-btn + .tooltip-box {/* content: attr(tooltip);  */ width: 50rem; padding: 2rem; background-color: #fff;  color:#666;border: 1px solid #949494; border-radius: 0.3rem; box-sizing: border-box;box-shadow: 2rem 2rem 4rem 0 rgba(0,0,0,0.1);z-index: 1000; }
.cm-tooltip-btn + .tooltip-box b {font-weight: 700; color: var(--main-color);}
/* .cm-tooltip-btn:hover::before,
.cm-tooltip-btn:hover::after {visibility:visible; filter:alpha(opacity=100);opacity:1;} */
/* .cm-tooltip-btn[tooltip='']::before,
.cm-tooltip-btn[tooltip=''] + .tooltip-box {display: none !important;} */
.cm-tooltip-btn:not([flow])::before,
.cm-tooltip-btn[flow^="up"]::before { bottom: 100%;border-bottom-width: 0; border-top-color: #949494;}
.cm-tooltip-btn:not([flow]) + .tooltip-box,
.cm-tooltip-btn[flow^="up"] + .tooltip-box { bottom: calc(100% + 5px);}
.cm-tooltip-btn:not([flow])::before,
.cm-tooltip-btn:not([flow]) + .tooltip-box,
.cm-tooltip-btn[flow^="up"]::before,
.cm-tooltip-btn[flow^="up"] + .tooltip-box {left: 50%; transform: translate(-50%, -.5em);}

/* FLOW: DOWN */
.cm-tooltip-btn[flow^="down"]::before {top: 100%;border-top-width: 0; border-bottom-color: #949494;}
.cm-tooltip-btn[flow^="down"] + .tooltip-box {top: calc(100% + 5px);}
.cm-tooltip-btn[flow^="down"]::before,
.cm-tooltip-btn[flow^="down"] + .tooltip-box { left: 50%; transform: translate(-50%, .5em);}

/* FLOW: LEFT */
.cm-tooltip-btn[flow^="left"]::before {top: 50%; border-right-width: 0; border-left-color: #949494; left: calc(0em - 5px);transform: translate(-.5em, -50%);}
.cm-tooltip-btn[flow^="left"] + .tooltip-box {top: 50%; right: calc(100% + 5px);transform: translate(-.5em, -50%);}

/* FLOW: RIGHT */
.cm-tooltip-btn[flow^="right"]::before { top: 50%; border-left-width: 0; border-right-color: #949494; right: calc(0em - 5px);transform: translate(.5em, -50%);}
.cm-tooltip-btn[flow^="right"] + .tooltip-box { top: 50%;left: calc(100% + 5px); transform: translate(.5em, -50%);}

/* KEYFRAMES */
@keyframes tooltips-vert {
  to {
  	visibility:visible; 
	opacity:1;
  }
}

@keyframes tooltips-horz {
  to {
    visibility:visible; 
	opacity:1;
  }
}

/* FX All The Things */ 
.cm-tooltip-btn[flow^="up"]:hover::before,
.cm-tooltip-btn[flow^="up"]:hover + .tooltip-box,
.cm-tooltip-btn[flow^="down"]:hover::before,
.cm-tooltip-btn[flow^="down"]:hover + .tooltip-box {
	visibility:visible; filter:alpha(opacity=100); opacity:1;
}

.cm-tooltip-btn[flow^="left"]:hover::before,
.cm-tooltip-btn[flow^="left"]:hover + .tooltip-box,
.cm-tooltip-btn[flow^="right"]:hover::before,
.cm-tooltip-btn[flow^="right"]:hover + .tooltip-box {
  visibility:visible; filter:alpha(opacity=100); opacity:1;
}

@media all and (max-width:800px){
	.cm-tooltip-btn + .tooltip-box {width: 25rem; word-break: break-word;}
}

/* -------- 온라인 문의 :: 공통 :: 첨부파일 custom  -------- */