@charset "utf-8";

header, footer, nav, section, article, aside {display:block;}
* { margin: 0; padding: 0; box-sizing: border-box; }
h1,h2,h3,h4,h5,h6,ol,ul,li,form,fieldset,input,textarea,p,th,td,dt,dd,dl {margin:0;padding:0;}
h1,h2,h3,h4,h5,h6 {font-size:12px;}
li {list-style:none;}
img,fieldset {border:0;vertical-align:top;}
em {font-style:normal;}
input.radio {width:13px; height:13px; vertical-align:middle;}
address,em,i {font-style:normal;}
.hdn, legend,table caption{font-size:0; height:0; overflow:hidden; position:absolute;visibility:hidden; width:0; line-height:0;}
table caption{font-size:0; height:0; overflow:hidden; position:static;visibility:hidden; width:0; line-height:0;}
a {text-decoration:none; color:inherit;}
input:focus { outline: none; }
select:focus { outline: none; }

button { border: 0; padding: 0; background: transparent; transition: all 0.3s ease; cursor: pointer; outline: none; }
input { border: 0; padding: 0; background: transparent; }
input:focus { outline: none; }

html { height: 100%; }
body { font-family:'Noto Sans KR','Apple SD Gothic Neo',arial,sans-serif; font-size: 12px; font-weight: normal; margin: 0px; height: 100%; background-color: #010101; line-height: 1.2; }

::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-thumb { border-radius: 10px; }

.wrap { position: relative; width: 100%; height: 100%; margin: 0; padding: 0; border: 15px #fe01fa solid; box-shadow: inset #fe01fa 0 0 50px 2px; }

.login-pp-wrap { position: absolute; width: 100%; height: 100%; top: 0; left: 0; }
.login-pp-wrap .inner-wrap { position: relative; width: 100%; height: 100%; }

.login-form-div { position: absolute; width: 440px; left: 50%; margin-left: -220px; top: 100px; }
.form-wrap { display: block; padding: 40px; position: relative; }
.form-wrap .toplogo { display: block; text-align: center; }
.form-wrap .toplogo span { width: 100%; display: inline-block; margin: 0 auto; }
.form-wrap .toplogo span img { width: 100%; }
.form-wrap h1 { display: block; text-align: center; font-size: 20px; color: #444; padding: 20px 0 0; }
.form-wrap h2 { display: block; text-align: center; font-size: 14px; color: #444; padding: 2px 0 0; font-weight: normal; }
.form-wrap h3 { display: block; text-align: center; font-size: 12px; color: #999; padding: 30px 0 0; font-weight: normal; }
.form-wrap h4 { display: block; text-align: center; padding: 10px 0 0; font-weight: bold; font-size: 30px; color: #fc03e3; }
.form-wrap .input-layer { display: block; padding: 10px 0 0; }
.form-wrap .input-layer .input-box { display: block; height: 55px; border: 1px #222 solid; padding: 0 10px 0; border-radius: 4px; margin: 0 0 10px; }
.form-wrap .input-layer .input-box input { color: #fff; text-align: center; }

input { width: 100%; height: 55px; font-size: 20px; color: #000; }
input::placeholder { font-size: 14px; color: #999; }

.button-position { display: block; margin: 10px 0 0; }
.button-position .access { display: block; border-radius: 4px; background: linear-gradient(#f9ef01, #ffaf00); padding: 12px 0; text-align: center; color: #111; font-size: 16px; width: 100%; margin: 0 0 5px; }

@media screen and (max-width: 800px) {
	
	.login-form-div { width: 320px; left: 50%; margin-left: -160px; top: 50px; }
	.form-wrap { padding: 30px; }
	.form-wrap h4 { font-size: 20px; }
	.form-wrap .toplogo span img { width: 80%; }
	
}