body {margin:0; padding:0;}
#wrap {width:100%; margin:0 auto; position:relative;}
#header {width:100%; height:150px; background:#fff; position:relative; border-bottom:1px solid #bbbbbb;}

#login_area {width:88%; margin:0 auto; padding:70px 0;}
#login_id {background:#f2f2f2; padding:60px; border:1px solid #d9d9d9;}
.title_id li {font-size:2.5em; color:#414141; letter-spacing:-1px; margin-top:10px; margin-bottom:40px; }
.title_id_02 li {font-size:2.5em; color:#414141; letter-spacing:-1px; margin-top:10px; margin-bottom:40px;}

.input_id {font-size:2.3em; font-weight:bold; width:100%;}
.input_id li {width:100%;
					  box-sizing:border-box;
					  -webkit-box-sizing:border-box;
					  -moz-box-sizing:border-box;
					  -o-box-sizing:border-box;
					  -ms-box-sizing:border-box;}
.input_id input {border:1px solid #d9d9d9; padding:30px 20px; width:100%; margin-bottom:20px; border-radius:7px;
							 box-sizing:border-box;}
.input_id input::-webkit-input-placeholder{color:#dadada;}
.input_id input::-moz-input-placeholder{color:#dadada;}
.input_id input::-ms-input-placeholder{color:#dadada;}

#login_parents {margin-top:80px; background:#f2f2f2; padding:60px; border:1px solid #d9d9d9;}

.m_home {position:absolute; top:24px; left:24px; background-color:#171948; border-radius:3px; width:105px; height:105px; display:inline-block; text-align:center;}
.m_home img {width:54px; margin-top:19px;}
.m_title { font-family:'NotoSansKR-Medium'; margin:0 auto; text-align:center; font-size:4.2em; color:#1d1d1d; padding:40px 0 0 0; font-weight:bold;}


/* button style */
.button {width:100%; text-decoration:none; display:inline-block; text-align:center; color:#fff;
				padding:.9em 0;
				text-shadow:0 1px 0 rgba(0,0,0,0.4);
				box-shadow:0 0 .05em rgba(0,0,0,0.4);
				-moz-box-shadow:0 0 .05em rgba(0,0,0,0.4);
				-webkit-box-shadow:0 0 .05em rgba(0,0,0,0.4);}

.button, .button span {-moz-border-radius: 5px; border-radius:5px;}
.button span {display:block;
						background-image: -moz-linear-gradient(45deg, rgba(0, 0, 0, 0.05) 25%, transparent 25%, transparent),
                      -moz-linear-gradient(-45deg, rgba(0, 0, 0, 0.05) 25%, transparent 25%, transparent),
                      -moz-linear-gradient(45deg, transparent 75%, rgba(0, 0, 0, 0.05) 75%),
                      -moz-linear-gradient(-45deg, transparent 75%, rgba(0, 0, 0, 0.05) 75%);}

.button:active {position:relative; top:1px;}

/*button style */
.button-blue
	{cursor: pointer; background-color: #0e4fb1; display:block; padding:30px 0; text-align:center; color:#fff; border-radius:7px;}
.button-blue:active {background: #063e93;}

.button-orange
	{cursor: pointer;background-color: #79aeeb; display:block; padding:30px 0; text-align:center; color:#fff; border-radius:7px;}
.button-orange:active {background:#4c88ce;}

/* avalon logo area */
#logo_area {width:100%; margin:0 auto; text-align:center; margin:150px 0;}
#logo_area img {width:415px}

@media screen and (max-width:800px) {
	#header {height:65px;}
	.m_home {width:47px; top:9px; left:10px; height:47px;}
	.m_home img {width:19px; margin-top:12px;}
	.m_title {font-size:1.8em; padding:18px 0 0 0;}
	
	#login_area {width:80%; margin:0 auto; padding:45px 0;}
	#login_id {padding:40px;}
	.title_id li {margin-top:10px; margin-bottom:20px; font-size:1.8em;}
	.title_id img {width:145px;}
	.title_id_02 li {margin-top:10px; margin-bottom:20px; font-size:1.8em;}
	.title_id_02 img {width:208px;}

	.input_id {font-size:1em;}
	.input_id input {padding:.8em .6em; margin-bottom:10px; width:100%;}

	.button-blue, .button-orange {padding:20px 0;}

	#login_parents {margin-top:20px; padding:40px}

	/* avalon logo area */
	#logo_area {margin:60px 0;}
	#logo_area img {width:157px}
}

@media screen and (max-width:480px) {
	#header {height:50px;}
	.m_home {top:8px; left:8px; border-radius:3px; width:35px; height:35px;}
	.m_home img {width:15px; margin-top:9px;}
	.m_title {font-size:1.3em; padding:15px 0 0 0;}
	
	#login_area {width:90%; margin:0 auto; padding:25px 0;}
	#login_id {padding:25px 35px;}
	.title_id li {margin-top:10px; margin-bottom:15px; font-size: 1.2em;}
	.title_id img {width:145px;}
	.title_id_02 li {margin-top:10px; margin-bottom:15px; font-size: 1.2em;}
	.title_id_02 img {width:208px;}

	.input_id {font-size:1em;}
	.input_id input {padding:.5em .6em; margin-bottom:10px; width:100%;}

	.button-blue, .button-orange {padding:15px 0;}

	#login_parents {margin-top:20px; padding:35px}

	/* avalon logo area */
	#logo_area {margin:50px 0;}
	#logo_area img {width:157px}
}

@media screen and (max-width:320px) {
	#header {height:50px;}
	.m_home {top:8px; left:8px; border-radius:3px; width:35px; height:35px;}
	.m_home img {width:15px; margin-top:9px;}
	.m_title {font-size:1.3em; padding:15px 0 0 0;}
	
	#login_area {width:90%; margin:0 auto; padding:20px 0;}
	#login_id {padding:10px 20px;}
	.title_id li {margin-top:10px; margin-bottom:15px; font-size: 1.2em;}
	.title_id img {width:145px;}
	.title_id_02 li {margin-top:10px; margin-bottom:15px; font-size: 1.2em;}
	.title_id_02 img {width:208px;}

	.input_id {font-size:1em;}
	.input_id input {padding:.4em .6em; margin-bottom:10px; width:100%;}

	.button-blue, .button-orange {padding:13px 0;}

	#login_parents {margin-top:20px; padding:20px}

	/* avalon logo area */
	#logo_area {margin:50px 0;}
	#logo_area img {width:157px}
}