@charset "UTF-8";

#page_wrap{overflow:hidden; }
/*** 비주얼 ****/
.visual_wrap{ position:relative; width:100%; height:940px; background:url('/images/main/visual_back-10b5f7e2b47c3bcf035a7affa9a05d9c.png') #008ebb; background-position: top center; background-repeat: no-repeat; background-size:contain;  /*#008ebb*/}

.visual_wrap .title_wrap{position:relative; margin:12em 14em 0 0; text-align:right;}
	.visual_wrap .title_wrap h2{font-family: 'Pretendard-Medium'; font-size:41px; font-weight:500; line-height:1; letter-spacing:-2.05px; color:#fff;}
	.visual_wrap .title_wrap h3{
		margin-bottom:10px; font-size:100px; font-family: 'Pretendard-ExtraBold'; letter-spacing:-2.5px;
		/*text-shadow: 0px 7px 35px rgba(35, 31, 32, 0.25); 텍스트에 그라디언트를 적용하려했으나,, text가 투명인관계로 text-shadow가 위로가서,, 방법이없이게 svg 텍스트로 나중에 넣을예정*/
		/*background-image: linear-gradient(to top, #5ed7ff, #fff), linear-gradient(to bottom, #fff, #fff);
		-webkit-background-clip: text; -webkit-text-fill-color: transparent;*/
	}
	.text_knn{max-width:1105px;}
	.visual_wrap .title_wrap p{clear:both; font-family: 'NanumSquareRoundR'; font-size:28px; line-height:1.5; color:#fff; /*color:#6eb7d3; color:#fff; opacity:0.28;*/}

.visual_wrap .go_list_wrap{display:flex; justify-content:right; text-align:center; margin:3em 15em 0 0; position:absolute; right:0;}
	.visual_wrap .go_list_wrap > a{ margin-right:56px; color: #fff; font-size: 19px; letter-spacing: -0.48px;}
	.visual_wrap .go_list_wrap > a:last-child{margin-right:0}
		.visual_wrap .go_list_wrap > a dt{margin-bottom:20px;}
		.visual_wrap .go_list_wrap > a dd{font-family: 'Pretendard-Light';}
		.visual_wrap .go_list_wrap img{width:auto; max-height:84px;}

.deco_wrap, .deco_mother, .deco_baby{position: absolute; }
.deco_wrap{bottom: 0; left:0; max-width:1921px;}
.deco_mother{max-width: 515px; bottom: 11.5em; left: 20em;}
.deco_baby{max-width: 409px;
    bottom: 10em;
    left: 24.5em;}
.typo{position:absolute;}
	.typo_skyblue{top:5em; left:35%; max-width:137px;}
	.typo_red{top:18em; right:-2em; max-width:160px;}
	.typo_yellow{bottom:7.5em; left:22em; max-width:225px;}
	.typo_skyblue_bottom{bottom:6em; right:8em; max-width:143px;}


@media screen and (min-width:1921px){
	/*.visual_wrap{background-size:cover};*/
}

@media screen and (max-width:1679px){
	/*.visual_wrap{background-size:cover};*/
	.deco_mother{display:none;}
	.deco_baby{display:none;}
	.visual_wrap .title_wrap {margin: 12em 8em 0 0;}
	.visual_wrap .go_list_wrap{margin:5em 9em 0 0;}
}

@media screen and (max-width:1335px){
	.visual_wrap .title_wrap{margin:12em 4% 0;}
	.visual_wrap .title_wrap h2{text-align:center;}
	.visual_wrap .title_wrap h3{margin-bottom:0; /*20px;*/ text-align:center;}
	.visual_wrap .title_wrap p{display:none;}
	.visual_wrap .go_list_wrap{margin: 0; left: 50%; right: auto; transform: translateX(-50%);}
	.typo_yellow{left:-2%}
}

@media screen and (max-width:767px){
	.visual_wrap{background: url(/images/main/visual_back_mo-523b52eea27fdb722c75d8fa64015407.png) #008ebb; background-size:cover;}
	.visual_wrap .title_wrap{text-align:center; margin:10em 4% 0;}
	.visual_wrap .title_wrap h2{font-size:46px; opacity:0.6;}
	.deco_wrap{position:relative; bottom:4em; width: 1921px; left: 58%; transform: translate(-50%);}
	.typo_yellow, .typo_skyblue, .typo_red, .typo_skyblue_bottom{display:none;}
	.visual_wrap .go_list_wrap{width:92%; justify-content:space-around;}
	.visual_wrap .go_list_wrap:after{content:inherit;}
	.visual_wrap .go_list_wrap img{height:118px;}
	.visual_wrap .go_list_wrap > a{margin-right:0; font-size:26px;}
}

@media screen and (max-width:479px){
	.visual_wrap{height:650px;}
	.visual_wrap .title_wrap{margin:120px 4% 0;}
	.visual_wrap .title_wrap h2{margin-bottom:10px; font-size:27px;}
	.text_knn{width:84%;}
	.visual_wrap .go_list_wrap > a{width:33.33%;  font-size:16px;}
	.visual_wrap .go_list_wrap > a dt{margin-bottom:10px;}
	.visual_wrap .go_list_wrap img{height:54px;}
	.deco_wrap{width:1100px; bottom:30px;}

}

@media screen and (max-width:360px){
	.visual_wrap{height:650px;}
}

/*** 탭 섹션 ***/
.main_tab_section_wrap{padding:0 4%; text-align:center;}

	.main_tab_section_wrap .des{font-size:28px; line-height:1.64;}

	.tab_3step_wrap{display:flex; justify-content:center; margin:80px 0 100px 0;}
		.tab_3step_wrap .tab_on{background:#008cba;}
		.tab_3step_wrap li{background:#2f2f4a; width:215px; height:52px; line-height:52px; border:1px solid #e1e1e1}
		.tab_3step_wrap li:hover{background:#008cba;}
		.tab_3step_wrap a{font-family: 'Pretendard-Light';  font-size:18px; color:#fff;}

	.main_tab_section_wrap .des_grey{font-family: 'Pretendard-Thin'; font-weight:100; color:rgba(0, 0, 0, 0.37); font-size:50px; line-height:1.28; letter-spacing:-2.5px;}

	.floating_circle_center_and_counting_wrap{ margin:25px 0 25px 0;}
	.floating_circle_center{position:relative;}
		.floating_circle{overflow:hidden; position:absolute; border-radius: 50%; box-sizing: content-box;}
		.floating_circle:after{display:block; content:""; clear:both;}
		.floating_circle01{max-width:48px; top:1%; left:5%; animation: floating2 3s ease-in-out infinite;}
		.floating_circle02{max-width:120px; top:21%; left:21%; border: 15px solid #fafafa; animation: resizing1 3s ease-in-out infinite;}
		.floating_circle04{max-width:76px; top:1%; right:11%; border: 10px solid #fafafa; animation: floating1 3s ease-in-out infinite;}
		.floating_circle05{max-width:101px; top:13%; right:-2%; border: 15px solid #fafafa; animation: resizing2 2s ease-in-out infinite;}
		.floating_circle06{max-width:70px; bottom:-7%; left:15%; border: 10px solid #fafafa;  animation: resizing3 3s ease-in-out infinite;}
		.floating_circle07{max-width:120px; bottom:-27%; right:5%; border: 15px solid #fafafa; animation: resizing4 3s ease-in-out infinite;}
		.floating_circle08{max-width:120px; bottom:-38%; left:-2%; border: 15px solid #fafafa; animation: resizing2 3s ease-in-out infinite;}
		.floating_circle09{max-width:87px; bottom:-48%; right:-2%; animation: floating1 3s ease-in-out infinite;}

		.floating_circle03{margin-bottom:10px; position:relative; max-width:208px; top:0; left:50%; border: 35px solid #fafafa; transform: translateX(-50%);}
		.floating_circle_center .txt{margin:20px auto 50px; font-family: 'Pretendard-SemiBold'; font-size:30px;}

		@keyframes floating1 {
			from {
				-webkit-transform: translate(0, 0px);
				transform: translate(0, 0px);
			}
			65% {
				-webkit-transform: translate(0, 30px);
				transform: translate(0, 30px);
			}
			to {
				-webkit-transform: translate(0, 0px);
				transform: translate(0, 0px);
			}
		}
		@keyframes floating2 {
			from {
				-webkit-transform: translate(0, 40px);
				transform: translate(0, 40px);
			}
			65% {
				-webkit-transform: translate(0, 0px);
				transform: translate(0, 0px);
			}
			to {
				-webkit-transform: translate(0, 40px);
				transform: translate(0, 40px);
			}
		}
		@keyframes resizing1 {
			from {
				-webkit-transform: scale(1.1);
				transform: scale(1.1);
			}
			65% {
				-webkit-transform: scale(1.0);
				transform: scale(1.0);
			}
			to {
				-webkit-transform: scale(1.1);
				transform: scale(1.1);
			}
		}
		@keyframes resizing2 {
			from {
				-webkit-transform: scale(1.0);
				transform: scale(1.0);
			}
			65% {
				-webkit-transform: scale(1.1);
				transform: scale(1.1);
			}
			to {
				-webkit-transform: scale(1.0);
				transform: scale(1.0);
			}
		}
		@keyframes resizing3{
			from {
				-webkit-transform: scale(1.6);
				transform: scale(1.6);
			}
			65% {
				-webkit-transform: scale(1.0);
				transform: scale(1.0);
			}
			to {
				-webkit-transform: scale(1.6);
				transform: scale(1.6);
			}
		}
		@keyframes resizing4 {
			from {
				-webkit-transform: scale(1.0);
				transform: scale(1.0);
			}
			65% {
				-webkit-transform: scale(1.6);
				transform: scale(1.6);
			}
			to {
				-webkit-transform: scale(1.0);
				transform: scale(1.0);
			}
		}

	.counting_wrap{display:flex; justify-content:center;}
		.counting_wrap li img{display: block; padding: 0 115px; margin:0 auto; margin-bottom: 30px; max-height:99px; width:auto; border-right: 1px solid #e5e5e5;}
		.counting_wrap li:last-child img{border-right: none;}
		.counting_wrap li span{font-family: 'NanumSquareRoundL';  font-size:26px; }
		.counting_wrap li p{font-family: 'SCDream5'; font-size:60px; color:#008cba;}

@media screen and (max-width:1439px){
	.floating_circle08, .floating_circle09{display:none;}
	.floating_circle04{right:19%;}
	.floating_circle06 {bottom: 11%; left: 2%;}
	.floating_circle07{bottom:-4%}
}

@media screen and (max-width:1279px){
	.floating_circle01{left:-2%;}
	.floating_circle02{left:7%}
	.floating_circle03{max-width:188px;}
	.floating_circle05{right:-12%}
	.floating_circle06 {bottom: 23%; left: -7%;}
	.floating_circle07{bottom:17%; max-width:90px;}
}


@media screen and (max-width:767px){
	.main_tab_section_wrap{padding-top:80px;}
	.main_tab_section_wrap .des{ font-size:24px;}
	.main_tab_section_wrap .des_grey{font-size:40px;}

	.floating_circle04 {right: 13%; width: 60px;}
	.floating_circle02{max-width:76px;}
	.floating_circle03 {max-width: 133px; border: 20px solid #fafafa;}
	.floating_circle05 {right:-15%;}
	.floating_circle06{max-width:50px;}
	.floating_circle07 {max-width: 45px; border: 10px solid #fafafa;}

	.counting_wrap li span{font-size:24px;}
}

@media screen and (max-width:570px){
	.main_tab_section_wrap .des_grey{font-size:34px;}
	.floating_circle01 {top:-13%; max-width:28px;}
	.floating_circle02 {left:2%; max-width:50px;}
	.floating_circle03 {max-width:90px;}
	.floating_circle04 {max-width:48px; top:-16%; right:2%;}
	.floating_circle02{border:6px solid #fafafa;}
	.floating_circle05{max-width:50px; top:19%; right:-17%; border:10px solid #fafafa;}
	.floating_circle06 {max-width:28px; left:-13%;}
	.floating_circle07{max-width:28px; bottom:23%; border:6px solid #fafafa;}

	.counting_wrap {justify-content:space-around;}
	.counting_wrap li{width:50%;}
	.counting_wrap li img{padding:0; max-height:80px; border-right:none;}
	.counting_wrap li p{font-size:50px;}



}

@media screen and (max-width:479px){

	.main_tab_section_wrap{padding-top:0;}
	.main_tab_section_wrap .des{ font-size:18px;}
	.main_tab_section_wrap .des_grey{font-size:22px;}

	.tab_3step_wrap{margin:25px 0 40px 0;}

	.floating_circle_center .txt {margin: 30px auto 30px; font-size: 26px;}

	.floating_circle_center_and_counting_wrap{margin:30px 0 60px 0;}
	.counting_wrap{padding:0 4%}
	.counting_wrap li span{font-size:20px; margin-bottom: 5px; display: inline-block;}
	.counting_wrap li img{margin-bottom:20px; max-height:54px;}
	.counting_wrap li p{font-size:40px;}

}


/******* 차트 *******/
.main_chart_wrap{padding:0 4%; margin-bottom:140px; text-align:center;}
	.main_chart_wrap .tit{margin: 20px auto 0; font-family: 'Pretendard-SemiBold'; font-size: 30px;}

	/*#chart_div {border:1px solid red; margin:0 auto; width: 920px; min-height: 390px;} */



.main_notice_wrap{padding:0 4% 30px 4%;  margin-bottom:190px;}
	.main_notice_wrap .main_notice_ul{display:flex; justify-content:center;}
	.main_notice_wrap .main_notice_ul li{position:relative; margin: 25px 46px 25px 0; padding:40px; width:400px; border-radius:30px; box-shadow: 0px 7px 20px 0 rgba(35, 31, 32, 0.14);}
	.main_notice_wrap .main_notice_ul li:last-child{margin-right:0;}
	.main_notice_wrap .ddak{background:#dd0000; border-radius:50%; font-size:13px; width:46px; height:46px; line-height: 46px; color: #fff; text-align: center; position: absolute; top: 26px; right: 40px;}
	.main_notice_wrap .tit_small{display:block; margin-bottom:45px; font-family: 'NanumSquareRoundL'; font-size:16px;}
	.main_notice_wrap .tit{margin-bottom:17px; font-size:24px; }
	.main_notice_wrap .date{ font-family: 'Pretendard-ExtraLight'; font-size:16px; color:#9b9b9b;}

@media screen and (max-width:1439px){
	.main_notice_wrap .main_notice_ul li{width:360px;}
}

@media screen and (max-width:1279px){
	.main_notice_wrap .main_notice_ul li{width:300px;}
}

@media screen and (max-width:1023px){
	.main_notice_wrap .main_notice_ul {flex-direction: column;}
	.main_notice_wrap .main_notice_ul li{width:100%;}

	.main_chart_wrap:not(.flex_chart){display:none;}
}

@media screen and (max-width:479px){
	.main_notice_wrap{margin-bottom:100px;}
	.main_notice_wrap .main_notice_ul li{padding:30px; margin:10px auto 10px;}
	.main_notice_wrap .tit{font-size:20px; margin-bottom:10px;}
	.main_notice_wrap .tit_small{margin-bottom:20px;}
	.main_notice_wrap .ddak {font-size: 12px; width: 36px; height: 36px; line-height: 36px; top: 22px; right: 22px;}


}

/* 20220809 차트 추가 */
.main_chart_wrap_all{padding:0 10%;}
.main_chart_wrap{float:left; width:50%; padding:0; min-height: 450px;}
div.btn_chart_export{display:flex;}
.btn_chart_export div.ml_auto{margin-left:auto;}
.btn_chart_export button{background-color:inherit;}
.btn_chart_export button:hover{background-color:skyblue;}
.main_notice_wrap{clear:both;}

.btn_go_to_sci{display:inline-block; margin-left:30px; vertical-align:middle;}
.btn_go_to_sci:hover{color:#008cba;}

@media screen and (max-width:700px){
}