@charset "utf-8";
.user #slide_map .slide_map_close
{
	transition : all 0.5s ease;
    -webkit-transition : all 0.5s ease;
}

/*사이트맵*/
@media screen and (max-width:1460px){
	.user #slide_map{width:1200px; margin-left:-600px;}
	.user #slide_map .binds{width:1060px;}
}
@media screen and (max-width:1240px){
	.user #slide_map{width:1000px; margin-left:-500px;}
	.user #slide_map .binds{width:860px;}
}
@media screen and (max-width:1023px){
	.user #header .hd_top{display:none;}

	.user #slide_map{
		opacity:0; display:block; position:absolute; top:125px; left:100%; width:100%; height:auto; margin-left:0px; padding:0 0 100px 0;
		transition:left 0.3s ease, opacity 0.3s ease;
		-webkit-transition:left 0.3s ease, opacity 0.3s ease;
	}
	.user #slide_map .slide_map_titles{display: none;}
	.user #slide_map .binds{width:100%; height:auto; margin:0; padding:0 20px; border:0px; box-sizing:border-box;}
	.user #slide_map .binds ul li{float: none; width:100%; height:auto; padding:0; border-right:0px; border-bottom:1px solid #d7d7d7;}
	.user #slide_map .binds ul li a{display: block; position:relative; line-height:61px; padding-bottom:0; font-size:21px;}
	.user #slide_map .binds ul li a:after{
		content:""; position:absolute; top:0; right:0; width:13px; height:61px; background:url(../../images/brwelfare/layout/sitemap_arrow.png) no-repeat right center;
		 transition:transform 0.3s ease;
		 -webkit-transition:transform 0.3s ease;
		}
	.user #slide_map .binds ul li ul{display: none; width:100%; height:auto; padding:17px 20px; background-color: #f9fafc; box-sizing:border-box;}
	.user #slide_map .binds ul li ul li a:after{display: none;}
	.user #slide_map .binds ul li ul li:last-child{padding-bottom:0;}
	.user #slide_map .slide_map_close{display: none;}

	.user #slide_map .binds ul li.on ul{display: block;}
	.user #slide_map .binds ul li.on a:after{transform:rotate(180deg);}

	.user #slide_map .binds ul li ul li ul{padding:0;}
	.user #slide_map .binds ul li ul li ul li a{padding-top:15px;}
	

	.user.slide_map #wrap{overflow:visible;}
	.user.slide_map #header .hd_top{display:block;}
	.user.slide_map #slide_map{opacity:1; left:0;}
	.user.slide_map #wrap:before{opacity:0; left:-100%;}
	.user.slide_map #visual,
	.user.slide_map #container,
	.user.slide_map #footer{display:none;}

}



/*메인*/
@media screen and (max-width:1350px) and (min-width: 1024px){
	.user#main #container .content01 .noti ul li a .txts strong,
	.user#main #container .content02 .contact strong,
	.user#main #container .content03 [class*="box_0"] ul li a strong,
	.user#main #container .content04 [class*="box_0"] a strong{line-height:22px; font-size:18px;}
	.user#main #container .content01 .noti ul li a .txts span,
	.user#main #container .content02 .contact span,
	.user#main #container .content04 [class*="box_0"] a p{font-size:14px;}
	
	.user#main #container .content01 .noti ul li a .txts strong{padding-bottom:9px;}
	.user#main #container .content01 .noti .date{top:14px;}
	.user#main #container .content02 .contact strong{padding:16px 0 11px 0;}
	.user#main #container .content02 .contact span{line-height:14px;}
	.user#main #container .content02 .contact a .talk{margin-top:-72px;}
	.user#main #container .content02 .contact a img.time{margin-top:-37px;}
	.user#main #container .content03 [class*="box_0"] ul li a,
	.user#main #container .content04 [class*="box_0"] a{padding:22px 25px;}
	.user#main #container .content04 [class*="box_0"] a p{line-height:18px;}
}
@media screen and (max-width:1350px){
	.user#main #container .content03 .box_01 ul li:first-child a img{width:140px;}
	.user#main #container .content03 .box_01 ul li:last-child a img{width:140px;}
	.user#main #container .content03 .box_02 ul li:first-child a img{width:144px;}
	.user#main #container .content03 .box_02 ul li:last-child a img{width:210px;}
}
@media screen and (max-width: 1130px) and (min-width: 1023px){
	.user #header .hd_bot .js_menu{padding-left:300px;}

	.user#main #container .content03 .box_01 ul li:first-child a img{width:115px;}
	.user#main #container .content03 .box_01 ul li:last-child a img{right:-22px; width:120px;}
	.user#main #container .content03 .box_02 ul li:first-child a img{width:120px;}
	.user#main #container .content03 .box_02 ul li:last-child a img{width:180px;}
	.user#main #container .content04 .box_01 .study:after{bottom:-10px; width:210px;}
	.user#main #container .content04 .box_02 .special:after{bottom:15px; right:15px;}
}
@media screen and (max-width: 1023px){
	.user #header .hd_top{top:85px; z-index:100; background-color:#5ac0a1;}
	.user #header .hd_top .layout{padding:0;}
	.user #header .hd_top .global{overflow: hidden; position:static; width:100%;}
	.user #header .hd_top .global a{display: block; float:left; position:relative; width:50%; background-color:#5ac0a1; color:#fff;}
	.user #header .hd_top .global a.infos:after{content:""; position:absolute; top:50%; right:0; width:1px; height:15px; margin-top:-8px; background-color:#fff;}
	.user #header .hd_top .global a:hover,
	.user #header .hd_top .global a:active{text-decoration:none; background-color:#469d83;}
	.user #header .hd_top .global a.boryeong{background-color: #5ac0a1;}
	.user #header .hd_top .global a.boryeong:hover,
	.user #header .hd_top .global a.boryeong:active{background-color:#469d83;}
	.user #header .hd_bot{padding-top:0px;}
	.user #header .hd_bot h1{left:50%; margin-left:-105px;}
	.user #header .hd_bot .js_menu{display: none;}

	.user.mobile.slide_map #header .hd_bot .menu_btn a{background-image: url(../../images/brwelfare/layout/menu_btnx.png);}

	.user#main #visual{height:450px;}
	.user#main #visual .vi_box{width:335px; height:450px; padding:80px 30px;}
	.user#main #visual .vi_box .txts strong{line-height:40px; font-size:33px;}
	.user#main #visual .vi_box .txts em{font-size:17px;}
	.user#main #visual .btns{left:50px;}

	.user#main #container{padding:50px 0;}
	.user#main #container [class*="content0"] .con_ti{line-height:26px; font-size:26px;}
	.user#main #container .content01{padding-right:12px;}
	.user#main #container .content02{padding-left:12px;}
	.user#main #container .content01,
	.user#main #container .content02{margin-bottom:50px;}
	.user#main #container .content03,
	.user#main #container .content04{width:100%; padding:0;}
	.user#main #container .content03{margin-bottom:50px;}

	.user#main #container .content03 .box_01,
	.user#main #container .content04 .box_01{padding-right:12px;}
	.user#main #container .content03 .box_02,
	.user#main #container .content04 .box_02{padding-right: 12px;}
	.user#main #container .content04 .box_03{padding-right: 0px;}
	
	.user#main #container .content03 [class*="box_0"] ul li{height:115px;}
	.user#main #container .content03 [class*="box_0"] ul li a img,
	.user#main #container .content03 .box_01 ul li:last-child a img{right:25px; bottom:-6px;}

	.user#main #container .content04 [class*="box_0"] a{height:200px;}
	.user#main #container .content04 .box_01 .study{background-size:200px; background-position:60px bottom;}
	.user#main #container .content04 .box_01 .study:after{width:200px; height:92px;}
	.user#main #container .content04 .box_02 .special{background-position:left 45px;}
}
@media screen and (max-width: 850px){
	.user#main #container .content01 .noti ul li a .txts strong,
	.user#main #container .content02 .contact strong,
	.user#main #container .content03 [class*="box_0"] ul li a strong,
	.user#main #container .content04 [class*="box_0"] a strong{line-height:22px; font-size:18px;}
	.user#main #container .content01 .noti ul li a .txts span,
	.user#main #container .content02 .contact span,
	.user#main #container .content04 [class*="box_0"] a p{font-size:14px;}
	
	.user#main #container .content01 .noti ul li a .txts strong{padding-bottom:9px;}
	.user#main #container .content01 .noti .date{top:14px;}
	.user#main #container .content02 .contact strong{padding:16px 0 11px 0;}
	.user#main #container .content02 .contact span{line-height:17px;}
	.user#main #container .content02 .contact a .talk{margin-top:-72px; margin-left:-43px;}
	.user#main #container .content02 .contact a img.time{margin-top:-37px;}
	.user#main #container .content03 [class*="box_0"] ul li a,
	.user#main #container .content04 [class*="box_0"] a{padding:22px 25px;}
	.user#main #container .content04 [class*="box_0"] a p{line-height:19px;}
	.user#main #container .content04 .box_02 .special:after{bottom:15px; right:15px;}
}
@media screen and (max-width: 750px){
	.user#main #visual .vi_box{left:-20px;}
	.user#main #visual .btns{left:30px;}

	.user#main #container{padding:40px 0;}
	.user#main #container .content01,
	.user#main #container .content02{width:100%; padding:0;}
	.user#main #container .content01,
	.user#main #container .content02,
	.user#main #container .content03{margin-bottom:40px;}

	.user#main #container .content02{height:158px; border:1px solid #e1e1e1;}
	.user#main #container .content02 .contact strong{padding:16px 0 0 0;}
	.user#main #container .content02 .contact a img.time{margin-top:-16px;}
	.user#main #container .content02 .contact a .talk{margin-top:-51px;}
	.user#main #container .content02 .contact span{display: none;}
	
	.user#main #container .content03 [class*="box_0"] ul li a,
	.user#main #container .content04 [class*="box_0"] a{padding:17px 20px;}

	.user #footer .ft_bot .align_r{display: none;}
	.user #footer .menu ul li a{font-size:14px;}
}
@media screen and (max-width: 650px){
	.user#main #container .content03 [class*="box_0"] ul li a img,
	.user#main #container .content03 .box_01 ul li:last-child a img{right:-2px;}

	.user #footer .menu ul li{padding-right:20px;}
}
@media screen and (max-width: 600px){
	.user#main #visual{height:253px;}
	.user#main #visual .vi_box{width:230px; height:253px; padding:35px 15px;}
	.user#main #visual .vi_box .txts strong{line-height:29px; font-size:22px; letter-spacing:-1px;}
	.user#main #visual .vi_box .txts em{font-size:14px;}
	.user#main #visual .btns{bottom:33px; left:15px;}
	.user#main #visual .btns ul li a{width:30px; height:3px;}
	.user#main #visual .btns a.stop{width:10px; height:12px;}
	.user#main #visual .btns a.play{width:8px; height:12px;}

	.user#main #container [class*="content0"] .con_ti{font-size:25px;}

	.user#main #container .content03 .box_01,
	.user#main #container .content03 .box_02,
	.user#main #container .content04 .box_01,
	.user#main #container .content04 .box_02{padding:0;}
	.user#main #container .content03 [class*="box_0"],
	.user#main #container .content04 [class*="box_0"]{width:100%;}
	.user#main #container .content03 .box_01,
	.user#main #container .content04 .box_01,
	.user#main #container .content04 .box_02{margin-bottom:40px;}

	.user#main #container .content04 .box_01 .study{background-position:20px bottom;}
}
@media screen and (max-width: 550px){
	.user #footer .menu ul li{padding-right:10px;}
	.user #footer .ft_bot address,
	.user #footer .ft_bot .copy{line-height:18px; font-size:12px;}
}
@media screen and (max-width: 500px){
	.user #footer .menu ul{max-width:270px; margin:0 auto;}
	.user #footer .menu ul li{width:120px; padding-right:0; text-align:center;}
	.user #footer .menu ul li{padding-right:10px;}
	.user #footer .menu ul li:nth-child(1),
	.user #footer .menu ul li:nth-child(2){padding-bottom:3px;}
	.user #footer .ft_bot address,
	.user #footer .ft_bot .copy{line-height:18px; font-size:12px;}
	.user #footer .ft_bot{padding:23px 0;}
	.user #footer .ft_bot address,
	.user #footer .ft_bot .copy{text-align:center;}
}
@media screen and (max-width: 450px){
	.user #header .hd_bot h1{left:20px; margin-left:0;}
	.user#main #container .content01 .noti ul li a .txts strong,
	.user#main #container .content02 .contact strong,
	.user#main #container .content03 [class*="box_0"] ul li a strong,
	.user#main #container .content04 [class*="box_0"] a strong{font-size:18px;}
	.user#main #container .content01 .noti ul li a .txts strong,
	.user#main #container .content03 [class*="box_0"] ul li a strong,
	.user#main #container .content04 [class*="box_0"] a strong{line-height:22px;}

	.user#main #container .content01 .noti ul li a .txts strong{padding-bottom:9px;}
	.user#main #container .content01 .noti ul li a .txts span{font-size:13px;}
	.user#main #container .content01 .noti .date{top:14px;}
	.user#main #container .content02 .contact a img.time{margin-top:-11px;}
	.user#main #container .content02 .contact a .talk{margin-top:-47px;}
	.user#main #container .content02 .contact strong{display: block; padding:13px 0 0 0; line-height:18px;}
	.user#main #container .content02 .contact .cell{padding:24px 10px 0; vertical-align:baseline;}
}
@media screen and (max-width: 380px){
	.user#main #container .content02{height:175px;}
	.user#main #container .content02 .contact strong i{display: block;}
	.user#main #container .content02 .contact a .talk{margin-top:-56px;}
	.user#main #container .content02 .contact a img.time{margin-top:-21px;}
	.user#main #container .content03 [class*="box_0"] ul li a strong,
	.user#main #container .content04 [class*="box_0"] a strong{line-height:22px;}
	.user#main #container .content04 [class*="box_0"] a p{line-height:17px; font-size:13px;}
}

/*서브*/
@media screen and (max-width:1340px){
	.user#sub #container #remote{padding:0;}
}
@media screen and (max-width:1023px){
	.user#sub #visual .people[class*="bg_0"]{right:0;}
}
@media screen and (max-width:900px){
	.user#sub #container #remote ul{height:55px;}
	.user#sub #container #remote ul li a{line-height:55px; font-size:16px;}
}
@media screen and (max-width:750px){
	.user#sub #visual{height:180px;}
	.user#sub #visual h2{height:180px; line-height:180px; font-size:32px;}
	.user#sub #visual .people{width:375px;}
	
	.user#sub #cont h3{font-size:30px;}
	.user#sub #container #remote ul{height:50px;}
	.user#sub #container #remote ul li a{line-height:50px; font-size:14px;}
	.user#sub #cont .navii{margin-bottom:20px;}
	.user#sub #container #cont #txt{padding-bottom:50px;}
}
@media screen and (max-width:816px){
	.user#sub #cont .tabmenu{max-width:none; width:100%;}
	.user#sub #cont .js_tab ul{display: none;}
}
@media screen and (max-width:650px){
	.user#sub #container #remote ul{height:50px;}
	.user#sub #container #remote ul li a{line-height:50px; font-size:13px;}
}
@media screen and (max-width:550px){
	.user#sub #visual{height:157px;}
	.user#sub #visual h2{height:157px; line-height:157px;}
	.user#sub #visual .people{width:255px;}
	
	.user#sub #container #remote{display: none !important;}
	.user#sub #container #remote{display: none;}
	.user#sub #cont{position:relative; padding-top:0;}
	.user#sub #cont h3{margin-top:0px; padding-top:72px;}
	.user#sub #cont .navii{position:static; height:20px; border-bottom:1px solid #ccc;}
	.user#sub #cont .navii .btns{bottom:auto; top:26px;}
	.user#sub #cont .navii .info{position:absolute; top:0; left:0; padding:26px 70px 30px 0; text-align:left; border:0px;}
	.user#sub #cont .navii .btns div a{display: none;}
	.user#sub #cont .navii .btns .share .sns{display: block; left:auto; right:-10px; width:70px;}
	.user#sub #cont .navii .btns .share .sns a{display: block; width:30px; height:30px; background-size:100%;}
	.user#sub #cont .navii .btns .share .sns a.fb{margin-right:7px;}
}
@media screen and (max-width:450px){
	.user #footer .ft_bot address span,
	.user #footer .ft_bot .copy span{display: block;}
}
@media screen and (max-width:400px){
	.user#sub #visual h2{font-size:27px;}
	.user#sub #visual .people{width:215px;}
	.user#sub #visual .people[class*="bg_0"]{right:-20px;}
	
	.user#sub #cont h3{font-size:25px;}
	.user#sub #cont .navii .info strong{font-size:12px;}
	.user#sub #cont .navii .btns .share .sns{width:55px;}
	.user#sub #cont .navii .btns .share .sns a{width:25px; height:25px;}
	.user#sub #cont .navii .btns .share .sns a.fb{margin-right:5px;}
}