/*
+----------------------------------------------------------------------+
| Copyright (c) 2010 - 2024 SPEAKINGMAX @ WEAVERSBRAIN.Co.Ltd
+----------------------------------------------------------------------+
| 작업일 : 2024-12-19
| 파일설명 : 맥스 AI 사이트 회원가입 CSS
+----------------------------------------------------------------------+
| 작업자 : 최진영
+----------------------------------------------------------------------+
| 수정이력
|
+----------------------------------------------------------------------+ 
*/

@charset "utf-8";

/* PC 숨김처리 */
.joinWrap .section.visual,
.joinWrap .section.join .article.head .backBtn {
	display:none;
}

.joinWrap .section.join {
	padding:20px 20px 100px;
}


/* 레이아웃 */
.joinWrap .section.join .article:not(.head) {
	margin-top:40px;
}


/* 로고 */
.joinWrap .section.join .article.head {
	text-align: center;
}
.joinWrap .section.join .article.head .logoImg {
	width:134px;
}


/* 페이지 설명 텍스트 */
.joinWrap .section.join .article.pageDesc {
	margin-top:36px;
	text-align: center;
}
.joinWrap .section.join .article.pageDesc .title {
	color:#c362ff;
}


/* SNS 회원가입 */
.joinWrap .section.join .article.sns .btnLine {
	margin-top:10px;
	font-size:0;
}
.joinWrap .section.join .article.sns .btnLine .button {
	display:inline-block;
	width:48px;
	height:48px;
	margin:0 5px;
	border-radius:100%;
}
.joinWrap .section.join .article.sns .btnLine .button:first-child {
	margin-left:0;
}
.joinWrap .section.join .article.sns .btnLine .button.kakao {
	background:#fee500;
}
.joinWrap .section.join .article.sns .btnLine .button.naver {
	background:#03c75a;
}
.joinWrap .section.join .article.sns .btnLine .button .logoImg {
	width:16px;
}


/* 이용약관 */
.joinWrap .section.join .article.standard .agreeBox {
	margin-bottom:36px;
}
.joinWrap .section.join .article.standard .agreeBox .chkLine {
	margin:15px 0;
}
.joinWrap .section.join .article.standard .agreeBox .chkLine .flexBox {
	display:flex;
	justify-content: space-between;
	align-items: center;
}
.joinWrap .section.join .article.standard .agreeBox .chkLine .chkLabel {
	position:relative;
	padding-left:25px;
	color: #707070;
}
.joinWrap .section.join .article.standard .agreeBox .chkLine .poliPopBtn {
	color: #707070;
	text-decoration: underline;
}
.joinWrap .section.join .article.standard .agreeBox .chkLine.all {
	padding-bottom:10px;
	border-bottom:1px solid #d1d2d3;
}
.joinWrap .section.join .article.standard .agreeBox .chkLine input[type="checkbox"] {
	display:none;
}
.joinWrap .section.join .article.standard .agreeBox .chkLine input[type="checkbox"] + .chkLabel:before {
	content:'';
	display:block;
	position:absolute;
	top:50%;
	left:0;
	transform: translateY(-50%);
	width:16px;
	height:16px;
	background:#f1f1f1;
	border-radius:4px;
}
.joinWrap .section.join .article.standard .agreeBox .chkLine input[type="checkbox"]:checked + .chkLabel:before {
	background:#c362ff;
}


/* form 영역 */
.joinWrap .section.join .article.standard .formUIBox.type2 .innerBox {
	position:relative;
}
.joinWrap .section.join .article.standard .cautionList {
	margin-top:-10px;
	padding-left:25px;
}
.joinWrap .section.join .article.standard .cautionList .listItem {
	color:#888;
}
.joinWrap .section.join .article.standard .formUIBox .formUI.btn {
	padding-right:70px;
}
.joinWrap .section.join .article.standard .button.showPass {
	display: inline-block;
	position:absolute;
	top:10px;
	right:10px;
	width:20px;
	height:20px;
	background:transparent url('/assets/images/common/icon/icon_eye_off.png') no-repeat 0 0/20px;
	border:0;
	border-radius: 0;
}
.joinWrap .section.join .article.standard .button.showPass.showing {
	background-image:url('/assets/images/common/icon/icon_eye_on.png');
}
.joinWrap .section.join .article.standard .button.auth {
	display: inline-block;
	position:absolute;
	top:5px;
	right:10px;
	width: auto;
	height:auto;
	background: #fff;
	padding: 2px 10px;
	border-color:#cfcfcf;
	border-radius:8px;
}
.joinWrap .section.join .article.standard .button.auth.on {
	background: #c362ff;
    border-color: #c362ff;
}
.joinWrap .section.join .article.standard .formUIBox .formUI.auth {
	padding-right:130px;
}
.joinWrap .section.join .article.standard .authLimitTime  {
    position: absolute;
    top: 9px;
    right: 10px;
	color:#c362ff;
}


/* 회원가입 버튼 영역 */
.joinWrap .section.join .article.submit {
	margin-top:40px;
}


/* 약관 레이어 팝업 */
.policyPopWrap {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 10;
}
.policyPopWrap .popBg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.7);
}
.policyPopWrap .popInner {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height:100%;
	background:#fff;
}
.policyPopWrap .popInner .popCloseBtn {
	display:inline-flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	top: 0;
	left: 0;
	width:70px;
	height:70px;
}
.policyPopWrap .popInner .popCloseBtn .iconImg {
	width:24px;
}
.policyPopWrap .popInner .popTitle {
	display:flex;
	justify-content: center;
	align-items: center;
	height:70px;
}
.policyPopWrap .popInner .popContents {
	height:calc(100% - 70px);
}


@media only screen and (min-width : 480px) {

	.joinWrap.pc .section.join {
		width:480px;
		margin:0 auto;
	}

	.joinWrap.pc .section.join .article.standard .agreeBox .chkLine .poliPopBtn,
	.policyPopWrap.pc .popInner .popCloseBtn {
		transition: 0.3s all;
	}

	.joinWrap.pc .section.join .article.standard .agreeBox .chkLine .poliPopBtn,
	.joinWrap.pc .section.join .article.standard .agreeBox .chkLine .chkLabel,
	.policyPopWrap.pc .popInner .popCloseBtn {
		cursor:pointer;
	}

	.joinWrap.pc .section.join .article.standard .agreeBox .chkLine .poliPopBtn:hover,
	.policyPopWrap.pc .popInner .popCloseBtn:hover {
		opacity: 0.7;
	}

	.policyPopWrap.pc {
		left:50%;
		transform:translateX(-50%);
		width:480px;
	}

}

@media only screen and (min-width : 1024px) {

	.joinWrap.pc {
		display:flex;
		align-items: center;
		height:100%;
		padding:20px;
		background: linear-gradient(108.33deg, #E962FF -12.72%, #6AA5FF 133.8%, #4188F2 133.8%, #999999 133.8%, #E1FFAF 133.8%);
	}

	.joinWrap.pc .section.visual {
		display:block;
		position:relative;
		width:calc(100% - 480px);
		max-width:650px;
		height:100%;
	}

	.joinWrap.pc .section.visual .visualLogoImg {
		position:absolute;
		top:50%;
		left:50%;
		transform: translate(-50%, -50%);
		width:226px;
	}

	.joinWrap.pc .section.join {
		position:relative;
		height:80%;
		padding:70px 30px 20px;
		background:#fff;
		border-radius:8px;
	}

	.joinWrap.pc .section.join .innerBox {
		height:100%;
		padding:0 10px;
		overflow-x:hidden;
		overflow-y:auto;
	}

	/* 전체 스크롤바 스타일 */
	.joinWrap.pc .section.join .innerBox::-webkit-scrollbar {
		width: 6px;
	}

	/* 스크롤바 트랙 스타일 */
	.joinWrap.pc .section.join .innerBox::-webkit-scrollbar-track {
		background: #f3f3f3;
		border-radius: 10px;
	}

	/* 스크롤바 스타일 */
	.joinWrap.pc .section.join .innerBox::-webkit-scrollbar-thumb {
		background: #d9d9d9;
		border-radius: 10px;
	}

	/* 레이아웃 */
	.joinWrap.pc .section.join .article {
		margin-top:40px;
	}

	.joinWrap.pc .section.join .article.head {
		margin-top:0;
		text-align: left;
	}

	.joinWrap.pc .section.join .article.head .backBtn {
		display:block;
		position:absolute;
		top:24px;
		left:30px;
	}

	.joinWrap.pc .section.join .article.head .backBtn .iconImg {
		width:24px;
	}
	
	.joinWrap.pc .section.join .article.head .logoImg {
		display:none;
	}

	.joinWrap.pc .section.join .article.pageDesc {
		margin-top:0;
		text-align: left;
	}


	.policyPopWrap.pc {
		top:50%;
		transform:translate(-50%, -50%);
		width:calc(100% - 40px);
		max-width:1500px;
		height:calc(80% - 32px);
		border-radius:8px;
		overflow:hidden;
	}

}