@import url('https://fonts.googleapis.com/css2?family=Gothic+A1:wght@600;700;800;900&family=Noto+Sans+KR&family=Quicksand&display=swap');

body {
	display: flex;
	flex-direction: column;
	margin : 0;
}
header {
	flex: 0 0 0px;
	background-color: #FFFFFF;
}
main {
	flex: 1;
	flex-direction: column;
	display: table;
	background-color: #FFFFFF;
}
footer {
	flex: 0 0 10px;
	background-color: #FFFFFF;
}

.content{
	display: flex;
	overflow:auto;
	height:auto;
}

.title {
	width: 90%;
	height: 100%;
	display : flex;
    align-items: center;
	justify-content: center;
	padding-top : 3%;
	padding-bottom : 5%;
	padding-left : 5%;
	padding-right : 5%;
}

.banner{
	width:100%;
	height:100%;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	border-radius : 30px;
	
	background-color : #f7fafa;
}

.banner-txt {
	position: absolute; /* ÇÙ½ÉÄÚµå */
	text-decoration:none;
	font-family: 'Quicksand', sans-serif;
	text-align:center;
	font-size:67.0pt;		
}
.banner-txtimg {
	position: absolute;

	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}
.banner-txtimg .img{
	height:70px;
	object-fit:fill;
}

.banner-txt2 {
	color : #ffffff;
	font-size:11pt;
}

.ready {
	color : #818285;
	font-size:16pt;
}



.topBar {
	position: fixed;
	top: 0;
	/* width: 100% */
	left: 0;
	right: 0;
	height : 70;
	display: flex;
	justify-content: center;
	background-color : #ffffff;
	/*box-shadow: 0px 1px 1px 0px #dddddd;*/
	z-index: 2;
}

.topbarBack {
	display : table-row;
	height : 70;
	background-color : #ffffff;
}


.companyName{
	position: absolute; 
	top: 0; 
	left: 25;
	font-family: 'Noto Sans KR', sans-serif;
	font-size:46.0pt;
}

.companyLogo{
	position: absolute; 
	top: 8; 
	left: 25;
	font-family: 'Noto Sans KR', sans-serif;
	font-size:46.0pt;
}

.menu2 {
	height : 100%;
}

.menu2 .menuGroup2 {
	display : flex;
	height : 100%;
	text-align:center;
	align-items: center;	
}

.menu {
	position: absolute;
	height: 100%;
	width : 600;
	top: 0;
	right: 0;
	font-size:46.0pt;
	color:#204080;	
	font-weight:700;
	font-family:'¸¼Àº °íµñ';
	text-align:center;
}

.menu .menuGroup {
	position: absolute;
	right: 0;
	display : flex;
	height : 100%;
	text-align:center;
	align-items: center;
}

.menuItem { 
	font-weight: 600;
	text-align: center;
	height: 40px;
	display: flex;
	justify-content: center;
	margin-left : 10;
	margin-right : 20;
	font-family : 'Gothic A1', sans-serif;
	align-items:center;
	transition: all 0.2s ;
	color: #204080;
	border-radius: 5px;
}

.btnMenu {
	display: block;
	position: relative;
	float: left;
	padding: 0;
	margin: 0;
	font-weight: 600;
	text-align: center;
	line-height: 40px;
	text-decoration-line : none;
	font-size: 20;
	border-radius: 5px;
	transition: all 0.2s ;
	color:#204080;
}
/*
.menuItem:hover{
	color:#ffffff;
	background-color:#204080;
}

.menuItem:active{
	color:#c0d0e0;
}

.menuItem:before,.menuItem:after{
	content:'';
	position:absolute;
	top:0;
	right:0;
	height:2px;
	width:0;
	background: #344573;
	transition:400ms ease all;
}
*/

/*
.btnMenu:hover {
	color:#ffffff;
}
*/
/*
.btnMenu:active {
	color:#c0d0e0;
}
*/
.btnMenu:before {
	content:'';
	position:absolute;
	top:0;
	right:0;
	height:2px;
	width:0;
	background: #344573;
	transition:400ms ease all;
}

/*
.btnMenu:after { 
	color:#c0d0e0;
}
*/

.left, .right {
	width : auto;
	background-color: #FFFFFF;
}
.middle {
	margin: 0 auto;
	width : 90%;
	display: table; 
	/*height: 100vh;*/
	text-align:center;
}
  
.bodycontenttext1 {
	font-size : 20.0pt;
	font-family : 'Noto Sans KR', sans-serif;
	text-align : left;
	margin-bottom : 10;
	display : table-row;
  	/*animation-duration: 3s;
    animation-name: slidein;*/
}  
  
@keyframes slidein {
  from {
    margin-left: 100%;
    width: 300%;
  }

  to {
    margin-left: 0%;
    width: 100%;
  }
}
  
.bodycontenttext2 {
	position: relative;
	margin: auto;
	font-size: 15;
	font-family: 'Noto Sans KR', sans-serif;
}  

.tempspace{
	display:block;
	height:60;
}

.style0
	{mso-number-format:General;
	text-align:general;
	vertical-align:middle;
	white-space:nowrap;
	mso-rotate:0;
	mso-background-source:auto;
	mso-pattern:auto;
	color:black;
	font-size:11.0pt;
	font-weight:400;
	font-style:normal;
	text-decoration:none;
	font-family:"¸¼Àº °íµñ", monospace;
	mso-font-charset:129;
	border:none;
	mso-protection:locked visible;
	mso-style-name:Ç¥ÁØ;
	mso-style-id:0;
}
	
	

.Lv1_Title {
	display : flex;
	text-align: center;	
	background-color: #FFFFFF;
	height : 55px;
	margin-top: 50px;  
	color : #204080;
	font-size : 35;
	font-weight : bold;
	justify-content : center;
	
}

.Lv1_Title .leftText {
	color : #204080;
	margin-right : 35;
	display: flex;
	justify-content : center;
	align-items : center;
}

.Lv1_Title .rightText {
	color : #000000;
	/* background-color : #204080;
	color : #ffffff;
	border-radius: 20px;
	padding : 10px;
	display: flex;
	justify-content : center;
	align-items : center; */
}

.Lv1_TitleContent {
	text-align: center;	
	background-color: #FFFFFF;
	height : 30px;
	margin-top: 120px;  
	font-size : 19;
	font-weight : bold;
}

.Lv2_SubTitle {
	background-color: #FFFFFF;
	height : 30px;
	font-size : 17;
	font-weight : bold;
}

.Lv2_SubTitle_Content {
	text-align: center;	
	background-color: #FFFFFF;
}

.LV2ST01 {
	margin-top: 100px; 
	text-align: center;
}

.LV2ST01C {
	margin-top: 40px;  
}

.LV2ST01C2{
	margin-top: 100px;  
}

.LV2ST02 {
	margin-top: 100px;  
	text-align: center;
}

.LV2ST02C {
	margin-top: 40px; 
	display : flex;
	justify-content : center;
}

.LV2ST03 {
	margin-top: 70px;  
	text-align: center;
}

.LV2ST03C {
	margin-top: 20px;  
	font-size : 14;
	display : flex;
	justify-content : center;
}

.LV2ST04 {
	margin-top: 70px;  
	font-size : 14;
	font-weight : bold;
	text-align: center;
}

.LV2ST05 {	
	display:flex;
	justify-content: center;
	margin-top: 80px;  	
}

.LV2ST05C {
	width:1200px;
	background-color: #D9E1F2;
	font-size : 14;	
	text-align: center;
}


.companyFooter{
	display:flex;
	justify-content: center;
	background-color: #152753;
	margin-top:auto;
}

.contentFooter{
	font-size : 15;	
	height: 130;
	width : 900;
}

.companyInfo{
	display : flex;
}

.companyInfo .companyInfo-Left{
	width:400;
	font-size:20.0pt;
	display : flex;
	align-items: center;
	justify-content: center;	
}

.companyInfo .companyInfo-Right{    
	width:500;
	line-height: 180%;
	font-size:9.0pt;
	font-family: 'Noto Sans KR', sans-serif;	
}

#footerLogo {
	/*background-color: #ffffff;*/
	padding : 5;
	border-radius:5px;
}

.tg  {
	border-collapse:collapse;
	border-spacing:0;
	}
.tg td{
	border-color:black;
	border-style:solid;
	border-width:1px;
	font-family:Malgun Gothic;
	font-size:13px;
	overflow:hidden;
	padding:25px 5px;
	word-break:normal;
  }
.tg th{
	border-color:black;
	border-style:solid;
	border-width:1px;
	font-family:Malgun Gothic;
	font-size:16px;
	font-weight:normal;
	overflow:hidden;
	padding:15px 5px;
	border-top-width:2px;

  word-break:normal;}
.tg .tg-lboi{border-color:inherit;text-align:left;vertical-align:middle}
.tg .tg-9wq8{border-color:inherit;text-align:center;vertical-align:middle}



.tg2  {
	border-collapse:collapse;
	border-spacing:0;
	margin-left:auto; 
    margin-right:auto;
	}
.tg2 td{font-family:Arial, sans-serif;font-size:14px;
  overflow:hidden;padding:5px 6px;word-break:normal;}
.tg2 th{font-family:Arial, sans-serif;font-size:14px;
  font-weight:normal;overflow:hidden;padding:5px 6px;word-break:normal;}
.tg2 .tg2-t6ha{border-color:#000000;font-size:20px;font-weight:bold;text-align:left;vertical-align:top}
.tg2 .tg2-6zma{border-color:#000000;font-size:20px;font-weight:bold;text-align:left;vertical-align:middle}
.tg2 .tg2-5yr0{border-color:#000000;font-size:14px;text-align:center;vertical-align:middle}
.tg2 .tg2-4yuk{border-color:#000000;color:#4876c5;font-size:13px;text-align:center;vertical-align:top}
.tg2 .tg2-ivgh{border-color:#000000;color:#4876c5;text-align:center;vertical-align:top}
.tg2 .tg2-qbm4{border-color:#000000;color:#4876c5;font-size:13px;text-align:center;vertical-align:middle}
.tg2 .tg2-egm8{border-color:#000000;font-size:20px;font-weight:bold;text-align:center;vertical-align:middle}
.tg2 .tg2-xwyw{border-color:#000000;text-align:center;vertical-align:middle}
.tg2 .tg2-796h{border-color:#000000;color:#4876c5;font-size:28px;font-weight:bold;text-align:center;vertical-align:middle}
.tg2 .tg2-0a7q{border-color:#000000;text-align:left;vertical-align:middle}
.tg2 .tg2-vqsi{border-color:#000000;font-size:14px;text-align:left;vertical-align:middle}
.tg2 .tg2-73oq{border-color:#000000;text-align:left;vertical-align:top}
.tg2 .tg2-9mbj{border-color:#000000;font-size:13px;text-align:left;vertical-align:top}
.tg2 .tg2-5r9a{border-color:#000000;font-size:14px;text-align:left;vertical-align:top}
.tg2 .tg2-vruv{border-color:#000000;color:#4876c5;font-size:28px;font-weight:bold;text-align:center;vertical-align:top}


.slider {
  position: relative;
  overflow: hidden;
  width: 600px;
  height: 400px;
}

.slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  animation: slider 7.5s infinite linear;
}

.slide:nth-child(1) {
  background-image: url(img1.jpg);
  animation-delay: 0;
}
.slide:nth-child(2) {
  background-image: url(img2.jpg);
  animation-delay: -2.5s;
}
.slide:nth-child(3) {
  background-image: url(img3.jpg);
  animation-delay: -5s;
}

@keyframes slider {
  0% {
    transform: translateX(0);
  }

  26% {
    transform: translateX(0);
  }
  33% {
    transform: translateX(-100%);
    animation-timing-function: step-end;
  }
  93% {
    transform: translateX(100%);
  }

  100% {
    transform: translateX(0);
  }
}

.divMargin {
	height : 100;
}

#content1 .c1h1 {
	color : #204080;
	font-size : 40;
	font-weight : bold;
	text-align : center;
}

#content1 .c1c1 {
	display : flex;
	margin-top : 30;
	font-size : 20;
	justify-content: center;
}

#content1 .leftText {
	color : #4472c4;
	margin-right : 40;
	font-size : 20;
}

#content1 .rightText1 {
	font-size : 20;
	margin-left : 80;
}

#content1 .rightText2 {
	font-size : 20;
}

#content1 .c2 {
	display : flex;
	justify-content : center;
}
#content1 .c2img {
	justify-content: center;
}
	
.canvasTech {
	width : 800;
	height : 400;	
}

.canvasTech .mainCircle {
	position: relative;
	left: 300;
	top: 100;
	width : 200;
	height : 200;
	background: linear-gradient( 45deg, blue, white );
	border-radius: 50%;
}

.canvasTech .sideCircleEffect1st {
	position: relative ;
	left: 300;
	top: 100;	
	width: 250px;
	height: 250px;
	border-radius: 0 150px 150px 0;
	background: linear-gradient( 45deg, blue, white );
}