@charset "utf-8";

@font-face {
  font-family:바른나눔고딕B;

    src: url('/html/webfonts/NanumBarunGothicBold.eot');
  src local('?'), src: url('/html/webfonts/NanumBarunGothicBold.woff2') format('woff2'), url('/html/webfonts/NanumBarunGothicBold.ttf') format('truetype');
  font-weight:normal;
  font-style:normal;
   
}


@font-face {
  font-family: 나눔스퀘어B;
  
  src: url('/html/webfonts/NanumSquareB.eot');
  src local('?'), src: url('/html/webfonts/NanumSquareB.woff2') format('woff2'), url('/html/webfonts/NanumSquareB.ttf') format('truetype');
  font-weight:normal;
  font-style:normal;  
  
  
}
@font-face {
  font-family: 나눔스퀘어R;

  src: url('/html/webfonts/NanumSquareR.eot');
  src local('?'), src: url('/html/webfonts/NanumSquareR.woff2') format('woff2'), url('/html/webfonts/NanumSquareR.ttf') format('truetype');
  font-weight:normal;
  font-style:normal;
  

}

.page_all{
	margin-top: 3px;
	
	width:1100px;
	height: 1500px;;
	display: block;
	position: relative;

	

	}
.box,.box a{
	width:200px;
	height:200px;
	position:relative;
	display:inline-block;
	float:left;
	margin: 0px 25px 0px 0px;
	color:#fff;
	
	background-color:#A6A6A6;
		
		
		
		}
	.box:hover,.box a:hover{
		color:#666;
		background-image:url(../images/box_line.png);
		
		
		background-color:#fff;	
		
	
		
		}
	
	
	
		

	
	
	
	
		.button_box{
			width:675px;
			height:200px;
			margin : 0px auto;
	
			


	
	
	

	}
	
	
	.box_title{
		

	height:54px;
	padding: 6px 0px 0px 8px;

	
	position:relative;
	display:inline-block;
	

	
	font-size:20px;

  	  	text-shadow: 0 2px 2px rgba(0,0,0,0.5);
	font-variant:normal;
	line-height:25px;


	
	
	
	
	
	  font-family:나눔스퀘어B;
	  font-weight:bold;
	  
	  
	  
	  
	  
	  		}
	.box_sub{
		width: 170px;
	
		  font-family: 나눔스퀘어R;
		  padding: 0px 15px 0px 15px;

			font-size:16px;
			line-height:15px;
			



	
		  height:106px;
		
		}
		.box_button{
			
				  font-family: 나눔스퀘어R;
		  padding: 8px 15px 8px 15px;
		  	  font-weight:bold;
			  float:right;
	height:18px;

height:20px;

	



							
					
							
			}
			
					.box_arrow{
						margin : 0px 0px 0px 20px;
						width: 30px !important;
					height:18px !important;
					text-align:center;
						display:inline-block !important;
						

			
				  font-family: 나눔스퀘어R;
		  padding: 0px 0px 0px 0px !important;
		  font-weight:bold;




		  
		  
		  
			
			}
			.dot_space{
				margin: 0px auto;
				width:650px;

				padding: 0px 25px 0px 0px;

				
				
				
				
				}
					.dot_box{
						margin:10px 0px 0px 0px;

				width:650px;
				height:120px;
				padding: 0px 0px 0px 0px;
	
				border:dotted 3px #999999;
				
				
				
				
				}	
				
				
			.img1{
				width : 280px;
				height:120px;
				float:right;
				background-image:url(../images/news280x180.PNG);
				
				
				
				
				}
							.img2{
				width : 280px;
				height:120px;
				background-image:url(../images/projects_280x120.PNG);
				float:right;
				
				
				
				
				}
							.img3{
				width : 280px;
				height:120px;
				background-image:url(../images/contact_280x120.PNG);
				float:right;
				
				
				
				
				}
				
								.img4{
				width : 280px;
				height:120px;
				background-image:url(../images/certi_280x120.PNG);
				float:right;
				
				
				
				
				}
							.band_name{
											  font-family: 나눔스퀘어B;
											  font-weight:bold;
								margin :50px 0px 0px 15px;
								font-size:20px;
								color:#3B7EA8;

			
				float:left;
			
		

		
				
	
				}
				
				
				.title_com_intro{
		color : #3B7EA8;
			-webkit-white-space:normal;
            column-count: 2;
			-moz-column-count:2;
			-webkit-column-count:2;
			word-break:break-all;
			font-size:25px;	
			font-family: 바른나눔고딕B;
			font-weight:bold;
			padding : 0px 0px 20px 0px;
					
			
	
	}	
	


.bar_j{
	width:100%;
	height:30px;
	position:relative;
	display: block;
	background-color:#036;
	color:#FFF;
	font-weight:bold;
	text-align:center;
	font-size:25px;
	padding : 40px
	
	}
	
.ceo_picture{
		margin-top : 38px;
	margin-left : 15px;
	margin-bottom : 15px;
	width:380px;
	height : 380px;
	display:block;
	position: relative;

	float:right;
	background-image:url("../images/ceo1.png");
	background-size: 380px;
	background-repeat:no-repeat;
	
	animation-name: pic;
    animation-duration: 1.5s ;
	
	
		text-shadow: 2px 2px 2px #000;
}

			
.timeline{
	width:1000px;
	height: 457px;
	display:block;
	position:relative;
	background-image:url(../images/timeline.JPG);
	background-repeat:no-repeat;
	float:left;

		padding: 0px 0px 0px 0px;
	
		}
	
		.memo_text1, .memo_text2, .memo_text3,.memo_text4,.memo_text5, .memo_text6{
		
		padding:8px;
		 font-family: 나눔스퀘어R;
		}




.text1, .text2, .text3,.text4, .text5, .text6, .text7, .text8{
	
	margin-bottom:20px;
	
	
font-size: 15px;
	font-weight: bold;
	
	
	
}

.text1{
	

}



h1{
		font-size: 15px;
	
}

.text1 h1{
	
	font-size: 15px;
	animation : slide 5s ease-out;	
	position: relative;
	
	    animation-name: colorChangeAdvanced;
    animation-duration: 5s ease-out;

}
.text2 h1{
	
	font-size: 15px;
	animation : slide 5s ease-out;	
	position: relative;
	
	    animation-name: slide1;
    animation-duration: 1.5s ;
	
	
	
	
	
}

.text3 h1{
	
	font-size: 15px;
	animation : slide 5s ease-out;	
	position: relative;
	
	    animation-name: slide2;
    animation-duration: 1.5s ;
	
	
	
	
	
}
.text4 h1{
	
	font-size: 15px;
	animation : slide 5s ease-out;	
	position: relative;
	
	    animation-name: slide3;
    animation-duration: 1.5s ;
	
	
	
	
	
}
.text5 h1{
	
	font-size: 15px;
	animation : slide 5s ease-out;	
	position: relative;
	
	    animation-name: slide4;
    animation-duration: 1.5s ;
	
	
	
	
	
}

.position2{
	
	font-size: 15px;
	animation : slide 5s ease-out;	
	position: relative;
	
	    animation-name: slide4;
    animation-duration: 4.5s ;
	
	
	
	
	
}
.text6, .text7, .text8 {
	
		font-size: 15px;
	animation : slide 5s ease-out;	
	position: relative;
	
	    animation-name: colorChangeAdvanced2;
    animation-duration: 2s ;
	
	
}



.text9{
		margin-top: 40px;
	margin-right: 0px;
	font-size: 18px;
	
	position: relative;
	float : right;
	
		animation : slide 3s ease-out;	
	position: relative;
	
	    animation-name: colorChangeAdvanced;
font-weight: bold;
	
  
	

	
	
	
	width: 380px;
	
	height: auto;
	
	

	
	
	
	
}





@keyframes slide1{
	0%{
		left:-100px;
		opacity: 0;
		transform : scale(0.9, 1)
		
	}
	100%{
	left : 0px;	
	opacity: 1;
		
	}
	
}

@keyframes slide2{
	0%{
		left:100px;
		opacity: 0;
		transform : scale(1, 0.9)
		
	}
	100%{
	left : 0px;	
	opacity: 1;
		
	}
	
}

@keyframes slide3{
	0%{
		top:-100px;
		opacity: 0;
		transform : scale(1, 0.9)
		
	}
	100%{
	top : 0px;	
	opacity: 1;
		
	}
	
}
@keyframes pic{
	0%{

		opacity: 0;
		transform : scale(1.5, 1.5)
		
	}
	100%{
	top : 0px;	
	opacity: 1;
		
	}
	
}
@keyframes slide4{
	0%{
		top:100px;
		opacity: 0;
		transform : scale(1, 0.9)
		
	}
	100%{
	top : 0px;	
	opacity: 1;
		
	}
	
}




@keyframes colorChangeAdvanced {
    0% {color: #0dcaf0;}
    25% {color: #3cb3ff;}
    50% {color: #4e69ff;}
    100% {color: #0a53be;}
}
@keyframes colorChangeAdvanced2 {
    0% {	opacity: 0;


		color: #fff;
			
	}

    100% {	opacity: 1;

	color:#000;
	
	
	}
}


/* COMMON */
.back-to-position {
  opacity: 0;
  transition: 1s;
}
.back-to-position.to-right {
  transform: translateX(-150px);
}
.back-to-position.to-left {
  transform: translateX(150px);
}
.show .back-to-position {
  opacity: 1;
  transform: translateX(0);
}
.show .back-to-position.delay-0 {
  transition-delay: 0s;
}
.show .back-to-position.delay-1 {
  transition-delay: .3s;
}
.show .back-to-position.delay-2 {
  transition-delay: .6s;
}
.show .back-to-position.delay-3 {
  transition-delay: .9s;
}


.trigger.show{
	transform:translateX(500);
}
.logos{
	background-size: 60%;
	background-repeat: no-repeat;
	background-position : left bottom;
	
	background-image:url(https://mrbas.co.kr/xe/files/attach/images/205300/a2038ed0ca4504e0f94be024d2540f89.png);
	
}

.area0{    display: grid;    grid-template-columns: 1fr 1fr;    grid-gap: 10px;    padding: 10px;}