@import url("/ASP/resources/css/common/common.css");

/*
width:738px;
	height:888px;
*/

.kakaoSyncHeader{
	width:738px;
    height: 50px;
    box-sizing: border-box;
    background: #fff;
    line-height: 50px;
    text-align: center;
	font-size: 16px;
   	color: #212529;
   	border-bottom: 1px solid #ccc;
}

.kakaoSyncHeader img{
	width:15%;
}

.contentArea {
    padding: 0;
    text-align: center;
    position:relative;
	margin-top:60px;    
}

.contentArea .title {
    display: block;
    margin-bottom: 50px;
    font-size: 24px;
    line-height: 1.4;
    color:#000;
    font-weight: bold;
}

.btnArea{
	height:429px /* 높이 825px */
/* 	height:484px; */
}

#kakaoAuthBtn,#phoneAuthBtn{
	width:60%;
}

.grayDiv{
	width:100%;
	padding:20px 0 10px 0;
	background:#eee;
	text-align: left;
}

.grayDiv div{
	width:90%;
	margin:0 auto 10px 6.5%;
}

.grayDiv div.grayDivText{
	font-size:16px;
	margin:0 auto 15px 6.5%;
	padding:0;
}

#companyImgList img{
	width:10%;
	margin:0 5px 5px 0;
}

.kakaoSyncFooter{
    width: 738px;
  	height: 60px;
    padding-top:11px;
    text-align: center;
    font-size: 11px;
   	background-color: #666;
   	color: #aaa;
}


#popaAgreeLayer{
	display:none;
/* 	position:absolute; */
	position:fixed;
	border-radius:10px;
	width:400px;
	height:90wh;
	padding:10px 0;
	background:#fff;
	z-index:12;
	top:30%;
}

#popaAgreeConLayer{
	display:none;
	position:absolute;
	position:fixed;
	border-radius:10px;
	width:400px;
	height:90wh;
	padding:10px 0;
	background:#fff;
	z-index:13;
	top:30%;
}

#popaAgreeConLayer .popaAgreeConLayerClose{
	width:95%;
 	margin:0 auto;
}
#popaAgreeConLayer iframe{
	width:95%;
	margin:0 auto;
	border:0;
}

#popaAgreeConLayer iframe{
	width:95%;
	margin:0 auto;
	border:0;
}
.popaAgreeLayerTitleArea{
	display:table;
	width:95%;
	margin:0 auto;
}

.popaAgreeLayerTitle{
	display:table-row;
}

.popaAgreeLayerTitle div{
	display:table-cell;
	height:30px;
	padding:0 0 10px 0;
	border-bottom:1px solid #999;
}

.popaAgreeLayerTitle div:first-child{
	width:20%;
	text-align: center;
	vertical-align:top;
}

.popaAgreeLayerTitle div:last-child{
	width:77%;
	font-size:15px;
	vertical-align:middle;
	text-align:left;
	padding-left:3%;
	line-height:18px;
}

.popaAgreeLayerContent{
	margin: 15px auto 0 auto;
	width:95%;
	height:280px;
	text-align: left;
	position: relative;
}

.popaAgreeDiv{
	display:table;
	width:95%;
	margin:0 auto;
	position: relative;
}

.popaAgreeDiv.sub{
	width:90%;
}

.popaAgreeDiv.last{
	margin:0 auto 20px auto;
}

.popaAgreeDivTr{
	display:table-row;
}
.popaAgreeDivCell{
	display:table-cell;
	padding:0 0 10px 0;
	font-size:13px;
	color:#999;
}
.popaAgreeDivTr .popaAgreeDivCell:first-child{
	width:75%;
	padding: 0 0 15px 10%;
}
.popaAgreeDivTr .popaAgreeDivCell:last-child{
	width:15%;
	text-align: right;
}

.popaAgreeDivCell input[type=checkbox]{
	vertical-align: -3px;
	position:absolute;
	opacity:0;	
}

/* 전체동의 동그라미 체크 안 했을 때 */
.popaAgreeDivCell label[for=popaAgreeAll] .checkShapeArea{
	border:2px solid #ccc;
	position:absolute;
	top:-2px;
	left:0;
	width:18px;
	height:18px;
	border-radius:12px;
} 	

/* 전체동의 동그라미 체크 했을 때 */
.popaAgreeDivCell input[name=popaAgreeAll]:checked + label[for=popaAgreeAll] .checkShapeArea{
	border:2px solid #a74ac7;
} 

/* 동의 체크모양 체크 안 했을 때 */
.popaAgreeDivCell label .checkShapeArea .checkShape{
	width:10px;
	height:6px;
	border:2px solid #ccc;
	border-left:none;
	border-bottom:none;
	transform:rotate(135deg);
	-ms-transform:rotate(135deg);
	-webkit-transform:rotate(135deg);
	-o-transform:rotate(135deg);
	-moz-transform:rotate(135deg);
	position:absolute;
	top:3px;
	left:5px;
}

/* 전체 동의 체크모양 체크 안 했을 때 */
.popaAgreeDivCell label[for=popaAgreeAll] .checkShapeArea .checkShape{
	top:3px;
	left:3px;
}

/* 동의 체크모양 체크 했을 때 */
.popaAgreeDivCell input[name=popaAgreeAll]:checked + label .checkShapeArea .checkShape ,
.popaAgreeDivCell input[name=popaAgree]:checked + label .checkShapeArea .checkShape{
	border:2px solid #a74ac7;
	border-left:none;
	border-bottom:none;
}

.kakaoSyncLayerBtn{
	width:100%;
	height:55px;
	text-align:center;
	background:#aaa;
	color:#fff;
	border:none;
	border-radius:10px;
	border-top-left-radius:0;
	border-top-right-radius:0;
	margin-bottom:10px;
	font-size:15px;
}

#popaAgreeBtn.on{
	background:#9d36d1;
	color:#fff;
}

#kakaoSyncAlphaLayer{
	z-index:11;
	position:fixed;
	display:none;
	width:100%;
	height:100%; 
	top:0px;
	left:0px;
	background: #666;
	
	/* filter:alpha(opacity:40);
	-webkit-filter:alpha(opacity:40); 
	-moz-filter:alpha(opacity:40); 
	-o-filter:alpha(opacity:40); 
	-ms-filter:alpha(opacity:40); 
	opacity:1;  */
}

#popaAgreeConTitleDiv{
	font-size:14px;
	font-weight: bold;
	border-bottom:1px solid #ccc;
	letter-spacing:-2px;
	height:29px;
	color:#000;
	text-align: center;
}

.biz_contentArea {
	width:100%;
	display: flex;
	flex-direction: column;
	align-items: center;	
}

.biz_btnArea {
	width:100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	height:429px;
	margin-top: 78px;	
}

.biz_titleBox {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.biz_titleBox .biz_headerImgBox {
	margin-top:18px;
	margin-bottom:34px;
}

.biz_titleBox .biz_headerImgBox .biz_headerImg{
	width: 100px;
	height: 74px;
}

.biz_titleBox .biz_title {
	margin: 0;
	margin-bottom:16px;
	font-size: 18px;
	color: #121923;
	font-weight: 400;
}

.biz_titleBox .biz_bold {
	font-weight: 700;
	font-size: 18px;
	color: #121923;
}

.biz_imgContainer {
	display: grid;
	grid-template-columns: 1fr;
/* 	align-items: center; */
	background-color: #F5F7F8;
	padding: 33px 60px 13px;
	border-radius: 12px;
	margin: 32px 40px;
}


.biz_row {
	display: flex;
	align-items:center;
	justify-content:center;
	margin-bottom: 20px;
	width: 100%;
}

.last_row {
	margin-bottom: 0;
	
}

.biz_row .biz_imgBox {
	display: flex;
    justify-content: center;
	align-items: center;
	width: 27%;
	
}

.biz_urm {
	width: 82%;
}


.biz_row .biz_img {
	width: 80%;
}



.biz_buttonBox {
	
	display: flex;
/* 	flex-direction: column; */
	align-items: center;
	justify-content: center;
}

.biz_buttonBox > img {
	width: 70%;
}

.biz_kakaoSyncFooter {
	margin-top: 230px;
	margin-bottom:28px;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.biz_kakaoSyncFooter > p {
	margin: 0;
	font-size: 14px;
}

a.telNumber {
	position: relative;
	padding-right: 10px;
}

a.telNumber::after {
	content: "|";
	width: 5px;
	height: 50px;
	color:black;
	position: absolute;	
}

.biz_bottomLinkBox {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 16px;
}

.biz_bottomLink {
	font-size: 14px;
	font-weight: bold;
	color:#333333;
}

.biz_bottomLink > a {
	display: flex;
	align-items: center;
	justify-content: center;
}



.biz_bottomLinkImg {
	width: 5px;
	margin-left: 3px;
}


/* 라쿠카라차 */

.lacucaracha_imgContainer {
	display: grid;
	grid-template-columns: 1fr;
	background-color: #fff;
	margin: 38px 20px;
	padding: 0 ;

}

.lacucaracha_kakaoSyncFooter{
	margin-top: 230px;
	margin-bottom:28px;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.lacucaracha_kakaoSyncFooter > p{
	font-size: 8px;
}

.lacucaracha_bottomLinkBox {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 16px;
}

.lacucaracha_bottomLink {
	font-size: 9px;
	font-weight: bold;
	color:#333333;
}

.lacucaracha_bottomLink > a {
	display: flex;
	align-items: center;
	justify-content: center;
}

.lacucarachaMobileTable {
	margin: 0 auto;
}

@media (max-width: 711px){
	.biz_main {
	padding: 0;
	}
	.biz_btnArea {
	margin-top: 60px;
	}
	
	.biz_titleBox .biz_headerImgBox .biz_headerImg{
	width: 90px;
	height: 64px;
	}
	
	.biz_titleBox .biz_title {
	font-size: 16px;
	}
	
	.biz_titleBox .biz_bold {
	font-size: 16px;
}
	
	.biz_imgContainer {
	background-color: #fff;
	margin-bottom: 38px;
	margin-top: 38px;
	padding: 0 ;
	margin-left: 20px;
	margin-right: 20px;
	
	}
	
	.biz_row .biz_imgBox {
		width: 50%;
	}
	
	.biz_buttonBox > img {
	width: 60%;
	}
	
	.biz_kakaoSyncFooter > p{
	font-size: 8px;
	}
	
	.biz_bottomLink {
	font-size: 9px;
	}

	a.telNumber::after {
		content: '';
	}
}