@charset "utf-8";

/*
 * intro.css
 *
 */

:root{
	--color-blue:#1576cc;
}
 
/* layout */
body{background:#f3f5f9;}
	/* header */
#header{border-bottom-width:0px;}
#header:before{display:none;}
#header .inr{position:relative; padding-top:35px;}
#header h1{margin:0 auto;}
	/* util */
.area_util{position:absolute; right:20px;}
[data-utile="site"]{display:inline-flex; align-items:center; position:relative; min-height:30px; padding:0px;}
[data-utile="site"]:after{content:''; display:block; width:25px; height:25px; box-sizing:border-box; margin-left:15px; background:var(--color-white); border:1px solid var(--color-point); border-radius:100%; box-shadow:0 10px 15px rgba(0,0,0,0.15);}
[data-utile="site"]:before{content:''; display:block; position:absolute; right:8px; top:50%; width:8px; height:6px; margin-top:-2px; background:url(../images/common/img_lnb_arrow_blue.svg) no-repeat 50% 50%; transition:0.3s ease 0s; transition-property:transform;}
[data-utile="site"].active:before{margin-top:-3px; transform:rotate(180deg);}
[data-utile="site"] + ul{display:none; position:absolute; top:100%; right:0px; width:100%; box-sizing:border-box; padding:15px 20px; background:var(--color-white); border-radius:5px; box-shadow:0 30px 30px rgba(0,0,0,0.10);}
[data-utile="site"] + ul > li{line-height:1.2em; margin:5px 0px;}
[data-utile="site"] + ul > li a{display:inline-block;}
[data-utile="site"] + ul > li a:hover{text-decoration:underline; color:var(--color-point);}
	/* footer */
#footer{padding:30px 0; border-top-width:0px; text-align:center;}
#footer ul{display:flex; flex-wrap:wrap; justify-content:center; align-items:center;}
#footer ul > li{margin:0 5px; font-size:15px;}
#footer ul > li em{font-weight:600;}
#footer p{opacity:0.6; margin-top:20px; font-size:14px;}

#wrap{overflow:hidden;}
#container{height:calc(100vh - 235px); min-height:750px;}
#content{height:100%; min-height:inherit; margin-bottom:0px; padding-top:60px;}

/* bg */
.bg_obj{overflow:hidden; display:block; position:fixed; top:0px; left:0px; z-index:-1; width:100%; height:100%;}
.bg_obj [data-objImg]{display:block; position:absolute;  width:379px; height:379px; border-radius:100%; filter:blur(110px);}
.bg_obj [data-objImg="blue"]{opacity:0.5; top:45%; z-index:5; background-color:var(--color-blue); animation:moveRoundTop 20s linear infinite alternate;}
.bg_obj [data-objImg="cyan"]{left:12%; top:35%; z-index:1; width:137px; height:137px; background-color:#15c6cc; animation:moveRoundRight 20s linear infinite;}
.bg_obj [data-objImg="green"]{right:0px; top:50%; z-index:4; opacity:0.6; background-color:#00a161; animation:moveRoundLeft 10s linear infinite alternate;}
.bg_obj [data-objImg="orange"]{left:92%; top:30%; z-index:1; width:190px; height:190px; background-color:#f08300; animation:moveRoundTop 10s linear infinite alternate;}

@keyframes moveRoundRight{
	0%{transform:translate(0, 0) ;}
	25%{transform:translate(-10%, -200%);}
	50%{transform:translate(150%, 100%);}
	75%{transform:translate(300%, 200%);}
	100%{transform:translate(0, 0);}
}
@keyframes moveRoundLeft{
	0%{transform:translate(0, 0) ;}
	100%{transform:translate(-60%, 80%);}
}
@keyframes moveRoundTop{
	0%{transform:translate(0, 0) ;}
	50%{transform:translate(30%, -80%);}
	100%{transform:translate(100%, 50%);}
}

/* search */
.area_totalSearch{opacity:1; visibility:visible; position:relative; top:auto; left:auto; max-width:720px; margin:0 auto; background-color:transparent; transform:translateY(0px); box-shadow:none;}
.area_totalSearch .searchForm{--sizeHig:70px; border:3px solid #013664; box-shadow:0 30px 50px rgba(0,0,0,0.1);}
.area_totalSearch .total_search{font-size:20px; border-radius:50px;}
.area_totalSearch fieldset{display:flex; align-items:center;}
.btn_voice_search .ani:before,
.btn_voice_search .ani:after{opacity:0.5;}
@keyframes voiceAni{
	0%{opacity:0.5; transform:scale(1, 1);}
	50%{opacity:0.5;}
	100%{opacity:0; transform:scale(2, 2);}
}

/* group */
.group_box{display:flex; justify-content:center; align-items:stretch; margin-top:75px;}
.group_box .group01,
.group_box .group02{flex:0 1 50%;}
.group_site{display:flex; align-items:stretch;}
.group_site .site_main{flex:auto;}
.group_site .site_main a{overflow:hidden; display:flex; flex-flow:column nowrap; justify-content:flex-start; align-items:flex-start; position:relative; height:100%; box-sizing:border-box; padding:40px; background-color:var(--color-blue); border-radius:10px 10px 10px 80px; box-shadow:0 30px 50px rgba(0,0,0,0.10); color:var(--color-white); transition:0.3s ease 0s; transition-property:background;}
.group_site .site_main a i{display:inline-flex; justify-content:center; align-items:center; min-width:90px; min-height:26px; box-sizing:border-box; margin-bottom:20px; line-height:1.2em; border:1px solid #549edf; border-radius:50rem; font-size:15px; transition:0.3s ease 0s; transition-property:color;}
.group_site .site_main a em{line-height:1.2em; font-family:var(--font-TheJamsil); font-size:32px; font-weight:500; letter-spacing:-0.5px; transition:0.3s ease 0s; transition-property:color;}
.group_site .site_main a i,
.group_site .site_main a em{position:relative; z-index:5;}
.group_site .site_main .obj_img{display:block; position:absolute; right:0; bottom:0px; width:100%;}
.group_site .site_main .obj_img span[class*="obj_cloud"]{position:absolute;}
.group_site .site_main .obj_img .obj_cloud01{left:-44px; top:10px;}
.group_site .site_main .obj_img .obj_cloud02{left:-10px; top:-10px;}
.group_site .site_list{flex:none; width:290px; margin-left:40px;}
.group_site .site_list > li{margin-top:20px;}
.group_site .site_list > li > a{overflow:hidden; display:flex; align-items:center; position:relative; min-height:70px; box-sizing:border-box; padding:5px 30px; background-color:var(--color-white); border-radius:10px; box-shadow:0 30px 50px rgba(0,0,0,0.10);}
.group_site .site_list > li > a em{font-family:var(--font-TheJamsil); font-size:21px; font-weight:500; letter-spacing:-0.5px; transition:0.3s ease 0s; transition-property:color;}
.group_site .site_list > li > a .ico{overflow:hidden; display:block; position:absolute; bottom:0px; right:0px; width:76px; height:75px; background-repeat:no-repeat; background-position:0 0; filter:grayscale(60%); transition:0.3s ease 0s; transition-property:filter;}
.group_site .site_list > li > a .ico.site01{background-image:url(../images/intro/img_sitego01.png);}
.group_site .site_list > li > a .ico.site02{background-image:url(../images/intro/img_sitego02.png);}
.group_site .site_list > li > a .ico.site03{background-image:url(../images/intro/img_sitego03.png);}
.group_site .site_list > li > a .ico.site04{background-image:url(../images/intro/img_sitego04.png);}
.group_site .site_list > li:first-child{margin-top:0px;}


/* 분야별바로가기 */
.site_field svg,
.site_field svg *{outline:none;}
.site_field .ico{display:block; position:absolute; right:40px; bottom:35px; width:44px; height:47px;}
.site_field .svg_line{fill:none; stroke:#121212; stroke-linecap:round; stroke-linejoin:round; stroke-width:1.5px;}
.site_field svg{width:100%; height:100%;}
.site_field{--sizePad:40px; display:flex; flex-wrap:wrap; align-items:stretch; height:calc(100% + var(--sizePad)); margin-top:calc(var(--sizePad) * -1);}
.site_field > li{flex:0 1 50%; height:calc(100% / 2); box-sizing:border-box; padding-top:var(--sizePad); padding-left:var(--sizePad);}
.site_field > li > a{display:flex; flex-flow:column nowrap; align-items:flex-start; position:relative; height:100%; box-sizing:border-box; padding:30px; background:var(--color-white); border-radius:10px; box-shadow:0 30px 50px rgba(0,0,0,0.10); transition:0.3s ease 0s; transition-property:background, color;}
.site_field > li > a em{font-family:var(--font-TheJamsil); font-size:32px; font-weight:500; letter-spacing:-0.5px;}
.site_field > li > a span{margin-top:5px; line-height:1.2em; font-size:18px; font-weight:300; letter-spacing:-1.5px; word-break:keep-all;}
.site_field > li > a:after{content:''; opacity:0.2; display:block; position:absolute; left:40px; bottom:35px; width:20px; height:20px; background:url(../images/intro/img_btn_arrow.svg) no-repeat 50% 50%; background-size:100%; transition:0.3s ease 0s; transition-property:opacity, background;}
.site_field > li > a:hover,
.site_field > li > a:focus{background:var(--color-blue); color:var(--color-white);}
.site_field > li > a:hover:after,
.site_field > li > a:focus:after{opacity:0.8; background-image:url(../images/intro/img_btn_arrow_w.svg);}
.site_field > li > a:hover .svg_line,
.site_field > li > a:focus .svg_line{stroke:#fff;}
.site_field > li > a.active .svg_line{stroke-dasharray:200; stroke-dashoffset:200; transition:0.3s linear 0s; transition-property:stroke, stroke-dashoffset; transition-duration:0.3s, 0s;}
.site_field > li > a.active.ani-show .svg_line{stroke-dashoffset:0; transition-duration:0.3s, 1.5s; transition-delay:0s, 0s;}

/* 알림 */
[data-intro="bbs"]{display:flex; align-items:center; position:relative; height:100px; box-sizing:border-box; margin-top:40px; padding:0 20px; border:1px solid #c3cde0; border-radius:10px;}
[data-intro="bbs"] h2{position:relative; padding:0 30px; font-family:var(--font-TheJamsil); font-size:21px; font-weight:500; letter-spacing:-0.5px;}
[data-intro="bbs"] h2:before{content:''; display:block; position:absolute; left:0px; top:6px; width:19px; height:19px; background:url(../images/intro/img_bbs.svg) no-repeat 50% 50%; background-size:100%;}
.list_news{flex:auto; position:relative; height:100%; margin-right:90px;}
.list_news .swiper{overflow:hidden; position:absolute; width:100%; height:100%;}
.list_news .bbs_slide_item{display:flex; align-items:center; height:100%; padding-right:20px;}
.list_news .bbs_slide_item i{flex:none; display:flex; justify-content:center; align-items:center; width:52px; height:20px; margin-right:10px; line-height:1.2em; border:1px solid var(--color-point); border-radius:50rem; font-size:13px; color:var(--color-point);}
.list_news .bbs_slide_item em{flex:auto; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.list_news .control{display:flex; align-items:center; position:absolute; right:-90px; top:50%; transform:translateY(-50%);}
.list_news .control button{flex:none; position:relative; width:25px; height:25px; box-sizing:border-box; padding:0px; margin:0 2px; background:transparent; border:1px solid #c7c7c7; border-radius:100%;}
.list_news .control button:before{content:''; opacity:0.4; position:absolute; top:50%; left:50%; display:block; width:9px; height:12px; margin:-6px 0 0 -4.5px; background:url(../images/common/btn_slide_arrow.svg) no-repeat 50% 50%; background-size:100%;}
.list_news .control .swiper_next:before{transform:rotate(180deg);}
.list_news .control .swiper_auto:before{background-image:url(../images/common/btn_slide_stop.svg);}
.list_news .control .swiper_auto.paused:before{background-image:url(../images/common/btn_slide_play.svg);}
.list_news .control button:hover:before{opacity:1;}

@media screen and (min-width:1025px){
	/* group */
		/* active */
	.group_site .site_main a:hover,
	.group_site .site_main a:focus{background-color:var(--color-white);}
	.group_site .site_main a:hover i,
	.group_site .site_main a:focus i{color:#549edf;}
	.group_site .site_main a:hover em,
	.group_site .site_main a:focus em{color:#143b67;}
	.group_site .site_list > li > a:hover em,
	.group_site .site_list > li > a:focus em{color:var(--color-point);}
	.group_site .site_list > li > a:hover .ico,
	.group_site .site_list > li > a:focus .ico{filter:grayscale(0%);}
}

@media screen and (max-width:1400px){
	/* group */
	.group_site .site_main a{padding:30px;}
	.group_site .site_main .obj_img{right:0;}
	.group_site .site_main a em{word-break:keep-all;}
	.group_site .site_main a em br{display:none;}
	.group_site .site_list{width:clamp(220px, 17.857vw, 250px); margin-left:30px;}
	.group_site .site_list > li > a{padding-left:20px;}
	.group_site .site_list > li > a em{position:relative; z-index:5;}
	
	/* 분야별바로가기 */
	.site_field{--sizePad:30px;}
	.site_field > li > a{padding:30px 25px;}
	.site_field > li > a:after{left:30px;}
	.site_field .ico{right:30px;}
}

@media screen and (max-width:1200px){
	.area_util{right:20px; margin-right:0;}
	
	/* 알림 */
	[data-intro="bbs"]{flex-wrap:wrap; padding-top:10px;}
	[data-intro="bbs"] h2{flex:0 1 100%;}
	.list_news{height:50%;}
}

@media screen and (max-width:1024px){
	#header .inr{padding-top:20px;}
	#container{height:auto; min-height:inherit;}
	#content{padding-top:40px;}
	#footer{margin-top:30px;}
	
	/* group */
	.group_box{display:block; margin-top:40px;}
	.group_box .group01{display:flex; flex-direction:column;}
	.group_site{order:2;}
	.group_site .site_list{width:35%;}
	.group_site .site_main a em br{display:block;}
	.group_site .site_main .obj_img{bottom:-10%;;}
	.group_site .site_main .obj_img img{width:100%;}
	.site_field{--sizePad:20px; margin-top:20px; margin-left:calc(var(--sizePad) * -1);}
	.site_field > li > a{padding-top:20px; padding-bottom:60px;}
	.site_field > li > a em{font-size:25px;}
	.site_field > li > a span{font-size:16px; letter-spacing:0px;}
	.site_field > li > a:after{bottom:25px; left:25px;}
	
	/* 알림 */
	[data-intro="bbs"]{order:1; height:80px; margin-top:0px; margin-bottom:30px; padding-top:0px;}
	[data-intro="bbs"] h2{flex:none; padding-left:25px; font-size:18px;}
	[data-intro="bbs"] h2:before{width:16px; height:16px;}
	.list_news{height:100%;}
	
	.bg_obj [data-objImg]{width:37.012vw/* 379px */; height:37.012vw/* 379px */; filter:blur(10.742vw/* 110px */);}
	.bg_obj [data-objImg="cyan"]{width:13.379vw/* 137px */; height:13.379vw/* 137px */;}
	.bg_obj [data-objImg="orange"]{width:18.555vw/* 190px */; height:18.555vw/* 190px */;}
}

@media screen and (max-width:768px){
	#header h1{margin:0px;}
	.area_util{top:50%; transform:translateY(calc(-50% + 10px));}
	.area_totalSearch .searchForm{--sizeHig:55px;}
	.area_totalSearch .total_search{font-size:18px;}
	
	/* group */
	.group_site .site_list > li > a em{font-size:18px;}
	.group_site .site_main a em{font-size:25px;}
	.group_site .site_main .obj_img{bottom:0px;}
	.site_field .ico{bottom:15px;}
	.site_field > li{height:auto;}
	.site_field > li > a em{font-size:22px;}
}

@media screen and (max-width:580px){
	.area_totalSearch .search_btn{width:60px;}
	
	/* 알림 */
	[data-intro="bbs"]{padding-top:10px;}
	[data-intro="bbs"] h2{flex:0 1 100%;}
	.list_news{width:100%; height:50%; margin-right:0px;}
	.list_news .control{flex-wrap:wrap; right:0px; top:-30px; transform:translateY(0);}
	.list_news .control button{display:flex;}
	
	/* group */
	.group_site{display:block;}
	.group_site .site_main a{border-bottom-left-radius:50px;}
	.group_site .site_main a{min-height:200px; padding:20px;}
	.group_site .site_main a i{margin-bottom:10px;}
	.group_site .site_main a em{font-size:23px;}
	.group_site .site_main a em br{display:none;}
	.group_site .site_main .obj_img{bottom:-30%;}
	.group_site .site_list{width:100%; margin-left:0px; margin-top:20px;}
	.group_site .site_list > li{margin-top:20px;}
	.group_site .site_list > li > a{min-height:80px;}
	.group_site .site_list > li > a .ico{width:100px;}

	/* 분야별 */
	.site_field > li{flex:0 1 100%;}
	.site_field .ico{bottom:25px;}
}

@media screen and (max-width:420px){
	#content{padding-top:30px;}
	#footer ul > li{font-size:14px; word-break:keep-all;}
	.area_totalSearch .total_search{padding-left:5px;}
	[data-utile="site"]:after{margin-left:10px;}
	
	/* group */
	.group_box{margin-top:30px;}
	.group_site .site_main .obj_img{bottom:0;}
	
	/* 분야별 */
	.site_field > li > a{padding-left:20px; padding-right:20px;}
	.site_field .ico{right:15px; bottom:10px;}
}

@media screen and (max-width:320px){
	.btn_voice_search{margin-top:0px; margin-left:5px;}
	.area_totalSearch .total_search{font-size:16px;}
	.area_util{right:10px;}
	
	/* 알림 */
	.list_news .bbs_slide_item i{display:none;}
}