@charset "utf-8";
/* =======================================================
	공통
========================================================*/
.mc--myinfo .mc--contents,
.mc--myinfo-gate .mc--contents,
.mc--leave .mc--contents,
.mc--mypassword .mc--contents,
.mc--shipping-write .mc--contents{max-width: 750px;}


.member-back {  width: 30px; height: 42px; box-sizing: border-box; vertical-align: middle; background-image: url("/AppData/images/mediacommerce/white/button/header_back_b.svg"); background-repeat: no-repeat; background-position: left center; background-size: 25px 30px;}

/* =======================================================
	회원가입
========================================================*/
.mc--container.mc--join .mc--contents{ max-width: 700px; }
.join-title { text-align: center; padding: 40px 0;}
.join-title h1{margin: 0;}
.mc--container.mc--join .input-btn-group .input-text { width:calc(100% - 195px) ; }
.input-btn-group .btn02 { width: 100px; }
.mc--container.mc--join .input-btn-group .btn { width: 185px; }

/* input-btn-group small  */
.mc--container.mc--join .input-btn-group.small { position: relative; margin-top: 10px; }
.mc--container.mc--join .input-btn-group.small .phone-input-box { width:calc(100% - 195px) ; float: left; display: inline-block; position: relative; }
.mc--container.mc--join .input-btn-group.small .input-text { width: 100%; }
.mc--container.mc--join .input-btn-group.small .num-time { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font-size: 14px; color:#61bbef; }
.mc--container.mc--join .input-btn-group.small .btn {  background-color: #61bbef; border-color: #61bbef; }

/* join-wrap */
.join-wrap{max-width: 700px;}
/* join-header */
.join-header {width: 100%; padding: 20px 20px; box-sizing: border-box; display: none;}
.join-header:after {content: ""; clear: both; display: block; height: 0; visibility: hidden; }

.join-header .title {float: left; line-height: 22px; }

.join-header .page-step {position: relative; float: right; }
.join-header .page-step li {float: left; background-image: url("/AppData/images/mediacommerce/white/etc/join_step.png"); background-repeat: repeat-x; background-position: center left; }
.join-header .page-step li + li {padding-left: 5px; }
.join-header .page-step li span {display: block; width: 22px; height: 22px; overflow: hidden; border-radius: 999px; background-color: #d5d5d5; font-size: 12px; color: #fff; text-align: center; line-height: 20px; }
.join-header .page-step li.current span {
  background-color: #3b3b3d;
  font-weight: 500;
}


/*회원가입 추가 사항*/
.join-text{margin-bottom:30px; padding:20px 20px 18px; color:#666; background-color:#f5f5f5; box-sizing:border-box;}
.join-text li{padding-bottom:3px; word-break: keep-all; }
.join-text li:last-child{padding-bottom:0;}
/* .join-text li:nth-child(3){padding-top:10px;} */
.join-text .text-strong{font-weight:600;}
.join-br { display: block; }
.join-num { display:none; }

/*자격증, 사업자증록증 공통*/
.add-certi{width:100px; height:36px; text-align:center; line-height:36px; color:#fff; background-color:#222; cursor:pointer;}
.file-name{white-space:break-spaces; text-align:left !important;}
.file-delete{width:24px; height:24px; background-image:url("/AppData/images/site/icon/icon_cancel.png"); background-repeat:no-repeat; background-position:center center; background-size:20px auto; border-radius:999px; vertical-align:middle; cursor:pointer;}

/* 주소 */
.address-group .adrs-input-01{float:left; width:calc(100% - 130px);}
.address-group .find-adrs{float:left; width:120px; height:40px; margin-left:10px; text-align:center; line-height:40px; color:#fff; background-color:#222; box-sizing:border-box;}
.input-text.adrs-input-02, .input-text.adrs-input-03{margin-top:10px;}

.psn-info-area{ width:100%; padding:20px; border:1px solid #ddd; box-sizing:border-box; margin-top: 30px;}
.psn-tit{display:inline-block; padding-bottom:15px; font-size:20px;}

.biz-info-area{display:none; width:100%; padding:20px; border:1px solid #ddd; box-sizing:border-box; margin-top: 30px;}
.biz-tit{display:inline-block; padding-bottom:15px; font-size:20px;}


/*회원가입 신청 완료 팝업*/
#apply_popup{display:none; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); width:100%; max-width:300px; text-align:center; background-color:#fff; border-radius:5px; box-sizing:border-box; box-shadow:0 2px 6px rgba(0, 0, 0, 0.2); z-index:9002;}
.apply-icon-area{position:relative; width:70px; height:70px; margin:30px auto 15px; background-color:#61bbef; background-image:url("/AppData/images/site/common/icon_check.png"); background-repeat:no-repeat; background-position:center center; background-size:44px auto; border-radius:999px;}
.apply-txt-area .apply-tit{font-size:20px;}
.apply-txt-area .apply-txt{padding-top:3px; font-size:14px; color:#5c5c5c;}
.apply-btn-area{margin-top:30px;}
.apply-btn-area .apply-confirm{width:100%; height:45px; text-align:center; line-height:45px; color:#fff; font-size:16px; background-color:#4c4c4c; border-radius:0 0 5px 5px;}



/* agreement 약관동의
-----------------------------------------------*/
.mc--agreement {background-color: #fff; }
.mc--agreement .agreement-text {padding: 20px 0 40px; }
.mc--agreement .shop-img {display: block; margin: 0 auto 20px; width:100%; max-width: 300px; }
.mc--agreement .shop-title {display: block; margin: 0 auto 20px; font-size: 20px; font-weight: 700; text-align: center; }
.mc--agreement .agreement-text p {color: #666; text-align: center; }
.mc--agreement .agreement-container {padding: 20px 0; box-sizing: border-box; }

.mc--agreement .agreement-container .btn-group {padding: 0 20px; }


/* 앱카드 가입 */
.btn-join-group .app-card { margin-top: 20px; background-color: #3b5998; border-radius: 5px; color: #fff; font-size: 14px; }


/* sns 간편가입 */
.agreement-sns {padding: 20px 20px 0; border-top: 1px solid #dadbdf; }
.agreement-sns .title {font-size: 18px; color: #444; font-weight: 500; }
.agreement-sns .title strong {font-weight: 700; }
.agreement-sns .title-assistant {font-size: 13px; color: #888;}

.mc--agreement .btn-join-group {margin-top: 20px; box-sizing: border-box;}
.mc--agreement .btn-join-group .bgClr {border: 0; color: #fff; }
.mc--agreement .btn-join-group button + button {margin-top: 20px; }


.btn-join-group .btn-sns-kakao {border-color: #fae731 !important; background-color: #fae731 !important; color: #3b1e1e !important; }
.btn-join-group .btn-sns-facebook {border-color: #3b5998 !important; background-color: #3b5998 !important; color: #fff !important; }
.btn-join-group .icon-sns-join {padding-left: 30px; background-repeat: no-repeat; background-size: 18px 16px; background-position: left center;}
.btn-join-group .icon-naver {background-image: url("/AppData/images/site/sns/sns_naver.png"); }
.btn-join-group .icon-kakao {background-image: url("/AppData/images/site/sns/sns_kakao.png"); }
.btn-join-group .icon-facebook {background-image: url("/AppData/images/site/sns/sns_facebook.png"); }


/* join 정보입력
-----------------------------------------------*/
.mc--join .form-container {border-bottom: 0; }



/* welcome 가입완료
-----------------------------------------------*/

.mc--container.mc--welcome { text-align: center; background-color: #fff;}
.mc--welcome .welcome-title .icon-complete{}
.mc--welcome .welcome-title p { margin-top: 10px; }
.mc--welcome .mc--welcome-con{width: 90%; margin: 80px auto; max-width: 600px; min-height: calc(100vh - 668px);}
.welcome-container { padding: 0 20px; box-sizing: border-box; max-width: 600px; margin: 0 auto;  }
.welcome-text { margin-top: 50px; margin-bottom: 40px; background-color: #f5f5f5; padding: 20px; box-sizing: border-box; border-radius: 10px;}
.welcome-text .text-group:first-child { margin-bottom: 10px; }
.welcome-text .text-group p  { float: left; }
.welcome-text .text-group p:first-child { width: 40%; }
.welcome-text .text-group p:nth-child(2) { width: 60%; color: #222; font-weight: 500; }

.share-area{margin-top: 50px; background-color: #61bbef;  border-radius: 10px; padding: 30px;}
.share-area .txt{font-size: 18px; color: #fff; font-weight: 500; }
.share-area .code-box{ margin-top: 20px; background-color: #fff; border-radius: 10px; padding: 20px; font-weight: 600;}
.share-area .code-box .my-url{border: 1px solid #61bbef; padding: 10px; box-sizing: border-box; margin-top: 10px; color: #61bbef;}
.share-area .code-box .img-qr{box-sizing: border-box; margin: 20px auto; width: 200px; max-width: 80%;}
.share-area .code-box .img-qr img{width: 100%;}
.share-area .code-box .img-qr canvas{width: 100%;}
.share-area .code-box .btn-area button{min-width: 105px; background-color: #222; padding: 10px 12px 10px 35px; font-size: 14px; color: #fff; background-repeat: no-repeat; background-position: left 5px center; background-size: 28px; margin: 4px 2px;}
.share-area .code-box .btn-area .copy-url{ background-color: #e9eaee; color: #666; font-weight: 500; background-image: url("/AppData/images/mediacommerce/sns/copy.png");}
.share-area .code-box .btn-area .copy-qr{background-image: url("/AppData/images/mediacommerce/white/icon/icon_download_white.svg"); background-size: 14px; background-position: left 12px center;}
.share-area .code-box .btn-area .copy-kakao{background-color: #fbe300; color: #3b1e1e; font-weight: 500; background-image: url("/AppData/images/mediacommerce/sns/kakao.png");}


/* =======================================================
	leave 회원탈퇴
========================================================*/
/* welcome 가입완료
-----------------------------------------------*/
.mc--leave {
	padding-bottom: 90px;
	box-sizing: border-box;
}
.mc--leave .leave-text {
  padding: 40px 20px 40px;
}
.mc--leave .shop-img {
  display: block;
  margin: 0 auto 20px;
  max-width: 80%;
	text-align: center;
}
.mc--leave .shop-title {
  display: block;
  margin: 0 auto 20px;
  font-size: 20px;
  font-weight: 700;
  text-align: center;
}
.mc--leave .leave-text p {
 font-size: 14px;
 color: #666;
 text-align: center;
}


.leave-note {
	padding: 20px 20px;
  box-sizing: border-box;
  background-color: #f7f7f7;
}
.leave-note > ul > li {
  font-size: 14px;
  color: #666;
}
.leave-note > ul > li + li {
  margin-top: 20px;
}
.leave-note li > ul {
  margin-top: 5px;
}
.leave-note li > ul > li {
  font-size: 14px;
  color: #888;
}

.mc--leave .form-container {
	border-bottom: 0;
}
.mc--leave .checkbox-agree {
	margin-top: 30px;
  box-sizing: border-box;
}
.mc--leave .checkbox-agree label {
	font-size: 14px;
  font-weight: 500;
  color: #222;
}




/* =======================================================
	기본정보 수정
========================================================*/
/* 진입
-----------------------------------------------*/
.mc--myinfo-gate {
	background-color: #fff;
	box-sizing: border-box;
}
.mc--myinfo-gate .gate-text {
	text-align: center;
}
.mc--myinfo-gate .gate-text p {
  font-size: 16px;
  color: #222;
}


/* 수정
-----------------------------------------------*/
.mc--myinfo .checkbox-company {
	padding: 20px 20px;
	box-sizing: border-box;
	border-top: 1px solid #ececec;
}
.mc--myinfo .form-company-wrapper {
	display: none;
}

.mc--myinfo .myinfo-leave {
  padding: 20px 0 0;
  box-sizing: border-box;
}
.mc--myinfo .myinfo-leave:after {content: ""; clear: both; display: block; height: 0; visibility: hidden; }

.mc--myinfo .myinfo-leave p {
	float: left;
  font-size: 12px;
  color: #999;
}
.mc--myinfo .myinfo-leave .btn-text {
  float: right;
  font-size: 12px;
  color: #999;
  text-decoration: underline;
}




/* =======================================================
	배송지 리스트
========================================================*/
.mc--shipping .btn-group {
	padding: 20px 0px;
}
.shipping-group {
	background-color: #fff;
	border-bottom: 1px solid #e9eaee;
	margin-bottom: 20px;
}
.shipping-group .btn03 { border: 1px solid #888; color: #666; }

.shipping-header {
	position: relative;
	display: block;
	width: 100%; height: auto;
	box-sizing: border-box;
	background-color: #f5f5f5;
	padding: 15px;
}
.shipping-header:after {content: ""; clear: both; display: block; height: 0; visibility: hidden; }

.shipping-header.nodata {
	height: auto;
	padding: 100px 20px;
	box-sizing: border-box;
	font-size: 14px;
	color: #888;
	text-align: center;
}

.shipping-header strong {
	float: left;
	font-weight: 500;
	color: #222;
	line-height: 30px;
}
.shipping-header strong span {
	display:inline-block;
	padding:0 3px;
	font-size: 12px;
	font-weight: 400;
}
.shipping-header .btn-group {
	float: right;
	padding: 0;
}


.shipping-address {
	position: relative;
	padding: 15px;
	border-top: 1px solid #f2f2f2;
}
.shipping-address p {
	font-size: 14px;
	color: #444;
}
.shipping-address .shipping-info {
	margin-bottom: 10px;
	font-size: 13px;
	color: #666;
}
.shipping-info em {
	display: inline-block;
	position: relative;
	margin: 0 10px;
	padding-left: 11px;
	font-style: normal;
	font-weight: 400;
	color: #666;
}
.shipping-info em:after {
	content: "";
	position: absolute;
	left: 0; top: 3px;
	display: inline-block;
	width: 1px; height: 14px;
	background-color: #bbb;
	line-height: 20px;
}
.shipping-list li {
	border-bottom: 1px solid #e9eaee;
}
.shipping-list li:last-of-type {
	border-bottom: 1px solid #dadbdf;
}
.shipping-list li.nodata {
	padding: 100px 0;
	box-sizing: border-box;
	background-color: #fff;
	font-size: 14px;
	color: #888;
	text-align: center;
}

/* =======================================================
	배송지 등록
========================================================*/
.mc--shipping-write .checkbox-delivery {
	margin-top: 10px;
  font-size: 14px;
  font-weight: 400;
  color: #666;
}


/* =======================================================
	비밀번호 재설정
========================================================*/

.mc--pw-modify .logo { position: relative; }
.mc--pw-modify .logo a { display: block; text-align: center; margin-bottom: 30px; }
.mc--pw-modify .logo img { width: 100px; }

.mc--contents.mc--password-modify { max-width: 700px; padding:100px 20px 120px; }
.mc--contents.mc--password-modify .button-group { padding: 0 20px; }



/* =======================================================
	반응형 시작
========================================================*/
@media(max-width:960px){
	.join-title{display:none;}
	.join-text{margin-top:20px;}
}


@media(max-width:768px){
	.mc--container.mc--welcome { background-color: #fff; }
	.mc--welcome .mc--welcome-con { width: 95%; box-shadow: none; margin: 50px auto;}
	.mc--welcome-con.mc--password-modify{ padding: 100px 0px; }
	.mc--welcome-con.mc--password-modify .button-group { padding: 0 20px; }
	
	.join-title{padding: 20px 0;}
	.join-title h1{font-size: 22px;}

	.welcome-text { background-color: #f9f9f9; margin: 30px 0 20px;}
	.share-area{margin-top: 30px; padding: 20px;}
	.share-area .txt{font-size: 16px;}
	.share-area .code-box .my-url{font-size: 12px;}
	.share-area .code-box .btn-area button{min-width: auto;}
	.share-area .code-box .img-qr{max-width: 160px;}

	.mc--container.mc--join input::placeholder { font-size: 13px!important; }
	.mc--container.mc--join .input-btn-group .input-text { float: none; width: 100%; }
	.mc--container.mc--join .input-btn-group .btn{ float: none; width: 100%; margin-top: 5px; margin-left: 0; }

	.mc--container.mc--join .input-btn-group.small .phone-input-box { width: 100%; }
	.mc--container.mc--join .input-btn-group.small .input-text { float: left; width: 100%;  }
	.mc--container.mc--join .input-btn-group.small .btn{ }

	/* 주소 */
	.address-group .adrs-input-01{width:calc(100% - 105px);}
	.address-group .find-adrs{width:100px; margin-left:5px;}
	.input-text.adrs-input-02, .input-text.adrs-input-03{margin-top:5px;}



}
@media(max-width:570px) { 
	.join-num { display:block; }
	.join-br { display:none; }

}
@media(max-width:500px) { 
	.mc--join .form-container .form-field { padding: 0; }
	.mc--join .form-container .form-header { padding-left: 0; }
	.join-header { padding: 20px 0; }

	.join-num { display:none; }
	.mc--join .button-group { margin-top: 20px; }
	.mc--join .radiobox input[type="radio"] + label{width: 100%; margin-right: 0; margin-bottom: 10px;}

	.welcome-container{padding: 0 10px;}
	.share-area .code-box .img-qr{max-width: 80%; width: 120px; }
	.share-area .code-box .btn-area button{width: 100%; display: block; margin: 10px 0; padding: 14px 0;}


}