@charset "utf-8";

/* =======================================================
	mc--login
========================================================*/
.mc--login {height: 100%; background-color: #fff; min-height: calc(100vh - 588px); padding-bottom: 0;}
.mc--login .mc--contents{ width: 90%; max-width: 600px; margin: 80px auto; max-height: 700px; padding: 50px !important;  background-color: #fff; min-height: auto;}
.mc--order-login .mc--contents { max-width: 600px; }

/* 팝업 로그인 */
.login-pop {overflow: hidden; max-height: 660px;}
.login-pop .login-intgr{margin: 30px auto 0;}

/* =======================================================
  tab
========================================================*/
.tab-login {
  position: relative;
	margin-top: 40px;
}
.tab-login ul::after{content: ''; display: block; clear: both;}
.tab-login ul li {
  position: relative;
  display: table-cell;
  width: 1%;
  text-align: center;
  vertical-align: middle;
	font-size: 16px;
	width: 50%;
	float: left;
	display: block;
  margin: 0 auto;
  line-height: 1;
  box-sizing: border-box;
	background-color: #f5f5f5;
	color: #888;
}
.tab-login .tab-menu {
	width: 100%;
	height: 100%;
  padding: 20px 20px;
	border-bottom: 1px solid #6ab5d5;
	box-sizing: border-box;
	white-space: initial;
}

.tab-login li a.current{border: 1px solid #6ab5d5; border-bottom: 0; color: #6ab5d5; background-color: #fff; font-weight: 700;}

.tab-contents {display: none;}
#intgrLogin{display: block;}



/* login-container */
.login-container {
	margin: 0 auto;
	padding: 40px 0 0;
	box-sizing: border-box;
	width: 600px;
	max-width: 100%;
}
.login-sns-btn.naver{ display: none; }
.login-wrapper {
	margin-bottom: 20px;
}
.login-title { text-align: center; clear: both;}
.login-title .tit02{display: none;}
.login-wrapper .input-wrap{position: relative; border: 1px solid #bbb;}
.login-wrapper .input-wrap + .input-wrap {
	margin-top: 10px;
}
.login-wrapper .input-wrap .input-text {
	height: 50px;
	line-height: 48px;
	border: none;
}
.login-wrapper .input-wrap .pw-input{width: calc(100% - 50px);}
.login-wrapper .input-wrap i{
	position: absolute;
	right: 20px;
	top: 50%;
	transform: translateY(-50%);
	width: 24px;
	height: 24px;
	cursor: pointer;
	filter: invert(60%);
}

.login-wrapper .input-wrap .pw-eye{
	background: url(../../images/mediacommerce/button/eye-regular.svg) no-repeat center;
	background-size: 90%;
}
.login-wrapper .input-wrap .pw-eye-slash{
	background: url(../../images/mediacommerce/button/eye-slash-regular.svg) no-repeat center;
	background-size: 100%;
}

.login-saveid {
	margin-top: 20px;
}
.login-saveid label {
	font-size: 13px;
	line-height: 20px;
	color: #666;
}

.login-btn-group {text-align: center;}
.login-btn-group button {margin-top: 15px; border-radius: 0;}
.login-btn-group button:first-child {margin-top: 0;}
.login-btn-group .btn-login{background-color: #6ab5d5; color: #fff; border: 1px solid #6ab5d5; width: 100%; font-size: 16px;}
.login-btn-group .btn-login:hover{background-color: #6ab5d5;}
.login-btn-group .btn-text-group{margin-top: 30px;}
.login-btn-group .btn-text-group a{margin: 0 4px; font-size: 14px;}

.other-btn-group {margin-top: 40px; box-sizing: border-box; text-align: center; }
.other-btn-group .text-guide + button {margin-top: 10px; }
.other-btn-group .btn.bgClr {border: 0; color: #fff; }
.other-btn-group .btn-text {margin-top: 20px; display: block; text-align: center; }
.other-btn-group .text-guide {text-align: left; }


/* 통합 로그인, 비회원 주문조회 */

/* 로그인 팝업 */
.popup-login{position: fixed; top: 0; left: 0; z-index: 1000; background-color: rgb(0 0 0 / 40%); width: 100%; height: 100%; display: none;}
.popup-login .pop-inner{max-width: 600px;  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: #fff; padding: 40px; box-sizing: border-box; height: 600px; }

.popup-login .pop-inner::after{content: ''; display: block; clear: both;}
.btn-close {
	width: 40px;
	height: 40px;
	box-sizing: border-box;
	vertical-align: middle;
	background-image: url(/AppData/images/mediacommerce/white/button/close.svg);
	background-repeat: no-repeat;
	background-position: left center;
	background-size: 100%;
	float: right;
}

/*간편 로그인*/
.login-easy{position:relative; text-align:center; z-index:1; margin-top: 40px; display: none;}
.login-easy .easy-txt{display:inline-block; padding:0 20px; font-size:14px; color:#999; background-color:#fff; box-sizing:border-box;}
.login-easy .easy-txt::after{content:""; position:absolute; top:10px; left:0; width:100%; height:1px; background-color:#ccc; vertical-align:middle; z-index:-1;}
.login-easy .easy-btn-group{margin:25px auto 0; text-align:center;}
.login-easy .easy-btn-group a{display:inline-block; width:50px; height:50px; margin-right:25px; font-weight:600; color:#222; line-height:50px; text-align:center; background-repeat:no-repeat; background-position: center; background-size: 40px; border-radius:50%; text-indent: -9999px; font-size: 0;}
.login-easy .easy-btn-group a:last-child{margin-right: 0;}
.login-easy .easy-btn-group a.login-kakao{background-color:#fee500; border:1px solid #fee500; background-image:url(/AppData/images/mediacommerce/sns/kakao.png);}
.login-easy .easy-btn-group a.login-naver{ margin-right: 0; color:#fff; background-color:#03c75a; border:1px solid #03c75a; background-image:url(/AppData/images/mediacommerce/sns/naver.png);}
/* .login-easy .easy-btn-group a.login-google{margin-right:0; background-color:#fff; border:1px solid #ddd; background-image:url(/AppData/images/mediacommerce/sns/google.png);} */

/* sns 로그인 */
/* .other-btn-group .simple-title {margin-bottom: 20px; background-image: url("/AppData/images/site/common/divider.png"); background-repeat: repeat-x; background-position: left 10px; }
.other-btn-group .simple-title strong {display: inline-block; font-weight: 400; color: #444; background-color: #fff; padding: 0 10px; }

.login-sns-btn-group li + li {margin-top: 20px; }

.login-sns-btn {display: block; width: 100%; height: 50px; border-radius: 5px; border: none; }
.login-sns-btn span {display: inline-block; padding-left: 23px; background-repeat: no-repeat; background-position: left center; background-size: 18px 16px; }

.login-sns-btn.naver { background-color: #1ec800; color: #fff; display: block; line-height: 50px; }
.login-sns-btn.naver span {background-image: url("/AppData/images/site/sns/sns_naver.png"); }

.login-sns-btn.kakao {background-color: #fee500; color: #444; }
.login-sns-btn.kakao span {background-image: url("/AppData/images/site/sns/sns_kakao.png"); }

.login-sns-btn.facebook {background-color: #3b5998; color: #fff; }
.login-sns-btn.facebook span {background-image: url("/AppData/images/site/sns/sns_facebook.png"); }

.login-guest { text-align: center; padding-top: 30px; border-top: 1px solid #ddd; margin-top: 30px; box-sizing: border-box;}
.login-guest p { color: #666; }
.login-guest a { margin-top: 10px; } */

/* =======================================================
	mc--find
========================================================*/
.mc--find {background-color: #fff; }
.mc--find .mc--contents { max-width: 750px; padding: 40px 20px !important;}
/* find-nav */
.find-nav {}
.find-nav:after {content: ""; clear: both; display: block; height: 0; visibility: hidden; }

.find-nav .find-menu {
	float: left;
	width: 50%; height: 50px;
	padding: 0 10px;
	background-color: #b0b0b0;
	border: none;
	box-sizing: border-box;
	font-size: 14px;
	font-weight: 400;
	line-height: 48px;
	color: #fff;
	text-align: center;
}
.find-nav .find-menu.current {
	background-color: #fff;
	color: #242424;
}



/* find-container */
.find-container {
	padding: 40px 0;
	box-sizing: border-box;
}
.find-container .find-wrapper {
	margin-bottom: 30px;
}
.find-container .radio-group {
	margin-bottom: 20px;
}
.find-container .input-text {
	height: 50px;
	line-height: 48px;
}
.find-container  .input-btn-group .input-text{	width: calc(100% - 195px);}
.find-container .input-text + .input-text {
	margin-top: 10px;
}
.find-container .input-btn-group {
	margin-top: 10px;
}
.find-container .btn-certification {
	height: 50px;
	width: 185px;
	line-height: 48px;
	background-color: #222;
	color: #fff;
	border: 1px solid #222;
}

.box-certification {
	margin-top: 20px;
	padding: 20px 20px;
	border: 1px solid #e9eaee;
	border-radius: 5px;
	box-sizing: border-box;
	background-color: #f7f7f7;
}
.box-certification .input-btn-group .input-text {
	height: 40px;
	width: calc(100% - 110px);
}
.box-certification .btn,
.box-certification .btn02 {
	width: 100px; height: 40px;
	line-height: 38px;
	border-radius: 0;
}
.box-certification dd p {
	margin-top: 10px;
	font-size: 12px;
	color: #888;
}

/* find-result-container */
.find-result-container {
	padding: 40px 20px 0;
	box-sizing: border-box;
}
.find-result-container p {
	text-align: center;
}
.find-result-container .result-wrapper {
	margin: 30px 0;
	padding: 20px 20px;
	border: 1px solid #e9eaee;
	border-radius: 5px;
	box-sizing: border-box;
	background-color: #f7f7f7;
}
.find-result-container .result-wrapper li {
	color: #444;
	font-size: 14px;
}
.find-result-container .result-wrapper li + li {
	margin-top: 20px;
}
.find-result-container .result-wrapper .date {
	font-size: 12px;
	color: #888;
}
.find-result-container .result-wrapper .date em {
	font-style: normal;
}
.find-result-container .btn-big + .btn-big {
	margin-top: 20px;
}



/* reset-container */
.reset-container {}
.reset-container > p {
	text-align: center;
}
.reset-wrapper {
	margin: 30px 0;
}
.reset-wrapper .form-field dt {margin-bottom: 5px; }
.reset-wrapper .form-field + .form-field {
	margin-top: 20px;
}

@media (max-width: 1024px) {
	.mc--login .mc--contents{ width: 95%; margin: 40px auto;}
}

@media (max-width:960px) {
	.mc--login{min-height: auto;}
	.popup-login{display: none !important;}

}

@media (max-width:768px) {
	.mc--login .mc--contents {padding: 10px!important;}
	.mc--login .login-intgr{position: unset; transform: none;}
}


@media (max-width:425px) {
	.tab-login ul li{font-size: 14px;}
	.mc--find .mc--contents{padding: 0 10px !important;}
	.find-container{padding: 30px 0;}
	.radio-group .radiobox{float: none; clear: both; margin-bottom: 10px;}
	.radio-group .radiobox::after{content: ''; display: block; clear: both;}
	.radio-group .radiobox + .radiobox{margin-bottom: 0; margin-left: 0;}
	.find-container .input-btn-group .input-text{width: 100%;}
	.find-container .btn-certification{margin-left: 0; width: 100%; margin-top: 10px;}
	.find-container .box-certification .btn02{width: 100%; margin-left: 0; margin-top: 10px;}
}