@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&family=Noto+Sans:wght@100;200;300;400;500;600;700;800;900&display=swap');


*{padding:0; margin:0}
*, *::before, *::after {box-sizing: border-box;}
fieldset { display: flex; justify-content: center; border: none; margin: 0;}

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	/*font: inherit;*/
	vertical-align: baseline;
	font-family: 'Plex Sans JP','Noto Sans KR', sans-serif;
	color:#202020;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}

body {line-height: 1;background: #F3F6FF;height: 100vh;}
.login_wrap{background-size: cover; -webkit-background-size: cover; background-image: linear-gradient(rgb(177 238 255), rgb(255 250 235)); background-position: 0% 100%; animation: backgroundPosition 3s ease-in; animation-iteration-count: infinite}
.login_wrap h1 span{color: #fff;font-size: 3rem;}
/*.login_wrap h1 span{color: #fff;  -webkit-box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
  -moz-box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
  -ms-box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
  -o-box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);}
 */ 
.login_wrap h3 span:first-of-type{color:var(--bs-red)}
.login_wrap h3 span:nth-of-type(2){color:var(--bs-green)}
.login_wrap h3 span:nth-of-type(3){color:var(--bs-purple)}
.login_wrap h3 span:nth-of-type(4){color:var(--bs-yellow)}
.login_wrap h3 span:nth-of-type(5){color:#000}

/*.login_wrap::before{content: "";opacity: 0.4;background-color:#000;position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px;}*/
.login_wrap .contents{background-size: cover; position: relative;background:url('/img/bg_diagram.png') repeat #81298d; }
.login_wrap .title{text-align: right;padding: 3.5rem;}
.login_wrap .title::before{content: "";opacity: 0.4; background-color:#000;}
.login_wrap .title .tittxt{text-shadow: 3px 3px 5px black, 0 0 3em #49c7ea;text-transform: uppercase;line-height: 1;}
.login_wrap .login_con{position: relative;outline: 1px #fff solid;
-webkit-box-shadow: -7px 0 4px rgba(0, 0, 0, 0.30);
  -moz-box-shadow: -7px 0 4px rgba(0, 0, 0, 0.30);
  -ms-box-shadow: -7px 0 4px rgba(0, 0, 0, 0.30);
  -o-box-shadow: -7px 0 4px rgba(0, 0, 0, 0.30);
  box-shadow: -7px 0 4px rgba(0, 0, 0, 0.30);}
.login_wrap .footer{position: absolute; bottom: 1rem; width: 100%; left: 0;}


.login_wrap .text_obj span {position: relative;	animation: anime_textup 1.5s infinite;font-family:'Noto Sans', sans-serif;/* font-family: 'Roboto', 'Noto Sans KR', sans-serif; */font-size:2.25rem; font-weight:900; margin:0 .2rem;color:#445bce}
.login_wrap .text_obj span:nth-of-type(1) svg{top: -.5rem; position: relative;}
.login_wrap .text_obj span:nth-of-type(1) div{color:#ef5a25;}
.login_wrap .text_obj span:nth-of-type(2) div{color:#2fb068;}
.login_wrap .text_obj span:nth-of-type(3) svg{top: -.5rem; position: relative;}
.login_wrap .text_obj span:nth-of-type(3) div{color:#90449b;}
.login_wrap .text_obj span:nth-of-type(4) div{color:#f3a738;}
.login_wrap .text_obj span div{color:#445bce;text-decoration: underline;}
.login_wrap .text_obj svg{height:22px; width:auto}


@media screen and (min-width: 510px){
.login_con {min-height: 630px;}
}