@charset "utf-8";
@import url( "http://fonts.googleapis.com/earlyaccess/notosanskr.css" );
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap');

.after:after{display:block;visibility:hidden;clear:both;content:""}

/* Noto Sans KR (korean) http://www.google.com/fonts/earlyaccess*/

/* 초기화 */
a{color: inherit; text-decoration: none;}

*{
	margin:0;
	padding:0;
	box-sizing:border-box;
	/*font-family:'Noto Sans KR';*/
	/*font-weight:400;*/
	/*font-size:16px;*/
}


input[type=text],input[type=password], textarea {
-webkit-transition: all 0.30s ease-in-out;
-moz-transition: all 0.30s ease-in-out;
-ms-transition: all 0.30s ease-in-out;
-o-transition: all 0.30s ease-in-out;
outline: none;
}

input[type=text]:focus,input[type=password]:focus,  textarea:focus,select:focus {
-webkit-box-shadow:  0 0 5px #9ed4ff;
-moz-box-shadow:  0 0 5px #9ed4ff;
box-shadow: 0 0 5px #9ed4ff;
border: 1px solid #558ab7 !important;
}
.placeholdersjs { color: #aaa !important; }

.clearfix{clear: both;}


@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap');


body{
	font-family: 'Noto Sans KR',sans-serif !important; 
	margin: 0;
	padding: 0; 
	color: #333;
	font-size: 16px;
	overflow-x: hidden;
	overflow-y: auto;
	word-break: keep-all;
}
html{
	width: 100%; 
	height: 100%;
	/*overflow :  hidden;*/
}

/* =========== main ========== */

/* main */
    html, body {
        position: relative;
        height: 100%;
    }
    body {
        background: #eee;
        font-size: 14px;
        color:#333;
        margin: 0;
        padding: 0;
    }
    .swiper-container {
        width: 100%;
        height: 100%;
        margin-left: auto;
        margin-right: auto;
    }
    .swiper-slide {
        text-align: center;
        font-size: 18px;
        background: #fff;
        /* Center slide text vertically */
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
		overflow:hidden;
    }
	.swiper-slide img {
		width:100%;
	}
}
.mainBox{
	width: 100%; 
	/*width: 59.4%;*/ /*width: calc(100% - 43%);*/
	margin: 6.5% auto 0;
	}
.mainBox2 {
	position:absolute;
	top:0;
	left:0;
	z-index:10;
	width:100%;
	height:100vh;
	background:#00000030;
}
.slogan_txt{
	font-size: 18px; 
	font-weight: 300;
	color: #fff;
	width: 100%; 
	line-height: 25px;
	padding-top:40%;
	/*margin-top: 25px;*/
	margin-bottom: 10px;
}
.mainTxt{
	font-size: 40px;
	font-weight: 600;
	color: #fff;
	width: 100%; 
	line-height: 65px;
	text-shadow: 0px 1px 6px #848484;
}
.slogan_txt2{
	width: 100%; 
	color: #fff;
	padding-top:50%;
	font-size: 1.143em; /*18px*/
	font-weight: 600;
	line-height: 20px;
	text-shadow: 0px 1px 6px #848484;
}
.mainTxt2{
	font-size: 18px; 
	font-weight: 300;
	color: #fff;
	width: 100%; 
	line-height: 25px;
	margin-top: 10px;
}
.main_img{ animation:m1 7s  infinite  ease-in-out ; }
	
	@keyframes m1 {
		0% { transform:scale(1.5); }
		100% { transform:scale(1.25); }
	}

.main-chart {
		position:relative; 
		padding-top:20px;
	/*border:1px solid red;*/
}

	.main-chart .DiagramArea ul {
		display:flex;
		justify-content:space-between;
		flex-wrap: wrap;
		max-width:375px;
		margin: 0 auto;
	}
	.main-chart .DiagramArea li {
  /*  float: left!important;*/
		width:180px; 
		height:200px;
    text-align: center;
    color: #ebebeb;
	}
	.main-chart .DiagramArea .box {
		position:absolute; 
		width:180px; 
		text-align:center;
		/*height:80px; */
		padding-top:105px;
		font-size:30px;
		color:#fff;
		/*border:1px solid green;*/
	}
	.main-chart .DiagramArea .box span {
    font-size: 20px;
    position: relative;
    top: -10px;
	}
	.main-chart .DiagramArea .title {
		position:absolute; 
		width:180px; 
		text-align:center;
		padding-top:40px;
		color:#fff;
		font-weight:500;
		font-size:12px;
		line-height:15px;
		letter-spacing:0em;
		margin-top:12px;
	}
	.main-chart .DiagramArea .title2 {
		position:absolute; 
		width:180px; 
		text-align:center;
		padding-top:55px;
		color:#fff;
		font-weight:500;
		font-size:12px;
		line-height:15px;
		letter-spacing:-0.1em;
		margin-top:12px;
	}

.swiper-button-prev{opacity:0.6;}
.swiper-button-prev:hover{opacity:1; transition: 0.4s ease;}
.swiper-button-next{opacity:0.6;}
.swiper-button-next:hover{opacity:1; transition: 0.4s ease;}

/* header*/
header {
	position:absolute;
	width:100%;
	top:0;
	left:0;
	z-index:10;
}
header .inner {
	display:flex;
	justify-content: space-between;
	align-items:center;
	position:relative;
	width:100%;
	padding:10px 10px;
}
header .inner h1 img {
	width:150px;
}
.lang_btn{
	color:#fff;
	font-size:14px;
	font-weight:600;
	position:absolute;
	right:50px;
	/*padding:5px 10px;
	border:1px solid #fff;
	border-radius:3px;*/	
}
.lang_btn img {
	width:20px;
	
}
.gnb_btn { 
	display:block;
	width:25px;
/*	position:absolute; 
	right:0px; 
	bottom:0px;*/
	color:#000; /* background:#f2df11; */
}
.gnb_btn img {
	width:100%;
}

.gnb {
	position:fixed; 
	left:-1920px;
	top:0px;
	width:80%; 
	height:100%; 
	background:#fff; 
	z-index:100;
	padding:00px 0px;
}
.gnb img{
	width:150px;
}
.gnb li {
    font-style: normal;
	padding-bottom:15px;
    text-transform: none;
	padding:15px 30px;
	background:#6a6a6a;
	border-bottom:1px solid #ffffff60;
}
.gnb li:first-child {
	background:#fff;
	border-bottom:none;
}
.gnb li a {
	color:#fff;
	font-weight: 400;
    font-size: 15px;
	line-height:30px;
    font-size: 18px;
}
.gnb a span {
	margin-left:2%;
	opacity:0.7;
	color:#aaa;
}
.close { 
   position:absolute; 
   right:5px;
   top:18px; 
   display:inline-block; 
   width:45px; 
   height:45px;
   text-align:center; 
   line-height:50px;
   /*background:#005288;
   border:1px solid #ccc;*/
}
/*햄버거메뉴 클릭시 body에 추가하여 스크롤을 제거*/
.not_scroll{overflow:hidden; height:100%;}
#graybg{
	position:fixed; 
	top:0;
	left:0; 
	background:#000; 
	opacity:0.5;
	display:none; 
	width:100%; 
	height:100%;
	z-index:2;
}

.banner_wrap {
	position:absolute;
	width:1920px;
	left:0;
	top:40%;
	z-index:10;
	/*border:1px solid green;*/
}

.banner_wrap ul {
	position:absolute;
	right:0;
	padding:0 100px;
	/*border:1px solid #ff0;*/
}
.banner_wrap ul li {	
	width:187px;
	text-align:center;
	background:#00000050;
	border-radius:30px;
	padding: 14px 0;
	margin-bottom:20px;
	/*border:1px solid Red;*/
}
.banner_wrap ul li a {
	color:#fff;
	font-size:14px;
	font-weight:200;
	vertical-align:middle;
}
.banner_wrap ul li a img {
	vertical-align:middle;
	margin-right:10px;
}

footer {
	position:absolute;
	width:1920px;
	bottom:0;
	left:0;
	z-index:10;
}
footer .inner {
	width:100%;
	padding:29px 100px;
	text-align:center;
	color:#fff;
}
footer .inner p {
	font-size:13px;
	font-weight:100;
	line-height:30px;
}