@charset "UTF-8";

html,
body { height:100%; }
body { font-family:'Spoqa Han Sans Neo'; }

#ly-Mask { width:100vw; height:100vh; background-color:rgba(0, 0, 0, .7); position:fixed; top:0; left:0; z-index:998; display:none; }

#ly-Layout { width:100%; height:100%; }
#ly-Layout:before { content:''; display:block; background:url('../../img/view/login/img-background.jpg') center center no-repeat; background-size:cover; }
#ly-Layout section header h1 { text-align:center; }
#ly-Layout section header h1 span { display:flex; justify-content:center; }
#ly-Layout section header h1 span:last-of-type { color:#3f3f3f; }
#ly-Layout section header h1 span img { vertical-align:top; }
#ly-Layout section form { border:none; }
#ly-Layout section form fieldset { border:none; }
#ly-Layout section form fieldset div.input dl dt { margin-bottom:6px; font-size:.75rem; font-weight:700; color:gray; }
#ly-Layout section form fieldset div.input dl dd input { border:.1px solid gainsboro; border-radius:6px; transition:all ease .2s; transition-property:border, background; }
#ly-Layout section form fieldset div.input dl dd input:focus { border-color:#251e1c; background-color:whitesmoke; }
#ly-Layout section form fieldset div.input dl dd input:hover { border-color:#251e1c; }
#ly-Layout section form fieldset div.input div.option label { display:flex; align-items:center; }
#ly-Layout section form fieldset div.input div.option label input + div { width:20px; height:20px; display:block; position:relative; }
#ly-Layout section form fieldset div.input div.option label input + div:after { width:100%; height:100%; display:block; content:''; position:absolute; top:0; left:0; border:.1px solid silver; border-radius:4px; background-color:transparent; background-size:cover; background-repeat:no-repeat; transition:all ease .2s; transition-property:border, background; }
#ly-Layout section form fieldset div.input div.option label input:enabled:focus + div:after,
#ly-Layout section form fieldset div.input div.option label input:enabled:hover + div:after { border-color:#251e1c; }
#ly-Layout section form fieldset div.input div.option label input:enabled:checked + div:after,
#ly-Layout section form fieldset div.input div.option label input:disabled:checked + div:after { border-color:#238bcb; background-color:#238bcb; background-image:url('../../img/common/img-obj-checkbox-checked-white.svg'); }
#ly-Layout section form fieldset div.button { width:100%; margin:auto; display:flex; gap:10px; }
#ly-Layout section form fieldset div.button div { flex:1; }
#ly-Layout section form fieldset div.button div button { width:100%; color:white; font-weight:700; border:.1px solid transparent; border-radius:6px; transition:all ease .2s; transition-property:border, background, color; }
#ly-Layout section form fieldset div.button div button[type='button'] { background-color:#8bcb23; }
#ly-Layout section form fieldset div.button div button[type='submit'] { background-color:#238bcb; }
#ly-Layout section form fieldset div.button div button[type='button']:focus,
#ly-Layout section form fieldset div.button div button[type='button']:hover { border-color:#8bcb23; color:#8bcb23; background-color:white; }
#ly-Layout section form fieldset div.button div button[type='submit']:focus,
#ly-Layout section form fieldset div.button button[type='submit']:hover { border-color:#238bcb; color:#238bcb; background-color:white; }
#ly-Layout section form fieldset p.error { border:.1px solid red; background-color:#fee; text-align:center; }
#ly-Layout section form fieldset p.error:empty { display:none; }
#ly-Layout section form fieldset p.error span { display:block; }
#ly-Layout section footer.logo { text-align:center; }
#ly-Layout section footer.logo img { vertical-align:top; }

/* Loading */
#ly-Loading { width:100vw; height:100vh; display:none; position:fixed; top:0; left:0; z-index:1000; background-color:transparent; overflow:hidden; }
#ly-Loading div.frame { width:100%; height:100%; display:flex; align-items:center; justify-content:center; }
#ly-Loading div.loading { position:relative; }
#ly-Loading div.loading > div { width:200px; height:200px; position:absolute; top:0; left:0; border-radius:50%; border:20px solid transparent; border-color:#0078e5 transparent #0078e5 transparent; }
#ly-Loading div.loading > div:nth-child(1) { -webkit-animation:lazyLoading 2s linear infinite; animation:lazyLoading 2s linear infinite; }
#ly-Loading div.loading > div:nth-child(2),
#ly-Loading div.loading > div:nth-child(4) { width:156px; height:156px; top:22px; left:22px; -webkit-animation:lazyLoadingReverse 1s linear infinite; animation:lazyLoadingReverse 1s linear infinite; }
#ly-Loading div.loading > div:nth-child(2) { border-color:transparent #003666 transparent #003666; }
#ly-Loading div.loading > div:nth-child(3) { border-color:transparent; -webkit-animation:lazyLoading 2s linear infinite; animation:lazyLoading 2s linear infinite; }
#ly-Loading div.loading > div:nth-child(3) div { width:100%; height:100%; position:absolute; -webkit-transform:rotate(45deg); transform:rotate(45deg); }
#ly-Loading div.loading > div:nth-child(3) div:before,
#ly-Loading div.loading > div:nth-child(3) div:after { width:20px; height:20px; content:''; display:block; position:absolute; top:-20px; left:70px; background:#0078e5; border-radius:50%; box-shadow:0 180px 0 0 #0078e5; }
#ly-Loading div.loading > div:nth-child(3) div:after { left:-20px; top:70px; box-shadow:180px 0 0 0 #0078e5; }
#ly-Loading div.loading > div:nth-child(4) { border-color:transparent; }
#ly-Loading div.loading > div:nth-child(4) div { width:100%; height:100%; position:absolute; -webkit-transform:rotate(45deg); transform:rotate(45deg); }
#ly-Loading div.loading > div:nth-child(4) div:before,
#ly-Loading div.loading > div:nth-child(4) div:after { width:20px; height:20px; content:''; display:block; position:absolute; top:-20px; left:48px; background:#003666; border-radius:50%; box-shadow:0 136px 0 0 #003666; }
#ly-Loading div.loading > div:nth-child(4) div:after { left:-20px; top:48px; box-shadow:136px 0 0 0 #003666; }
#ly-Loading div.loading { width:120px !important; height:120px !important; -webkit-transform:translate(-60px, -60px) scale(0.6) translate(60px, 60px); transform:translate(-60px, -60px) scale(0.6) translate(60px, 60px); }

#dg-Scanner { min-width:100%; min-height:100%; background-color:rgba(0, 0, 0, .8);  position:fixed; top:0; left:0; z-index:3; }
#dg-Scanner div.frame { max-width:450px; width:100%; margin:auto; display:flex; align-items:center; justify-content:center; position:absolute; top:0; left:0; right:0; bottom:0; }
#dg-Scanner div.layout { width:100%; max-height:calc(100% - 60px); background-color:white; border-radius:10px; display:flex; flex-direction:column; overflow:hidden; }
#dg-Scanner div.layout ul { display:flex; list-style:none; }
#dg-Scanner div.layout ul li { flex:1; }
#dg-Scanner div.layout ul li button { width:100%; color:gray; background:none; border:none; border-bottom:3px solid gainsboro; transition:all ease .2s; transition-property:background, border, color, height; }
#dg-Scanner div.layout ul li button:focus,
#dg-Scanner div.layout ul li button:hover { color:black; background-color:whitesmoke; }
#dg-Scanner div.layout ul li button[data-active='true'] { color:black; font-weight:bold; background-color:#238bcb; border-bottom-color:midnightblue; color:white; }
#dg-Scanner div.wrap { overflow:auto; }
#dg-Scanner div.wrap > div { padding:50px 50px 40px 50px; display:none; text-align:center; }
#dg-Scanner div.wrap > div[data-active='true'] { display:block; }
#dg-Scanner div.wrap > div > div img { transition:all ease .2s; transition-property:width; }
#dg-Scanner div.wrap > div p { margin-top:20px; }
#dg-Scanner div.close { border-top:.1px solid gainsboro; display:flex; align-items:center; justify-content:center; }
#dg-Scanner div.close button { width:100%; height:50px; color:black; background:none; border:none; transition:all ease .2s; transition-property:background; }
#dg-Scanner div.close button:focus,
#dg-Scanner div.close button:hover { background-color:whitesmoke; }

@keyframes lazyLoading {
	0% { -webkit-transform:rotate(0); transform:rotate(0); }
	100% { -webkit-transform:rotate(360deg); transform:rotate(360deg); }
}

@-webkit-keyframes lazyLoading {
	0% { -webkit-transform:rotate(0); transform:rotate(0); }
	100% { -webkit-transform:rotate(360deg); transform:rotate(360deg); }
}

@keyframes lazyLoadingReverse {
	0% { -webkit-transform:rotate(0); transform:rotate(0); }
	100% { -webkit-transform:rotate(-360deg); transform:rotate(-360deg); }
}

@-webkit-keyframes lazyLoadingReverse {
	0% { -webkit-transform:rotate(0); transform:rotate(0); }
	100% { -webkit-transform:rotate(-360deg); transform:rotate(-360deg); }
}

/* Mobile */
@media (max-width: 767.9px) {
	#ly-Layout:before { width:100%; height:100%; position:fixed; top:0; left:0; z-index:1; }
	#ly-Layout section { min-width:100%; min-height:100%; padding:5vw; display:flex; align-items:center; position:absolute; top:0; left:0; z-index:2; }
	#ly-Layout section div.layout { max-width:450px; width:100%; margin:auto; padding-top:30px; padding-bottom:10px; background-color:rgba(255, 255, 255, .95); border-radius:10px; box-shadow:0 5px 5px rgba(0, 0, 0, .5); transition:all ease .2s; transition-property:background, max-width; }
	#ly-Layout section div.layout:focus-within,
	#ly-Layout section div.layout:hover { background-color:rgba(245, 245, 255, .95); }
	#ly-Layout section div.wrap { padding-bottom:10px; flex:1; display:flex; flex-direction:column; justify-content:center; }
	#ly-Layout section header { margin:20px auto 0 auto; }
	#ly-Layout section header h1 span:last-of-type { margin-top:15px; }
	#ly-Layout section header h1 span img { height:40px; }
	#ly-Layout section form { padding:30px 15%; }
	#ly-Layout section form fieldset { display:flex; flex-direction:column; }
	#ly-Layout section form fieldset div.input { margin-bottom:30px; display:flex; flex-direction:column; gap:10px; }
	#ly-Layout section form fieldset div.input dl dt { display:none; }
	#ly-Layout section form fieldset div.input dl dd input { width:100%; height:48px; padding-left:12px; padding-right:12px; font-size:.875rem; }
	#ly-Layout section form fieldset div.input div.option { margin-top:10px; }
	#ly-Layout section form fieldset div.input div.option label input { position:absolute; z-index:-1; opacity:0 !important;; }
	#ly-Layout section form fieldset div.input div.option label input + div + span:not(:empty) { margin-left:10px; font-size:.875rem; }
	#ly-Layout section form fieldset p.error { padding:15px; margin-bottom:30px; font-size:.8125rem; border-radius:4px; }
	#ly-Layout section form fieldset p.error span:nth-of-type(3) { margin-top:10px; margin-bottom:10px; }
	#ly-Layout section form fieldset div.button { flex-wrap:wrap; }
	#ly-Layout section form fieldset div.button button { height:48px; font-size:1rem; }
	#ly-Layout section footer.logo { margin-bottom:20px; }
	#ly-Layout section footer.logo img { height:24px; }

	#dg-Scanner div.layout ul li button { height:60px; }
	#dg-Scanner div.wrap > div > div img { width:150px; }
}

/* Tablet */
@media (min-width: 768px) and (max-width: 991.9px) {
	#ly-Layout:before { width:100%; height:100%; position:fixed; top:0; left:0; z-index:1; }
	#ly-Layout section { min-width:100%; min-height:100%; padding:5vw; display:flex; align-items:center; position:absolute; top:0; left:0; z-index:2; }
	#ly-Layout section div.layout { max-width:500px; width:100%; margin:auto; padding-top:40px; padding-bottom:20px; background-color:rgba(255, 255, 255, .95); border-radius:10px; box-shadow:0 5px 5px rgba(0, 0, 0, .5); transition:all ease .2s; transition-property:background, max-width; }
	#ly-Layout section div.layout:focus-within,
	#ly-Layout section div.layout:hover { background-color:rgba(245, 245, 255, .95); }
	#ly-Layout section div.wrap { padding-bottom:10px; flex:1; display:flex; flex-direction:column; justify-content:center; }
	#ly-Layout section header { margin:20px auto 0 auto; }
	#ly-Layout section header h1 span:last-of-type { margin-top:15px; font-size:1.65rem; }
	#ly-Layout section header h1 span img { height:50px; }
	#ly-Layout section form { padding:30px 18%; }
	#ly-Layout section form fieldset { display:flex; flex-direction:column; }
	#ly-Layout section form fieldset div.input { margin-bottom:30px; display:flex; flex-direction:column; gap:15px; }
	#ly-Layout section form fieldset div.input dl dd input { width:100%; height:52px; padding-left:15px; padding-right:15px; font-size:.875rem; }
	#ly-Layout section form fieldset div.input div.option { margin-top:10px; }
	#ly-Layout section form fieldset div.input div.option label input { position:absolute; z-index:-1; opacity:0 !important;; }
	#ly-Layout section form fieldset div.input div.option label input + div + span:not(:empty) { margin-left:10px; font-size:.875rem; }
	#ly-Layout section form fieldset p.error { padding:15px; margin-bottom:30px; font-size:.8125rem; border-radius:4px; }
	#ly-Layout section form fieldset p.error span:nth-of-type(3) { margin-top:10px; margin-bottom:10px; }
	#ly-Layout section form fieldset div.button { flex-wrap:wrap; }
	#ly-Layout section form fieldset div.button button { height:55px; font-size:1.125rem; }
	#ly-Layout section footer.logo { margin-bottom:20px; }
	#ly-Layout section footer.logo img { height:28px; }

	#dg-Scanner div.layout ul li button { height:60px; }
	#dg-Scanner div.wrap > div > div img { width:180px; }
}

/* Desktop */
@media (min-width: 992px) and (max-width: 1199.9px) {
	#ly-Layout:before { width:calc(100% - 420px); height:100%; background-size:cover; transition:all ease .2s; transition-property:width; }
	#ly-Layout section { width:420px; height:100%; background-color:white; overflow:auto; box-shadow:0 0 5px 5px rgba(0, 0, 0, .25); position:fixed; top:0; right:0; transition:all ease .2s; transition-property:width; }
	#ly-Layout section div.layout { width:100%; height:100%; display:flex; flex-direction:column;  }
	#ly-Layout section div.wrap { padding-top:50px; padding-bottom:50px; flex:1; display:flex; flex-direction:column; justify-content:center; }
	#ly-Layout section header h1 { text-align:center; }
	#ly-Layout section header h1 span { display:block; }
	#ly-Layout section header h1 span:last-of-type { margin-top:20px; font-size:1.65rem; }
	#ly-Layout section header h1 span img { height:50px; }
	#ly-Layout section form { padding:40px 60px 0 60px; }
	#ly-Layout section form fieldset { display:flex; flex-direction:column; }
	#ly-Layout section form fieldset div.input { margin-bottom:40px; display:flex; flex-direction:column; gap:20px; }
	#ly-Layout section form fieldset div.input dl dd input { width:100%; height:46px; padding-left:15px; padding-right:15px; background-color:#fbfbfb; font-size:.875rem;  }
	#ly-Layout section form fieldset div.input div.option label input + div + span:not(:empty) { margin-left:10px; font-size:.875rem; }
	#ly-Layout section form fieldset p.error { padding:18px; margin-bottom:40px; font-size:.8125rem; }
	#ly-Layout section form fieldset p.error span:nth-of-type(3) { margin-top:10px; margin-bottom:10px; }
	#ly-Layout section form fieldset div.button { width:100%; margin:auto; display:flex; gap:10px; }
	#ly-Layout section form fieldset div.button div { flex:1; }
	#ly-Layout section form fieldset div.button div button { width:100%; height:52px; font-size:1rem; }
	#ly-Layout section footer.logo { margin-left:auto; padding:0 20px 20px 0; }
	#ly-Layout section footer.logo img { height:24px; }

	#dg-Scanner div.layout ul li button { height:65px; }
	#dg-Scanner div.wrap > div > div img { width:200px; }
}

/* Wide Media */
@media (min-width: 1200px) {
	#ly-Layout:before { width:calc(100% - 500px); height:100%; background-size:cover; transition:all ease .2s; transition-property:width; }
	#ly-Layout section { width:500px; height:100%; background-color:white; overflow:auto; box-shadow:0 0 5px 5px rgba(0, 0, 0, .25); position:fixed; top:0; right:0; transition:all ease .2s; transition-property:width; }
	#ly-Layout section div.layout { width:100%; height:100%; display:flex; flex-direction:column;  }
	#ly-Layout section div.wrap { padding-top:50px; padding-bottom:50px; flex:1; display:flex; flex-direction:column; justify-content:center; }
	#ly-Layout section header h1 { text-align:center; }
	#ly-Layout section header h1 span { display:block; }
	#ly-Layout section header h1 span:last-of-type { margin-top:20px; font-size:1.75rem; }
	#ly-Layout section header h1 span img { height:60px; }
	#ly-Layout section form { padding:40px 80px 0 80px; }
	#ly-Layout section form fieldset { display:flex; flex-direction:column; }
	#ly-Layout section form fieldset div.input { margin-bottom:40px; display:flex; flex-direction:column; gap:20px; }
	#ly-Layout section form fieldset div.input dl dd input { width:100%; height:55px; padding-left:15px; padding-right:15px; background-color:#fbfbfb; }
	#ly-Layout section form fieldset div.input div.option label input + div + span:not(:empty) { margin-left:10px; font-size:.875rem; }
	#ly-Layout section form fieldset p.error { padding:18px; margin-bottom:40px; font-size:.8125rem; }
	#ly-Layout section form fieldset p.error span:nth-of-type(3) { margin-top:10px; margin-bottom:10px; }
	#ly-Layout section form fieldset div.button { width:100%; margin:auto; display:flex; gap:10px; }
	#ly-Layout section form fieldset div.button div { flex:1; }
	#ly-Layout section form fieldset div.button div button { width:100%; height:60px; font-size:1.25rem; }
	#ly-Layout section footer.logo { margin-left:auto; padding:0 20px 20px 0; }
	#ly-Layout section footer.logo img { height:30px; }

	#dg-Scanner div.layout ul li button { height:70px; }
	#dg-Scanner div.wrap > div > div img { width:200px; }
}