/**
 * Basic layout, for animation examples, check demo.css
 */
html, body, div
{
	margin: 0;
	padding: 0;
	box-sizing:border-box;
}

body
{
	font-family: 'Work Sans', sans-serif;
	font-size: 22px;
	line-height: 33px;
	
	text-align: center;
}

a
{
	color: #d7e7f3;
	text-decoration: none;
	font-weight: 500;
	
	transition: color 0.25s ease;
}

a:hover
{
	color: #fff;
}

.block h1
{
	font-size: 4em;
	font-weight: 200;
	letter-spacing: 1px;
	text-transform: uppercase;
	line-height: normal;
	position:absolute;
	margin:75px 0px 0px 50px;
	
	-webkit-font-smoothing: subpixel-antialiased;
}

.block h2
{
	font-weight: 300;
	font-size: 1.3em;
	line-height: 1.5em;
	color: #779dba;
	position:absolute;
	margin:170px 0px 0px 350px;
	
	-webkit-font-smoothing: subpixel-antialiased;
}

.block h3
{
	font-weight: bold;
	font-size: 30px;
	line-height: 1.5em;
	color: #fff;
	position:absolute;
	margin:85px 0px 0px 550px;

	
	-webkit-font-smoothing: subpixel-antialiased;
}



.block .sl_txt
{
	font-weight: none;
	font-size: 18px;
	line-height: 1.5em;
	color: #fff;
	position:absolute;
	margin:250px 0px 0px 580px;

	
	-webkit-font-smoothing: subpixel-antialiased;
}


.block .sl_txt2
{
	font-weight: bold;
	font-size: 24px;
	line-height: 2.5em;
	color: #26a9e0;
	position:absolute;
	margin:350px 0px 0px 620px;
	background-color:#FFF;
	display:block;
	width:270px;

	
	-webkit-font-smoothing: subpixel-antialiased;
}



.block .sl_txt2:hover
{
	background-color:#f2c242;
}





.block .sl_txt3
{
	font-weight: none;
	font-size: 40px;
	line-height: 1.5em;
	color: #fff;
	position:absolute;
	margin:80px 0px 0px 0px;
	text-align:center;
	width:100%;


	
	-webkit-font-smoothing: subpixel-antialiased;
}

.block .sl_txt4
{
	font-weight: none;
	font-size: 15px;
	line-height: 1.5em;
	color: #fff;
	position:absolute;
	margin:138px 0px 0px 0px;
	text-align:center;
	width:100%;

	
	-webkit-font-smoothing: subpixel-antialiased;
}



.block .sl_txt5
{
	font-weight: none;
	font-size: 18px;
	line-height: 1.5em;
	color: #fff;
	position:absolute;
	display:inline-block;
	width:240px;
	left:50%;
	box-sizing:border-box;


	-webkit-font-smoothing: subpixel-antialiased;
}


.block .sl_txt5 span
{
	font-weight: none;
	display:inline-block;
	font-size: 21px;
	line-height: 1.1em;
	padding-top:10px;
	color: #fff;
}



/***sec_01***/

.block .t_001
{
	font-size:42px;
	letter-spacing:-1px;
	color:#a1befe;
	position: absolute;
	text-align:center;
	display:inline-block;
	left:50%;
	top:50%;
	margin:-280px 0px 225px -450px;
	font-family: 'Montserrat', sans-serif;
	font-weight:700;

	-webkit-font-smoothing: subpixel-antialiased;
}


.block .t_002
{
	font-size:36px;
	position: absolute;
	text-align:center;
	display:inline-block;
	left:50%;
	top:50%;
	margin:-240px 0px 225px -450px;
	font-family:'nanum-square-b';
	line-height:110%;

	-webkit-font-smoothing: subpixel-antialiased;
}

.block .t_003
{
	font-size:17px;
	line-height:120%;
	position: absolute;
	text-align:center;
	display:inline-block;
	left:50%;
	top:50%;
	margin:-195px 0px 225px -450px;
	text-align:left;
	font-family:'Noto Sans KR';
	font-weight:300;

	-webkit-font-smoothing: subpixel-antialiased;
}



.block > .cobox 
{
	position: absolute;
	left:50%;
	top:50%;
	
	display:inline-block;
	text-align:left;
	box-sizing:border-box;
	font-size:0;
	
	-webkit-font-smoothing: subpixel-antialiased;
}
	

.block .cobtn
{
	font-size:14px;
	width:200px;
	text-align:center;
	display:inline-block;
	border:1px solid #FFF;
	padding:12px 0px;
	margin-right:5px;
	color:#FFF;
	transition:all ease 0.3s;
	font-family:'nanum-square-r';

}

.block .cobtn:hover
{
	background:#632cae;
	border:1px dotted #733fba;


}







.block .s_001
{
	position: absolute;
	text-align:center;
	display:inline-block;
	left:50%;
	top:50%;
	margin:-40px 0px 0px -480px;
	
	-webkit-font-smoothing: subpixel-antialiased;
}

.block .s_002
{
	position: absolute;
	text-align:center;
	display:inline-block;
	left:50%;
	top:50%;
	margin:-60px 0px 0px -150px;
	
	-webkit-font-smoothing: subpixel-antialiased;
}

.block .s_003
{
	position: absolute;
	text-align:center;
	display:inline-block;
	left:50%;
	top:50%;
	margin:-160px 0px 0px 80px;
	
	-webkit-font-smoothing: subpixel-antialiased;
}


/***sec_02***/

.block .t_021
{

	width:500px;
	font-size:42px;
	letter-spacing:-1px;
	color:#a1befe;
	position: absolute;
	text-align:center;
	display:inline-block;
	right:50%;
	top:50%;
	margin:-200px -50px 0px 0px;
	text-align:left;
	font-family: 'Montserrat', sans-serif;
	font-weight:700;

	
	-webkit-font-smoothing: subpixel-antialiased;
}

.block .t_022
{

	width:500px;
	font-size:36px;
	letter-spacing:-1px;
	position: absolute;
	text-align:center;
	display:inline-block;
	right:50%;
	top:50%;
	margin:-160px -50px 0px 0px;
	text-align:left;
	font-family:'nanum-square-b';
	line-height:110%;

	
	-webkit-font-smoothing: subpixel-antialiased;
}

.block .t_023
{

	width:500px;
	font-size:17px;
	line-height:120%;
	position: absolute;
	text-align:center;
	display:inline-block;
	right:50%;
	top:50%;
	margin:-60px -50px 0px 0px;
	text-align:left;
	font-family:'Noto Sans KR';
	font-weight:300;

	
	-webkit-font-smoothing: subpixel-antialiased;
}


.block .s_021
{
	position: absolute;
	text-align:center;
	display:inline-block;
	left:50%;
	bottom:0%;
	margin:0px 0px 0px -250px;
	
	-webkit-font-smoothing: subpixel-antialiased;
}


/***sec_03***/

.block .t_031
{

	width:500px;
	font-size:42px;
	letter-spacing:-1px;
	color:#a1befe;
	position: absolute;
	text-align:center;
	display:inline-block;
	left:50%;
	top:50%;
	margin:-150px 0px 0px 0px;
	text-align:left;
	font-family: 'Montserrat', sans-serif;
	font-weight:700;

	
	-webkit-font-smoothing: subpixel-antialiased;
}

.block .t_032
{
	width:500px;
	font-size:36px;
	position: absolute;
	text-align:center;
	display:inline-block;
	left:50%;
	top:50%;
	margin:-100px 0px 0px 00px;
	text-align:left;
	font-family:'nanum-square-b';
	line-height:110%;
	letter-spacing:-1px;

	
	-webkit-font-smoothing: subpixel-antialiased;
}

.block .t_033
{

	width:500px;
	font-size:17px;
	line-height:120%;
	position: absolute;
	text-align:center;
	display:inline-block;
	left:50%;
	top:50%;
	margin:-50px 0px 0px 00px;
	text-align:left;
	font-family:'Noto Sans KR';
	font-weight:300;
	
	-webkit-font-smoothing: subpixel-antialiased;
}


.block .s_031
{
	position: absolute;
	text-align:center;
	display:inline-block;
	right:50%;
	top:50%;
	margin:-200px 30px 0px 0px;
	
	-webkit-font-smoothing: subpixel-antialiased;
}


.block .s_032
{
	position: absolute;
	text-align:center;
	display:inline-block;
	right:50%;
	top:50%;
	margin:-200px 130px 0px 0px;
	
	-webkit-font-smoothing: subpixel-antialiased;
}






/***sec_04***/

.block .t_041
{

	width:500px;
	font-size:42px;
	letter-spacing:-1px;
	color:#a1befe;
	position: absolute;
	text-align:center;
	display:inline-block;
	right:50%;
	top:50%;
	margin:-300px -50px 0px 0px;
	text-align:left;
	font-family: 'Montserrat', sans-serif;
	font-weight:700;

	
	-webkit-font-smoothing: subpixel-antialiased;
}

.block .t_042
{	

	width:500px;
	font-size:31px;
	position: absolute;
	text-align:center;
	display:inline-block;
	right:50%;
	top:50%;
	margin:-250px -50px 0px 00px;
	text-align:left;
	font-family:'nanum-square-b';
	line-height:110%;
	letter-spacing:-1px;

	
	-webkit-font-smoothing: subpixel-antialiased;
}

.block .t_043
{

	width:500px;
	font-size:17px;
	line-height:120%;
	position: absolute;
	text-align:center;
	display:inline-block;
	right:50%;
	top:50%;
	margin:-170px -50px 0px 00px;
	text-align:left;
	font-family:'Noto Sans KR';
	font-weight:300;
	
	-webkit-font-smoothing: subpixel-antialiased;
}


.block .s_041
{

	position: absolute;
	text-align:center;
	display:inline-block;
	right:50%;
	top:50%;
	margin:0px 150px 0px 0px;

	
	-webkit-font-smoothing: subpixel-antialiased;
}


.block .s_042
{
	position: absolute;
	text-align:center;
	display:inline-block;
	right:50%;
	top:50%;
	margin:-10px -55px 0px 0px;

	
	-webkit-font-smoothing: subpixel-antialiased;
}

.block .s_043
{
	position: absolute;
	text-align:center;
	display:inline-block;
	left:50%;
	top:50%;
	margin:-90px 0px 0px -15px;
	
	-webkit-font-smoothing: subpixel-antialiased;
}





/***sec_05***/

.block .t_051
{
	font-size:42px;
	letter-spacing:-1px;
	color:#a1befe;
	position: absolute;
	text-align:center;
	display:inline-block;
	width:800px;
	left:50%;
	top:50%;
	margin:-200px 0px 0px -400px;
	font-family: 'Montserrat', sans-serif;
	font-weight:700;
	
	-webkit-font-smoothing: subpixel-antialiased;
}

.block .t_052
{

	font-size:19px;
	position: absolute;
	text-align:center;
	display:inline-block;
	left:50%;
	top:50%;
	margin:-150px 0px 0px -400px;
	font-family:'nanum-square-r';
	line-height:130%;

	width:800px;




	-webkit-font-smoothing: subpixel-antialiased;
}

.block .t_053
{
	font-size:24px;
	width:418px;
	background:#ca566f;
	vertical-align:middle;
	position: absolute;
	text-align:center;
	display:inline-block;
	left:50%;
	top:50%;
	padding:20px 0px;
	border-radius:100px;
	margin:-80px 0px 0px -209px;
	color:#FFF;
	box-sizing:border-box;
	transition:all ease 0.5s;

	-webkit-font-smoothing: subpixel-antialiased;
}

.block .t_053:hover
{
	background:#4f1dde;

	-webkit-font-smoothing: subpixel-antialiased;
}




.block .t_054
{
	font-size:61px;
	position: absolute;
	text-align:center;
	display:inline-block;
	width:800px;
	left:50%;
	top:50%;
	margin:20px 0px 0px -400px;
	box-sizing:border-box;
	font-family:'nanum-square-b', sans-serif ;
	color: #fff9d4;

	-webkit-font-smoothing: subpixel-antialiased;
}




.block .t_055
{
	font-size:20px;
	position: absolute;
	text-align:center;
	display:inline-block;
	width:800px;
	left:50%;
	top:50%;
	margin:80px 0px 0px -400px;
	box-sizing:border-box;

	-webkit-font-smoothing: subpixel-antialiased;
}



.block > .t_056
{
	font-size:14px;
	position: absolute;
	width:800px;
	left:50%;
	bottom:0px;
	margin:0px 0px 90px -400px;
	box-sizing:border-box;

	-webkit-font-smoothing: subpixel-antialiased;
}

.block > .t_056 > li	
{
	display:inline-block;
	box-sizing:border-box;
}


.block > .t_056 > li > a	
{
  width:200px;
  color:#FFF;
  font-size:14px;
  line-height:130%;
  padding:5px 0px;
  display:inline-block;
  box-sizing:border-box;
  
}




.block > .t_056 > li:nth-child(1) > a	{background:#3072af; transition: all ease 0.5s}
.block > .t_056 > li:nth-child(1) > a:hover {background:#4f1dde;}

.block > .t_056 > li:nth-child(2) > a {	background:#1a3e5f; transition: all ease 0.5s}
.block > .t_056 > li:nth-child(2) > a:hover {	background:#4f1dde; }


.block .t_057
{
	font-size:14px;
	line-height:130%;
	position: absolute;
	text-align:center;
	display:inline-block;
	width:800px;
	left:50%;
	bottom:0px;
	margin:0px 0px 20px -400px;
	box-sizing:border-box;

	-webkit-font-smoothing: subpixel-antialiased;
}





.block .s_051
{
	position: absolute;
	text-align:center;
	display:inline-block;
	right:50%;
	top:50%;
	margin:-200px 30px 0px 0px;
	
	-webkit-font-smoothing: subpixel-antialiased;
}


.block .s_052
{
	position: absolute;
	text-align:center;
	display:inline-block;
	right:50%;
	top:50%;
	margin:-200px 130px 0px 0px;
	
	-webkit-font-smoothing: subpixel-antialiased;
}




/***sec_06***/

.block .t_061
{

	width:500px;
	font-size:42px;
	letter-spacing:-1px;
	color:#a1befe;
	position: absolute;
	text-align:center;
	display:inline-block;
	left:50%;
	top:50%;
	margin:-150px 0px 0px 0px;
	text-align:left;
	font-family: 'Montserrat', sans-serif;
	font-weight:700;
	line-height:90%;
	
	-webkit-font-smoothing: subpixel-antialiased;
}


.block .t_061::after
{
	content:' NETWORK SYSTEM';
	padding-left:76px;
	display:inline-block;
}





.block .t_062
{	

	width:500px;
	font-size:31px;
	position: absolute;
	text-align:center;
	display:inline-block;
	left:50%;
	top:50%;
	margin:-60px 0px 0px 76px;
	text-align:left;
	font-family:'nanum-square-b';
	line-height:110%;
	letter-spacing:-1px;

	
	-webkit-font-smoothing: subpixel-antialiased;
}

.block .t_063
{

	width:500px;
	font-size:17px;
	line-height:120%;
	position: absolute;
	text-align:center;
	display:inline-block;
	left:50%;
	top:50%;
	margin:-20px 0px 0px 76px;
	text-align:left;
	font-family:'Noto Sans KR';
	font-weight:300;
	
	-webkit-font-smoothing: subpixel-antialiased;
}


.block .s_061
{

	position: absolute;
	text-align:center;
	display:inline-block;
	right:50%;
	top:50%;
	margin:-260px 0px 0px 0px;

	
	-webkit-font-smoothing: subpixel-antialiased;
}


.block .s_062
{
	position: absolute;
	text-align:center;
	display:inline-block;
	right:50%;
	top:50%;
	margin:-260px 0px 0px 0px;

	
	-webkit-font-smoothing: subpixel-antialiased;
}

.block .s_063
{
	position: absolute;
	text-align:center;
	display:inline-block;
	left:50%;
	top:50%;
	margin:-170px 0px 0px -160px;
	
	-webkit-font-smoothing: subpixel-antialiased;
}

.block .s_064
{
	position: absolute;
	text-align:center;
	display:inline-block;
	left:50%;
	top:50%;
	margin:100px 0px 0px -170px;

	
	-webkit-font-smoothing: subpixel-antialiased;
}

.block .s_065
{
	position: absolute;
	text-align:center;
	display:inline-block;
	left:50%;
	top:50%;
	margin:100px 30px 0px -570px;
	
	-webkit-font-smoothing: subpixel-antialiased;
}


.block .s_066
{
	position: absolute;
	text-align:center;
	display:inline-block;
	left:50%;
	top:50%;
	margin:-150px 30px 0px -530px;
	
	-webkit-font-smoothing: subpixel-antialiased;
}












div.block
{
	vertical-align:middle;
	box-sizing:border-box;
	line-height:100%
 
}

div.block svg
{
	position: absolute;
	bottom: 50px;
	width: 30px;
	
	animation: chevronAnimation 4s ease-in-out 0s infinite;
}

div.block svg path
{
	
}

div.block:nth-child(1n)
{
	
}

div.block:nth-child(2n)
{
	
}

div.block:nth-child(3n)
{
	
}


/**
 * Simple keyframes animation for the chevron on the first slide
 */
@keyframes chevronAnimation {
	0% {
		transform: translate(0,0) scale(1.0,1.0);
	}
	50% {
		transform: translate(0,5px) scale(0.8,0.8);
	}
	100% {
		transform: translate(0,0) scale(1.0,1.0);
	}
}

/**
 * Responsiveness
 */
@media screen and (max-width: 1024px)
{	
	body
	{
		font-size: 18px;
		line-height: 27px;
	}
}

@media screen and (max-width: 800px)
{	
	h1 span
	{
		display: block;
	}
	
	div.block
	{
		height: 85vh;
		padding: 15vh 15vw 0 15vw;
	}
}

@media screen and (max-width: 420px)
{	
	body
	{
		font-size: 12px;
		line-height: 18px;
	}
}

@media screen and (max-width: 360px)
{	
	h1
	{
		font-size: 3em;
	}
}