@charset "utf-8";

/* list_option */
.list_option{overflow:hidden; margin-bottom:10px;}
.list_option p{float:left; padding:5px 0 0 16px; color:#666; background:url(/images/article/list_total.png) no-repeat 0 6px;}
.list_option p strong{color:#f23041;}
.list_option p b{color:#333;}
.list_option div{float:right;}
.list_option select{height:29px; color:#888; font-size:13px; border:1px solid #ddd;}
.list_option a{display:inline-block; padding:7px 12px; color:#fff; font-size:13px; background:#606060;}

/* view_option */
.view_option{position:relative; margin-bottom:10px;}
.view_option:after{display:block; clear:both; content:"";}
.view_option div{float:right;}
.report_insert{display:none; position:absolute; top:42px; right:0; width:458px; height:57px; padding:10px; background-color:#fff; border:1px solid #ddd; z-index: 1;}
.report_insert textarea{float:left; width: calc(100% - 70px); height:35px; padding:10px 0 0 10px; border:1px solid #ddd; resize:none;}
.report_insert input[type="submit"]{float:right; width:60px;height: 35px; border:none; background-color:#2a3649; color:#fff;}
.report_insert a {display: inline-block; margin-left:10px;}
.report_insert a span{display:inline-block; width: 60px; height: 35px; padding: 6px 12px; border:solid 1px #ddd; text-align: center; box-sizing: border-box;}

/* list_style_1 */
.list_style_1{table-layout:fixed; width:100%; margin-bottom:15px; border-top:2px solid #111;}
.list_style_1 th{padding:18px 5px; border-bottom:1px solid #111; font-family:"NanumBarunGothicB"; font-size:15px; color:#333;}
.list_style_1 th.border_none{border-right:none;}
.list_style_1 td{padding:19px 5px; text-align:center; font-size:13px; border-bottom:1px solid #d5d5d5;}
.list_style_1 td.title{overflow:hidden; white-space:nowrap; text-overflow:ellipsis; text-align:left; font-family:"NanumBarunGothicB";}
.list_style_1 td.title a{display:inline-block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; max-width:calc(100% - 20px);}
.list_style_1 td.left{text-align:left;}

.list_style_1 tr.faq_question > th{}
.list_style_1 tr.faq_question > td.title{padding-left:70px; padding-right:20px; background:url(/images/article/faq_question.png) no-repeat 20px 15px; color:#444; font-size:18px; font-family:"NanumSquare"; letter-spacing:-0.045em;}
.list_style_1 tr.faq_question > td.title a{display:block; overflow:hidden;  white-space:nowrap; text-overflow:ellipsis;}
.list_style_1 tr.faq_answer > td{text-align:left; padding-left:70px; padding-right:20px; background:url(/images/article/faq_answer.png) no-repeat 20px 15px #fafafa; color:#666; font-size:14px; line-height:24px; word-break:keep-all;}

.list_style_1 td.badge{}
.list_style_1 td.badge span{display:inline-block; padding:6px 0; width:50px; background:#2996cc; color:#fff; font-size:12px; border-radius:3px;}
.list_style_1 td.badge span.s_c43{background:#e67386;}  /* 용인시청소년수련관 */
.list_style_1 td.badge span.s_c45{background:#9ba629;}  /* 용인시청소년상담복지센터 */
.list_style_1 td.badge span.s_c46{background:#926ca6;}  /* 용인시청소년미래교육센터 */
.list_style_1 td.badge span.s_c47{background:#4c86bf;}  /* 용인시청소년지원센터꿈드림 */
.list_style_1 td.badge span.s_c48{background:#e69b50;}  /* 용인시청소년수련원 */
.list_style_1 td.badge span.s_c49{background:#d96ca3;}  /* 유림청소년문화의집 */
.list_style_1 td.badge span.s_c50{background:#42a6a6;}  /* 신갈청소년문화의집 */
.list_style_1 td.badge span.s_c51{background:#5b74a6;}  /* 수지청소년문화의집 */

/* list_style_2 */
.list_style_2{border-top:2px solid #111;}
.list_style_2 li{overflow:hidden; padding:25px 0; border-bottom:1px solid #d5d5d5;}
.list_style_2 .img{float:left; margin:0 30px;}
.list_style_2 .img img{width:190px; height:133px;}
.list_style_2 .text{float:left; width:500px;}
.list_style_2 .text .tit{overflow:hidden; font-size:18px; font-family:"NanumBarunGothic"; font-weight:600; line-height:24px;}
.list_style_2 .text .tit a{color:#333;}
.list_style_2 .text .tit a b{color:red;}
.list_style_2 .text .txt{display:block; overflow:hidden; margin-top:12px; color:#555; font-size:14px; font-family:"NanumBarunGothic"; line-height:22px;}
.list_style_2.lecture .text .txt{margin-bottom:15px; height:66px;}
.list_style_2.lecture .text .txt img{display:none;}
.list_style_2.lecture .text span{display:block;}
.list_style_2.lecture .text span.date{margin-bottom:5px; color:#797979;}
.list_style_2 .text .btn{display:inline-block; position:relative; padding:8px 45px 8px 14px; margin-top:12px; color:#555; background:url(/images/article/lecture_list_btn.png) no-repeat 88% 10px #fcfcfc; border:1px solid #dbdbdb; border-radius:3px;}
.list_style_2 .text .btn::after{content:""; position:absolute; top:7px; right:30px; width:1px; height:16px; background:#dbdbdb;}

/* 게시판 글씨 통일되게 요청 */
.list_style_2 .text .txt p span {
    font-family: "NanumBarunGothic" !important;
    font-size: 14px !important;
    line-height: 22px !important;
}


/* thumb_style_1 앨범형 */
.thumb_style_1{padding:30px 0; margin-bottom: 15px; border-top:1px solid #ddd; border-bottom:1px solid #ddd;}
.thumb_style_1 ul{overflow:hidden;}
.thumb_style_1 ul li{float:left; padding:12px; margin:0 20px 20px 0; width:246px; border:1px solid #ddd; box-sizing:border-box;}
.thumb_style_1 ul li:nth-child(3n){margin-right:0;}
.thumb_style_1 ul li a{display:block;}
.thumb_style_1 ul li img{display:block; width:220px; height:220px; margin-bottom:8px; background-color:#ddd;}
.thumb_style_1 ul li a p{overflow:hidden; height:40px; line-height:20px;}
.thumb_style_1 ul li span.tit{display:block; overflow:hidden; margin-top:15px; width:100%; color:#444; font-size:14px; text-overflow:ellipsis; white-space:nowrap;}
.thumb_style_1 ul li span.date{display:block; margin-top:6px; color:#888; font-size:12px;}

/* thumb_style_1 리스트형 */
.thumb_style_2{margin-bottom: 15px; border-top:1px solid #ddd;}
.thumb_style_2 ul li{overflow:hidden; padding:30px 0; border-bottom:1px solid #ddd;}
div.thumb_img{float:left;}
div.thumb_img img{width:178px; height:138px; border:1px solid #ddd;}
div.thumb_contents{margin-left:200px;}
div.thumb_contents p.thumb_tit{margin-bottom:10px; font-size:16px; font-family:"NanumBarunGothicB";}
div.thumb_contents p.thumb_tit b{}
div.thumb_contents p.thumb_txt{overflow:hidden; height:72px; margin-bottom:24px; line-height:20px;}
div.thumb_contents span{font-size:12px;}

/* view_style_1 */
.view_style_1{table-layout:fixed; width:100%; border-top:2px solid #2d2d2d; border-bottom:1px solid #2d2d2d; margin-bottom:30px;}
.view_style_1 th{text-align:left; padding:15px 12px 15px 30px; border-bottom:1px solid #ddd; color:#333; font-size:15px; font-family:"NanumBarunGothicB";}
.view_style_1 th.tit{padding:17px 30px; background:#fafafa; color:#111; text-align:left; font-size:16px;}
.view_style_1 th.line{position:relative;}
.view_style_1 th.line::after{content:""; position:absolute; top:16px; right:0; width:1px; height:15px; background:#ddd;}
.view_style_1 td{padding:13px 15px 10px 15px; color:#666; font-size:13px; border-bottom:1px solid #ddd; border-right:1px solid #ddd; line-height:20px;}
.view_style_1 td:last-child{border-right:none;}
.view_style_1 td.contents{padding:30px; color:#333; font-size:14px; line-height:24px;}
.view_style_1 td.contents img{max-width:100% !important; height:auto !important;}

/*칭찬합니다. 시민소통공간 시설 Style*/
.view_style_1 {}
.view_style_1 span.spSite{display:inline-block; text-align:center; padding:6px 0; width:50px; background:#2996cc; color:#fff; font-size:12px; border-radius:3px; margin-right:5px}
.view_style_1 span.spSite.s_c43{background:#e67386;}  /* 용인시청소년수련관 */
.view_style_1 span.spSite.s_c45{background:#9ba629;}  /* 용인시청소년상담복지센터 */
.view_style_1 span.spSite.s_c46{background:#926ca6;}  /* 용인시청소년미래교육센터 */
.view_style_1 span.spSite.s_c47{background:#4c86bf;}  /* 용인시청소년지원센터꿈드림 */
.view_style_1 span.spSite.s_c48{background:#e69b50;}  /* 용인시청소년수련원 */
.view_style_1 span.spSite.s_c49{background:#d96ca3;}  /* 유림청소년문화의집 */
.view_style_1 span.spSite.s_c50{background:#42a6a6;}  /* 신갈청소년문화의집 */
.view_style_1 span.spSite.s_c51{background:#5b74a6;}  /* 수지청소년문화의집 */

.videowrapper{position:relative; padding-bottom:56.25%; height:0; overflow:hidden; max-width:100%;}
.videowrapper iframe{position:absolute; top:0; left:0; width:100%; height:100%;}
.subtitles{overflow-y:auto; padding:20px; margin-top:15px; height:145px; border:1px solid #e5e5e5;}
.subtitles .title{margin-top:30px; color:#333; font-size:15px; font-family:"NanumBarunGothicB"; line-height:20px;}
.subtitles .title:first-child{margin-top:0;}
.subtitles .sub_title{margin:15px 0 10px 0; color:#555; font-size:13px;}
.subtitles p{color:#787878; font-size:12px; line-height:18px;}

/* view_style_2 */
.view_style_2{padding-bottom:100px; margin-bottom:40px; border-bottom:solid 1px #d5d5d5;}
.view_style_2 .title{text-align:center; padding:40px 0; border-top:2px solid #111; border-bottom:1px solid #d5d5d5; background:url(/images/article/view_style_title.gif) no-repeat 0px center;}
.view_style_2 .title .tit{color:#333; font-size:24px; letter-spacing:-0.045em;}
.view_style_2 .title .sub_tit{display:block; padding:0 20px; margin-top:20px; color:#666; font-size:16px; line-height:26px; word-break:keep-all;}
.view_style_2 .conts{margin-top:20px; color:#444; font-size:14px; line-height:26px;}
.view_style_2 .conts p{margin-left:12px;}
.view_style_2 .conts img{max-width:100%;}
.view_style_2 .img{overflow:hidden; margin-top:20px;}
.view_style_2 .img li{float:left; margin-right:3%; width:48.5%; height:220px; border:1px solid #b5b5b5; box-sizing:border-box;}
.view_style_2 .img li:nth-child(2n){margin-right:0;}
.view_style_2 .img li img{display:inline-block; width:100%;}
.view_style_2 .manage_cont{margin-left:12px;}
.view_style_2 .manage_cont ul{margin-top:15px;}
.view_style_2 .manage_cont ul li{padding-left:25px; margin:10px 0; color:#444; font-size:15px; line-height:26px;}
.view_style_2 .manage_cont ul li.depart{background:url(/images/article/depart.png) no-repeat 0 3px;}
.view_style_2 .manage_cont ul li.manager{background:url(/images/article/manager.png) no-repeat 0 3px;}
.view_style_2 .manage_cont ul li.contact{background:url(/images/article/contact.png) no-repeat 0 3px;}
.view_style_2 .manage_cont ul li.location{background:url(/images/article/location.png) no-repeat 2px 1px;}
.view_style_2 .manage_cont ul li.period{background:url(/images/article/period.png) no-repeat 0 4px;}
.view_style_2 .manage_cont ul li span{margin-right:30px; font-family:"NanumBarunGothicB";}
.view_style_2 .btn_enrol{display:block; text-align:center; padding:12px 0; margin:0 auto; width:130px; color:#fff; font-size:18px; font-family:"NanumSquareB"; background:#1977a6; border-radius:3px; letter-spacing:-0.045em; box-sizing:border-box;}

/* write_style_1 */
.write_style_1{table-layout:fixed; margin-top:25px; width:100%; border-top:2px solid #111; margin-bottom:30px;}
.write_style_1 th{padding:12px 5px; background:#fbfbfb; border-bottom:1px solid #ddd; color:#333; font-family:"NanumBarunGothicB"; word-break:keep-all;}
.write_style_1 th.left{text-align:left;}
.write_style_1 th.br{border-right:1px solid #ddd;}
.write_style_1 td{padding:10px 15px; border-bottom:1px solid #ddd; line-height:24px;}
.write_style_1 td input[type="text"]{padding:10px; width:180px; height:39px; font-size:14px; border:1px solid #d9d9d9; box-sizing:border-box; line-height:14px;}
.write_style_1 td input[type="password"]{padding:10px; width:180px; height:39px; font-size:14px; border:1px solid #d9d9d9; box-sizing:border-box; line-height:14px;}
.write_style_1 td input[type="number"]{padding:10px; width:180px; height:39px; font-size:14px; border:1px solid #d9d9d9; box-sizing:border-box; line-height:14px;}
.write_style_1 td.align{text-align:left;}
.write_style_1 td ul.file li{margin-bottom:15px;}
.write_style_1 td ul.file li.last{margin-bottom:0;}
.write_style_1 td ul.file li a img{padding:1px 12px 0 0 !important;}
.write_style_1 td select{font-size:13px; height: 28px; color:#606060;}
.write_style_1 td ol.select{display:block; overflow:hidden; margin:0px; padding:0px;}
.write_style_1 td ol.select li{padding:0 15px 0 0px; margin:0px; float:left;}
.write_style_1 td ol.select li.first{}
.write_style_1 td ol.select li.first_2{padding:0 15px 10px 0px;}
.write_style_1 td textarea{resize:vertical; width:100%; min-height:100px; border:1px solid #d9d9d9; box-sizing:border-box;}

/* comment */
.comment_wrap{margin-top:50px;}
.comment_cnt{margin-bottom:10px; padding-bottom:10px; border-bottom:1px solid #ddd;}
.comment_cnt span{color:#2996cc; font-family:"NanumBarunGothicB";}
/* 
.sns_wrap{margin-bottom:10px; padding-bottom:8px; border-bottom:1px solid #ddd;}
.sns_wrap:after{display:block; content:""; clear:both;}
.sns_tit{float:left; width:86px; margin:14px 10px 0 0; padding:10px 0; border:1px solid #ddd; text-align:center;}
.sns_sel{float:left;}
.sns_sel ul{overflow:hidden;}
.sns_sel ul li{float:left; width:42px; height:60px; padding:14px 9px 0 10px;}
.sns_sel ul li.on{background:url(/images/article/sns_on.png) center 0px no-repeat;}
.sns_sel ul li span{display:block; margin-top:3px; text-align:center;}
#name_color{width:100%; padding:10px 0; margin-bottom:5px; background-color:#ddd;}
#name_color p{margin-left:10px; color:#fff;}
.twitter_color{background-color:#2daae2 !important;}
.facebook_color{background-color:#3d57a8 !important;}
.naver_color{background-color:#1fcc00 !important;}
.kakao_color{background-color:#fab900 !important;}
.daum_color{background-color:#6872dd !important;}
 */
.comment_insert:after{display:block; content:""; clear:both;}
.comment_insert p{float:left; margin-right:10px;}
.comment_insert p img{width:88px; height:88px; border-bottom:1px solid #ddd;}
.comment_insert .txt_insert{}
.comment_insert .txt_insert textarea{width:100%; height:78px; padding:10px 0 0 10px; border:1px solid #ddd; box-sizing:border-box;}
.comment_insert .txt_insert div{overflow:hidden;}
.comment_insert .txt_insert div span.count_box{float:left;}
.comment_insert .txt_insert div span.cmt_register{float:right;}
.comment_insert .txt_insert div span.cmt_register a{display:inline-block; text-align:center; padding:10px 0; width:70px; color:#fff; font-size:15px; background:#303030;}

#comment_list{margin-top:30px;}
#comment_list .comment_tab{padding-bottom:8px; border-bottom:1px solid #ddd;}
#comment_list .cmt_contents{}
.cmt_contents ul li{overflow:hidden; padding:15px 10px; border-bottom:1px solid #ddd;}
.cmt_contents ul li.re_comment{padding-left:30px; background-color:#fafafa;}
/* 
.profile_img1{float:left; margin-right:10px;}
.profile_img1 img{width:88px; height:88px; border-bottom:1px solid #ddd;}
.profile_img2{float:left; margin-right:10px;}
.profile_img2 img{width:75px; height:75px; border-bottom:1px solid #ddd;}
 */
.cmt_contents ul li .comment_txt1{overflow:hidden;}
.cmt_contents ul li .comment_txt1 > p{padding-top:10px; clear:both; line-height:20px;}
.cmt_contents ul li .comment_txt2{overflow:hidden;}
.cmt_contents ul li .comment_txt2 > p{overflow:hidden; padding:10px 0 0 10px; clear:both;}
.cmt_contents ul li .comment_txt2 > p strong{display:block; margin-bottom:10px; font-family:"NanumBarunGothicB";}
.cmt_contents ul li .comment_txt2 > p strong + span{display:block; line-height:20px;}
.cmt_contents ul li .comment_txt2 .re_insert{padding-left:10px;}
.cmt_contents ul li .name_date{overflow:hidden; float:left;}
.cmt_contents ul li .name_date p{display:table-cell; vertical-align:middle;}
.cmt_contents ul li .name_date p:first-child{margin-right:8px;}
.cmt_contents ul li .name_date p img{margin-right:5px;}
.cmt_contents ul li .name_date p strong{margin-right:10px; font-family:"NanumBarunGothicB";}
.cmt_contents ul li .name_date p span{font-size:12px; color:#7a7a7a;}
.cmt_contents ul li .c_comment_btn{float:right;}
.cmt_contents ul li .c_comment_btn a{display:inline-block; padding:3px 8px; border:1px solid #ddd; background-color:#fff; border-radius:2px; font-size:11px; text-align:center;}
.cmt_contents ul li .re_insert textarea{width:100%; height:52px; padding:10px 0 0 10px; border:1px solid #ddd; box-sizing:border-box;}
.cmt_contents ul li .re_insert div{overflow:hidden;}
.cmt_contents ul li .re_insert div.re_insert_txt1,
.cmt_contents ul li .re_insert div.re_insert_txt2{margin-top:10px;}
.cmt_contents ul li .re_insert div.re_insert_txt2 textarea{width:100%; box-sizing:border-box;}
.cmt_contents ul li .re_insert div span.count_box{float:left;}
.cmt_contents ul li .re_insert div span.re_register{float:right;}
.cmt_contents ul li .re_insert div span.re_register a{display:inline-block; text-align:center; padding:7px 0; width:50px; color:#fff; font-size:12px; background:#303030;}

/* btn_style */
.btn_type1{margin-bottom:20px;}
.btn_type1:after{display:block; content:""; clear:both;}
.btn_type1 .right{float:right;}
.btn_type1 .left{float:left;}
.btn_type1 .center{text-align:center;}
.btn_type1 a{display:inline-block; text-align:center; padding:10px 0; width:70px; color:#fff; font-size:15px; background:#303030;}
.btn_type1 a.type1{width:154px; padding:13px 0; border:none; background:#268cbf; font-family:"NanumBarunGothicB"; color:#fff; font-size:15px;} /* 회원 type */
.btn_type1 a.type2{width:154px; padding:13px 0; border:none; background:#666; font-family:"NanumBarunGothicB"; color:#fff; font-size:15px;} /* 회원 type */
.btn_type1 a.type3{width:152px; padding:13px 0; font-family:"NanumBarunGothicB";} /* 회원 type */
.btn_type1 input[type="submit"]{text-align:center; margin-top:-1px; width:70px; height:38px; background:#303030; border:none; color:#fff; font-size:15px; font-family:"NanumBarunGothic"; cursor:pointer;}
.btn_apply{display: inline-block; text-align:center; padding:8px 0; margin:0 auto; width: 110px; color:#fff !important; font-size:14px; background:#1977a6; border-radius:3px; box-sizing:border-box;}

/* 다운로드 btn */
.btn_type2{margin-top:15px;}
.btn_type2::after{display:block; content:""; clear:both;}
.btn_type2 .right{float:right;}
.btn_type2 .left{float:left;}
.btn_type2 .center{text-align:center;}
.btn_type2 a{display:inline-block; text-align:center; padding: 0 62px 0 20px; margin:0px 10px 5px 0; min-width:75px; line-height: 42px; color:#fff; font-size:13px;}
.btn_type2 a:first-child{margin-left:0;}
.btn_type2 a:last-child{margin-right:0;}
.btn_type2 a.down{background:url(/images/article/btn_down.gif) no-repeat right 0 #1977a6;}
.btn_type2 a.link{background:url(/images/article/btn_link.gif) no-repeat right 0 #1977a6;}
.btn_type2 a.view{background:url(/images/article/btn_down.gif) no-repeat right 0 #1977a6;}


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

	.list_style_2 .text{width:430px}
	.thumb_style_1 ul li{width:219px;}
	.thumb_style_1 ul li img{width:100%; max-width:100%; height:auto;}
	.thumb_style_1 ul li .img_area {position: relative; padding: 0 0 100%;}
	.thumb_style_1 ul li .img_area .img_inner {position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%;}
	.thumb_style_1 ul li .img_area .img_inner img {display: block; width: 100%; height: 100%;}
	
}

@media only screen and (max-width:768px) {
	
	.none{display:none;}

	.list_style_2 .img{float:none; margin:0; text-align:center}
	.list_style_2 .text{float:none; width:auto; margin-top:20px}
	
	.thumb_style_1 ul li{width:48.5%; margin:0 3% 3% 0;}
	.thumb_style_1 ul li:nth-child(3n){margin-right:3%;}
	.thumb_style_1 ul li:nth-child(2n){margin-right:0;}
	
	.view_style_1.lecture th{display:block; padding-left:12px; background:#fbfbfb;}
	.view_style_1.lecture th.line::after{display:none;}
	.view_style_1.lecture td{display:block;}
	.view_style_1.lecture td img{width:100% !important; height:auto !important;}
	
	.view_style_2 .img li{float:none; margin-bottom:10px; margin-right:0; width:100%; height:auto;}
	
	.write_style_1 th.br{border-right:none;}
	
	/* sns comment */
	.comment_insert{position:relative;}
	.comment_insert p{position:absolute; top:0; left:0;}
	.txt_insert{display:block; float:none; margin:0 12px 0 97px;}
	.txt_insert textarea{width:100%;}
	.txt_insert div span.cmt_register{position:absolute; right:0; bottom:-15px;}
	
	.comment_txt1,.comment_txt2{float:none; width:auto;}
	
	#smart_editor2{min-width:auto !important;}
	
	.btn_type1 a.type1,.btn_type1 a.type2,.btn_type1 a.type3{width:100px; font-size:13px;}


	.report_insert {width: 300px;}
	.report_insert textarea {width: calc(100% - 60px);}
	.report_insert a span {width: 50px; font-size: 14px;}

	.btn_type2 a {padding: 0  62px 0 20px; line-height: 35px;}
}

@media only screen and (max-width:480px) {
	
	/* list_option */
	.list_option p.hit{margin-bottom:5px;}
	.list_option div{float:none; clear:left;}
}

@media only screen and (max-width:420px) {
	
	.sns_tit{float:none; width:100%; margin:0 0 10px;}
	.sns_sel{float:none; text-align:center;}
	.sns_sel ul li{display:inline-block; float:none;}
	.sns_sel ul li:last-child{margin-right:0;}
	
	.profile_img1,.profile_img2{display:none;}


}

@media only screen and (max-width:380px) {
	.report_insert {width: 200px; height: auto;}
	.report_insert textarea {width: 100%;}
	.report_insert a {width: 100%; margin: 10px 0 0;}
	.report_insert a span {width: 100%; height: 37px; padding: 7px;}
}