@charset 'UTF-8';

body {
	margin: 0;
	padding: 10px;
	font-family: sans-serif;
	background:url('../../img/bg.jpg') no-repeat;
	background-size: cover;
}




/*탭메뉴1*/

input[type='radio'][id*='tab']{display:none;}

input[type='radio'][id*='tab'] + label {display:inline-block; padding:20px;	background:#ccc; color:#999; font-size:20px; cursor:pointer; margin:0 auto;}

input[type='radio'][id*='tab']:checked + label {background:#19182d; color:#FFFFFF; margin:0 auto;}


.conbox1 {width:100%; height:auto; min-height:1200px; background:#19182d; margin:0 auto; display:none;}


input[id='tab00']:checked ~ .con10 {display:block;}
input[id='tab01']:checked ~ .con11 {display:block;}
input[id='tab02']:checked ~ .con12 {display:block;}
input[id='tab03']:checked ~ .con13 {display:block;}
input[id='tab04']:checked ~ .con14 {display:block;}



.conbox1 .inputBox {
	position: relative;
}

.conbox1 .inputBox input {
	position: relative;
	top:0;
	left:0;
	width: 70%;
	padding: 10px 10px;
	font-size: 2.5rem;
	color: #fff;
	letter-spacing: 1px;
	margin-bottom: 30px;
	border: none;
	border-bottom: 1px solid #fff;
	outline: none;
	background: transparent;
}

.conbox1 .inputBox input::placeholder {
	text-align:right;
}



.conbox1 .inputBox label {
	position: absolute;
	top: 0;
	left: 15%;
	letter-spacing: 1px;
	padding: 10px 0;
	font-size: 2rem;
	color: #fff;
	pointer-events: none;
	transition: .5s;
}

.conbox1 .inputBox input:focus ~ label,
.conbox1 .inputBox input:valid ~ label {
	top: -25px;
	left: 14%;
	color: #03a9f4;
	font-size: 1.5rem;
}



.conbox1 input[type='submit'] {
	background: transparent;
	width: 80%;
	border: none;
	outline: none;
	font-size:30px;
	color: #fff;
	background: #03a9f4;
	padding: 10px 20px;
	cursor: pointer;
	border-radius: 5px;
}



/*input + label (남자 여자)*/


input[type='radio'][id*='sex']
{
	display:none;
}


input[type='radio'][id*='sex'] + label
{
	font-size:40px;
	color:#FFFFFF;
}

input[type='radio'][id*='sex']:checked + label
{
	display:inline-block;
	font-size:40px;
	color:#FFA500;
}


/*input + label (아버님 어머님)*/


input[type='radio'][id*='parent']
{
	display:none;
}


input[type='radio'][id*='parent'] + label
{
	font-size:40px;
	color:#FFFFFF;
}

input[type='radio'][id*='parent']:checked + label
{
	display:inline-block;
	font-size:40px;
	color:#FFA500;
}


/*input + label (학생 선생님)*/


input[type='radio'][id*='LEVEL']
{
	display:none;
}


input[type='radio'][id*='LEVEL'] + label
{
	font-size:40px;
	color:#FFFFFF;
}

input[type='radio'][id*='LEVEL']:checked + label
{
	display:inline-block;
	font-size:40px;
	color:#FFA500;
}







/*input + label (학생 선생님)*/


input[type='radio'][id*='school_grade']
{
	display:none;
}


input[type='radio'][id*='school_grade'] + label
{
	font-size:25px;
	color:#FFFFFF;
	margin-right:20px;
}

input[type='radio'][id*='school_grade']:checked + label
{
	display:inline-block;
	font-size:30px;
	color:#FFA500;
	margin-right:20px;
}










/*모달 윈도우*/


input[id*="IdCheck"]
{
	display:inline-block;
	position:relative;
	top:30%;
	width:80%;
	height:40px;
	background:#FDCD8C;
	font-size:35px;
}


input[id*="popup"]
{
	display:none;
}


input[id*="popup"] + label
{
/*	display:inline-block;
	padding:20px;
	background:#ffcd41;
*/	color:#FF0000;
}


input[id*="popup"] + label + div
{
	display:inline-block;
	position: relative;
	top:0;
	left:0;
	width:100%;
	height:100%;



}



input[id*="popup"] + label + div > div
{
	position:absolute;
	top:10%;
	left:50%;
	transform:translate(-50%, 0%);
	width:500px;
	height:300px;
	padding:auto;
	background:#fff;
	z-index:2;
	opacity:0; visibility:hidden; transition:1s;
}

input[id*="popup"]:checked + label + div > div
{
	opacity:1; visibility:visible; 
}



input[id*="popup"] + label + div > div > label
{
	position:absolute;
	top:0%;
	right:0%;
	transform: translate(40%, -40%);
	padding:20px;
	background:#dd5347;
	border-radius:100%;
	z-index:1;
}

input[id*="popup"]:checked + label + div > label
{
	opacity:0; visibility:hidden; transition:1s;
}



input[id*="popup"]:checked + label + div > label
{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background:rgba(0,0,0,.9);
	z-index:1;
	opacity:1; visibility:visible; 
}