@charset "utf-8";



ul,li{list-style:none;}
a,
a:hover,
a:link,
a:active,
a:visited{text-decoration:none; color:#333;}

body{position:relative; width:100%;}


.user #wrap{overflow: hidden; position:relative; min-height:100%; font-family:"Noto Sans KR";}
.user #wrap:before{
	opacity:0; content:""; display:block; position:absolute; left:-100%; top:0; z-index:100; width:100%; height:100%; background-color:#000;
	transition:opacity 0.3s ease;
	-webkit-transition:opacity 0.3s ease;
}
.user .layout{position:relative; max-width:1320px; padding:0 20px; margin:0 auto; box-sizing:border-box;}

/* 사이트맵 */
.user #slide_map{display: none; position:fixed; left:50%; top:125px; z-index:1000; width:1420px; height:770px; margin-left:-710px; padding:67px 0 70px 0; background-color:#fff; box-sizing:border-box;}
.user #slide_map .slide_map_titles{display: block; line-height:34px; padding-bottom:38px; text-align:center; font-size:34px; font-weight:500;}
.user #slide_map .binds{width:1280px; height:555px; margin:0 auto; border:1px solid #ccc; border-top:2px solid #f8821b;}
.user #slide_map .binds ul{overflow: hidden; width:100%; height:100%;}
.user #slide_map .binds ul li{float:left; width:25%; height:100%; padding:32px 30px; border-right:1px solid #ccc; box-sizing:border-box;}
.user #slide_map .binds ul li:last-child{border-right:0px;}
.user #slide_map .binds ul li a{display: inline-block; line-height:23px; padding-bottom:23px; font-size:23px; font-weight:500;}
.user #slide_map .binds ul li ul{width:auto; height:auto;}
.user #slide_map .binds ul li ul li{float: none; width:auto; padding:0; padding-bottom:20px; border:0px;}
.user #slide_map .binds ul li ul li a{line-height:16px; padding-bottom:0; font-size:16px; font-weight:400;}
.user #slide_map .binds ul li ul li a:hover{color:#f8821b;}
.user #slide_map .binds ul li ul li ul li{padding-bottom:0;}
.user #slide_map .binds ul li ul li ul li a{padding-top:9px; font-size:14px; color:#8a8a8a;}
.user #slide_map .binds ul li ul li ul li a:hover{text-decoration:underline; color:#8a8a8a;}
.user #slide_map .binds ul li ul li ul li a:before{content:"-"; display: inline-block; padding-right:3px;}
.user #slide_map .slide_map_close{
	overflow: hidden; display: block; position:absolute; top:45px; right:70px; width:53px; height:53px; background-image: url(../../images/brwelfare/layout/sitemap_btn.png); background-repeat:no-repeat; background-position:center center; border:1px solid #ccc; border-radius:50%; text-indent:-2000px;
	transition:transform 0.3s ease;
	-webkit-transition:transform 0.3s ease;
}
.user #slide_map .slide_map_close:hover{transform:rotate(270deg);}

.user.slide_map #slide_map{display:block;}
.user.slide_map #wrap:before{opacity:0.7; left:0;}


/*공통*/
.user #header{position:relative; width:100%; height:auto;}
.user #header .hd_bot{width:100%; height:85px; padding-top:40px;}
.user #header .hd_bot h1{position:absolute; top:0; left:20px; width:210px; height:85px;}
.user #header .hd_bot h1 a{display: inline-block; width:230px; height:85px; font-family:"Noto Sans KR";}
.user #header .hd_bot h1 a img{vertical-align:middle;}
.user #header .hd_bot h1 a span{line-height:85px; padding-left:10px; vertical-align:middle; font-size:24px; font-weight:bold;}
.user #header .hd_bot .js_menu{
	width:100%; height:100%; padding-left:400px; padding-right:85px; box-sizing:border-box;
	transition:padding 0.3s ease;
	-webkit-transition:padding 0.3s ease;
}
.user #header .hd_bot .js_menu ul:after{content:""; clear:both;}
.user #header .hd_bot .js_menu ul li{position:relative; float:left; width:25%; padding:0 30px; box-sizing:border-box;}
.user #header .hd_bot .js_menu ul li a{display:block; position:relative; width:100%; line-height:85px; font-size:23px; text-align:center;
}
.user #header .hd_bot .js_menu ul li:hover a{color:#f8821b;}

.user #header .hd_bot .js_menu ul li ul{display: none; position:absolute; top:85px; left:50%; z-index:20; width:230px; height:auto; margin-left:-115px; padding:20px 0; background-color: #fff; border:1px solid #d7d7d7;}
.user #header .hd_bot .js_menu ul li ul li{float:none; position:relative; width:100%; padding:0;}

.user #header .hd_bot .js_menu ul li ul li a{padding:0 38px; font-size:16px; line-height:40px; text-align:left; box-sizing:border-box;}
.user #header .hd_bot .js_menu ul li:hover ul li a{color:#333;}

.user #header .hd_bot .js_menu ul li:hover ul {display: block;}
.user #header .hd_bot .js_menu ul li:hover{color:#f8821b;}
.user #header .hd_bot .js_menu ul li:hover:after{content:"";position:absolute; bottom:0; left:50%; width:100px; height:2px; margin-left:-50px; background-color:#f8821b;}
.user #header .hd_bot .js_menu ul li ul li:hover:after{display: none;}
.user #header .hd_bot .js_menu ul li ul li a.on,
.user #header .hd_bot .js_menu ul li ul li a:hover,
.user #header .hd_bot .js_menu ul li ul li a:active{color:#f8821b;}
.user #header .hd_bot .js_menu ul li ul li ul{display: none !important; position:absolute; top:-13px; left:230px; margin-left:0; padding:15px 0;}
.user #header .hd_bot .js_menu ul li ul li:hover ul{display: block !important;}
.user #header .hd_bot .js_menu ul li ul li ul li a{line-height:32px; padding:0 30px;}
.user #header .hd_bot .js_menu ul li ul li ul li a:before{content:"-"; padding-right:5px;}


.user #header .hd_bot .menu_btn{position:absolute; top:0; right:20px; width:60px; height:85px;}
.user #header .hd_bot .menu_btn a{overflow: hidden; display: block; width:60px; height:85px; background-image: url(../../images/brwelfare/layout/menu_btn.png); background-repeat:no-repeat; background-position:right center; text-indent:-2000px;}


.user #header .hd_top{position:absolute; top:0; left:0; width:100%; height:40px; background-color:#f9fafc;}
.user #header .hd_top .global{position:absolute; top:0; right:20px;}
.user #header .hd_top .global a{display:inline-block; width:100px; height:40px; line-height:40px; font-size:14px; text-align:center;}
.user #header .hd_top .global a:hover{text-decoration:underline;}
.user #header .hd_top .global a.boryeong{background-color:#e9ecf2;}



.user #footer{width:100%; height:auto;}
.user #footer .menu{border-top:1px solid #e1e1e1; border-bottom:1px solid #e1e1e1;}
.user #footer .menu ul{overflow: hidden; padding:19px 0; box-sizing:border-box;}
.user #footer .menu ul li{
	float:left; padding-right:40px;
	transition:padding 0.3s ease;
	-webkit-transition:padding 0.3s ease;
}
.user #footer .menu ul li a{line-height:21px; font-size :15px; font-weight:400;}
.user #footer .menu ul li:first-child a{color:#0651a0;}
.user #footer .menu ul li a:hover{text-decoration:underline;}

.user #footer .ft_bot{position:relative; padding:23px 0 40px 0;}
.user #footer .ft_bot address{line-height:22px; font-size:14px; font-style:normal; color:#5d5d5d;}
.user #footer .ft_bot address span a{color:#5d5d5d;}
.user #footer .ft_bot address span a:hover{text-decoration:underline;}
.user #footer .ft_bot .copy{line-height:22px; font-size:14px; color:#5d5d5d;}

.user #footer .ft_bot .align_r{position:absolute; top:4px; right:20px;}
.user #footer .ft_bot .selectbox{position:relative; width:217px; height:auto;}
.user #footer .ft_bot .selectbox .select{display: block; width:100%; height:40px; line-height:38px; padding:0 20px; background:url(../../images/brwelfare/layout/select_btn2.png) no-repeat 184px 13px; border:1px solid #ccc; box-sizing:border-box;}
.user #footer .ft_bot .selectbox .select strong{font-size:14px; font-weight:400;}
.user #footer .ft_bot .selectbox .scroll_y{display:none; position:absolute; left:0; bottom:40px; width:100%; max-height:300px; border:1px solid #ccc; border-bottom:0px; box-sizing:border-box;}
.user #footer .ft_bot .selectbox ul{width:100%; height:auto; background-color: #fff; border:none; box-sizing:border-box;}
.user #footer .ft_bot .selectbox ul li a{display: block; padding:5px 20px;}
.user #footer .ft_bot .selectbox ul li a:hover{background-color: #F5F5F5;}
.user #footer .ft_bot .selectbox ul li a strong{line-height:28px; font-size:14px; font-weight:400;}

.user #footer .ft_bot .selectbox.on .scroll_y{display: block;}
.user #footer .ft_bot .selectbox.on .select{background:url(../../images/brwelfare/layout/select_btn.png) no-repeat 184px 13px;}

.user #footer .ft_bot .mCSB_dragger_bar{background-color: #ccc;}





/*main*/
.user#main #visual{
	position:relative; width:100%; height:590px;
	transition:height 0.3s ease;
	-webkit-transition:height 0.3s ease;
}
.user#main #visual [class*="bg_"]{
	opacity:0; content:""; display:block; position:absolute; left:0; top:0; z-index:0; width:100%; height:100%; background-repeat:no-repeat; background-position:center center; background-size:cover;
	transition:opacity 1s ease;
	-webkit-transition:opacity 1s ease;
}
.user#main #visual .bg_01{background-image: url(../../images/brwelfare/layout/main_bg.jpg);}
.user#main #visual .bg_02{background-image: url(../../images/brwelfare/layout/main_bg2.jpg);}
.user#main #visual .bg_03{background-image: url(../../images/brwelfare/layout/main_bg3.jpg);}

.user#main #visual.step_01 .bg_01,
.user#main #visual.step_02 .bg_02,
.user#main #visual.step_03 .bg_03{opacity:1;}

.user#main #visual .vi_box{
	position:relative; top:0; left:0; z-index:10; width:426px; height:590px; padding:95px 40px; background-color:rgba(254,152,64,0.9); box-sizing:border-box;
	transition:left 0.3s ease, height 0.3s ease;
	-webkit-transition:left 0.3s ease, height 0.3s ease;
}
.user#main #visual .vi_box .txts{position:relative; width:100%; height:100%; color:#fff;}
.user#main #visual .vi_box .txts em{
	font-size:20px; font-style:normal; font-weight:300;
	transition:font-size 0.3s ease;
	-webkit-transition:font-size 0.3s ease;
}
.user#main #visual .vi_box .txts strong{
	display: block; line-height:50px; padding-top:6px; font-size:43px; font-weight:600; letter-spacing:-3px;
	transition:font-size 0.3s ease;
	-webkit-transition:font-size 0.3s ease;
}
.user#main #visual .vi_box .txts strong .opa{opacity:0.7;}
.user#main #visual .vi_box .txts strong .slim{font-weight:100;}



.user#main #visual .btns{position:absolute; bottom:97px; left:60px; z-index:100;}
.user#main #visual .btns ul{display: inline-block; height:5px; vertical-align:middle;}
.user#main #visual .btns ul li{float:left; padding-right:10px;}
.user#main #visual .btns ul li a{
	display:inline-block; width:50px; height:5px; background-color:#f4c59d; text-indent:-2000px;
	transition:background-color 0.3s ease;
	-webkit-transition:background-color 0.3s ease;
}
.user#main #visual .btns ul li a:hover,
.user#main #visual.step_01 .btns ul li:nth-child(1) a,
.user#main #visual.step_02 .btns ul li:nth-child(2) a,
.user#main #visual.step_03 .btns ul li:nth-child(3) a{background-color:#fff;}
.user#main #visual .btns a.stop{display:inline-block; width:15px; height:16px; background-image: url(../../images/brwelfare/layout/img_slide_stop.gif); background-repeat:no-repeat; background-position:center center; background-size:100%; vertical-align:middle; text-indent:-2000px;}
.user#main #visual .btns a.play{display:inline-block; width:11px; height:15px; background-image: url(../../images/brwelfare/layout/img_slide_play.png); background-repeat:no-repeat; background-position:center center; background-size:100%; vertical-align:middle; text-indent:-2000px;}



.user#main #container{overflow: hidden; width:100%; height:auto; padding:70px 0;}
.user#main #container [class*="content0"]{float: left; box-sizing:border-box;}
.user#main #container [class*="content0"] .con_ti{display: block; line-height:28px; padding-bottom:20px; font-size:28px;}

.user#main #container .content01{
	position:relative; width:50%; height:231px; padding-right:15px; margin-bottom:70px;
	transition:width 0.3s ease;
	-webkit-transition:width 0.3s ease;
}
.user#main #container .content01 .noti{}
.user#main #container .content01 .noti ul{width:100%;}
.user#main #container .content01 .noti ul li{position:relative; width:100%; height:auto; border-top:1px solid #cccccc; padding:15px 0px; box-sizing:border-box;}
.user#main #container .content01 .noti ul li:last-child{border-bottom:1px solid #cccccc;}
.user#main #container .content01 .noti ul li a{display: block; width:100%; height:auto;}
.user#main #container .content01 .noti ul li a .txts{display: block; width:100%; padding-left:84px; box-sizing:border-box;}
.user#main #container .content01 .noti ul li a .txts strong{
	overflow: hidden; display: block; line-height:26px; padding-bottom:12px; text-overflow:ellipsis; white-space: nowrap; font-size:20px; font-weight:400;
	transition:font-size 0.3s ease;
	-webkit-transition:font-size 0.3s ease;
}
.user#main #container .content01 .noti ul li a .txts span{
	overflow: hidden; display: block; text-overflow:ellipsis; white-space:nowrap; font-size:15px; color:#787878;
	transition:font-size 0.3s ease;
	-webkit-transition:font-size 0.3s ease;
}
.user#main #container .content01 .noti .date{position:absolute; top:20px; left:0px; width:80px; height:100%; color:#818181;}

.user#main #container .content01 .noti ul li a:hover .txts strong{color:#1caa80;}
.user#main #container .content01 .noti ul li:first-child a .date,
.user#main #container .content01 .noti ul li a:hover .date{color:#1caa80;}

.user#main #container .content01 .noti .date strong{display: block; line-height:28px; padding-bottom:6px; font-size:28px; text-align:center;}
.user#main #container .content01 .noti .date em{display: block; line-height:14px; font-size:14px; font-style:normal; text-align:center;}
.user#main #container .content01 .noti .more{position:absolute; top:0; right:15px; width:30px; height:30px; border:1px solid #ccc;}
.user#main #container .content01 .noti .more a{
	display: block; width:30px; height:30px; background-image: url(../../images/brwelfare/layout/notice_more.png); background-repeat: no-repeat; background-position:center center; text-indent:-2000px;
	transition:transform 0.3s ease;
	-webkit-transition:transform 0.3s ease;
}
.user#main #container .content01 .noti .more a:hover{transform:rotate(180deg);}


.user#main #container .content02{overflow: hidden; width:50%; height:231px; padding-left:15px; margin-bottom:70px;}
.user#main #container .content02 .contact{display:table; float:left; position:relative; width:50%; height:100%;}
.user#main #container .content02 .contact:nth-child(1):after{content:""; position:absolute; top:50%; right:0; width:1px; height:114px; margin-top:-57px; background-color: #cccccc;}
.user#main #container .content02 .contact .cell{display:table-cell; width:100%; height:100%; padding:0 20px; text-align:center; vertical-align:middle;}
.user#main #container .content02 .contact a img.time{
	position:absolute; top:50%; left:50%; margin-top:-43px; margin-left:-25px; transform:rotate(0deg);
	transition:transform 0.7s ease;
	-webkit-transition:transform 0.7s ease;
}
.user#main #container .content02 .contact a .talk{display: block; position:absolute; top:50%; left:50%; width:40px; height:26px; margin-top:-77px; margin-left:-43px; background-image: url(../../images/brwelfare/layout/call_icon1.png); background-repeat:no-repeat; background-position:5px center;}
@keyframes talk {
    from {width: 0px;}
    to {width: 40px;}
}
@-webkit-keyframes talk {
    from {width: 0px;}
    to {width: 40px;}
}

.user#main #container .content02 .contact a:hover img.time{transform:rotate(360deg);}
.user#main #container .content02 .contact a:hover .talk{
    animation: talk 1s infinite;
    -webkit-animation: talk 1s infinite;
}

.user#main #container .content02 .contact strong,
.user#main #container .content02 .contact span{
	display: block;
	transition:font-size 0.3s ease;
	-webkit-transition:font-size 0.3s ease;
}
.user#main #container .content02 .contact strong{line-height:22px; padding:22px 0 15px 0; font-size:22px; font-weight:600;}
.user#main #container .content02 .contact strong i{font-style:normal;}
.user#main #container .content02 .contact span{display:block; height:30px; line-height:19px; font-size:15px; color:#787878;}

.user#main #container .content02 .contact a:hover strong,
.user#main #container .content02 .contact a:active strong{color:#1caa80;}


.user#main #container .content03{
	width:50%; height:auto; padding-right:15px;
	transition:width 0.3s ease;
	-webkit-transition:width 0.3s ease;
}
.user#main #container .content03 [class*="box_0"]{float:left; width:50%; box-sizing:border-box;}
.user#main #container .content03 .box_01{padding-right:15px;}
.user#main #container .content03 .box_02{padding-left:15px;}
.user#main #container .content03 [class*="box_0"] ul li{height:135px;}
.user#main #container .content03 [class*="box_0"] ul li a{overflow: hidden; display: block; position:relative; width:100%; height:100%; padding:27px 30px; box-sizing:border-box;}
.user#main #container .content03 .box_01 ul li:nth-child(1) a{background-color:#e0e0e0;}
.user#main #container .content03 .box_01 ul li:nth-child(2) a{background-color:#5ac0a2;}
.user#main #container .content03 .box_02 ul li:nth-child(1) a{background-color:#fe9840;}
.user#main #container .content03 .box_02 ul li:nth-child(2) a{background-color:#e0e0e0;}
.user#main #container .content03 [class*="box_0"] ul li a strong{
	line-height:26px; font-size:20px; font-weight:400;
	transition:font-size 0.3s ease;
	-webkit-transition:font-size 0.3s ease;
}
.user#main #container .content03 [class*="box_0"] ul li a img{
	position:absolute; bottom:0; right:0;
	transition:width 0.3s ease, right 0.3s ease;
	-webkit-transition:width 0.3s ease, right 0.3s ease;
}
.user#main #container .content03 .box_01 ul li:first-child a img{width:151px;}
.user#main #container .content03 .box_01 ul li:last-child a img{right:-18px; width:165px;}
.user#main #container .content03 .box_02 ul li:first-child a img{width:158px;}
.user#main #container .content03 .box_02 ul li:last-child a img{width:233px;}

.user#main #container .content03 .box_01 ul li:nth-child(2) a strong,
.user#main #container .content03 .box_02 ul li:nth-child(1) a strong{color:#fff;}


.user#main #container .content04{
	width: 100%;
	height:auto;
	padding-left:15px;
	transition:width 0.3s ease;
	-webkit-transition:width 0.3s ease;
}
.user#main #container .content04 [class*="box_0"]{float:left;width: 33%;box-sizing:border-box;}
.user#main #container .content04 .box_01{padding-right:15px;}
.user#main #container .content04 .box_02{padding-right: 15px;}
.user#main #container .content04 .box_03{padding-right: 0px;}
.user#main #container .content04 [class*="box_0"] a{overflow: hidden; display: block; position:relative; height:270px; padding:27px 30px; background-repeat:no-repeat; background-position:left bottom; box-sizing:border-box;}
.user#main #container .content04 .box_01 .study{background-color:#e8f6ec; background-image: url(../../images/brwelfare/layout/box_img5.png);}
.user#main #container .content04 .box_01 .study:after{
	content:""; position:absolute; bottom:0; right:0; width:228px; height:107px; background-image: url(../../images/brwelfare/layout/box_img5_1.png); background-repeat:no-repeat; background-size:100%;
	transition:width 0.3s ease;
	-webkit-transition:width 0.3s ease;
}
.user#main #container .content04 .box_01 .add{background-color:#e8f6ec; /*background-image: url(../../images/brwelfare/layout/box_img5.png);*/}
.user#main #container .content04 .box_01 .add:after{
	content:""; position:absolute; bottom:0; right:0; width:228px; height:107px; background-image: url(../../images/brwelfare/layout/box_img5_2.png); background-repeat:no-repeat; background-size:100%;
	transition:width 0.3s ease;
	-webkit-transition:width 0.3s ease;
}
.user#main #container .content04 .box_02 .special{background-color:#fcf5ea; background-image: url(../../images/brwelfare/layout/box_img6.png);}
.user#main #container .content04 .box_02 .special:after{content:""; position:absolute; bottom:20px; right:20px; width:131px; height:74px; background-image: url(../../images/brwelfare/layout/box_img6_1.png);}
.user#main #container .content04 [class*="box_0"] a strong{
	line-height:26px; font-size:20px; font-weight:400;
	transition:font-size 0.3s ease;
	-webkit-transition:font-size 0.3s ease;
}

.user#main #container .content04 .box_02 .add2{background-color:#fcf5ea; /*background-image: url(../../images/brwelfare/layout/box_img6.png);*/}
.user#main #container .content04 .box_02 .add2:after{content:"";position:absolute;bottom: 0px;right: 0px;width: 201px;height: 108px;background-image: url(../../images/brwelfare/layout/box_img5_1.png);}
.user#main #container .content04 [class*="box_0"] a strong{
	line-height:26px; font-size:20px; font-weight:400;
	transition:font-size 0.3s ease;
	-webkit-transition:font-size 0.3s ease;
}

.user#main #container .content04 .box_03 .add3{background-color:#f6f6f6; /*background-image: url(../../images/brwelfare/layout/box_img6.png);*/}
.user#main #container .content04 .box_03 .add3:after{content:"";position:absolute;bottom: 0px;right: 0px;width: 162px;height: 115px;background-image: url(../../images/brwelfare/layout/box_img2.png);}
.user#main #container .content04 [class*="box_0"] a strong{
	line-height:26px; font-size:20px; font-weight:400;
	transition:font-size 0.3s ease;
	-webkit-transition:font-size 0.3s ease;
}

.user#main #container .content04 .box_03 .special{background-color: #f6f6f6;background-image: url(../../images/brwelfare/layout/box_img6.png);}
.user#main #container .content04 .box_03 .special:after{content:""; position:absolute; bottom:20px; right:20px; width:131px; height:74px; background-image: url(../../images/brwelfare/layout/box_img6_1.png);}
.user#main #container .content04 [class*="box_0"] a strong{
	line-height:26px; font-size:20px; font-weight:400;
	transition:font-size 0.3s ease;
	-webkit-transition:font-size 0.3s ease;
}
.user#main #container .content04 .box_01 .study strong{color:#1caa80;}
.user#main #container .content04 .box_02 .special strong{color:#fa7b0e;}

.user#main #container .content04 .box_01 .add strong{color:#1caa80;}
.user#main #container .content04 .box_02 .add2 strong{color:#fa7b0e;}
.user#main #container .content04 .box_03 .add3 strong{color:#53504c;}

.user#main #container .content04 [class*="box_0"] a p{
	margin:0; padding-top:11px; line-height:21px; font-size:15px;
	transition:font-size 0.3s ease;
	-webkit-transition:font-size 0.3s ease;
}






/*sub*/
.user#sub #visual{
	overflow: hidden; position:relative; width:100%; height:216px; background-image: url(../../images/brwelfare/layout/sub_bg.jpg); background-repeat:no-repeat; background-size:cover; background-position:center center;
	transition:height 0.3s ease;
	-webkit-transition:height 0.3s ease;
}

.user#sub #visual .people{
	position:absolute; bottom:0; right:30px; width:490px; height:210px; background-repeat:no-repeat; background-size:100%; background-position:bottom center;
	transition:width 0.3s ease;
	-webkit-transition:width 0.3s ease;
}
.user#sub #visual .people.bg_01{background-image: url(../../images/brwelfare/layout/sub_bg1.png);}
.user#sub #visual .people.bg_02{background-image: url(../../images/brwelfare/layout/sub_bg2.png);}
.user#sub #visual .people.bg_03{background-image: url(../../images/brwelfare/layout/sub_bg3.png);}
.user#sub #visual .people.bg_04{background-image: url(../../images/brwelfare/layout/sub_bg4.png);}

.user#sub #visual h2{
	width:200px; height:216px; line-height:216px; font-size:40px; font-weight:400; font-family:"Noto Sans KR";
	transition:font-size 0.3s ease;
	-webkit-transition:font-size 0.3s ease;
}


.user#sub #container{}

.user#sub #container #remote{
	display:none; position:absolute; top:-32px; left:0; width:100%; height:auto; padding:0 20px; box-sizing:border-box;
	transition:padding 0.3s ease;
	-webkit-transition:padding 0.3s ease;
}
.user#sub #container #remote ul{
	overflow: hidden; width:100%; height:62px; background-color:#fff; border:1px solid #ccc;
	transition:height 0.3s ease;
	-webkit-transition:height 0.3s ease;
}
.user#sub #container #remote ul li{float:left; width:20%;}
.user#sub #container #remote ul li a{
	display: block; position:relative; line-height:62px; font-size:18px; text-align:center;
	transition:line-height 0.3s ease;
	-webkit-transition:line-height 0.3s ease;
}
.user#sub #container #remote ul li a:after{content:""; display: block; position:absolute; top:50%; left:-1px; width:1px; height:12px; margin-top:-6px; background-color: #afb1b4;}

.user#sub #remote ul li:first-child a:after{display: none;}

.user#sub #remote ul li a:hover,
.user#sub #remote ul li.on a{background-color:#ff973d; color:#fff;}

.user#sub #cont{width:100%; padding-top:32px;}
.user#sub #cont h3{
	margin-top:45px; font-family:"Noto Sans KR"; font-size:34px; font-weight:600; text-align:center;
	transition:font-size 0.3s ease;
	-webkit-transition:font-size 0.3s ease;
}

.user#sub #cont .navii{
	position:relative; width:100%; height:auto; margin-bottom:40px;
	transition:margin 0.3s ease;
	-webkit-transition:margin 0.3s ease;
}
.user#sub #cont .navii .info{padding:19px 95px 30px 95px; border-bottom:1px solid #ccc; text-align:center;}
.user#sub #cont .navii .info span{overflow: hidden; display:inline-block; width:16px; height:17px; background:url(../../images/brwelfare/layout/navi_home.png) no-repeat center top; vertical-align:middle; text-indent:-2000px;}
.user#sub #cont .navii .info strong{
	vertical-align:middle; font-size:15px; font-weight:300; color:#5e5e5e;
	transition:font-size 0.3s ease;
	-webkit-transition:font-size 0.3s ease;
}
.user#sub #cont .navii .info strong:before{content:">"; display:inline-block; padding:0 8px;}
.user#sub #cont .navii .btns{position:absolute; bottom:20px; right:0;}
.user#sub #cont .navii .btns:after{content:""; clear:both;}
.user#sub #cont .navii .btns div{float:left;}
.user#sub #cont .navii .btns .share{position:relative; margin-right:10px;}
.user#sub #cont .navii .btns div a{
	overflow: hidden; display: block; width:38px; height:38px; border:1px solid #ccc; border-radius:50%;
	transition:background-image 0.3s ease, border 0.3s ease;
	-webkit-transition:background-image 0.3s ease, border 0.3s ease;
}
.user#sub #cont .navii .btns .share a{background-image: url(../../images/brwelfare/layout/share.png); background-repeat:no-repeat; background-position:center center;}
.user#sub #cont .navii .btns .print a{background-image: url(../../images/brwelfare/layout/print.png); background-repeat:no-repeat; background-position:center center;}
.user#sub #cont .navii .btns .share .sns{overflow: hidden; display: none; position:absolute; top:0; left:-104px;}
.user#sub #cont .navii .btns .share .sns a{overflow: hidden; float:left; width:42px; height:42px; border:0px; text-indent:-2000px;}
.user#sub #cont .navii .btns .share.on .sns a{border:0;}
.user#sub #cont .navii .btns .share .sns a.fb{margin-right:9px; background-image: url(../../images/brwelfare/layout/fb.png);}
.user#sub #cont .navii .btns .share .sns a.tw{background-image: url(../../images/brwelfare/layout/tw.png);}

.user#sub #cont .navii .btns div a:hover,
.user#sub #cont .navii .btns .share.on a{border:1px solid #ff973d;}
.user#sub #cont .navii .btns .print a:hover{background-image: url(../../images/brwelfare/layout/print_ov.png);}
.user#sub #cont .navii .btns .share.on .sns{display: block;}
.user#sub #cont .navii .btns .share.on a{background-image: url(../../images/brwelfare/layout/share_on.png);}

.user#sub #cont .tabmenu{max-width:100%;}
.user#sub #cont .tabmenu.num_1 .js_tab ul li {width:255px;}
.user#sub #cont .tabmenu.num_2 .js_tab ul li {width:255px;}
.user#sub #cont .tabmenu.num_3 .js_tab ul li {width:255px;}
.user#sub #cont .tabmenu.num_4 .js_tab ul li {width:25%;}
.user#sub #cont .tabmenu.num_5 .js_tab ul li {width:20%;}

.user#sub #cont .tabmenu .js_tab.select ul {width:auto; border:1px solid #ccc;}
.user#sub #cont .tabmenu .js_tab.select ul li {width:100% !important;}
.user#sub #cont .tabmenu .js_tab.select ul li:first-child a {border-top:0;}
.user#sub #cont .tabmenu .js_tab.select ul li a {border:0; border-top:1px dashed #999;}

/*
.user#sub #cont .js_tab ul{display: inline-block;}
*/

.user#sub #container #cont #txt{
	width:100%; min-height:400px; height:auto; padding-bottom:80px;
	transition:padding 0.3s ease;
	-webkit-transition:padding 0.3s ease;
}




/*본인확인서비스*/
.lay{max-width:100%; margin:0 auto;}
.auth{font-size:14px; color:#444; font-weight:600;}
.auth_box {width:100%; height:auto; margin:0 0 30px 0; padding:10px 0 0 0;}
.auth_box:after{content:""; display:block; clear:both;}
.auth_box h5{font-size:20px; color:#333; background:none; padding:0; margin:0;}
.h5_ul li{background:url(../../../images/specific/life/common/h5_bul.gif) no-repeat left 5px; color:#d0664a; font-size:16px; line-height:22px; margin:0 0 10px 0; font-weight:600; padding:0 0 0 12px;}
.h7_ul{margin: 8px 0 20px 0; padding:0;}
.h7_ul li{color:#444; background:url(../../../images/specific/common/h7_bul.gif) no-repeat 0px 8px !important; padding:0 0 0 10px; font-weight:normal; font-size:13px; margin:0 0 5px 0; line-height:18px;}
.auth_box .auth_phone{float:left; max-width:385px; height:auto; padding:25px; /*background:#f9f9f9;*/ border:1px solid #c4c4c4;}
.auth_box strong{font-size:15px; color:#444; margin-right:10px;}
.auth_box .auth_phone a{display:block; text-align:center;}
.auth_box .auth_phone p{padding:160px 0 0 0; margin:0 0 20px 0;}
.auth_box p span{display:block;}
.auth_phone{background:#f9f9f9 url(../../../images/specific/common/auth_phone_bg.jpg) no-repeat center 55px;}
.auth_gpin{background:#f9f9f9 url(../../../images/specific/common/auth_gpin_bg.jpg) no-repeat center 55px;}



/* 20230213본인확인서비스 */
#login_wrap{}
#login_wrap [data-infombox="1"]{}
#login_wrap [data-infombox="1"] + div{margin-top: 1.875em;}
#login_wrap [data-infombox="1"] + div{display: grid;grid-template-columns: repeat(2, 1fr);grid-gap: 2.4rem;}
#login_wrap [data-infombox="1"] + div > div{position: relative;padding: 2.5em 2.5em 7.375em;border: 1px solid #E2E2E2;box-sizing: border-box;}
#login_wrap [data-infombox="1"] + div > div.sns-login{padding: 2.5em 2.5em 9.75em; margin-top:0px;}
#login_wrap [data-infombox="1"] + div > div:before{content: "";display: block;width: 4.3125em;height: 4.0625em;margin-bottom: 2em;background-repeat: no-repeat;background-position: center center;background-size: 100% auto;}
#login_wrap [data-infombox="1"] + div > div:nth-child(1):before{background-image: url(../../images/1000y/content/login_wrap_img01.svg);}
#login_wrap [data-infombox="1"] + div > div:nth-child(2):before{background-image: url(../../images/1000y/content/login_wrap_img03.svg);}
#login_wrap [data-infombox="1"] + div > div:nth-child(3):before{background-image: url(../../images/1000y/content/login_wrap_img03.svg);}
#login_wrap [data-infombox="1"] + div > div h5{font-size: 1.5em;letter-spacing: -0.02em;font-weight: 600;line-height: 100%;color: #222;text-align: left;}
#login_wrap [data-infombox="1"] + div > div h5:before{display: block;margin-bottom: 0.625em;font-size: 0.67em;color: #0064CA;letter-spacing: -0.02em;font-weight: 600;}
#login_wrap [data-infombox="1"] + div > div:nth-child(1) h5:before{content: "01";}
#login_wrap [data-infombox="1"] + div > div:nth-child(2) h5:before{content: "02";}
#login_wrap [data-infombox="1"] + div > div:nth-child(3) h5:before{content: "03";}
#login_wrap [data-infombox="1"] + div > div p{line-height: 150%;letter-spacing: -0.02em;color: #444;text-align: left; }
#login_wrap [data-infombox="1"] + div > div p strong{display: none;}
#login_wrap [data-infombox="1"] + div > div > span,
#login_wrap [data-infombox="1"] + div > div.sns-login >div{position: absolute; bottom: 2.5em; left: 0; display: block; width: 100%; padding: 0 2.5em; text-align: center; box-sizing: border-box;}
#login_wrap [data-infombox="1"] + div > div > span a,
#login_wrap [data-infombox="1"] + div > div.sns-login >div >a{
    position: relative;
    display: inline-block;
    width: 100%;
    max-width: 13.06em;
    height: calc(2.78em - 2px);
    line-height: calc(2.78em - 2px);
    font-size: 1.125em;
    border-width: 1px;
    border-style: solid;
    letter-spacing: -0.02em;
    color: #FFF;
    font-weight: 500;
    text-decoration: none;
    box-sizing: border-box;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    -webkit-transition: all 0.2s linear;
    transition: all 0.2s linear;
}

#login_wrap [data-infombox="1"] + div > div:nth-child(1) > span a{background-color: #0064CA; border-color: #0064CA;}
#login_wrap [data-infombox="1"] + div > div:nth-child(2) > span a{background-color: #10223E; border-color: #10223E;}
#login_wrap [data-infombox="1"] + div > div.sns-login >div >a:nth-child(1){background-color: #17AA58;border-color: #17AA58;line-height: calc(1.38em - 2px);margin-right: 0.4em;}
#login_wrap [data-infombox="1"] + div > div.sns-login >div >a:nth-child(2){background-color: #FAE100; border-color: #FAE100;  line-height: calc(1.38em - 2px); margin-left:0px;}
#login_wrap [data-infombox="1"] + div > div.sns-login >div >a:not(:first-child){margin-top: 0.88em;color: #222;}
#login_wrap [data-infombox="1"] + div > div > span a:hover{background-color: #fff;}
#login_wrap [data-infombox="1"] + div > div:nth-child(1)> span a:hover{color: #0064CA;}
#login_wrap [data-infombox="1"] + div > div:nth-child(2)> span a:hover{color: #10223E;}
#login_wrap [data-infombox="1"] + div > div > span a:after{
    content: ""; display: inline-block; width: 1em; height: 1em; margin-left: 0.3em; margin-bottom: 0.2em; background: url(../../images/1000y/content/login_wrap_img04.svg) no-repeat center center; background-size: 100% auto; vertical-align: middle;
    -webkit-transition: all 0.2s linear; transition: all 0.2s linear;
}
#login_wrap [data-infombox="1"] + div > div:nth-child(1) > span a:hover:after{background-image: url(../../images/1000y/content/login_wrap_img05.svg);}
#login_wrap [data-infombox="1"] + div > div:nth-child(2) > span a:hover:after{background-image: url(../../images/1000y/content/login_wrap_img06.svg);}
#login_wrap [data-infombox="1"] + div > div.sns-login >div >a i{display: inline-block; margin-right: 0.2em; font-style: normal;}
#login_wrap [data-infombox="1"] + div > div.sns-login >div >a i:before{content: ""; display: inline-block; width: 1em; height: 1em; margin-right: 0.3em; margin-bottom: 0.2em; background: url(../../images/1000y/content/login_wrap_img07.svg) no-repeat center center; background-size: 100% auto; vertical-align: middle;}
#login_wrap [data-infombox="1"] + div > div.sns-login >div >a:nth-child(2) i:before{background-image: url(../../images/1000y/content/login_wrap_img08.svg);}
#login_wrap [data-list-bullet="1"] a[target="_blank"]{display: inline-block; color: #0064CA;}
#login_wrap [data-list-bullet="1"] a[target="_blank"]:after{content: ""; display: inline-block; width: 1em; height: 1em; margin-left: 0.1em; margin-bottom: 0.2em; background: url(../../images/1000y/skin/icon_blank02.svg) no-repeat center center; background-size: 100% auto; vertical-align: middle;}


@media screen and (max-width: 1024px){
    #login_wrap [data-infombox="1"] + div{grid-template-columns: repeat(1, 1fr); grid-gap: 2rem;}
    #login_wrap [data-infombox="1"] + div > div,
    #login_wrap [data-infombox="1"] + div > div.sns-login{padding: 2.5em 2.5em 3em 8.3em; box-sizing: border-box;}
    #login_wrap [data-infombox="1"] + div > div:before{position: absolute; top: 2.5em; left: 2.5em;}
    #login_wrap [data-infombox="1"] + div > div > span, 
    #login_wrap [data-infombox="1"] + div > div.sns-login >div{position: relative; bottom: auto; left: auto; margin-top: 1.2em; padding: 0; text-align: left;}
    #login_wrap [data-infombox="1"] + div > div > span a, 
    #login_wrap [data-infombox="1"] + div > div.sns-login >div a{max-width: 11.5em; text-align: center;}
    #login_wrap [data-infombox="1"] + div > div.sns-login >div >a{margin-right: 0.4em;}
    #login_wrap [data-infombox="1"] + div > div.sns-login >div >a:last-child{margin-right: 0;}
    #login_wrap [data-infombox="1"] + div > div.sns-login >div >a:not(:first-child){margin-top: 0;}
}

@media screen and (max-width: 640px){
    #login_wrap [data-infombox="1"] + div > div, 
    #login_wrap [data-infombox="1"] + div > div.sns-login{padding: 2em 2em 2.5em;}
    #login_wrap [data-infombox="1"] + div > div:before{display: none;}
}
@media screen and (max-width: 480px){
    #login_wrap [data-infombox="1"] + div > div > span, 
    #login_wrap [data-infombox="1"] + div > div.sns-login >div{width: 14em;}
    #login_wrap [data-infombox="1"] + div > div.sns-login >div >a:not(:first-child){margin-top: 0.4em;}
}

