@charset "UTF-8"; 

@charset "UTF-8"; 

/*공통*/
#contents_in h2 {font-size: 23px; font-weight: 500; padding-left: 30px; position: relative; margin-bottom: 20px;
background: url(/s/media/data.do?mediaId=MEDIA_00000000000698)0 3px no-repeat; line-height: 1.5em; background-position: 0 6px; word-break:keep-all;}

#contents_in h3 {font-size: 20px; font-weight: 500; color: #315de6; margin-bottom: 10px; word-break:keep-all;}

.cont_list > li:before {display: block; content: ""; position: absolute; left: 0; top: 7px; width: 6px;
 height: 6px; border-radius: 50%; border: 3px solid #383838;}
.cont_list > li {font-size: 18px; padding-left: 20px; position: relative; margin-bottom: 7px; word-break: keep-all; line-height: 1.4em;}
.cont_list {margin-left: 13px;}

.cont_list2 li:before {display: block; content: ""; position: absolute; left: 0; top: 6px;
 width: 0; height: 0; background: none; border-left: 7px solid #ef4472; border-top: 5px solid transparent;
 border-bottom: 5px solid transparent; border-radius: 4px;}

.cont_list2 li {font-size: 17px; padding-left: 15px; position: relative; margin-bottom: 4px; word-break: keep-all; line-height: 1.4em;}
.cont_list2 {margin-left: 5px; margin-top: 5px; margin-bottom: 8px;}


.li_point{font-size: 16px; color: #e61154;}

a.go_btn{display:inline-block; vertical-align:middle; padding:6px 8px; border:2px solid #4f57f4; border-radius:5px; font-weight:500; font-size: 15px; line-height: 1em; margin-left: 3px;}
a.go_btn:hover{background:#4f57f4; color:#fff;}

a.down_btn{display:inline-block; vertical-align:middle; padding:6px 8px; border:2px solid #ef4472; border-radius:5px; font-weight:500; font-size: 15px; line-height: 1em; margin-left: 3px;}
a.down_btn:hover{background:#ef4472; color:#fff;}

p.point_line{display: inline; margin-left: 10px; word-break: keep-all; padding: 0 7px; font-weight:500; box-shadow: inset 0 -13px 0 #e8ff8d;}


/*상단 설명*/
.top_exp{width:100%; margin:0 auto 30px auto; box-sizing:border-box; border:3px solid #f1f1f1; box-sizing:border-box; position:relative; border-radius:30px 10px; font-size:0; padding:20px 30px;}
.top_exp:before{width:30px; height:100%; border:3px solid #4f57f4; border-right:none; border-radius:30px 0 0 10px; display:block; content:""; left:-3px; top:-3px; position:absolute;}
.top_exp:after{width:30px; height:100%; border:3px solid #ef4472; border-left:none; border-radius:0 10px 30px 0; display:block; content:""; right:-3px; top:-3px; position:absolute;}
.top_exp img, .top_exp div{display:inline-block; vertical-align:middle;}
.top_exp div{width:calc(100% - 90px); word-break:keep-all; text-align:left; box-sizing:border-box; position:relative; z-index:1; padding-left:20px;}
.top_exp div p{font-size:20px;  margin-bottom:10px; color: #c5385e; font-family: 'NanumSquare'; font-weight:700; letter-spacing: -1.5px;}
.top_exp div .top_exp_list > li{margin:3px 0; padding-left:15px; position:relative; width:100%; box-sizing:border-box; font-size:18px; line-height:1.5em;}
.top_exp div .top_exp_list > li:before{display:block; width:5px; height:5px; border-radius:50%; background-color:#ffd36a; position:absolute; content:""; top:10px; left:4px;}
.top_exp div .top_exp_list > li.witha:before{top:17px;}
.top_exp div .top_exp_list > li.mgb_10{margin-bottom:10px;}
.top_exp div .top_exp_list > li:last-child{margin-bottom:0;}

.top_exp div .top_exp_list > li .cont_list2 li{font-size:16px;}

.top_exp a.sn_go, .top_exp a.sn_how{margin-top:10px;}

.c_red{color:#de1146;}
.c_blue{color:#2645ff !important;}
.c_brown{color:#886556;}
.c_green{color:#0f8280;}


/*탭메뉴*/
#ci_tab{width:100%; margin-bottom:30px;}
#ci_tab ul{font-size:0;}
#ci_tab ul li{display:inline-block; vertical-align:top; position:relative;}
#ci_tab ul li a{display:block; width:100%; height:65px; text-align:center; font-size:18px; font-family:"NanumSquare"; font-weight:700; position:relative; background-color:#f7f8ff; transition:0.3s all ease;}
#ci_tab ul li a:before{display:inline-block; position:relative; content:""; width:0; height:100%; vertical-align:middle;}
#ci_tab ul li a span{display:inline-block; line-height:1.3em; vertical-align:middle; word-break:keep-all;}
#ci_tab ul li a:hover{background-color:#fff;}
#ci_tab ul li a:hover span{color:#4a56f8;}
#ci_tab ul li a:hover{color:#4a56f8; background-color:#fff;}
#ci_tab ul li.on a{color:#fc3070; background-color:#fff;}
#ci_tab ul li.on:before{display:block; content:""; position:absolute; width:25px; height:25px; border-top:2px solid #4a56f8; border-left:2px solid #4a56f8; top:0; left:0; z-index:1;}
#ci_tab ul li.on:after{display:block; content:""; position:absolute; width:25px; height:25px; border-bottom:2px solid #4a56f8; border-right:2px solid #4a56f8; bottom:0; right:0; z-index:1}
.tab5 ul li{width:20%;}

/*센터소개 추가*/
.site_go{width:100%; margin-bottom:40px; box-sizing: border-box; text-align: right; position:relative; transition:0.3s all ease;}
.site_go a{ padding: 15px 30px 15px 15px; width:100%; box-sizing:border-box; font-size: 20px; font-family: "NanumSquare"; font-weight: 700; display:inline-block; transition:0.3s all ease; color:#fff; background:linear-gradient(90deg, #ff4476, #4a56f8);}
.site_go a img.go_icon{margin-right:6px; width:30px;}
.site_go a img.go_arr{margin-left:10px; width:30px; margin-top:-5px;}
.site_go a:hover{padding-right:15px;}


.uci_in_box{width:100%; padding:0 15px 50px 15px; margin-bottom:50px; border-bottom:2px dashed #ccc; box-sizing:border-box;}
.uci_in_box.noline{margin-bottom:0; border-bottom:none;}
.uci_in_box.last{padding-bottom:0; margin-bottom:0; border-bottom:none;}
#contents_in .uci_box > h2{background:url(/s/storyCms/ulsanyouth/images/board/ypv_tit_icon.png) no-repeat; font-size: 28px; font-weight: 700; width: 100%; box-sizing: border-box; padding: 12px 15px 12px 65px; border-radius: 0 20px 0 0; font-family: "NanumSquare"; margin-bottom: 35px; position:relative; background-position: 10px center;}
#contents_in .uci_box > h2:before{width:100%; height:47%; left:0; bottom:0; display:block; content:""; position:absolute; background-color:#b6e6e6; opacity:0.8; z-index:-1;}
.uci_box span.bold{color:#156bff;}
.uci_box span.bold.pink{color:#de356a;}

.dash_box{width:100%; box-sizing:border-box; padding:25px; border:2px dashed #ccc; background-color:#fcfcfc; border-radius:20px;}

/*울산청년일자리센터*/
.business_box{width:100%; display:flex; flex-wrap:wrap;}
.business_box > div{display:inline-block; vertical-align:top; box-sizing:border-box;  padding:75px 20px 20px 20px; border-radius:20px; width:calc((100% - 51px)/3); margin-right:25px; position:relative; margin-top:90px;}
.business_box > div:before{display:block; content:""; position:absolute; width:140px; height:140px; border-radius:50%; left:50%; transform:translateX(-50%); top:-90px; z-index:1;}
.business_box > div.bb1:before{border:3px solid #ce2d5a; background:url(/s/media/data.do?mediaId=MEDIA_00000000000726) no-repeat; background-position:center; background-color:#fff;}
.business_box > div.bb2:before{border:3px solid #2a72ff; background:url(/s/media/data.do?mediaId=MEDIA_00000000000727) no-repeat; background-position:center; background-color:#fff;}
.business_box > div.bb3:before{border:3px solid #197b51; background:url(/s/media/data.do?mediaId=MEDIA_00000000000728) no-repeat; background-position:center; background-color:#fff;}
.business_box > div.bb1{border:1px solid #ce2d5a;}
.business_box > div.bb2{border:1px solid #2a72ff;}
.business_box > div.bb3{border:1px solid #197b51; margin-right:0;}
.business_box > div p{text-align:center; font-family:"NanumSquare"; font-weight:700; font-size:25px;}
.business_box > div .bb_list{ width:100%; margin-top:20px; padding:15px; box-sizing:border-box;  min-height:196px; border-radius:20px 0;}
.business_box > div.bb1 .bb_list{background-color:#fff6f6;}
.business_box > div.bb2 .bb_list{background-color:#f4f8ff;}
.business_box > div.bb3 .bb_list{background-color:#f6fff6;}
.business_box > div .bb_list ul li{margin-bottom:10px; position:relative; padding-left:15px; word-break:keep-all;}
.business_box > div .bb_list ul li:last-child{margin-bottom:0;}
.business_box > div .bb_list ul li:before{display:block; content:""; position:absolute; width:6px; height:6px; border-radius:50%; top:9px; left:0;}
.business_box > div.bb1 .bb_list ul li:before{background-color:#ce2d5a;}
.business_box > div.bb2 .bb_list ul li:before{background-color:#2a72ff;}
.business_box > div.bb3 .bb_list ul li:before{background-color:#197b51;}

.web_only{width:100%; text-align:center;}
.web_only img{max-width:90%; margin:0 auto;}
.mobile_only{display:none;}


/*울산청년창업센터*/
.uci3_chart{width:100%; position:relative; text-align:center;}
.uci3_chart li.top{width:100%; position:relative;}
.uci3_chart li.top:after{width:1px; display:block; content:""; position:absolute; height:25px; background-color:#333; left:50%; transform:translateX(-50%); top:156px;}
.uci3_chart li.top span{display:block; width:150px; height:150px; background-color:#fafafa; margin:0 auto; font-family:"NanumSquare"; font-weight:700; border-radius:50%; font-size:23px; line-height:150px; border: 3px solid #7c26ee;}
.uci3_chart ul.second{width:100%; display:flex; flex-wrap:wrap; margin-top:25px; box-sizing:border-box; padding:15px 15px 0 15px; border:1px solid #333;}
.uci3_chart ul.second li{display:inline-block; vertical-align:top; padding:15px; box-sizing:border-box; background-color:#f6f8e6; width:calc((100% - 45px)/4); margin-right:15px; position:relative; border-radius:15px; margin-bottom:15px;}
.uci3_chart ul.second li p{width:100%; word-break:keep-all; text-align:left; margin-bottom:8px; padding-left:15px; box-sizing:border-box; position:relative;}
.uci3_chart ul.second li p:before{display:block; content:""; position:absolute; width:8px; height:8px; border:2px solid #483595; box-sizing:border-box; left:0; top:7px; border-radius:50%;}
.uci3_chart ul.second li p:last-child{margin-bottom:0;}
.uci3_chart ul.second li:nth-child(4){margin-right:0;}
.uci3_chart ul.second li:last-child{margin-right:0;}


.etc_box{width:100%; padding:30px; box-sizing:border-box; background: linear-gradient(135deg, #edecff, #ecfdff); border-radius: 40px 0;}
.etc_box ul li{display:inline-block; vertical-align:top; font-size:18px; font-weight:500; padding-left:17px; position:relative; margin:7px 35px 7px 0;}
.etc_box ul li:before{display:block; position:absolute; content:""; width:7px; height:7px; background-color:#ae42ff; left:0; top:10px;}


/*울산창조경제혁신센터*/
#uci4 .ebook a{display:inline-block; padding:15px 17px 15px 60px; border-radius:50px; border:2px solid #32c2af; color:#000; margin-bottom:25px; font-family:"NanumSquare"; font-weight:700; font-size:18px; background:url(/s/media/data.do?mediaId=MEDIA_00000000000729) no-repeat; background-position:left 18px top 9px; background-size:35px; background-color:#fff;}
#uci4 .ebook a:hover{color:#009783;}
.ui_tab{width:100%; margin-bottom:20px;}
.ui_tab ul{font-size:0;}
.ui_tab ul li{display:inline-block; vertical-align:top; border:2px solid #ccc; width:calc((100% - 10px)/2); margin-right:10px; box-sizing:border-box;}
.ui_tab ul li.on{border:2px solid #3a51ff;}
.ui_tab ul li.on a{color:#3a51ff;}
.ui_tab ul li:last-child{margin-right:0;}
.ui_tab ul li a{display:block; width:100%; text-align:center; font-size:20px; font-weight:700; font-family:"NanumSquare"; box-sizing:border-box; padding:18px 15px;}
.ui_tab ul li a:hover{color:#3a51ff;}


/*청년재단 울산센터*/
.uci5_bs{display:flex; flex-wrap:wrap; width:100%;}
.uci5_bs li{display:inline-block; vertical-align:top; width:calc((100% - 50px)/6); margin-right:10px; box-sizing:border-box; border-radius:20px; text-align:center; padding-top:20px;}
.uci5_bs li img{max-height:55px;}
.uci5_bs li div{width:100%; box-sizing:border-box; padding:15px;}
.uci5_bs li div p{font-family:"NanumSquare"; font-weight:900; font-size:19px; margin-bottom:10px; word-break:keep-all;}
.uci5_bs li div span{display:block; word-break:keep-all;}
.uci5_bs li.ub1{border:3px solid #1c8af3;}
.uci5_bs li.ub2{border:3px solid #1ea78f;}
.uci5_bs li.ub3{border:3px solid #f29700;}
.uci5_bs li.ub4{border:3px solid #e13c1a;}
.uci5_bs li.ub5{border:3px solid #e63982;}
.uci5_bs li.ub6{border:3px solid #aa50d7; margin-right:0;}


/*울산청년센터*/
.center_hi{margin:10px 0 30px; word-break:keep-all;}
.center_exp{border-radius: 40px 40px 0px 40px; padding: 20px; text-align: center; border: 1px solid #1c54b3; margin: 10px; box-shadow: 8px 10px 0px 2px #1c54b3; position:relative;}
.center_exp:after{content: ""; position: absolute; display: block; width: 100px; height: 92px; top: -13px; left: 22px;
 background: url(/s/storyCms/ulsanyouth/images/contents/center_introduce1.png) no-repeat;}

 .center_exp:before{content: ""; position: absolute; display: block; width:64px; height:139px; bottom: -1px;
 right:40px; background: url(/s/storyCms/ulsanyouth/images/contents/center_introduce2.png) no-repeat;}

.gonggong_exp{margin:40px 0 50px; padding:20px 0px; border-top:1px solid #f3382f; border-bottom:1px solid #f3382f; word-break: keep-all;
position:relative; text-align: center; font-size: 18px; background:#fffcf4;}
.gong_s{font-size:23px; margin:20px 0 0; text-align:center; color:#f3382f; }

.gong_s > span{position:relative;}

.gonggong_exp:after{content: ""; position: absolute; display: block; width: 39px; height: 39px;
 top: -20px; right:-6px; background: url(/s/storyCms/ulsanyouth/images/contents/center_starcon.png) no-repeat;}
 .gonggong_exp:before{content: ""; position: absolute; display: block; width: 35px; height: 10px; top: -3px; right: 0px; background: #fffcf4;}

.gong_s > span:after{content: ""; position: absolute; display: block; width: 36px; height: 25px; top: -5px; left: -50px;
background: url(/s/storyCms/ulsanyouth/images/contents/center_Slogan1.png) no-repeat;}

.gong_s > span:before{content: ""; position: absolute; display: block; width: 36px; height: 25px; top: -5px; right: -50px;
 background: url(/s/storyCms/ulsanyouth/images/contents/center_Slogan2.png) no-repeat;}

.center_hi_point1{font-size:31px; color:#f3382f; font-weight: 500;}
.center_hi_point2{font-size:31px; color:#1fa883; font-weight: 500;}

.center_exp > p{font-size:28px; line-height:45px;}


.center_p:before {position: absolute; width: 30px; height: 30px;  content: "";
 display: block; bottom: -5px; right: -5px; z-index: -1;}

.center_p:after {position: absolute; width: 30px; height: 30px;  content: ""; display: block;
top: -5px; left: -5px; z-index: -1;}

.center_p {font-size: 0px; position: relative; background: #fff; }
.center_p1{margin:40px 0px 50px;}

.center_p > div {display: inline-block; font-size: 24px;}

.center_p_text {width: calc(100% - 210px);}

.center_p_img {width: 210px; vertical-align: top; text-align: center; margin-top: 15px;}

.center_p1:after{background-color: #2a72ff;}
.center_p1:before{background-color: #fdcf61;}

.center_p2:after{background-color: #fdcf61;}
.center_p2:before{background-color: #2a72ff;}











/*사업방향*/
.b_direc{width:100%; display: flex; flex-wrap: wrap;}
.b_box{width:100%; margin-bottom:70px;}
.b_box .bb_tit{padding:10px 15px 20px 75px; width:100%; box-sizing:border-box; margin-bottom:20px; position:relative;}
.b_box .bb_tit p{font-size:30px; font-weight:700; font-family:"NanumSquare";}

.b_box .b_in{display:flex; flex-wrap:wrap; word-break:keep-all;}
.b_box .b_in > li{display:inline-block; vertical-align:top; box-sizing:border-box; padding:20px; border-radius:20px; box-shadow:3px 3px 10px 2px #ddd; width:calc((100% - 50px)/2); margin-right:50px; margin-bottom:25px; text-align:center;}
.b_box .b_in > li:nth-child(2n){margin-right:0;}
.b_box .b_in > li .in_tit{margin-bottom:5px;}
.b_box .b_in > li .in_tit p{font-size:25px; font-weight:700; padding: 10px 25px; display: inline-block; position:relative;}
.b_box .b_in > li .in_tit p:before{display:block; content:""; position:absolute; width:15px; height:15px; top:0; left:0; border-radius:50%;}
.b_box .b_in > li .in_tit p:after{display:block; content:""; position:absolute; width:15px; height:15px; bottom:0; right:0;}
.b_box .b_in > li .ment_box{text-align:center; width:100%; margin-bottom:25px;}
.b_box .b_in > li .ment_box .ment span{font-weight: 500; font-size: 19px; position: relative; top: 12px; -webkit-box-decoration-break: clone; box-decoration-break: clone;}
/*.b_box .b_in > li .ment:before{width:calc(100% + 20px); left:50%; transform:translateX(-50%); height:15px; z-index:-1; display:block; content:""; position:absolute; bottom:0;}*/
.b_box .b_in > li .bi_list li{position:relative; padding-left:15px; box-sizing:border-box; width:100%; margin:8px 0; text-align:left;}
.b_box .b_in > li .bi_list li > span{display:inline-block; vertical-align:top;}
.b_box .b_in > li .bi_list li > span.s_tit{width:70px; font-weight:500;}
.b_box .b_in > li .bi_list li > span.txt{width:calc(100% - 70px); box-sizing:border-box; padding-left:5px;}
.b_box .b_in > li .bi_list li:before{position:absolute; display:block; content:""; width:7px; height:7px; box-sizing:border-box; border-radius:50%; top:9px; left:0;}
.b_box .b_in > li .info{width:100%; border-radius:10px; box-sizing:border-box; padding:15px; margin-top:15px; text-align:left;}


#b1 .bb_tit{border-bottom:5px solid #2a72ff; background:url(/s/storyCms/ulsanyouth/images/contents/bb_tit_icon1.png) no-repeat; background-position:left center;}
#b1 .bb_tit p{color:#2a72ff;}
#b1 .b_in > li{border:1px solid #2a72ff; background:url(/s/storyCms/ulsanyouth/images/contents/bb_in_bg1.png) no-repeat; background-position: right 15px center;}
#b1 .b_in > li .in_tit p{color:#2f65ce;}
#b1 .b_in > li .in_tit p:before{background-color:#2a72ff;}
#b1 .b_in > li .in_tit p:after{background-color:#2a72ff;}
#b1 .b_in > li .ment_box .ment{box-shadow: 0 0.85em 0 0 #b9f2ff, 0 0.85em 0 0 #b9f2ff;}
#b1 .b_in > li .bi_list li:before{background-color:#2a72ff;}
#b1 .b_in > li .bi_list li > span.s_tit{color:#2a72ff;}
#b1 .b_in > li .info{background-color:#f5f9ff;}

#b2 .bb_tit{border-bottom:5px solid #ce2d5a; background:url(/s/storyCms/ulsanyouth/images/contents/bb_tit_icon2.png) no-repeat; background-position:left top; padding:13px 15px 20px 63px; background-size:50px;}
#b2 .bb_tit p{color:#ce2d5a;}
#b2 .b_in > li{border:1px solid #ce2d5a; background:url(/s/storyCms/ulsanyouth/images/contents/bb_in_bg2.png) no-repeat; background-position: right 15px center;}
#b2 .b_in > li .in_tit p{color:#b62e54;}
#b2 .b_in > li .in_tit p:before{background-color:#ce2d5a;}
#b2 .b_in > li .in_tit p:after{background-color:#ce2d5a;}
#b2 .b_in > li .ment_box .ment{box-shadow: 0 0.85em 0 0 #ffcece, 0 0.85em 0 0 #ffcece;}
#b2 .b_in > li .bi_list li:before{background-color:#ce2d5a;}
#b2 .b_in > li .bi_list li > span.s_tit{color:#ce2d5a;}
#b2 .b_in > li .info{background-color:#fff5f8;}

#b3 .bb_tit{border-bottom:5px solid #229865; background:url(/s/storyCms/ulsanyouth/images/contents/bb_tit_icon3.png) no-repeat; background-position:left center;}
#b3 .bb_tit p{color:#229865;}
#b3 .b_in > li{border:1px solid #229865; background:url(/s/storyCms/ulsanyouth/images/contents/bb_in_bg3.png) no-repeat; background-position: right 15px center;}
#b3 .b_in > li .in_tit p{color:#197b51;}
#b3 .b_in > li .in_tit p:before{background-color:#229865;}
#b3 .b_in > li .in_tit p:after{background-color:#229865;}
#b3 .b_in > li .ment_box .ment{box-shadow: 0 0.85em 0 0 #ccf57c, 0 0.85em 0 0 #ccf57c;}
#b3 .b_in > li .bi_list li:before{background-color:#229865;}
#b3 .b_in > li .bi_list li > span.s_tit{color:#197b51;}
#b3 .b_in > li .info{background-color:#f3faec;}

#b4, #b5{width:calc((100% - 50px)/2); margin-bottom:0; display:inline-block; vertical-align:top;}
#b4 .b_in > li, #b5 .b_in > li{width:100%; display:block; margin-right:0;}

#b4{margin-right:50px;}
#b4 .bb_tit{border-bottom:5px solid #ffbf26; background:url(/s/storyCms/ulsanyouth/images/contents/bb_tit_icon4.png) no-repeat; background-position:left center;}
#b4 .bb_tit p{color:#876642;}
#b4 .b_in > li{border:1px solid #ffbf26; background:url(/s/storyCms/ulsanyouth/images/contents/bb_in_bg4.png) no-repeat; background-position: right 15px center;}
#b4 .b_in > li .in_tit p{color:#876642;}
#b4 .b_in > li .in_tit p:before{background-color:#ffbf26;}
#b4 .b_in > li .in_tit p:after{background-color:#ffbf26;}
#b4 .b_in > li .ment_box .ment{box-shadow: 0 0.85em 0 0 #fffc9f, 0 0.85em 0 0 #fffc9f;}
#b4 .b_in > li .info{background-color:#fff9ea;}

#b5 .bb_tit{border-bottom:5px solid #7632e4; background:url(/s/storyCms/ulsanyouth/images/contents/bb_tit_icon5.png) no-repeat; background-position:left center;}
#b5 .bb_tit p{color:#7632e4;}
#b5 .b_in > li{border:1px solid #7632e4; background:url(/s/storyCms/ulsanyouth/images/contents/bb_in_bg5.png) no-repeat; background-position: right 15px center;}
#b5 .b_in > li .in_tit p{color:#7632e4;}
#b5 .b_in > li .in_tit p:before{background-color:#7632e4;}
#b5 .b_in > li .in_tit p:after{background-color:#7632e4;}
#b5 .b_in > li .ment_box .ment{box-shadow: 0 0.85em 0 0 #f1c5ff, 0 0.85em 0 0 #f1c5ff;}
#b5 .b_in > li .info{background-color:#f6f1ff;}



/*조직도*/
.chart{width:1000px; box-sizing:border-box; padding:0 20px; text-align:center; margin:0 auto;}
.chart > ul > li{display:block; position:relative;}
.chart > ul > li > div{width:300px; margin:0 auto;}
.chart > ul > li > div > p{font-family:"NanumSquare"; font-size:23px; font-weight:700; margin-bottom:10px; position:relative;}
.chart > ul > li > div > p:before{display:block; position:absolute; content:""; width:15px; height:15px; border-radius:50%; left:50%; transform:translateX(-50%);}
.chart > ul > li > div > p:after{display:block; content:""; position:absolute; bottom:-5px; left:50%; transform:translateX(-50%); width:50px; height:2px; border-radius:5px;}
.chart > ul > li span{font-size:18px;}

.chart > ul > li.boss p{color:#0069b4;}
.chart > ul > li.boss p:before{background-color:#0069b4; bottom:-69px;}
.chart > ul > li.boss p:after{background-color:#0069b4;}
.chart > ul > li.boss ul.second{margin-top:0;}
.chart > ul > li.boss ul.second:before{border-top:1px dashed #333; top:50%;}

.chart > ul > li.leader:after{display:block; position:absolute; content:""; height:20px; z-index:-1; width:1px; background-color:#333; left:50%; transform:translateX(-50%); top:267px;}
.chart > ul > li.leader p{color:#0e616b;}
.chart > ul > li.leader p:before{background-color:#0e616b; top:-25px;}
.chart > ul > li.leader p:after{background-color:#0e616b;}
.chart > ul > li.leader ul.second:before{border-top:1px solid #333; top:-10px;}

.chart ul.second{margin-top:35px; height:55px; position:relative;}
.chart ul.second:before{display:block; content:""; position:absolute; left:50%; transform:translate(-50%, -50%); width:calc(100% - 199px); height:1px; z-index:-1;}
.chart ul.second li{display:inline-block; vertical-align:middle;}
.chart ul.second li.left{float:left;}
.chart ul.second li.right{float:right;}
.chart ul.second li.side p{font-family:"NanumSquare"; font-size:20px; font-weight:700; color:#7b4c7f; padding:0 15px; border-radius:60px; display:inline-block; background-color:#fff7e2; width:200px; height:55px; line-height:55px; text-align:center; box-sizing:border-box; position:relative;}

.chart > ul > li.leader{padding-top:202px; position:relative;}
.chart > ul > li.leader:before{width:385px; height:215px; background:url(/s/storyCms/ulsanyouth/images/contents/chart_in_logo.png) no-repeat; background-size:100%; position:absolute; display:block; content:""; top:-27px; left:50%; transform:translateX(-50%); z-index:-1;}
.chart > ul > li.leader ul.second li.side p:before{display:block; position:absolute; content:""; height:10px; z-index:-1; width:1px; background-color:#333; left:50%; transform:translateX(-50%); top:-10px;}

/*찾아오시는 길*/
.top_exp .map_exp li{font-size:0;}
.top_exp .map_exp li > span{display:inline-block; vertical-align:top;}
.top_exp .map_exp li > span.s_tit{font-size:18px; font-weight:700; font-family:"NanumSquare"; color:#c5385e; width:55px;}
.top_exp .map_exp li > span.txt{font-size:18px; width:calc(100% - 55px); box-sizing:border-box; padding-left:10px; word-break:keep-all;}
.top_exp .map_exp li:first-child{border-bottom:1px dashed #8d9197; padding-bottom:15px;}
.top_exp .map_exp li:last-child{padding-top:15px;}
.c_map_area{width:100%;}
.c_map_area .root_daum_roughmap {width:100%;}
.c_map_area .root_daum_roughmap .wrap_map {width:100%; height:500px;}

/*정책 인포그래픽*/
.ig_box{width:100%;}
.selec_year{font-size:0; margin-bottom:35px;}
.selec_year label, .selec_year select, .selec_year button{display:inline-block; vertical-align:middle;}
.selec_year label{font-size:20px; font-weight:700; font-family:"NanumSquare"; background: url(/s/storyCms/ulsanyouth/images/contents/infog_label.png) no-repeat; background-position: left top 1px; padding-left:30px; margin-right:7px;}
.selec_year select{font-size:17px; font-family:"Noto Sans Kr"; padding:8px 40px 8px 10px; border-radius:5px; letter-spacing:-1px; margin-right:2px;}
.selec_year button{border-radius:5px; width:40px; height:40px; text-align:center; background-color:#ef4472;}
.selec_year button img{width:23px;}


.infog_line{width:100%; box-sizing:border-box; padding:0 10px; margin-bottom:50px;}
.infog_line .p_box{width:100%;}
#contents_in .infog_line h2{background: url(/s/storyCms/ulsanyouth/images/board/yl_tit_icon.png) no-repeat; background-position: left top 7px; padding-left:28px;}
.infog_line .explain{width:100%; box-sizing:border-box; padding:15px; margin-bottom:35px; border:2px solid #f4f4f4; word-break:keep-all; position:relative;}
.infog_line .explain:before{width:55px; height:55px; border-top:2px solid #4f57f4; border-left:2px solid #ff3168; top:-2px; left:-2px; display:block; box-sizing:border-box; content:""; position:absolute;}
.location_p{overflow-x:auto;}
.map_area{width:851px; margin:0 auto; position:relative;}
.map_area .stats .circle{position:absolute; width:115px; height:115px; border-radius:50%; text-align:center; box-sizing:border-box; padding:28px;}
.map_area .stats .circle p{font-size:17px; font-weight:500; color:#000;}
.map_area .stats .circle span{display:block; font-size:30px; font-weight:700; font-family:"NanumSquare"; color:#000;}
.map_area .stats .circle#all{background-color:#0034b5; top:0; left:0; width:200px; height:200px; padding:54px;}
.map_area .stats .circle#all p{font-size:20px; color:#fff;}
.map_area .stats .circle#all span{font-size:45px; color:#fff;}
.map_area .stats .circle#bg{background:url(/s/storyCms/ulsanyouth/images/contents/p_map_bgicon.png) no-repeat; background-position:center; background-color:#beee61; top:200px; right:65px; background-size: 58px;}
.map_area .stats .circle#jg{background:url(/s/storyCms/ulsanyouth/images/contents/p_map_jgicon.png) no-repeat; background-position:center; background-color:#ff9f2e; top:255px; right:230px;}
.map_area .stats .circle#ng{background:url(/s/storyCms/ulsanyouth/images/contents/p_map_ngicon.png) no-repeat; background-position:center; background-color:#ffcf3c; top:390px; right:175px;}
.map_area .stats .circle#dg{background:url(/s/storyCms/ulsanyouth/images/contents/p_map_dgicon.png) no-repeat; background-position:center; background-color:#ffb8b8; top:370px; right:20px; background-size:52px;}
.map_area .stats .circle#uj{background:url(/s/storyCms/ulsanyouth/images/contents/p_map_ujicon.png) no-repeat; background-position:center; background-color:#a7e3d4; top:145px; left:275px; background-size: 70px;}
.map_area .stats .circle#ulsan{background:url(/s/storyCms/ulsanyouth/images/contents/p_map_ulsanicon.png) no-repeat; background-position:center; background-color:#c0d2ff; top:385px; left:275px; width:185px; height:185px; padding:60px; background-size:65%;}
.map_area .stats .circle#ulsan p{font-size:19px;}
.map_area .stats .circle#ulsan span{font-size:35px;}


.yp_table{width:100%; position:relative; margin-top:10px;}
.yp_table:before{display:block; content:""; position:absolute; bottom:261px; left:50%; transform:translateX(-50%); width:calc(100% - 15px); height:20px; background-color:#f3ff92; z-index:-1;}
.exp{text-align:right; display:block; width:100%; box-sizing:border-box; padding-right:5px;}
.yp_table thead tr th{padding:16px 10px; font-weight:700; font-family:"NanumSquare"; font-size:18px; color: #fff; background-color: #4767ff;}
.yp_table thead tr th.first{border-radius:15px 0 0 0; background-color: #1f328d;}
.yp_table thead tr th.last{border-radius:0 15px 0 0;}
.yp_table tbody tr th{padding:12px 10px; font-weight:500; border-bottom:1px solid #ccc; background: #f6f8ff; color: #1f328d; border-right: 1px solid #4767ff;}
.yp_table tbody tr td{padding:12px 10px; border-bottom:1px solid #ccc; border-right:1px solid #ccc; text-align:center;}
.yp_table tbody tr.tyear_line th, .yp_table tbody tr.tyear_line td{background:none !important;}
.yp_table tbody tr.tyear_line th{font-size:19px; color:#ff1a58;}
.yp_table tbody tr td.last{border-right:none;}
.yp_table tbody tr:nth-child(2n-1) td{background-color:#fafafa;}
.yp_table tbody tr:last-child{border-bottom:2px solid #ccc;}

/*20241114 청년응시료지원 안내 수정*/
.yp_table.ys thead tr th{padding:9px 5px; font-size:17px; background-color: #e9edff; text-align:center; border-right:1px solid #ccc; border-top:3px solid #4767ff; color:#000;}
.yp_table.ys thead tr th.first{border-radius:0 0 0 0; background-color: #e9edff;}
.yp_table.ys thead tr th.last{border-radius:0 0 0 0; border-right:none;}
.yp_table.ys tbody tr td{padding:10px 5px;}
.yp_table.ys tbody tr:nth-child(2n-1) td{background:none;}



/*유관기관 현황*/
.c_banner{width:100%;}
.c_banner ul{display:flex; flex-wrap:wrap;}
.c_banner ul li{display:inline-block; vertical-align:top; box-sizing:border-box; width:calc((100% - 45px)/4); border:1px solid #ccc; margin-right:15px; margin-bottom:20px; border-radius:15px; box-shadow:3px 3px 3px 3px #ddd; overflow:hidden; z-index:1; position:relative; background:#eef5ff;}
.c_banner ul li:hover{background:#fff8e6;}
.c_banner ul li:nth-child(4n){margin-right:0;}
.c_banner ul li a{display:block; width:100%; height:100%; box-sizing:border-box;}
.c_banner ul li .bn_img{width:100%; height:110px; position:relative; box-sizing:border-box; padding-top:30px; z-index:2;}
.c_banner ul li .bn_img:before{width:132%; height:320px; background-color:#fff; display:block; content:""; position:absolute; left:50%; top:-210px; transform:translateX(-50%); border-radius:50%; z-index:-1;}
.c_banner ul li .bn_img img{display:block; margin:0 auto;}
.c_banner ul li .bn_info{text-align:center; width:100%; box-sizing:border-box; padding:0 10px; margin:15px auto;}
.c_banner ul li .bn_info p{font-size:18px; font-family:"NanumSquare"; font-weight:700;}
.c_banner ul li .bn_info span{font-size:16px;}


/*정책제안*/
.suggestion{width:100%; position:relative; text-align:center; background:url(/s/media/data.do?mediaId=MEDIA_00000000000717) no-repeat; background-position:center top; padding-top:32%; background-size: 100%;}
.suggestion .s_ment{margin-bottom: 20px; letter-spacing: -1.5px;}
.suggestion .s_ment p{font-family:"NanumSquare"; line-height:1.35em; word-break:keep-all;}
.suggestion .s_ment p .c_navy{color:#791035;}
.suggestion .s_ment p .bold{font-weight:700;}
.suggestion .s_ment p.top{font-size:25px; margin-bottom:10px;}
.suggestion .s_ment p.middle{font-size:31px;}
.suggestion .s_ment p.bottom{font-size:45px; font-weight:700; color:#e5265d; letter-spacing:-2px;}
.suggestion a.sgg_go{padding:17px 110px; border-radius:5px; background:url(/s/storyCms/ulsanyouth/images/contents/suggestion_go.png) no-repeat; background-position:right 30px center; text-align:center; display:inline-block; background-color:#e5265d; color:#fff; font-size:23px; transition:0.2s all ease;}
.suggestion a.sgg_go:hover{background-color:#ef4472;}



/*사이트맵*/
.sitemap{width:100%; display:flex; flex-wrap:wrap;}
.sitemap > div{display:inline-block; vertical-align:top; width:calc(100%/3); border-right:1px dashed #ccc; border-bottom:1px dashed #ccc; box-sizing:border-box; padding:20px 30px;}
.sitemap > div:nth-child(3n){border-right:0;}
.sitemap > div:nth-child(4), .sitemap > div:nth-child(5), .sitemap > div:nth-child(6){border-bottom:0;}
.sitemap > div h4, .sitemap > div ul{display:block; box-sizing:border-box;}
.sitemap > div h4{width:285px; font-family:"NanumSquare"; font-weight:700; font-size:20px; line-height:1.3em; word-break:keep-all; color: #585858; position:relative; margin:0 auto 30px auto;} 
.sitemap > div h4 span{background-color:#fff; display:block; margin:7px auto; width:calc(100% - 14px); position:relative; z-index:1; height:calc(100% - 7px); box-sizing: border-box; padding:12px 15px; text-align: center;} 
.sitemap > div h4:before{display:block; content:""; position:absolute; width:18px; height:100%; border: 5px solid #4a56f8; border-right:0; border-radius:10px 0 0 10px; z-index:-1; top:-5px; left:0;} 
.sitemap > div h4:after{display:block; content:""; position:absolute; width:18px; height:100%; border: 5px solid #ef4472; border-left:0; border-radius:0 10px 10px 0; z-index:-1; top:-5px; right:0;} 
.sitemap > div ul{width:100%; box-sizing:border-box; padding:0 20px;}
.sitemap > div ul li{display:block; width:100%; box-sizing:border-box; padding:0 15px; margin-bottom:10px;}
.sitemap > div ul li a{display:block; width:100%; border:1px solid #808080; padding:15px; box-sizing:border-box; font-size:17px; text-align:center; overflow:hidden; border-radius:65px;}
.sitemap > div ul li a:hover{border-radius:0; background:#fffbf1;}
.sitemap > div h4, .sitemap > div ul li, .sitemap > div ul li a{transition:0.4s all ease;}




/*20220701 청년활동가 안내*/
.youth_act_box{width:100%; margin:0 auto 70px auto; box-sizing:border-box; padding:20px 0;}
.youth_act_box .ya_in{width:100%;  box-sizing:border-box; padding:50px 440px 50px 30px; border-radius:20px; background-color:#f1f2ff; font-family:"NanumSquare"; font-size:20px; position:relative; word-break:keep-all; line-height:1.4em;}
.youth_act_box .ya_in:after{width:397px; height:307px; display:block; content:""; position:absolute; right:15px; top:-95px; background:url(/s/media/data.do?mediaId=MEDIA_00000000000759) no-repeat;}

.youth_cheer{width:100%; text-align:center; margin-top:80px; margin-bottom:100px;}
.youth_cheer .yc_in{display:inline-block; padding:25px 55px; position:relative; box-sizing:border-box; border:7px solid #f4f4f4;}
.youth_cheer .yc_in:before{width:52px; height:37px; display:block; content:""; position:absolute; left:-7px; top:-7px; background:url(/s/media/data.do?mediaId=MEDIA_00000000000760) no-repeat;}
.youth_cheer .yc_in:after{width:52px; height:37px; display:block; content:""; position:absolute; right:-7px; bottom:-7px; background:url(/s/media/data.do?mediaId=MEDIA_00000000000761) no-repeat;}
.youth_cheer .yc_in p{font-family:"NanumSquare"; font-weight:700; font-size:28px; word-break:keep-all;}



/*20230105 대관신청*/
.rent_notice{box-sizing:border-box; padding:20px; background-color:#fbfdff; border:1px solid #b1c7ef;}
.rent_notice .img_box{text-align:center; width:100%; margin-bottom:30px;}
.rent_notice .img_box img{max-width:100%;}
.rent_notice > p{font-weight:500; margin-top:20px;}
.rent_notice > p span.bold{font-weight:700;}


#board_calendar_list{width:100%; margin-bottom: 30px; margin-top:55px;}
#board_calendar_t_box{padding-top: 0; width:100%; margin:0 auto; overflow-x:auto;}
#board_calendar_list .calendar_btn_field{width:100%; text-align:center; margin-bottom:10px;}
#board_calendar_list .calendar_btn_field .btn{display:inline-block;}
#board_calendar_list .calendar_btn_field .btn span{float: left; font-size:40px; color:#3a3a3a; letter-spacing:-0.5px; margin:0 30px; font-weight:500;}
#board_calendar_list .calendar_btn_field .btn a{line-height: 47px; float: left; margin-top: 5px;}
#board_calendar_list .calendar_btn_field .btn .right_btn img{margin-left: 3px;}
#board_calendar_list .calendar_btn_field .btn .left_btn img{margin-right: 3px;}

#board_calendar_list .cal_div{width:100%; min-width:850px; border-collapse: collapse; overflow:auto; position:relative; padding-top:5px;}
#board_calendar_list .cal_div:before{content:''; position:absolute; top:0; left:0; width:calc(100% / 7); height: 5px; background:#ef4472;}
#board_calendar_list .cal_div:after{content:''; position:absolute; top:0; right:0; width:calc(100% / 7); height: 5px; background:#4f57f4;}
#board_calendar_list .cal_div .tr_div{font-size:0;display: inline-flex; width: 100%; float: left; position:relative;}
#board_calendar_list .cal_div > div:first-child.tr_div:before{content:''; position:absolute; top:-5px; left:0; width: 100%; height: 5px; background:#333; z-index:-1;}
#board_calendar_list .cal_div .cal_w{width:calc(100% / 7);}

#board_calendar_list .cal_div .th_div{display:inline-block; vertical-align:top; font-weight:500; box-sizing: border-box; padding: 13px 0; color: black; border-bottom:none;  text-align:center; min-height: 50px; font-size:16px;}
#board_calendar_list .cal_div .th_div:last-child{border-right:none;}
#board_calendar_list .cal_div .th_div.saturday{color: #4f57f4;}
#board_calendar_list .cal_div .th_div.sunday{color: #ff1769;}
#board_calendar_list .cal_div .tr_div .td_div{display:inline-block; vertical-align:top; box-sizing:border-box; width: calc(100%/7); min-height:135px; height:auto; border:1px #333 solid; text-align:center; padding-bottom:10px; border-right:none; border-bottom:none; position: relative;}
#board_calendar_list .cal_div .tr_div .td_div.holiday{background:#f1f1f1;}
#board_calendar_list .cal_div .tr_div .td_div:last-child{width:-webkit-calc(100%/7 - 1px); width: -moz-calc(100%/7 - 1px); width: calc(100%/7 - 1px);}
#board_calendar_list .cal_div .tr_div:last-child .td_div{border-bottom:1px #333 solid;}
#board_calendar_list .cal_div .tr_div .td_div:first-child{color: #ff1769;}
#board_calendar_list .cal_div .tr_div .td_div:last-child{color: #4f57f4; border-right:1px #333 solid; box-sizing:border-box;}
#board_calendar_list .cal_div .tr_div .td_div.holiday span.holi_chk{display:block; position:absolute; top:5px; right:10px; color:#ff0000; font-size:16px; font-weight:500;}
#board_calendar_list .cal_div .tr_div .td_div p.date{padding: 5px 10px; padding-bottom:0; box-sizing: border-box; font-size: 20px; font-weight: 500; text-align:left;}
#board_calendar_list .cal_div .tr_div .td_div p.rent_list{color:#000; font-size:17px; font-weight:500; position:relative; padding:8px 5px 8px 20px; word-break:keep-all; border-bottom: 1px dashed #888; text-align:left;}
#board_calendar_list .cal_div .tr_div .td_div p:last-child.rent_list{border-bottom:none;}
#board_calendar_list .cal_div .tr_div .td_div p.rent_list:before{display:block; content:""; position:absolute; width:5px; height:5px; left:10px; border-radius:50%; background-color:#1651fd; top:18px;}
#board_calendar_list .cal_div .tr_div .td_div p.rent_list span{display:inline-block; vertical-align:top;}
#board_calendar_list .cal_div .tr_div .td_div p.rent_list span.rent{font-weight:600; color:#1651fd; width:30px; display:none;}
#board_calendar_list .cal_div .tr_div .td_div p.rent_list span.time{line-height: 1.1em; margin-top: 3px; box-sizing: border-box;}
/*#board_calendar_list .cal_div .tr_div .td_div ul.rent_list{padding:0 8px; text-align:left;}
#board_calendar_list .cal_div .tr_div .td_div ul.rent_list li{color:#000; font-size:17px; font-weight:500; position:relative; padding:8px 0 8px 10px; word-break:keep-all; border-bottom: 1px dashed #888;}
#board_calendar_list .cal_div .tr_div .td_div ul.rent_list li:last-child{border-bottom:none;}
#board_calendar_list .cal_div .tr_div .td_div ul.rent_list li:before{display:block; content:""; position:absolute; width:5px; height:5px; left:0; border-radius:50%; background-color:#1651fd; top:18px;}
#board_calendar_list .cal_div .tr_div .td_div ul.rent_list li span{display:inline-block; vertical-align:top;}
#board_calendar_list .cal_div .tr_div .td_div ul.rent_list li span.rent{font-weight:600; color:#1651fd; width:30px;}
#board_calendar_list .cal_div .tr_div .td_div ul.rent_list li span.time{line-height: 1.1em; margin-top: 3px; box-sizing: border-box; padding-left: 5px;}*/



#board_calendar_list .apply_area{width:100%; margin-top:20px; text-align:right;}
#board_calendar_list .apply_area a{display:inline-block; text-align:center; width:180px; height:54px; color:#000; padding:0 10px; line-height:46px; background-color:#fff; box-sizing:border-box; font-size:18px; font-weight:500; border-radius:5px;}
#board_calendar_list .apply_area a.apply_go{border:4px solid #009dd3;}
#board_calendar_list .apply_area a.apply_go:hover{background-color:#009dd3; color:#fff}
#board_calendar_list .apply_area a.apply_chk{border:4px solid #7112ff;}
#board_calendar_list .apply_area a.apply_chk:hover{background-color:#7112ff; color:#fff;}



/*240502 통합회원 로그인 안내*/
.membership{width:100%;}
.membership ul{display:flex; flex-wrap:wrap;}
.membership ul li{display:inline-block; vertical-align:top; margin-right:15px; width:calc((100% - 30px)/3); border: 2px solid #4f57f4; box-sizing:border-box; border-radius:15px; overflow:hidden;}
.membership ul li:nth-child(2){border: 2px solid #e9426f;}
.membership ul li:last-child{margin-right:0;}
.membership ul li a{display:block; padding:25px; text-align:center; word-break:keep-all; box-sizing:border-box; transition:0.3s all ease; height:100%;}
.membership ul li button{display:block; padding:25px; text-align:center; word-break:keep-all; box-sizing:border-box; transition:0.3s all ease; height:100%; font-family: 'Noto Sans KR', sans-serif;}
.membership ul li a:hover{background-color:#f6f9ff;}
.membership ul li button:hover{background-color:#f6f9ff;}
.membership ul li:nth-child(2) a:hover{background-color:#fff6f8;}
.membership ul li a p.tit{font-size:20px; font-weight:500; margin-bottom:10px; color:#4f57f4; margin-top:15px;}
.membership ul li button p.tit{font-size:20px; font-weight:500; margin-bottom:10px; color:#4f57f4; margin-top:15px;}
.membership ul li:nth-child(2) a p.tit{color:#e9426f;}
.membership ul li a p.txt{font-size:17px;}
.membership ul li button p.txt{font-size:17px;}



/*250211 자격증 응시료 지원 상단 안내*/
.top_exp div .top_exp_list > li.infodesk:after{display:block; content:""; position:absolute; width:215px; height:12px; background-color:#ccff70; z-index:-1; left:12px; top:9px;}
.top_exp div .contact_info{width:100%; padding:0; margin-bottom:15px;}
.top_exp div .contact_info .yp_table{margin-top:5px;}
.top_exp div .contact_info .yp_table.ys thead tr th{padding:5px; border-top: 3px solid #7747ff; background-color: #f6effe;}
.top_exp div .contact_info .yp_table.ys tbody tr td {padding: 6px 5px; font-weight:500;}
.top_exp div .contact_info > ul{display:none;}

.top_exp div .noting{font-size:0; padding:0; vertical-align:top;}
.noting a{font-size:15px; font-weight:500; display:inline-block; vertical-align:middle; padding:8px 10px 8px 35px; margin-left:14px; border-radius:5px; line-height:1em; margin-bottom:3px;}
.noting a.down{border:2px solid #ff3e8c; background: url(/s/media/data.do?mediaId=MEDIA_00000000001050) no-repeat; background-position: left 10px center;}
.noting a.down:hover{color:#fff; background-color:#ff3e8c;}
.noting a.go{border:2px solid #5d31ff; background: url(/s/media/data.do?mediaId=MEDIA_00000000001051) no-repeat; background-position: left 10px center; padding-left: 31px;}
.noting a.go:hover{color:#fff; background-color:#5d31ff;}


/*250527 자격증 응시료 지원 상단 안내*/
.top_exp .inside{padding: 8px 13px;width: 100%;font-size: 18px;line-height: 1.5em;background: #edf4ff;border-radius: 10px;margin-bottom: 5px;}
.top_exp div .top_exp_list > li span.highlight{display: inline;box-shadow: inset 0 -14px 0 #ccff70;}
.top_exp div .top_exp_list > li.gap{margin-top:10px;}
.top_exp div .top_exp_list > li span.small{font-size:16px;}


/*250709 자격증 응시료 지원 신청마감 추가*/
.top_exp div .contact_info .yp_table.ys thead tr th.magam{background-color:#ddd; position:relative;}
.top_exp div .contact_info .yp_table.ys thead tr th.magam span.mmark{color:#ff0000;font-size:15px;display: inline-block;padding: 4px 3px;border: 2px solid #ff0000;line-height: 1em;position: absolute;transform: rotate(10deg);right: 10px;background: #ffffff9e;}
.top_exp div .contact_info .yp_table.ys tbody tr td.magam{background-color:#f4f4f4;}



@media  screen and (max-width:1200px)
{
.img_box img{width:100%;}

/*사업방향*/
.b_box{margin-bottom:50px;}


.b_box .b_in > li{width:calc((100% - 30px)/2); margin-right:30px;}

#b4, #b5{width:calc((100% - 30px)/2);}
#b4{margin-right:30px;}



/*사이트맵*/
.sitemap > div{text-align:center;}
.sitemap > div h4, .sitemap > div ul{display:block;}
.sitemap > div h4{margin:0 auto 30px auto; width:auto;} 
.sitemap > div h4 span{width:100%; padding: 15px 30px;} 
.sitemap > div h4:before{left:-7px;} 
.sitemap > div h4:after{right:-7px;} 
.sitemap > div ul{width:100%; padding:0;}

}


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

/*탭메뉴*/
.tab5 ul li{width:calc(100%/3);}


/*조직도*/
.chart{width:100%;}



.web_only img{max-width:100%;}

/*청년재단 울산센터*/
.uci5_bs li{width:calc((100% - 20px)/3); margin-bottom:10px;}
.uci5_bs li:nth-child(3n){margin-right:0;}


}



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

/*유관기관 현황*/
.c_banner ul li{width:calc((100% - 30px)/3);}
.c_banner ul li:nth-child(3n){margin-right:0;}
.c_banner ul li:nth-child(4n){margin-right:15px;}
.c_banner ul li:nth-child(12n){margin-right:0;}

/*사이트맵*/
.sitemap > div{width:50%;}
.sitemap > div:nth-child(2n){border-right:none;}
.sitemap > div:nth-child(6n){border-right:none;}
.sitemap > div:nth-child(3n){border-right:1px dashed #ccc;}
.sitemap > div:nth-child(4){border-bottom:1px dashed #ccc;}


/*울산청년일자리센터*/
.business_box > div{display:block;  padding:20px 20px 20px 75px; width:100%; margin-right:0; margin-bottom:30px; margin-top:0; margin-left:90px;}
.business_box > div:before{left:-90px; transform:translate(0, -50%); top:50%;}
.business_box > div.bb3{margin-bottom:0;}
.business_box > div p{text-align:left}
.business_box > div .bb_list{ min-height:auto;}


}


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

/*20220701 청년활동가 안내*/
.youth_act_box .ya_in{padding:50px 285px 50px 30px;}
.youth_act_box .ya_in:after{width:245px; top:-50px; background-size:100%; height:190px;}




/*250211 자격증 응시료 지원 상단 안내*/
.top_exp div .contact_info{width:100%; padding:10px 15px; border:1px solid #7747ff; background-color:#fcfaff;}
.top_exp div .contact_info .yp_table{display:none;}
.top_exp div .contact_info > ul{display:block; font-size:0;}
.top_exp div .contact_info ul li{display:inline-block; vertical-align:middle; width:calc(100%/2); margin:0; font-size:16px; position:relative; padding-left:15px; box-sizing:border-box; line-height: 1em;}
.top_exp div .contact_info ul li:before{display:block; width:4px; height:4px; position:absolute; content:"";  border-radius:2px; left:0; top:6px; border: 2px solid #1f40b7; transform: rotate(45deg);}
.top_exp div .contact_info ul li:first-child:before{border: 2px solid #bf1158;}
.top_exp div .contact_info ul li > span{display:inline-block; vertical-align:middle;}
.top_exp div .contact_info ul li > span.tit{font-weight:700; color:#1b47e8; width:60px;}
.top_exp div .contact_info ul li > span.tit.ulsan{color:#fc1d81;}
.top_exp div .contact_info ul li > span.txt{font-weight:500; width:calc(100% - 60px);}

 /*250709 자격증 응시료 신청마감 추가*/
 .top_exp div .contact_info ul li.magam .tit{width:100px; position:relative; color:#666;}
 .top_exp div .contact_info ul li.magam .tit .mmark{color: #ff0000; font-size: 14px; display: inline-block; padding: 2px 2px 3px 2px; border: 2px solid #ff0000; line-height: 1em; position: absolute; transform: rotate(8deg);
right: 12px; top:-2px; background: #ffffff9e;}
 .top_exp div .contact_info ul li.magam .txt{width:calc(100% - 100px); color:#666;}
}


@media  screen and (max-width:850px)
{
/*센터소개*/
.center_exp:after{display:none;}
.center_exp:before{display:none;}

/*울산청년창업센터*/
.uci3_chart ul.second{padding:15px;}
.uci3_chart ul.second li{width:calc((100% - 15px)/2);}
.uci3_chart ul.second li:nth-child(2n){margin-right:0;}
.uci3_chart ul.second li:last-child{margin-bottom:0;}


/*울산창조경제혁신센터*/
.web_only{display:none;}
.mobile_only{display:block;}
.uci4_chart{width:550px; position:relative; margin:0 auto;}
.uci4_chart:before{width:2px; height:calc(100% - 145px); background-color:#333; display:block; content:""; position:absolute; left:10px; top:0; z-index:-1;}
.uci4_chart li{position:relative; box-sizing:border-box; z-index:1;}
.uci4_chart li.boss{border:3px solid #046ab2; font-family:"NanumSquare"; font-weight:700; font-size:20px; text-align:center; width:100%; padding:15px 0; margin:0 0 30px 0; background-color:#fff;}
.uci4_chart li.top{width:100%; padding-left:30px;}
.uci4_chart li.top:before{width:30px; height:2px; background-color:#333; display:block; content:""; position:absolute; left:10px; top:22px; z-index:-1;}
.uci4_chart li.top:after{width:1px; height:calc(100% - 25px); background-color:#333; display:block; content:""; position:absolute; left:38px; top:0; z-index:-1;}
.uci4_chart li.top div{width:100%; padding:13px 0; text-align:center; font-family:"NanumSquare"; font-weight:700; font-size:18px; margin-bottom:15px;}
.uci4_chart li.top div.t1{background-color:#2e57b3; color:#fff;}
.uci4_chart li.top div.t2{background-color:#d83341; color:#fff;}
.uci4_chart li.top div.t3{background-color:#f5bf29;}
.uci4_chart li.top div.bottom{background-color:#f2f2f2; border-radius:15px; font-weight:500; font-family:"Noto Sans Kr"; font-size:17px; width:calc(100% - 40px); margin-left:40px; padding:12px 0; position:relative;}
.uci4_chart li.top div.bottom:before{width:31px; height:1px; background-color:#333; display:block; content:""; position:absolute; left:-31px; top:22px; z-index:-1;}
.uci4_chart .second{margin-bottom:35px;}
.uci4_chart .second li{width:calc(100% - 20px); margin-left:20px; background-color:#fff7e2; text-align:center; padding:12px 0; margin-bottom:10px; font-weight:500; border-radius:15px;}
.uci4_chart .second li:before{width:12px; height:1px; background-color:#333; display:block; content:""; position:absolute; left:-12px; top:22px; z-index:-1;}

/*청년재단울산센터*/
.uci5_chart{width:550px; position:relative; margin:0 auto;}
.uci5_chart:before{width:2px; height:calc(100% - 27px); background-color:#333; display:block; content:""; position:absolute; left:10px; top:0; z-index:-1;}
.uci5_chart li, .uci5_chart div{position:relative; box-sizing:border-box; z-index:1;}
.uci5_chart li.boss div{border:3px solid #046ab2; font-family:"NanumSquare"; font-weight:700; font-size:20px; text-align:center; width:100%; padding:15px 0; margin:0 0 15px 0; background-color:#fff;}
.uci5_chart li.boss div:before{width:1px; height:38px; background-color:#333; display:block; content:""; position:absolute; left:21px; bottom:-41px; z-index:-1;}
.uci5_chart .second{margin-bottom:30px;}
.uci5_chart .second li{width:calc(100% - 50px); margin-left:50px; background-color:#4f58f5; text-align:center; padding:13px 0; margin-bottom:10px; font-weight:500; border-radius:15px; color:#fff; font-size:19px;}
.uci5_chart .second li:before{width:26px; height:1px; background-color:#333; display:block; content:""; position:absolute; left:-26px; top:22px; z-index:-1;}
.uci5_chart li.side{width: calc(100% - 50px); margin-left: 50px; padding: 13px 0; background: #ffb522; border-radius: 15px; font-size: 19px; font-family: 'NanumSquare'; font-weight: 700; text-align: center; margin-bottom:20px;}
.uci5_chart li.side.s2{background: #575175; color:#fff;}
.uci5_chart li.side:before{width:40px; height:2px; background-color:#333; display:block; content:""; position:absolute; left:-40px; top:22px; z-index:-1;}
.uci5_chart li.top{width:calc(100% - 30px); background:linear-gradient(45deg, #2638d6, #4654f5); color:#fff; font-size:19px; font-family: 'NanumSquare'; font-weight: 700; text-align: center; padding:15px 0; margin-left:30px; margin-bottom:20px;}
.uci5_chart li.top:before{width:20px; height:2px; background-color:#333; display:block; content:""; position:absolute; left:-20px; top:23px; z-index:-1;}
.uci5_chart li.bottom{background-color:#f2f2f2; border-radius:15px; font-weight:500; font-family:"Noto Sans Kr"; font-size:18px; width:calc(100% - 40px); margin-left:40px; padding:12px 0; position:relative; text-align:center; margin-bottom:10px;}
.uci5_chart li.bottom:before{width:30px; height:1px; background-color:#333; display:block; content:""; position:absolute; left:-30px; top:22px; z-index:-1;}


}	






@media  screen and (max-width:800px)
{
/*센터소개*/
.center_exp > p{font-size:20px; line-height:28px;}
.center_hi_point1{font-size:25px;}
.center_hi_point2{font-size:25px;}
.gong_s > span:after{display:none;}
.gong_s > span:before{display:none;}
  
  
  
/*사업방향*/
.b_box .bb_tit p{font-size:27px;}

.b_box .b_in > li{width:100%; margin-right:0;}

#b4, #b5{width:100%; margin-bottom:50px; display:block;}

#b4{margin-right:0;}
#b5{margin-bottom:0;}


/*정책 인포그래픽*/
.map_area{width:665px;}
.map_area img{width:100%;}
.map_area .stats .circle{width:100px; height:100px; padding:23px;}
.map_area .stats .circle p{font-size:16px;}
.map_area .stats .circle span{font-size:27px;}
.map_area .stats .circle#all{width:190px; height:190px; padding:58px;}
.map_area .stats .circle#all p{font-size:18px;}
.map_area .stats .circle#all span{font-size:40px;}
.map_area .stats .circle#bg{top:150px; right:40px;}
.map_area .stats .circle#jg{top:205px; right:163px;}
.map_area .stats .circle#ng{top:310px; right:125px;}
.map_area .stats .circle#dg{top:285px; right:12px; background-size: 47px;}
.map_area .stats .circle#uj{top:140px; left:230px; background-size: 60px;}
.map_area .stats .circle#ulsan{top:300px; left:180px;}




/*240502 통합회원 로그인 안내*/
.membership ul{display:block;}
.membership ul li{display:block; margin-right:0; margin-bottom:10px; width:100%;}
.membership ul li:last-child{margin-bottom:0;}
.membership ul li a{position:relative; padding:20px 20px 20px 85px; text-align:left; font-size:0;}
.membership ul li button{position:relative; padding:20px 20px 20px 85px; text-align:left; font-size:0;}
.membership ul li a img{position:absolute; left:20px; top:50%; transform:translateY(-50%); width:50px;}
.membership ul li button img{position:absolute; left:20px; top:50%; transform:translateY(-50%); width:50px;}
.membership ul li a p.tit{margin-top:0; margin-bottom:5px;}
.membership ul li button p.tit{margin-top:0; margin-bottom:5px;}



}


@media  screen and (max-width:730px)
{
/*유관기관 현황*/
.c_banner ul li{width:calc((100% - 15px)/2);}
.c_banner ul li:nth-child(2n){margin-right:0;}
.c_banner ul li:nth-child(3n){margin-right:15px;}
.c_banner ul li:nth-child(6n){margin-right:0;}
.c_banner ul li:nth-child(4n){margin-right:0;}

}


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


/*250211 자격증 응시료 지원 상단 안내*/
.top_exp div .contact_info{padding:8px 13px;}
.top_exp div .contact_info ul li{width:100%;}
 
}
@media  screen and (max-width:650px)
{

/*탭메뉴*/
.tab5 ul li{width:50%;}


/*사이트맵*/
.sitemap > div{width:100%; display:block; border-right: 0; border-bottom: 1px dashed #ccc; padding-bottom: 30px;}
.sitemap > div:last-child{border-bottom: 0;}
.sitemap > div:nth-child(3n){border-right:none;}
.sitemap > div:nth-child(5){border-bottom:1px dashed #ccc;}


/*테이블 좌우 스크롤*/
.drag_please{display:block; text-align:right;}

/*울산창조경제혁신센터*/
.uci4_chart{width:100%;}

/*청년재단울산센터*/
.uci5_chart{width:100%;}


/*20220701 청년활동가 안내*/
.youth_act_box{padding:0; margin:0 auto 50px auto;}
.youth_act_box .ya_in{padding:25px;}
.youth_act_box .ya_in:after{display:none;}

.youth_cheer{margin-top:50px; margin-bottom:70px;}
.youth_cheer .yc_in{padding:30px 20px; width:100%;}
.youth_cheer .yc_in p{font-size:23px;}


}

@media  screen and (max-width:630px)
{
/*탭메뉴*/
.tb3 ul li{width:33.3%;}
.tb2 ul li{width:50%;}
.tab_box ul li a{padding:15px; display:block; width:100%; box-sizing:border-box;}

/*조직도*/
.chart ul.second:before{width:calc(100% - 146px);}
.chart ul.second li.side p{font-size:18px; width:145px;}

/*청년재단 울산센터*/
.uci5_bs li{width:calc((100% - 10px)/2);}
.uci5_bs li:nth-child(2n){margin-right:0;}
.uci5_bs li:nth-child(3n){margin-right:10px;}
.uci5_bs li:nth-child(3n).ub6{margin-right:0;}
.uci5_bs li div p{font-size:18px;}



}

@media  screen and (max-width:580px)
{
/*센터소개*/
.center_p > div {width: 100%;}
.center_p img {display: none;}
.center_p{padding: 7px;}
}


@media  screen and (max-width:540px)
{ 
  
/*센터소개*/
.gonggong_exp{font-size:16px;}
.gong_s{font-size:19px;}

/*상단 설명*/
.top_exp{padding:20px;}
.top_exp div{width:100%; padding-left:0;}
.top_exp img{display:none;}

  /*정책제안*/
.suggestion{padding-top:38%;}
.suggestion .s_ment{margin-bottom: 20px;}
.suggestion .s_ment p.top{font-size:20px; margin-bottom:10px;}
.suggestion .s_ment p.middle{font-size:25px;}
.suggestion .s_ment p.bottom{font-size:40px;}
.suggestion a.sgg_go{padding:13px 75px; background-position:right 15px center; font-size:22px;}



/*울산청년일자리센터*/
.business_box > div{padding:60px 20px 20px 20px; margin-top:90px; margin-left:0;}
.business_box > div:before{width: 130px; height: 130px; top: -90px; left: 50%; transform: translate(-50%, 0);}
.business_box > div p{text-align:center; font-size:25px;}


/*울산청년창업센터*/
.etc_box{padding:20px 15px; border-radius:30px 0;}
.etc_box ul li{margin:7px 25px 7px 0;}
}


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

/*탭메뉴*/
#ci_tab ul li a{height:60px; font-size:16px;}
#ci_tab ul li a span{transform: skew(-0.1deg);}


/*탭메뉴*/
.tb3 ul li{width:50%;}
.tab_box ul li a.on{border-bottom: 1px solid #ab785e; border-radius:0;}

/*울산청년창업센터*/
.uci3_chart ul.second li{width:100%; margin-right:0;}

.site_go{margin-bottom:30px; }
.site_go a{ padding: 15px 30px 15px 15px; font-size: 20px;}


/*청년재단 울산센터*/
.uci5_bs li{width:100%; margin-right:0;}
.uci5_bs li:nth-child(3n){margin-right:0;}
.uci5_bs li:nth-child(3n).ub6{margin-bottom:0;}



}


@media  screen and (max-width:500px)
{ 
 
 /*조직도*/
.chart{padding:0;}
.chart > ul > li > div > p{margin-bottom:10px;}

.chart > ul > li.boss p:before{bottom: -198px; z-index: 1;}
.chart > ul > li.boss ul.second{margin-top:10px; border:1px dashed #333;}

.chart > ul > li.leader:after{display:none;}
.chart > ul > li.leader p{color:#0e616b;}
.chart > ul > li.leader p:before{background-color:#0e616b; top:-25px;}
.chart > ul > li.leader ul.second:before{border-top:1px solid #333; top:-10px;}

.chart ul.second{margin-top:25px; height:auto; width:100%; box-sizing:border-box; padding:10px;}
.chart ul.second:before{display:none;}
.chart ul.second li{display:block; margin:5px auto;}
.chart ul.second li.left{float:none;}
.chart ul.second li.right{float:none;}
.chart ul.second li.side p{width:100%;}

.chart > ul > li.leader{padding-top:50.5%; position:relative;}
.chart > ul > li.leader ul.second{border:1px solid #333; position:relative;}
.chart > ul > li.leader ul.second:after{display:block; position:absolute; content:""; height:20px; z-index:-1; width:1px; background-color:#333; left:50%; transform:translateX(-50%); top:-20px;}
.chart > ul > li.leader:before{width:85%; height:auto; padding-top:48%; top:0;}
.chart > ul > li.leader ul.second li.side p:before{display:none;}

  
  /*정책제안*/
.suggestion .s_ment{margin-bottom: 15px;}
.suggestion .s_ment p.top{font-size:18px; margin-bottom:7px;}
.suggestion .s_ment p.middle{font-size:22px;}
.suggestion .s_ment p.bottom{font-size:33px;}
.suggestion a.sgg_go{padding:13px 70px; font-size:18px; background-size:17px;}

 
/*240502 통합회원 로그인 안내*/
.membership ul li a{padding: 15px 15px 15px 70px;}
.membership ul li button{padding: 15px 15px 15px 70px;}
.membership ul li a img{left: 15px;width: 40px;}
.membership ul li button img{left: 15px;width: 40px;}
 
}


@media  screen and (max-width:480px){
  
/*유관기관 현황*/
.c_banner ul li{width:100%; margin-right:0;}
.c_banner ul li:nth-child(3n){margin-right:0;}
.c_banner ul li .bn_img{padding-top:20px; height:80px;}
.c_banner ul li .bn_img:before{height:295px;}
.c_banner ul li .bn_info{margin:10px auto 15px auto;}


}




@media  screen and (max-width:450px){
.site_go a{font-size:17px;}
.site_go a img.go_icon{margin-right:4px; width:25px;}
.site_go a img.go_arr{width:22px;}

}