@import url(common.css);
/* header-top */
.header_top { height: 55px; background: linear-gradient(#242424, #131313); box-shadow: inset 0 5px 5px -5px rgba(255, 255, 255, 0.4); } 
.top_back { width: 1280px; margin: 0 auto; } 
.top_back h1 { float: left; font-size: 17PX; line-height: 55px; text-transform: uppercase; margin-left: 23px; } 
.top_back h1 span { color: #81b441; } 
.top_btn { float: right; height: 55px; margin: 13px 12px 0 0; } 
.top_btn button { width: 84px; height: 29px; border-radius: 3px; box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.2); font-weight: bold; font-size: 14px; } 
.top_btn button.btn_login { background: #82b440; color: #fff; } 
.top_btn button.btn_join { background: #fff; color: #000; } 

/* header-bottom */
.header_bottom { position: relative; padding: 35px 0 10px; } 
.header_bottom .left_menu { float: left; margin-left: 85px; } 
.header_bottom .left_menu li { margin-right: 67px; } 
.header_bottom .right_menu { float: right; margin-right: 53px; } 
.header_bottom .right_menu li { margin-left: 67px; } 
.header_bottom ul { line-height: 120px; } 
.header_bottom ul li { float: left; } 
.header_bottom ul li a { font-size: 14px; font-weight: bold; color: #fff; } 
.header_bottom ul li a span { color: #a3ff12; } 
.main_logo { background: url(../images/main_logo.png) no-repeat; width: 133px; height: 123px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-indent: -999em; } 

/* slider */
.slider { padding: 19px 0 60px; } 
.slide_contents { float: left; } 
.slide_img { float: right; } 
.slide1 .slide_contents { width: 350px; margin: 59px 0 42px; } 
.slide1 .slide_contents h3 { font-size: 20px; margin-bottom: 19px; } 
.slide1 .slide_contents h2 { font-size: 36px; font-weight: bold; color: #a3ff12; } 
.slide1 .slide_contents p { font-family: 'NanumSquareNeo'; font-weight: 400; margin: 41px 0 51px; } 
.slide1 .slide_contents a { background: #a3ff12; width: 276px; line-height: 72px; font-size: 24px; font-weight: bold; color: #000; text-align: center; } 
.slide1 .slide_img { background: url(../images/game_shot.png) no-repeat; width: 490px; height: 387px; display: block; } 
.slider .bx-controls { position: relative; } 
.slider .bx-pager { position: absolute; left: 50%; transform: translateX(-50%); top: 60%; z-index: 130; } 
.slider .bx-pager .bx-pager-item { float: left; } 
.slider .bx-pager .bx-pager-item a { width: 11px; height: 11px; background: rgba(163,255,18,0.5); border: 2px solid transparent; border-radius: 50%; margin-right: 9px; text-indent: -9999em; background-clip: content-box; } 
.slider .bx-pager .bx-pager-item a.active { border: 2px solid #a3ff12; background: none; } 

/* service */
.service { background: url(../images/Rectangle.png) no-repeat; width: 971px; height: 404px; position: relative;}
.service .ser_title { position: absolute; top: -1%; left: 50%; transform: translate(-50%, -50%); display: block; width: 360px}
.sub_slider_title li,
.ser_title li { float: left; } 
.sub_slider_title h3,
.ser_title h3 { font-size: 18px; font-weight: bold; margin: 2px 4px; } 
.service_item li { float: left; width: 136px; height: 144px; margin: 43px 29px 0px 29px; text-align: center; position: relative; border-radius: 4px; overflow: hidden;} 
.service_item li .hover_contents { position: absolute; height: 100%; background: rgba(17, 17, 17, 0.3); left: 0; right: 0; bottom: 0; top: 0; text-align: center; color: #a3ff12; padding-top: 30px; opacity: 0; transition: 0.4s;}
.service_item li .hover_contents .g_start {
    color: #fff;
    font-size: 12px;
    padding: 6px;
    border: 1px solid #82b440;
    border-radius: 3px;
}

.service_item li:hover .hover_contents { opacity: 1; } 
.service_item li .hover_contents span:hover { background: #a3ff12; color: #000; }
.service_item li img { width: 136px; height: 93px; } 
.service_item li h4 { font-size: 14px; font-weight: bold; } 
.service_item li p { font-size: 8px; line-height: 8px; text-align: left; } 
.service_item li:hover{ transform: scale(1.2); animation: glowGameThumbnail 1s ease-in-out infinite alternate; }
@keyframes glowGameThumbnail {
    0% {
        box-shadow: 0 0 10px #a3ff12,0 0 15px #a3ff12,0 0 20px #a3ff12,0 0 10px #1A76A3,0 0 7.5px #228dff,0 0 10px #a1bad4,0 0 20px #228dff,0 0 45px #228dff
    }

    to {
        box-shadow: 0 0 5px #a3ff12,0 0 7.5px #a3ff12,0 0 10px #a3ff12,0 0 7.5px #228dff,0 0 5px #228dff,0 0 7.5px #228dff,0 0 10px #228dff,0 0 22.5px #228dff
    }
}

/* sub_slider */
.sub_slider { padding: 26px 0 58px; position: relative; } 
.sub_slider_title { width: 210px; height: 30px; margin: 0 auto; } 
.sub_slider_btn { display: block; text-align: center; margin: 14px 0 20px; } 
.btn_game { width: 144px; line-height: 29px; background: #949494; border-radius: 3px; box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.2); font-weight: bold; font-size: 14px; color: #000; text-align: center; } 
.btn_game.seleted { background: #82b440; } 
.sub_slider_cotents { padding: 0 85px; } 
.sub_slider_cotents li { float: left; width: 152px; position: relative; text-align: center; border: 2px solid #4c7017; border-radius: 10px; box-sizing: border-box; } 
.sub_slider_cotents li .num_back { position: absolute; top: -2px; left: -2px; background: #a3ff12; width: 30px; height: 30px; border-radius: 10px; color: #000; font-size: 26px; } 
.sub_slider_cotents li .num { display: inline-block; padding-top: 10px; } 
.sub_slider_cotents li p { line-height: 92px; font-weight: bold; } 
.controls .prev a { background: url(../images/prev.png); width: 35px; height: 69px; position: absolute; top: 48%; left: 2%; text-indent: -999em; } 
.controls .prev a:hover { background: url(../images/prev_hover.png); } 
.controls .next a { background: url(../images/next.png); width: 35px; height: 69px; position: absolute; top: 48%; right: 2%; text-indent: -999em; } 
.controls .next a:hover { background: url(../images/next_hover.png);}
.bx-wrapper { margin: 0 auto; } 


/* footer */
.footer_top { background: #26252b; text-align: center; } 
.footer_top ul { display: inline-block; } 
.footer_top li { float: left; line-height: 46px; margin: 0 28px}
.footer_top li span { width: 3px; height: 11px; background: #d1d1d1; display: inline-block; } 
.footer_top li a { color: #fff; font-family: 'NanumSquareNeo'; font-weight: 500; font-size: 13px; } 
.footer_bottom { background: #303136; text-align: center; height: 106px; } 
.footer_bottom p { padding-top: 30px; font-family: 'NanumSquareNeo'; font-size: 12px; text-transform: uppercase; font-weight: 500; } 
.footer_bottom a { color: #a3ff12; } 

.bx-wrapper { margin: 0 auto; } 
.under-rank { position: relative;height: 92px;}
.user_mark {    position: absolute;
    height: 52px;
    width: 52px;
    top: 8px;
    left: 48px;
}
.under-rank-game-txt{
    line-height: 92px !important;
}

/* game */

.game-main {
    margin: 0 auto;
}

/* privacy */
.statute-menu {
    height: 56px;
    background: #111217;
}
.statute-menu ul {
    width: 100%;
}
.statute-menu ul li {
    width: 100%;
    line-height: 56px;
    border-right: 1px solid #363636;
    text-align: center;
}
.statute-menu ul li a {
    width: 100%;
}
.statute-menu ul li:hover, .statute-menu ul li.active {
    background: #a3ff12;
}
.statute-menu ul li:hover a, .statute-menu ul li.active a {
    color: #000;
    font-weight: bold;
}

.statute-title {
    background: rgba(29,29,29,0.8);
    width: 100%;
    font-family: 'NanumSquareNeo', sans-serif;
    font-weight: 400;
    font-size: 14px;
    padding: 24px 0 24px 54px;
    box-sizing: border-box;
}

.statute-content {
    width: 100%;
    background: rgba(29,29,29,0.8);
    padding: 24px 54px;
    box-sizing: border-box;
    font-family: 'NanumSquareNeo', sans-serif;
    font-weight: 400;
    font-size: 14px;
}
.statute-content h3 {
    font-size: 16px;
    font-weight: 700;
}


/* fairness */
.fair-wrap h2 {
    font-weight: 700;
    font-size: 20px;
    text-align: center;
    color: #A3FF12;
}


.voltage-button {
	position: relative;
    margin-top: 48px;
}
.voltage-button button {
    color: white;
    background: transparent;
    padding: 0rem;/*1rem 2rem;*/
    border-radius: 1rem;
    border: 0px solid #5978F3;
    font-size: .9rem;
    line-height: 1em;
    letter-spacing: 0.075em;
    transition: background 0.3s;
    width: 130px;
    height: 0px;    
}
.voltage-button button {
    cursor: pointer;
    background: transparent;
}
.voltage-button button + svg, .voltage-button button + svg + .dots {
    opacity: 1;
}
.voltage-button svg {
    display: block;
    position: absolute;
    top: -0.75em;
    left: 0.05em;
    width: calc(100% + 0.5em);
    height: calc(100% + 1.5em);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.4s;
    transition-delay: 0.1s;
}
.voltage-button svg path {
    stroke-dasharray: 100;
    filter: url("#glow");
}
.voltage-button svg path.line-1 {
    stroke: #f6de8d;
    stroke-dashoffset: 0;
    animation: spark-1 3s linear infinite;
}
.voltage-button svg path.line-2 {
    stroke: #6bfeff;
    stroke-dashoffset: 500;
    animation: spark-2 3s linear infinite;
}
.voltage-button .dots {
    opacity: 0;
    transition: opacity 0.3s;
    transition-delay: 0.4s;
}
.voltage-button .dots .dot {
    width: 1rem;
    height: 1rem;
    background: white;
    border-radius: 100%;
    position: absolute;
    opacity: 0;
}
.voltage-button .dots .dot-1 {
    top: 0;
    left: 20%;
    animation: fly-up 3s linear infinite;
}
.voltage-button .dots .dot-2 {
    top: 0;
    left: 55%;
    animation: fly-up 3s linear infinite;
    animation-delay: 0.5s;
}
.voltage-button .dots .dot-3 {
    top: 0;
    left: 80%;
    animation: fly-up 3s linear infinite;
    animation-delay: 1s;
}
.voltage-button .dots .dot-4 {
    bottom: 0;
    left: 30%;
    animation: fly-down 3s linear infinite;
    animation-delay: 2.5s;
}
.voltage-button .dots .dot-5 {
    bottom: 0;
    left: 65%;
    animation: fly-down 3s linear infinite;
    animation-delay: 1.5s;
}

@keyframes spark-1 {
    to {
        stroke-dashoffset: -1000;
    }
}
@keyframes spark-2 {
    to {
        stroke-dashoffset: -500;
    }
}
@keyframes fly-up {
    0% {
        opacity: 0;
        transform: translateY(0) scale(0.2);
    }
    5% {
        opacity: 1;
        transform: translateY(-1.5rem) scale(0.4);
    }
    10%, 100% {
        opacity: 0;
        transform: translateY(-3rem) scale(0.2);
    }
}
@keyframes fly-down {
    0% {
        opacity: 0;
        transform: translateY(0) scale(0.2);
    }
    5% {
        opacity: 1;
        transform: translateY(1.5rem) scale(0.4);
    }
    10%, 100% {
        opacity: 0;
        transform: translateY(3rem) scale(0.2);
    }
}

.game-ranking-button {
    transition: all 0.2s linear;
}

.game-ranking-button:hover {
    transform: scale( 1.1 );
}

.top_navigation{position: relative;}
.toggle{position: relative;top: 0;left: 0;width: 100%;height: 110px;display: flex;padding: 5px 0px;font-size: 14px;font-weight: bold;justify-content: flex-end;align-items: center;color: #fff;background: transparent;cursor: pointer;}
.top_navigation ul{position: absolute;list-style: none;display: flex;flex-direction: column;line-height: 30px;right: 0px;top: 70px;z-index: 1000;}
.top_navigation ul li{position: relative;list-style: none;opacity: 0;visibility: hidden;transition: 0.5s;transition-delay: calc(0.1s * var(--i));transform: translateX(-250px);margin: 0px !important;}
.top_navigation.active ul li{opacity: 1;visibility: visible;transform: translateX(0px);}
.top_navigation ul li a{position: relative;width: 130px;text-align: right;text-decoration: none;display: block;padding: 0px 10px;height: 30px;color: #edd;font-size: 14px;background: transparent;background: #82b440;transition: 0.5s;}
.top_navigation ul li a:hover{background: transparent;background: rgba(200,200,200,0.8);background: #a3ff12;color: #fff;transition: 0s;}

.top_navigation2{position: relative;}
.toggle2{position: relative;top: 0;left: 0;width: 100%;height: 110px;display: flex;padding: 5px 0px;font-size: 14px;font-weight: bold;justify-content: flex-end;align-items: center;color: #fff;background: transparent;cursor: pointer;}
.top_navigation2 ul{position: absolute;list-style: none;display: flex;flex-direction: column;line-height: 30px;right: 0px;top: 70px;z-index: 1000;}
.top_navigation2 ul li{position: relative;list-style: none;opacity: 0;visibility: hidden;transition: 0.5s;transition-delay: calc(0.1s * var(--i));transform: translateX(-250px);margin: 0px !important;}
.top_navigation2.active ul li{opacity: 1;visibility: visible;transform: translateX(0px);}
.top_navigation2 ul li a{position: relative;width: 100px;text-align: right;text-decoration: none;display: block;padding: 0px 10px;height: 30px;color: #edd;font-size: 14px;background: transparent;background: #82b440;transition: 0.5s;}
.top_navigation2 ul li a:hover{background: transparent;background: rgba(200,200,200,0.8);background: #a3ff12;color: #fff;transition: 0s;}

.top_navigation3{position: relative;}
.toggle3{position: relative;top: 0;left: 0;width: 100%;height: 110px;display: flex;padding: 5px 0px;font-size: 14px;font-weight: bold;justify-content: flex-end;align-items: center;color: #fff;background: transparent;cursor: pointer;}
.top_navigation3 ul{position: absolute;list-style: none;display: flex;flex-direction: column;line-height: 30px;right: 0px;top: 70px;z-index: 1000;}
.top_navigation3 ul li{position: relative;list-style: none;opacity: 0;visibility: hidden;transition: 0.5s;transition-delay: calc(0.1s * var(--i));transform: translateX(-250px);margin: 0px !important;}
.top_navigation3.active ul li{opacity: 1;visibility: visible;transform: translateX(0px);}
.top_navigation3 ul li a{position: relative;width: 100px;text-align: right;text-decoration: none;display: block;padding: 0px 10px;height: 30px;color: #edd;font-size: 14px;background: transparent;background: #82b440;transition: 0.5s;}
.top_navigation3 ul li a:hover{background: transparent;background: rgba(200,200,200,0.8);background: #a3ff12;color: #fff;transition: 0s;}

.top_navigation4{position: relative;}
.toggle4{position: relative;top: 0;left: 0;width: 100%;height: 110px;display: flex;padding: 5px 0px;font-size: 14px;font-weight: bold;justify-content: flex-end;align-items: center;color: #fff;background: transparent;cursor: pointer;}
.top_navigation4 ul{position: absolute;list-style: none;display: flex;flex-direction: column;line-height: 30px;right: 0px;top: 70px;z-index: 1000;}
.top_navigation4 ul li{position: relative;list-style: none;opacity: 0;visibility: hidden;transition: 0.5s;transition-delay: calc(0.1s * var(--i));transform: translateX(-250px);margin: 0px !important;}
.top_navigation4.active ul li{opacity: 1;visibility: visible;transform: translateX(0px);}
.top_navigation4 ul li a{position: relative;width: 70px;text-align: right;text-decoration: none;display: block;padding: 0px 10px;height: 30px;color: #edd;font-size: 14px;background: transparent;background: #82b440;transition: 0.5s;}
.top_navigation4 ul li a:hover{background: transparent;background: rgba(200,200,200,0.8);background: #a3ff12;color: #fff;transition: 0s;}

.top_navigation5{position: relative;}
.toggle5{position: relative;top: 0;left: 0;width: 100%;height: 110px;display: flex;padding: 5px 0px;font-size: 14px;font-weight: bold;justify-content: flex-end;align-items: center;color: #fff;background: transparent;cursor: pointer;}
.top_navigation5 ul{position: absolute;list-style: none;display: flex;flex-direction: column;line-height: 30px;right: 0px;top: 70px;z-index: 1000;}
.top_navigation5 ul li{position: relative;list-style: none;opacity: 0;visibility: hidden;transition: 0.5s;transition-delay: calc(0.1s * var(--i));transform: translateX(-250px);margin: 0px !important;}
.top_navigation5.active ul li{opacity: 1;visibility: visible;transform: translateX(0px);}
.top_navigation5 ul li a{position: relative;width: 100px;text-align: right;text-decoration: none;display: block;padding: 0px 10px;height: 30px;color: #edd;font-size: 14px;background: transparent;background: #82b440;transition: 0.5s;}
.top_navigation5 ul li a:hover{background: transparent;background: rgba(200,200,200,0.8);background: #a3ff12;color: #fff;transition: 0s;}

.top_navigation6{position: relative;}
.toggle6{position: relative;top: 0;left: 0;width: 100%;height: 110px;display: flex;padding: 5px 0px;font-size: 14px;font-weight: bold;justify-content: flex-end;align-items: center;color: #fff;background: transparent;cursor: pointer;}
.top_navigation6 ul{position: absolute;list-style: none;display: flex;flex-direction: column;line-height: 30px;right: 0px;top: 70px;z-index: 1000;}
.top_navigation6 ul li{position: relative;list-style: none;opacity: 0;visibility: hidden;transition: 0.5s;transition-delay: calc(0.1s * var(--i));transform: translateX(-250px);margin: 0px !important;}
.top_navigation6.active ul li{opacity: 1;visibility: visible;transform: translateX(0px);}
.top_navigation6 ul li a{position: relative;width: 100px;text-align: right;text-decoration: none;display: block;padding: 0px 10px;height: 30px;color: #edd;font-size: 14px;background: transparent;background: #82b440;transition: 0.5s;}
.top_navigation6 ul li a:hover{background: transparent;background: rgba(200,200,200,0.8);background: #a3ff12;color: #fff;transition: 0s;}

.join_modal .close{
    position: absolute;
    top: 0;
    right: 0;
    width: 35px;
    height: 30px;
    background: #000;
    color: #fff;
    cursor: pointer;
    border: 0;
    border-radius: 0px 20px 0px 20px;    
}

.login_modal .close{
    position: absolute;
    top: 0;
    right: 0;
    width: 35px;
    height: 30px;
    background: #000;
    color: #fff;
    cursor: pointer;
    border: 0;
}

.mask{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(52, 73, 94, 0.8);
    z-index: 50;
    visibility: hidden;
    
    opacity: 0;
    
    transition: 0.7s;
}

.join_modal{
    position: fixed;
    top: 40%;
    left: 50%;
    width: 400px;
    height: 460px;
    margin-left: -200px;
    margin-top: -150px;
    background: #223243;
    z-index: 1000;
    visibility: hidden;    
    opacity: 0;    
    transition: 0.3s ease-out;    
    transform: translateY(45px);
    z-index: 1000;
    border-radius: 25px;
}

.active{
    visibility: visible;
    opacity: 1;
}

.active + .join_modal{
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
}

.join_container 
{
	padding: 40px;
	border-radius: 20px;
	border: 8px solid #223243;
	box-shadow: -5px -5px 15px rgba(255,255,255,0.1),
	5px 5px 15px rgba(0,0,0,0.35),
	inset -5px -5px 15px rgba(255,255,255,0.1),
	inset 5px 5px 15px rgba(0,0,0,0.35);
}

.join_container .form 
{
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	gap: 25px;
}
.join_container .form.signin,
.join_container.signinForm .form.signup
{
	display: none;
}

.join_container.signinForm .form.signin 
{
	display: flex;
}
.join_container .form h2 
{
	color: #fff;
	font-weight: 500;
	letter-spacing: 0.1em;
}
.join_container .form .inputBox 
{
	position: relative;
	width: 100%;
}
.join_container .form .inputBox input
{
	padding: 12px 10px 12px 60px;
	border: none;
	width: 100%;
	background: #223243;
	border: 1px solid rgba(0,0,0,0.1);
	color: #fff;
	font-weight: 300;
	border-radius: 25px;
	font-size: 1em;
	box-shadow: -5px -5px 15px rgba(255,255,255,0.1),
	5px 5px 15px rgba(0,0,0,0.35);
	transition: 0.5s;
	outline: none;
}
.join_container .form .inputBox span 
{
	position: absolute;
	left: 0px;
    top: 0;
	padding: 12px 10px 12px 70px;
	pointer-events: none;
	font-size: 1em;
	font-weight: 300;
	transition: 0.5s;
	letter-spacing: 0.05em;
	color: rgba(255,255,255,0.5);
}
.join_container .form .inputBox input:valid ~ span,
.join_container .form .inputBox input:focus ~ span
{
	color: #00dfc4;
	border: 1px solid #00dfc4;
	background: #223243;
	transform: translateX(55px) translateY(-20px);
	font-size: 0.6em;
	padding: 0 8px;
	border-radius: 10px;
	letter-spacing: 0.1em;
}
.join_container .form .inputBox input:valid,
.join_container .form .inputBox input:focus
{
	border: 1px solid #00dfc4;
}
.join_container .form .inputBox i 
{
	position: absolute;
	top: 10px;
	left: 16px;
	width: 25px;
	padding: 2px 0;
	padding-right: 8px;
	color: #00dfc4;
	border-right: 1px solid #00dfc4;
} 

.join_container .form .inputBox input[type="submit"]
{
	background: #00dfc4;
	color: #223243;
	padding: 10px 0;
	font-weight: 500;
	cursor: pointer;
	box-shadow: -5px -5px 15px rgba(255,255,255,0.1),
	5px 5px 15px rgba(0,0,0,0.35),
	inset -5px -5px 15px rgba(255,255,255,0.1),
	inset 5px 5px 15px rgba(0,0,0,0.35);
}
.join_container .form p 
{
	color: rgba(255,255,255,0.5);
	font-size: 0.75em;
	font-weight: 300;
}
.join_container .form p a 
{
	font-weight: 500;
	color: #fff;
}

.login_container 
{
	padding: 40px;
	border-radius: 20px;
	border: 8px solid #223243;
	box-shadow: -5px -5px 15px rgba(255,255,255,0.1),
	5px 5px 15px rgba(0,0,0,0.35),
	inset -5px -5px 15px rgba(255,255,255,0.1),
	inset 5px 5px 15px rgba(0,0,0,0.35);
}

.login_container .form 
{
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	gap: 25px;
}
.login_container .form.signin,
.login_container.signinForm .form.signup
{
	display: none;
}

.login_container.signinForm .form.signin 
{
	display: flex;
}
.login_container .form h2 
{
	color: #fff;
	font-weight: 500;
	letter-spacing: 0.1em;
}
.login_container .form .inputBox 
{
	position: relative;
	width: 100%;
}
.login_container .form .inputBox input
{
	padding: 12px 10px 12px 60px;
	border: none;
	width: 100%;
	background: #223243;
	border: 1px solid rgba(0,0,0,0.1);
	color: #fff;
	font-weight: 300;
	border-radius: 25px;
	font-size: 1em;
	box-shadow: -5px -5px 15px rgba(255,255,255,0.1),
	5px 5px 15px rgba(0,0,0,0.35);
	transition: 0.5s;
	outline: none;
}
.login_container .form .inputBox span 
{
	position: absolute;
	left: 0px;
    top: 0;
	padding: 12px 10px 12px 70px;
	pointer-events: none;
	font-size: 1em;
	font-weight: 300;
	transition: 0.5s;
	letter-spacing: 0.05em;
	color: rgba(255,255,255,0.5);
}
.login_container .form .inputBox input:valid ~ span,
.login_container .form .inputBox input:focus ~ span
{
	color: #00dfc4;
	border: 1px solid #00dfc4;
	background: #223243;
	transform: translateX(55px) translateY(-20px);
	font-size: 0.6em;
	padding: 0 8px;
	border-radius: 10px;
	letter-spacing: 0.1em;
}
.login_container .form .inputBox input:valid,
.login_container .form .inputBox input:focus
{
	border: 1px solid #00dfc4;
}
.login_container .form .inputBox i 
{
	position: absolute;
	top: 10px;
	left: 16px;
	width: 25px;
	padding: 2px 0;
	padding-right: 8px;
	color: #00dfc4;
	border-right: 1px solid #00dfc4;
} 

.login_container .form .inputBox input[type="submit"]
{
	background: #00dfc4;
	color: #223243;
	padding: 10px 0;
	font-weight: 500;
	cursor: pointer;
	box-shadow: -5px -5px 15px rgba(255,255,255,0.1),
	5px 5px 15px rgba(0,0,0,0.35),
	inset -5px -5px 15px rgba(255,255,255,0.1),
	inset 5px 5px 15px rgba(0,0,0,0.35);
}
.login_container .form p 
{
	color: rgba(255,255,255,0.5);
	font-size: 0.75em;
	font-weight: 300;
}
.login_container .form p a 
{
	font-weight: 500;
	color: #fff;
}