@charset "UTF-8";


@import url(./common.css);


.mb-4, .my-4{overflow:hidden}

html{font-size: 62.5%;}


/* 부트스트랩 커스텀 */
.no-padding{padding: 0 !important;}
.clearfix{clear: both !important}
.container-fluid.no-padding{padding: 0;}
/* .container{max-width: 1400px !important;outline: 1px solid; }
.container.sub{max-width: 1200px !important; }
.container.sub_content{max-width: 1200px !important;} */
h5{margin-top: 20px;}
p.card-text{color: #777777;font-weight:300}
	
.wrap {
	/* max-width: 1920px; */
	height: 100%;
	clear: both;
	overflow: hidden;
}



/* header */
header{position: absolute; left:0; width: 100%; /* max-width:1920px; */ height: 11rem; z-index: 999;background: rgba(0,101,175,0.18); box-sizing: border-box;border-bottom:1px solid rgba(255,255,255,0.28); }
header.header_main{position: absolute;width: 100%; height: 100px; z-index: 999;background: rgba(0,0,0,0.15); box-sizing: border-box;border-bottom:none; }
header .navbar{display:flex;display: -moz-box;display: -ms-flexbox;display:-webkit-flex;display:flex; height:100%; padding:0 1.5rem 0 4rem}
/*.nav-item:nth-child(n+2){margin-left: 60px;}*/
.nav-item a{color: #fff; font-size:2.2rem; font-weight: 700; text-shadow: 0 0 5px rgba(0,0,0,0.75); letter-spacing:-.5px;}
.header_main .depth_menu>.nav-item>a{color: #fff; font-size:20px; font-weight: 400; text-shadow: 0 0 8px rgba(0,0,0,0.28);}

.main_visual{position: relative;}

.navWrap{position:relative;width: 100%; height: 100%;}
.navbar-brand {width:31.5rem; margin:-1rem 0 0 ; color: #fff;}
.navbar-brand img{width:100%;}

.data_apply{flex-direction: column;}
.data_apply a{padding:.1rem .5rem; border:1px solid #fff;font-size:14px;}
#navbarSupportedContent li{margin-right:20px;}

.site-btn button{float: left; width:19rem; height: 5rem; color: #fff; font-size:1.5rem; font-weight: 500; text-shadow: 0px 0px .5rem rgba(0,0,0,0.75); background:rgba(6, 44, 86, 0.14);	border: .1rem solid rgba(255,255,255,0.44); }
.site-btn button+button{border-left:none;}



/* main_visual 메인비주얼 */
.main_visual{min-height: 93rem; height:calc(100vh - 15rem)}
.main_visual .swiper-container{height: 100%;}
.main_visual .swiper-slide{position:relative; width: 100%;  /* background: url(../images/main/main_visual01.png)no-repeat center center; */ background-size: cover;}
.main_visual .swiper-slide img{position:absolute; top:50%; left: 50%; transform: translate(-50%, -50%); display: block; width:100%; min-width: 1920px; height: 100%;  object-fit: cover; }
.main_visual .swiper-button-next, .main_visual .swiper-button-prev{display: none;}

.card-title.tit{display: inline-block;font-size: 25px;font-weight: 600;}

.card-title{margin-bottom: 1.4rem;}


.cont_bottom{position: relative;/*width: 1400px;*/ background: aliceblue}
.cont_bottom::before{position: absolute;left: -60px; bottom: 10px; display: block; width: 200%; height: 170px; background: #f6f6f6;content:"";}

/* main-content */
.main-top{width:75rem; margin:0 auto;}
.main-content{position: absolute; top: 0; left: 0; width:100%; height:100%; z-index: 1;}
.search-area__inner{margin-top: 30rem;}
/* .search-box{ width:75rem; height:9.7rem; margin: 0 auto; background: linear-gradient( to right, #72fd03, #ffe400 ); box-shadow: 8px 8px 16px rgba(31,34,44,0.32);} */
.search-box{ width:75rem; height:9.7rem; margin: 0 auto; border-style: solid;border-image: linear-gradient(to right, #72fd03 0%, #ffe400 100%);
  border-image-slice: 1;  background: transparent; border-image-width: .8rem; box-shadow: .8rem .8rem 1.6rem rgba(31,34,44,0.32), inset .8rem 
  .8rem 1.6rem rgba(31,34,44,0.32);}
.search-box input{display: block; width:calc(100% - 1.6rem); height:80px;  background: transparent; border: none; line-height: 80px; text-indent: 3rem; color: #fff; font-size: 2rem; /*  background: url(../images/main/input-text-shadow.png)no-repeat left 2.5rem top 72%; */}
.search-box input::placeholder{ padding-top:2.8rem;font-size: 0; width:100%; height:100%; line-height: 100%; background: url(../images/main/input-text-shadow.png)no-repeat left 3rem top 0%;}
.search-box button{ height:100%; border: none; background: transparent;}
.search-box .search img{display: block; height: auto; margin-top: 0.9rem;}

.db-area__inner{margin-top: 3rem; height: 4.2rem;}
/* .db-area__inner p{} */
.db-area__inner p em{/* display:inline-block; width:10rem; */min-width:10rem; height: 100%; color: #fee401; font-size:1.5rem; font-weight: 500; text-shadow: 0 0 5px rgba(0,0,0,0.75); text-align: center; background: rgba(1,28,106,0.28); line-height: 4.2rem;}
.db-area__inner p span{display:inline-block; width: 100%; height: 100%; padding-left: 2.2rem; color: #fff; font-size:1.5rem; font-weight: 300; text-shadow: 0 0 5px rgba(0,0,0,0.75);line-height: 4.2rem; background: rgba(19,60,120,0.28);}

.main-bottom{position: absolute; bottom: 0; width:100%;}
.graph-area{width: 115.2rem; height: 16.6rem; margin: 0 auto;}
.graph-box{width: calc(50% - .5rem); height: 100%;}
.graph-box .left{width:26.8%; padding:3rem 0 3.5rem 2rem; background:rgba(7,38,77,0.9); color: #fff; font-size:2rem; font-weight: 500; line-height: 2.8rem;}
.graph-box .left a{position:relative; bottom:0; display: inline-block;  font-size:1.3rem; color: rgba(255,255,255,0.7);}
.graph-box .left a::before{position:absolute; bottom: -.5rem; display: block; width:100%; height:.1rem; background:rgba(255,255,255,0.7); content: "";}
.graph-box .right{width: calc(100% - 26.8%); background: rgba(12,45,84,0.66);}




/* graph */
 
/* @keyframes p-25{from{width:0}to{width:25%}}
@keyframes p-30{from{width:0}to{width:30%}}
@keyframes p-35{from{width:0}to{width:35%}}
@keyframes p-40{from{width:0}to{width:40%}}
@keyframes p-45{from{width:0}to{width:45%}}
@keyframes p-50{from{width:0}to{width:50%}}
@keyframes p-55{from{width:0}to{width:55%}}
@keyframes p-60{from{width:0}to{width:60%}}
@keyframes p-65{from{width:0}to{width:65%}}
@keyframes p-70{from{width:0}to{width:70%}}
@keyframes p-75{from{width:0}to{width:75%}}
@keyframes p-80{from{width:0}to{width:80%}}
@keyframes p-85{from{width:0}to{width:85%}}
@keyframes p-90{from{width:0}to{width:90%}}
@keyframes p-95{from{width:0}to{width:95%}}
@keyframes p-100{from{width:0}to{width:100%}} 


li.item1{animation:p-10 .2s}

li.item2{animation:p-25 .5s}
li.item3{width:50%;animation:p-50 1s}


li.item4{width:100%;animation:p-100 2s}  */

/* li.p-5::before{content:"5%"}li.p-10::before{content:"10%"}li.p-15::before{content:"15%"}li.p-20::before{content:"20%"}li.p-25::before{content:"25%"}li.p-30::before{content:"30%"}li.p-35::before{content:"35%"}li.p-40::before{content:"40%"}li.p-45::before{content:"45%"}li.p-50::before{content:"50%"}li.p-55::before{content:"55%"}li.p-60::before{content:"60%"}li.p-65::before{content:"65%"}li.p-70::before{content:"70%"}li.p-75::before{content:"75%"}li.p-80::before{content:"80%"}li.p-85::before{content:"85%"}li.p-90::before{content:"90%"}li.p-95::before{content:"95%"}li.p-100::before{content:"100%"} */

/* .percent-indicator .per-0::before{content:'0%'}.percent-indicator .per-20::before{content:'20%'}.percent-indicator .per-40::before{content:'40%'}.percent-indicator .per-60::before{content:'60%'}.percent-indicator .per-80::before{content:'80%'}.percent-indicator .per-100::before{content:'100%'} */


.graph-wrapper {
  position: relative;
  width:calc(100% - 6.2rem);
  height: 100%;
  padding:2rem 0 1.5rem 6.2rem;
  max-width:800px;
  margin:0
}


.percent-indicator {
  position:absolute;
  top:0;
  right:0px;
  left:6.2rem;
  bottom:0;
  display:flex;
  justify-content: space-between;
  width:calc(100% - 15rem);
  padding:2rem 0 1.5rem 0;
}

.percent-indicator div {
  position:relative;
  width:0;
  margin-left:-1px;
  border-left:1px solid rgba(255, 255, 255, .2)
}

.percent-indicator .per-0 {
  transform: translateX(1px)
}

.percent-indicator div::before, .percent-indicator div::after {
  position: absolute;
  left:50%;
  transform: translateX(-50%);
  padding-bottom:5px;
  font-size:16px;
  line-height:16px;
  background:#fff
}

.percent-indicator div::after {
  top:21px
}


.graph {
	display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
        flex-direction: column;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
        justify-content: space-between;
		width:80%;
height: 100%;
  position: relative;
  margin:0px;
  padding:1rem 0;
  list-style:none;
  z-index: 2
}

.graph li {	position:relative;	width:0; height: 1.8rem; background:rgba(255,255,255,0.44);  border: 1px solid rgba(255,255,255,0.44);  color:#fff;  text-align: left; -webkit-transition: all .3s ease-out;	transition: all .3s ease-out; }
.graph li span{position: absolute; top: 50%; transform: translateY(-50%);left: -4.5rem; font-size:1.3rem;}
.graph li em{position: absolute; top: 50%; transform: translateY(-50%); width: 2.6rem; right: -3.5rem; color: #ffe402; font-size:1.2rem;}

.notice__inner{height: 8.7rem; margin-top:1rem; background: rgba(0,40,84,0.78);}
.notice__inner .tit{width:21rem; height: 100%;  background:#fff url(../images/common/icon-arrow-fill.png)no-repeat right 5.0rem center; text-align: center; font-size:2rem; color:#000e20; font-weight: 600;}
.notice__inner .date, .notice__inner .txt{padding-left: 4.5rem; color: #fff; font-size:1.6rem; } 
.notice__inner .txt{font-size:2rem}

/* s::20231205::페이지 개편 */
header .navbar{height:11rem;}
header.is-active .navbar{border-bottom:1px solid rgb(227 227 227 / 29%)}
header.sub .nav-item > a{color:#fff:}
.depth2 > li a:hover{color:#fff;font-weight:700;}
header .nav-item.is-hover .depth2{background-color:rgb(0 0 0 / 10%);}
/* e::20231205::페이지 개편 */

/****************************************************************************************/
/****************************************************************************************/
/*Media Query*/
/****************************************************************************************/
/****************************************************************************************/


@media only screen and (max-width: 1400px){
	.container{padding: 0 2% !important;}

	.card.data_cont:not(:first-child) a{width: 73%;}
	/*.card-header span {width: 23%;}*/
	#header .nav-link {display: none;}
	#header .nav .nav-item {display: none !important;}
	.navbar-brand{flex: none}
	.forum_wrap{max-width:none;padding-right:15px !important;}
	.data_news{max-width: 100% !important;flex:1; padding-right:15px !important;margin-left:0;padding-left:15px !important;}

  html{font-size:60%;}
}
@media only screen and (max-width: 1200px){
  .graph-area{width:100%; padding:0 1%;}
}

@media only screen and (max-width: 720px){
  .graph-area{-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column; width:100%; height:100%; padding:0 1%;}
  .graph-box{width:100%;}
  .graph-box+.graph-box{margin-top:.5rem;}

  .main-top{width:80%;}
  .search-box{width:100%;}
  .db-area__inner p{height:auto; background: rgba(1,28,106,0.28);}
  .db-area__inner p em{background:none;}
  .db-area__inner p span{background:rgba(19,60,120,0.14)}
  .search-box input{height:100%;}
  .search-box input::placeholder{line-height: 4rem; background-size: 50%;}
}

@media only screen and (max-width: 332px){
	.card-header span{max-width:27%;}
}

/* 24019 pub 메인 수정 */

#header{
	position:relative;
	background:#fff;
}
.main_visual{
	min-height:100%;
	height:82rem;
}
.main-content{
	        display: grid;
    width: 150rem;
    max-width: 100%;
    grid-auto-flow: column;
    margin: 0 auto;
    justify-content: space-between;
    position: absolute;
    left: 52.8%;
    transform: translateX(-50%);
    grid-template-columns: 55.2rem 80rem;
}
.main-content .main-left{
	padding-top:13rem;
}
.main-content .main-right{
	padding-top:4.5rem;
}
.navbar-brand{
	width:32.3rem;
}
.nav-item a{
    color: #000;
    text-shadow: none;
}
.site-btn button{
	background:#edf5ff;
	color:#002854;
	text-shadow: none;
}
.site-btn button:nth-child(1){
	border-radius:0.4rem 0 0 0.4rem;
}
.site-btn button:nth-child(2){
	border-radius: 0 0.4rem 0.4rem 0;
}
.title-area{
}
.title-area .tit{
	color: #FFF;
	font-size: 5.2rem;
	font-weight: 700;
	line-height: 7.2rem;
}
.title-area .txt{
	color: #FFF;
	margin-top:0.3rem;
	font-size: 1.8rem;
	font-weight: 200;
	line-height: 3rem;
}
.hashTag-area{
	margin-top:5rem;
	display:flex;
	flex-wrap:wrap;
	gap:0.4rem;
}
.hashTag-area button{
	position:relative;
	color:#DBEBFF;
	font-size:1.6rem;
	background:none;
	border:2px solid #4D8FDC;
	border-radius:999px;
	padding:0 1.25rem;
	height:3.4rem;
	font-weight:200;
}
.hashTag-area button:hover,
.hashTag-area button.active{
	background:#FFD600;
	color:#003674;
	border-color:#FFD600;
	outline:none;
	font-weight:600;
}
.hashTag-area button:hover::before,
.hashTag-area button.active::before{
	color:#003674;
	font-weight:600;
}
.hashTag-area button:active{
	border-color:#FFD600;
	outline:none;
	font-weight:600;
}
.hashTag-area button::before{
	content:'#';
	color:#DBEBFF;
	font-size:1.6rem;
	font-weight:200;
}
.main-content .search-box{
	width:100%;
	margin:0;
	height:8rem;
	border-image:none;
	border-radius: 999px;
	border: 6px solid #D3E3F6;
	background: #FFF;
	padding:0 3rem;
	box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.23) inset;
}
.main-content .search-box button{
	padding:0;
}
.main-content .search-area__inner{
	margin-top:4.5rem;
}
.main-content .search-box input{
	height:8rem;
	padding:0;
	background:none;
	text-indent:1rem;
	font-size:2rem;
	color:#083F7F;
	font-weight:600;

}
.main-content .search-box input::placeholder{
	color:#083F7F !important;
	background:unset;
	font-size:2rem;
	font-weight:600;
}
.main-content .search-box .search{
	width:4rem;
}
.main-content .search-box .search img{
	margin:0;
	width:100%;
}
.main-content .db-area__inner{
	margin-top:6rem;
}
.main-content .db-area__inner p{
	height:6.2rem;
}
.main-content .db-area__inner p span{
	padding-left:0;
	font-size:1.6rem;
	width:calc(100% - 7.4rem);
	line-height:2.3rem;
	box-shadow:none;
	background:none;
	color:#cad8ff;
	text-shadow:none;
}
.main-content .db-area__inner p em{
	min-width:auto;
	width:6rem;
	margin-right:1.4rem;
	background:none;
	line-height:2.3rem;
	font-size:1.6rem;
	box-shadow:none;
	text-shadow:none;
}

.main-content .graph-area .txt-box .tit{
	color: #06216E;
	font-size: 32px;
	font-style: normal;
	font-weight: 700;
	line-height: 48px; /* 150% */
	letter-spacing: -1.6px;
}


.main-content .graph-area{
	width:80rem;
	height:73rem;
	display:flex;
	flex-direction:column;
	background:#fff;
	border-radius:12rem 0 12rem 0;
	position:relative;
	align-items: center;
}
.main-content .graph-area > img{
	width:59.18rem;
	margin-top:7rem;
	/* padding-left:8.4rem; */
}
.main-content .graph-area .txt-box{
width:100%;
padding-left:8rem;
padding-right:8rem;
	padding-top:8.6rem;
	/* padding-left:8.4rem; */
	z-index:2;
}
.main-content .graph-area .txt-box .txt{
	color: #6F6F6F;
	margin-top:0.6rem;
	font-size: 1.8rem;
	font-style: normal;
	font-weight: 400;
	line-height: 3rem;
	letter-spacing: -0.09rem;
}


footer address{
	margin-top:0.5rem;
	margin-bottom:0;
}

@media only screen and (max-width: 1600px){
	.main-content{
		padding:0 3rem;
		grid-template-columns: 42% 52%;
	}
	.graph-area{
		width:100%;
		height:90%;
		padding:0 !important;
	}
	.graph-area .txt-box{
		padding-left:10%;
	}
	.graph-area > img{
		width:81%;
	}
}