@chartset "UTF-8";

@import url(https://fonts.googleapis.com/earlyaccess/notosanskr.css);  /* font-weight : 100 / 300 / 400 / 500 / 700 / 900 */
@import url('https://fonts.googleapis.com/css?family=Montserrat');

*, *:before, *:after {
	box-sizing:border-box;
}

body { margin:0; background-color:#192755}

body, input, textarea, select, button, table, .pure-g [class*=pure-u] {
	font-family: 'Noto Sans KR', 'Nanum Gothic', Dotum, '돋움', Dotum, '애플 SD 산돌고딕 Neo', 'Apple SD Gothic Neo', AppleGothic, Helvetica, sans-serif;
}

@media screen and (min-width: 14em) { html, body, input, textarea, select, button, table { font-size:7px; } }
@media screen and (min-width: 16em) { html, body, input, textarea, select, button, table { font-size:8px; } }
@media screen and (min-width: 18em) { html, body, input, textarea, select, button, table { font-size:9px; } }
@media screen and (min-width: 20em) { html, body, input, textarea, select, button, table { font-size:10px; } }
@media screen and (min-width: 22em) { html, body, input, textarea, select, button, table { font-size:11px; } }
@media screen and (min-width: 24em) { html, body, input, textarea, select, button, table { font-size:12px; } }
@media screen and (min-width: 26em) { html, body, input, textarea, select, button, table { font-size:13px; } }
@media screen and (min-width: 28em) { html, body, input, textarea, select, button, table { font-size:14px; } }
@media screen and (min-width: 30em) { html, body, input, textarea, select, button, table { font-size:15px; } }
@media screen and (min-width: 32em) { html, body, input, textarea, select, button, table { font-size:16px; } }
@media screen and (min-width: 34em) { html, body, input, textarea, select, button, table { font-size:17px; } }
@media screen and (min-width: 36em) { html, body, input, textarea, select, button, table { font-size:18px; } }
@media screen and (min-width: 38em) { html, body, input, textarea, select, button, table { font-size:19px; } }
@media screen and (min-width: 40em) { html, body, input, textarea, select, button, table { font-size:20px; } }
@media screen and (min-width: 42em) { html, body, input, textarea, select, button, table { font-size:21px; } }
@media screen and (min-width: 44em) { html, body, input, textarea, select, button, table { font-size:22px; } }
/* over 720 / half size */
@media screen and (min-width: 45em) { html, body, input, textarea, select, button, table { font-size:12px; } }
@media screen and (min-width: 52em) { html, body, input, textarea, select, button, table { font-size:13px; } }
@media screen and (min-width: 56em) { html, body, input, textarea, select, button, table { font-size:14px; } }
@media screen and (min-width: 60em) { html, body, input, textarea, select, button, table { font-size:15px; } }
@media screen and (min-width: 64em) { html, body, input, textarea, select, button, table { font-size:16px; } }
@media screen and (min-width: 68em) { html, body, input, textarea, select, button, table { font-size:17px; } }

#wpmem_msg, .wpmem_msg{
	background: none !important;
	background-color: #ff7777 !important;;
	border: none !important;
	width:100% !important;
	font-size:20px !important;
	padding-bottom:10px !important;
}

.float{
	position:absolute;
	top:3.5em;
	right:2.5rem;
	color:#FFF;
	text-align:center;
}
.float a,
.float a img {
	display:inline-block;
}
.kakao-float{
	margin-top:12px;
	margin-bottom:12px;
}

@-webkit-keyframes sdb {
  0% {
    opacity: 0;
  }
  30% {
    opacity: 1;
  }
  60% {
    box-shadow: 0 0 0 60px rgba(255, 255, 255, 0.1);
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes sdb {
  0% {
    opacity: 0;
  }
  30% {
    opacity: 1;
  }
  60% {
    box-shadow: 0 0 0 60px rgba(255, 255, 255, 0.1);
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
.wppb-form-error{
	display:block;
	margin:10px;
}
h1.major,
h2.major,
h3.major,
h4.major,
h5.major,
h6.major {
  padding-bottom: 1em;
  border-bottom: solid 2px rgba(255, 255, 255, 0.125);
  margin-bottom: 20px;
}
a {
  color: #33A9B7;
}
a:hover,
a:focus {
  color: #00E4FF;
  text-decoration: none;
}
body > header,
body > article {
  position: relative;
  width: 100%;
  background-color: #29336e;
	background-image:url(../images/background.jpg);
	background-size:cover;
	background-position: center center;
	color: white;
	min-height: 100vh;
}
@media screen and (min-height: 54em) {
	body > header,
	body > article {
		background-image: url(../images/background-full.jpg);
	}
}
header #particles {
  position: absolute;
  width: 100%;
  height: 100vh;
  top: 0;
  left: 0;
}
.particles-js-canvas-el {
	position:relative;
	z-index: 0;
}
header .vert-text h1 {
  padding: 0;
  margin: 0;
  font-size: 4.5em;
  font-weight: 700;
}
header .vert-text .scroll-down {
  display: block;
  position: absolute;
    top:60%;
    left: 50%;
    margin-right: -50%;
  color: #fff;
  -webkit-transform: translate(0, -50%);
  transform: translate(0, -50%);
  -webkit-transition: opacity 0.5s;
  -o-transition: opacity 0.5s;
  transition: opacity 0.5s;
}
header .vert-text .scroll-down:hover {
  opacity: 0.5;
}
header .vert-text .scroll-down::after {
  position: absolute;
  content: '';
  width: 16px;
  height: 16px;
  margin: -12px 0 0 -8px;
  border-left: 1px solid #fff;
  border-bottom: 1px solid #fff;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  box-sizing: border-box;
}
header .vert-text .scroll-down::before {
  position: absolute;
  top: -22px;
  left: -22px;
  z-index: -1;
  content: '';
  width: 44px;
  height: 44px;
  box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.1);
  border-radius: 100%;
  opacity: 0;
  -webkit-animation: sdb 3s infinite;
  animation: sdb 3s infinite;
  box-sizing: border-box;
}

#wppb-login-wrap{
	z-index:10000;
	position:relative;
	width:100%;
	height:8%;
	text-align:center;
}

.user-login-form{
	text-align:center;
}
#contacts {
	margin: 0 auto;
    padding: 100px 0 0;
	background: #224;
	width: 100%;
    color: #fff;
	transition: all 1.7s ease;
	height:900px;
}
@media screen and (max-width:1400px){
	header .vert-text .scroll-down {
		top:80%;
	}
}
@media screen and (max-width:1200px){
	#contacts {
		height:540px;
	}
	header .vert-text .scroll-down {
		top:90%;
	}
}
#contacts:hover{
	background: rgba(250,51,128, 0.05);
	color: #fff;
}
#contacts .social {
  padding-bottom: 20px;
  border-bottom: solid 2px rgba(255, 255, 255, 0.125);
}
label[for=user_login]
{
    display:none;
}
label[for=user_pass]
{
    display:none;
}

form{
	width: 100%;
}
.wppb-alert{
	margin-top:-100px;
}
#loginform p {
	margin: .5em 0;
}
#loginform p.submit {
	margin-top:1.3em;
}
#loginform input {
    background: rgba(255,255,255,.2);
    border: none;
    font-weight: 400;
    width: 100%;
    line-height: 2em;
    padding: .875em;
    padding-left: 4.5em;
    color: white;
    border-radius: .2em;
}
#loginform #user_login {
    background-image: url(../images/icon-user.png);
    background-position: 1.75em center;
    background-repeat: no-repeat;
    background-size: 1.2em auto;
}
#loginform #user_pass {
    background-image: url(../images/icon-lock.png);
    background-position: 1.85em center;
    background-repeat: no-repeat;
    background-size: .95em auto;
}
#header .button {
	-webkit-appearance: none;
	border: .1rem solid white;
	border-radius:.2em;
	font-family: 'Montserrat', 'Noto Sans KR', 'Nanum Gothic', Dotum, '돋움', Dotum, '애플 SD 산돌고딕 Neo', 'Apple SD Gothic Neo', AppleGothic, Helvetica, sans-serif;
	color: white;
	width: 100%;
	text-decoration:none;
	line-height: 2em;
	height: auto;
	font-size: 1.3rem;
	background:none;
	padding: .5rem;
}
#header .button.button-primary {
	background:white;
	color:#29336e;
	box-shadow: 0.1em 0.1em 0.1em rgba(0,0,0,.5);
}
.cit-privacy{
	right:2.5rem;
	bottom: 1.75rem;
	margin:0;
	text-align:center;
	position:absolute;
	font-weight:200;
	font-size:0.9em;
	z-index: 10000;
}
.cit-phone {
	right:2.5rem;
	top: 1.75rem;
	margin:0;
	text-align:center;
	position:absolute;
	font-weight:400;
	font-size:1.1em;
}
.cit-phone:before {
	content: "";
    display: inline-block;
    vertical-align: bottom;
    background: url(../images/icon-phone.png);
    width: .909090em;
    height: 1.4em;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    margin-right: .4em;
}
.logo-and-buttons{
	position:absolute;
	text-align:center;
	width:100%;
	top:50%;
	left: 50%;
	transform: translate3D(-50%,-50%,0);
}
.p-img{
    text-align: center;
    position: relative;
}
.p-img h4 {
	margin:0;
	line-height:1em;
	font-family: 'Montserrat', 'Noto Sans KR', 'Nanum Gothic', Dotum, '돋움', Dotum, '애플 SD 산돌고딕 Neo', 'Apple SD Gothic Neo', AppleGothic, Helvetica, sans-serif;
	font-weight: 400;
	font-size:1.3em;
}
.cit-logo{
	text-align: center;
	width: 40.625%;
	position: relative;
	margin-bottom:5.5%;
}

.typer-div{
	text-align:center;
	width:100%;
	position:relative;
	vertical-align:center;
	font-weight:900;
	font-family: 'Montserrat', 'Noto Sans KR', 'Nanum Gothic', Dotum, '돋움', Dotum, '애플 SD 산돌고딕 Neo', 'Apple SD Gothic Neo', AppleGothic, Helvetica, sans-serif;
}

.cit-login{
	text-align:center;
	position:relative;
	margin-top:3.5rem;
	width:100%;
	padding:0 2.5rem;
}
.loggedin-buttons{
}
#typer-size{
	margin-top:3rem;
	font-size: 1.9em;
}

.login-remember{
	display:none;
}

input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px rgba(0,0,0,0.0) inset;
}
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-transition-delay: 99999s;
}
.cit-register{
	margin-bottom:50px;
}
.cit-register input[type=text]{
	float: none;
	height: 55px;
	width: 280px;
	margin-left:0;
}
.cit-register input[type=email]{
	float: none;
	margin-top: 20px;
	margin-left:0;
	width: 280px;
	height: 55px;
	border-radius: 100px;
	padding: 10px;
	outline: none;
	background: rgba(0,0,0,0.2);
	border: 1px solid #fff;
	transition: all 0.3s ease;
}
.cit-register input[type=password]{
	float: none;
	margin-top: 20px;
	margin-left:0;
	width: 280px;
	height: 55px;
	border-radius: 100px;
	padding: 10px;
	outline: none;
	background: rgba(0,0,0,0.2);
	border: 1px solid #fff;
	transition: all 0.3s ease;
}

input[type=text]:focus{
	background: rgba(102,51,153, 0.3);
	color: #fff;
	border: 1px solid violet;
}
input[type=email]:focus{
	background: rgba(102,51,153, 0.3);
	color: #fff;
	border: 1px solid violet;
}
input[type=password]:focus{
	background: rgba(102,51,153, 0.3);
	color: #fff;
	border: 1px solid violet;
}
ul, menu, dir {
	list-style-type: none;
	padding: 0;
}
::placeholder{
	color: #fff;
}
.zayn{
	margin-top: -70px;
}
hr.style17 {
	border-top: 1px solid pink;
	text-align: center;
	width: 250px;
	margin-top: 40px;
}
hr.style17:after{
	border-top: 1px solid pink;
	border-right: 1px solid pink;
	border-bottom: 1px solid pink;
	border-left: 1px solid pink;
}
hr.style17:after {
	content: '§';
	display: inline-block;
	position: relative;
	top: -10px;
	padding: 0 10px;
	background: #fa3380;
	color: #fff;
	font-size: 18px;
	-webkit-transform: rotate(60deg);
	-moz-transform: rotate(60deg);
	transform: rotate(60deg);
}

button{
	border-radius: 100px;
	color: #fff;
	margin-top: 20px;
	margin-bottom: 10px;
	padding: 10px;
	height: 45px;
	width: 200px;
	text-align: center;
	outline: none;
	background: #fa3380;
	border: 1px solid #eee;
	box-shadow: 8px 10px 20px 0px rgba(46,61,73,0.15);
	transition: all 0.3s ease;
}
button:hover{
	background: purple;
}



.button {
    color: #fff;
    margin-top: 20px;
    margin-bottom: 10px;
    padding: .5rem;
    height: 45px;
    width: 200px;
    text-align: center;
    outline: none;
    background: #fa3380;
    border: 1px solid #eee;
    box-shadow: 8px 10px 20px 0px rgba(46,61,73,0.15);
    transition: all 0.3s ease;
	display:block;
	height: 40px;
    background: rgba(250,51,128, 0.1);
    margin: 10px auto;
}


/* user-login-form */
.user-login-form {
	
}
.user-login-form input[type="text"],
.user-login-form input[type="number"],
.user-login-form input[type="email"],
.user-login-form input[type="url"],
.user-login-form input[type="password"],
.user-login-form input[type="search"],
.user-login-form textarea {
    color: #666;
    border: 1px solid #ccc;
    border-radius: 3px;
}
.user-login-form input:not([type="button"]):not([type="reset"]):not([type="submit"]),
.user-login-form select,
.user-login-form textarea {
    font-size: 100%;
    margin: 0;
    vertical-align: baseline;
}
.user-login-form input[type="text"]:focus, .user-login-form input[type="number"]:focus, .user-login-form input[type="email"]:focus, .user-login-form input[type="url"]:focus, .user-login-form input[type="password"]:focus, .user-login-form input[type="search"]:focus, .user-login-form textarea:focus {
    color: #eee;
}



/**
 * article
 */
article.page header h1 {
	display:none;
}



/**
 * wpmem_reg
 */
article #wpmem_reg {
	position:relative;
    padding: 3.5em 2.5em 3em;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,.13);
    max-width: 740px;
    margin-left: auto;
    margin-right: auto;
    font-size: 1em;
    font-family:inherit;
}
#wpmem_reg .close-button {
	position:absolute;
	display:block;
	top:2.5em;
	right:2.5em;
	width:1.5em;
	height:1.5em;
	overflow:hidden;
	text-indent:-5000px;
}
#wpmem_reg .close-button:before,
#wpmem_reg .close-button:after {
	width: 120%;
	height:.1rem;
	position:absolute;
	content:"";
	display:block;
	transform:translate(-50%, -50%) rotate(45deg);
	background:gray;
	top: 50%;
	left: 50%;
}
#wpmem_reg .close-button:after {
	transform:translate(-50%, -50%) rotate(-45deg);
}
#wpmem_reg form fieldset {
	margin-top:0;
}
#wpmem_reg fieldset:before {
    content: "회원가입";
    display: block;
    font-weight: 700;
    font-size: 2em;
    margin-bottom: 1em;
    text-align:center;
}
#wpmem_reg fieldset legend {
	display:none;
}
#wpmem_reg form fieldset > label,
#wpmem_reg form fieldset .field-wrap > label {
	display: block;
	color:#666;
	font-size:1.2em;
	padding-bottom: .13em;
	padding-top:1.1em;
	height:auto !important;
}
#wpmem_reg form fieldset > label .req,
#wpmem_reg form fieldset .field-wrap > label .req {
	color: #e65f5d;
    font-size: 1em;
    margin-left: .3em;
    vertical-align: middle;
}
#wpmem_reg .div_multicheckbox {
	font-size: 1.2em;
	color:#333;
	line-height:1.9em;
	margin-top: -.5em !important;
}
#wpmem_reg .div_multicheckbox input[type=checkbox] {
	display:none;
}
#wpmem_reg .div_multicheckbox label {
	display:block;
	line-height: 1em;
	margin-top:1em;
	margin-bottom: 1em;
}
#wpmem_reg .div_multicheckbox label:before {
    content: "";
    display: inline-block;
    width: 1.41666em;
    height: 1.41666em;
    border: .16666em solid #ced3d6;
    vertical-align: middle;
    border-radius: .25em;
    margin-right: .4583em;
    transform: translateY(-.02em);
}
#wpmem_reg .div_multicheckbox input[type="checkbox"]:checked + label:before {
	background:#29336e url(../images/icon-checked.png) no-repeat center center;
	background-size: 50% auto;
	border:none;
}
#wpmem_reg div.div_text,
#wpmem_reg div.div_select,
#wpmem_reg div.div_textarea {
	width: 100%;
	margin: 0;
}
#wpmem_reg .div_select select {
	margin:0;
}
#wpmem_reg input[type=text], #wpmem_reg input[type=search],
#wpmem_reg input[type=radio], #wpmem_reg input[type=tel],
#wpmem_reg input[type=time], #wpmem_reg input[type=url],
#wpmem_reg input[type=week], #wpmem_reg input[type=password],
#wpmem_reg input[type=checkbox], #wpmem_reg input[type=color],
#wpmem_reg input[type=date], #wpmem_reg input[type=datetime],
#wpmem_reg input[type=datetime-local], #wpmem_reg input[type=email],
#wpmem_reg input[type=month], #wpmem_reg input[type=number], select, textarea {
    border: 1px solid #ddd;
    box-shadow: inset 0 1px 2px rgba(0,0,0,.07);
    background-color: #fff;
    color: #32373c;
    outline: 0;
    transition: 50ms border-color ease-in-out;
}
#wpmem_reg input[type=text] {
    font-size: 24px;
    width: 100%;
    padding: 3px;
    margin: 2px 6px 16px 0;
}
#wpmem_reg form input[type=checkbox],
#wpmem_reg form input[type=text],
#wpmem_reg form input[type=email],
#wpmem_reg form input[type=password],
#wpmem_reg form textarea {
    background: #fff;
    padding: .6667em;
    border: .1rem solid #ced3d6;/* #29336e;*/
    border-radius: .15rem;
    margin:0;
    transition: border-color .2s;
}
#wpmem_reg form input:focus,
#wpmem_reg form textarea:focus {
	border: .1rem solid #29336e;
}
#wpmem_reg div.button_div {
	width: 100%;
	text-align:center;
}
/* username hiding */
#wpmem_reg .field-wrap-username {
	display:none;
}
/* student name hiding */
#wpmem_reg.parent .field-wrap-student_name {
	visibility: hidden;
}
#wpmem_reg form .captcha {
	margin: 1em auto;
	width:100%;
}
#wpmem_reg form .button_div input[type=submit] {
	-webkit-appearance:none;
	background:#29336e;
	border:none;
	font-size:1.2em;
	border-radius:.15rem;
	color:white;
	width:100%;
	padding:.875em;
	margin-top:1em;
}
#wpmem_reg form .req-text {
	display:none;
}

.kakao {position:absolute; right:25%; bottom:100px;}

.kakao-float1{
	position:absolute;
	margin-top:-20px;
}
.kakao-float2{
	position:absolute;
	margin-top:20px;
}