/* 비주얼 */
.visual {position:relative; margin-bottom:53px; font-size:0; line-height:0; text-align:center;}
.visual .visual_list {z-index:10;}
.visual .visual_item {position:relative;}
.visual .slick-slide {margin-left:4px;}
.visual .visual_item:before {display:block; position:absolute; top:0; left:0; width:100%; height:100%; background-color:rgba(0, 0, 0, 0.65); transition-property:visibility, opacity; transition-duration:0.25s; transition-timing-function:cubic-bezier(1, 0, 0, 1);}
.visual .slick-center:before {visibility:hidden; opacity:0;}
.visual a {display:block;}
.visual img {max-height:539px;}
.visual .visual_arrows {position:absolute; top:50%; left:0; right:0; z-index:20; width:1220px; margin-right:auto; margin-left:auto;}
.visual .visual_prev, .visual .visual_next {display:block; position:absolute; top:0; bottom:0; width:44px; height:87px; margin-top:auto; margin-bottom:auto; background-image:url('/site/echoyouth/images/main/visual_sprite.png'); background-repeat:no-repeat;}
.visual .visual_prev {left:22px; background-position:left top;}
.visual .visual_next {right:22px; background-position:left -97px;}
.visual .visual_dots {position:absolute; bottom:47px; left:0; z-index:30; width:100%; height:0;}
.visual li {display:inline-block; margin-left:3px; vertical-align:middle; transition-property:margin-right, margin-left; transition-duration:0.25s; transition-timing-function:cubic-bezier(1, 0, 0, 1);}
.visual .visual_dots .slick-active {margin-right:7px; margin-left:7px;}
.visual .visual_dots .slick-active + li {margin-left:0;}
.visual li:first-child {margin-left:0;}
.visual li:last-child {margin-right:0;}
.visual .visual_dots button {display:block; width:13px; height:13px; border-radius:50%; background-color:#fff; transition-property:width, height, border-radius; transition-duration:0.25s; transition-timing-function:cubic-bezier(1, 0, 0, 1);}
.visual .visual_dots .slick-active button {width:49px; height:12px; border-radius:5px;}
@media all and (max-width:1220px) {
    .visual .visual_arrows {width:100%;}
}
@media all and (max-width:640px) {
    .visual {margin-bottom:23px;}
    .visual img {max-height:205px;}
    .visual .visual_prev, .visual .visual_next {width:20px; height:39px;}
    .visual .visual_prev {left:3%; background-size:100% 211.49%;}
    .visual .visual_next {right:3%; background-position:left 100%; background-size:100% 211.49%;}
    .visual .visual_dots {display:none !important;}
}

.rowgroup {margin-bottom:37px;}
@media all and (max-width:640px) {
    .rowgroup {margin-bottom:30px;}
}

/* 공지사항 */
.board {float:left; position:relative; width:calc(100% - 500px); font-size:0; line-height:0;}
.board h2 {margin-bottom:15px; color:#000; font-size:24px; line-height:32px; font-weight:400;}
.board li {position:relative; margin-top:16px; padding-right:100px; padding-left:17px;}
.board li:first-child {min-height:114px; margin-top:0; margin-bottom:25px; padding:21px 0 36px 128px; border-bottom:1px solid #d9d9d9;}
.board li:nth-child(4) ~ li {display:none;}
.board li:before {display:block; position:absolute; top:8px; left:0; width:3px; height:3px; background-color:#cb2621;}
.board li:first-child:before {top:0; width:99px; height:99px; border-radius:50%; background-color:#f0f0f0;}
.board li:first-child:after {display:block; position:absolute; top:20px; left:19px; width:57px; height:58px; background:url('/site/echoyouth/images/main/board_sprite.png') no-repeat left top;}
.board li a {display:block; overflow:hidden; position:relative; color:#333; font-size:17px; line-height:19px; white-space:nowrap; text-overflow:ellipsis;}
.board li:first-child a {font-size:22px; line-height:24px;}
.board time {display:block; position:absolute; top:0; right:0; color:#858585; font-size:16px; line-height:19px;}
.board li:first-child time {display:none;}
.board p {display:none;}
.board li:first-child p {display:block; overflow:hidden; position:relative; margin-top:13px; color:#4a4a4a; font-size:17px; line-height:19px; white-space:nowrap; text-overflow:ellipsis;}
.board .board_more {display:block; position:absolute; top:7px; right:0; width:18px; height:18px; background:url('/site/echoyouth/images/main/board_sprite.png') no-repeat left -68px;}
@media all and (max-width:900px) {
    .board {float:none; width:auto;}
}
@media all and (max-width:640px) {
    .board h2 {margin-bottom:14px; font-size:18px; line-height:20px;}
    .board li {margin-top:12px; padding-right:50px; padding-left:13px;}
    .board li:first-child {min-height:83px; margin-bottom:19px; padding-top:13px; padding-bottom:24px; padding-left:83px;}
    .board li:before {top:7px;}
    .board li:first-child:before {width:70px; height:70px;}
    .board li:first-child:after {top:14px; left:14px; width:40px; height:41px; background-size:100% 148.27%;}
    .board li a {font-size:14px; line-height:16px;}
    .board li:first-child a {font-size:16px; line-height:18px;}
    .board time {font-size:14px; line-height:18px;}
    .board .board_year {display:none;}
    .board li:first-child p {margin-top:11px; font-size:14px; line-height:16px;}
    .board .board_more {top:1px;}
}

/* 팝업 */
.popup {float:right; width:420px; font-size:0; line-height:0;}
.popup .popup_header {margin-bottom:16px;}
.popup h2 {float:left; color:#000; font-size:24px; line-height:33px; font-weight:400;}
.popup .popup_control {float:right;}
.popup button {display:inline-block; width:33px; height:33px; margin-left:4px; border-radius:50%; background-color:#000;}
.popup button:first-child {margin-left:0;}
.popup button:before {display:inline-block; background-image:url('/site/echoyouth/images/main/popup_sprite.png'); background-repeat:no-repeat;}
.popup .popup_prev:before {width:7px; height:13px; background-position:left top;}
.popup .popup_auto:before {width:7px; height:10px; background-position:left -23px;}
.popup .slick-play:before {width:8px; height:10px; background-position:left -43px;}
.popup .popup_next:before {width:7px; height:13px; background-position:left -63px;}
.popup a {display:block;}
@media all and (max-width:900px) {
    .popup {float:none; width:auto; margin-top:34px;}
    .popup .popup_item {text-align:center;}
    .popup img {display:inline-block;}
}
@media all and (max-width:640px) {
    .popup .popup_header {margin-bottom:13px;}
    .popup h2 {font-size:17px;}
}

/* 링크 */
.link {float:left; width:100%; margin-top:60px; font-size:0; line-height:0;}
.link li {display:inline-block; width:20%; padding-right:5px; padding-left:5px; vertical-align:top; text-align:center;}
.link a {display:inline-block; position:relative; padding-top:91px; color:#444; font-size:18px; line-height:22px; font-weight:600; text-decoration:none; vertical-align:top;}
.link a:before, .link a:after {display:block; position:absolute; top:0; left:0; background-image:url('/site/echoyouth/images/main/link_sprite.png'); background-repeat:no-repeat;}
.link a:before {width:59px; height:59px; background-position:left top;}
.link a:after {right:0; margin-right:auto; margin-left:auto;}
.link .n1 a:after {top:17px; width:46px; height:51px; background-position:left -69px;}
.link .n2 a:after {top:16px; width:52px; height:55px; background-position:left -130px;}
.link .n3 a:after {top:15px; width:62px; height:51px; background-position:left -195px;}
.link .n4 a:after {top:16px; width:49px; height:55px; background-position:left -256px;}
.link .n5 a:after {top:15px; width:47px; height:54px; background-position:left -321px;}
.link .n6 a:after {top:23px; width:61px; height:44px; background-position:left -385px;}
@media all and (max-width:800px) {
    .link {overflow:hidden; position:relative;}
    .link ul {margin-top:-19px;}
    .link li {width:33.33%; margin-top:19px;}
}
@media all and (max-width:900px) {
    .link {float:none;}
}
@media all and (max-width:640px) {
    .link {margin-top:29px;}
    .link a {padding-top:70px; font-size:14px; line-height:16px;}
    .link a:before {width:47px; height:47px; background-size:105.08% 727.11%;}
    .link .n1 a:after {top:14px; width:37px; height:40px; background-position:left 18.25%; background-size:134.78% 841.17%;}
    .link .n2 a:after {top:13px; width:42px; height:44px; background-position:left 34.75%; background-size:119.23% 780%;}
    .link .n3 a:after {top:12px; width:50px; height:42px; background-position:left 51.58%; background-size:100% 841.17%;}
    .link .n4 a:after {top:13px; width:39px; height:44px; background-position:left 68.44%; background-size:126.53% 780%;}
    .link .n5 a:after {top:12px; width:38px; height:43px; background-position:left 85.6%; background-size:131.91% 794.44%;}
    .link .n6 a:after {top:19px; width:48px; height:35px; background-position:left 100%; background-size:101.63% 975%;}
}

.rowgroup2 {position:relative; background-color:#c9d964;}
.rowgroup2:before {display:block; position:absolute; top:0; right:0; width:50%; height:100%; border-top:42px solid #fff; box-sizing:border-box; background-color:#16356d;}
@media all and (max-width:1000px) {
    .rowgroup2:before {display:none;}
}

/* 사진으로 보는 산울림소식 */
.photo {float:left; position:relative; width:50%; padding-top:64px; padding-right:80px; padding-bottom:66px; font-size:0; line-height:0; text-align:center;}
.photo h2 {display:inline-block; position:relative; padding-right:45px; padding-left:45px; color:#1a1919; font-size:28px; line-height:30px; font-weight:400;}
.photo h2:before, .photo h2:after {display:block; position:absolute; top:0; bottom:0; width:20px; height:7px; margin-top:auto; margin-bottom:auto;  background:url('/site/echoyouth/images/main/photo_sprite.png') no-repeat left top;}
.photo h2:before {left:0;}
.photo h2:after {right:0;}
.photo .photo_word {display:inline-block; position:relative; padding-right:62px; font-size:0; line-height:0; vertical-align:middle;}
.photo .photo_word:after {display:block; position:absolute; top:0; right:0; bottom:0; width:46px; height:53px; margin-top:auto; margin-bottom:auto; background:url('/site/echoyouth/images/main/photo_sprite.png') no-repeat left -17px;}
.photo p {margin-top:15px; color:#1a1919; font-size:18px; line-height:20px;}
.photo .photo_slider {padding-right:71px; padding-left:71px;}
.photo .photo_list {position:relative; width:360px; max-width:100%; margin-top:47px; margin-right:auto; margin-left:auto;}
.photo .slick-list {z-index:10;}
.photo .photo_txt {padding:26px 5px 27px; background-color:#fff;}
.photo a {display:block; overflow:hidden; position:relative; height:40px; color:#1e1e1e; font-size:18px; line-height:20px; text-decoration:none;}
.photo time {display:block; margin-top:15px; color:#919191; font-size:14px; line-height:16px;}
.photo .slick-arrow {display:block; position:absolute; top:0; bottom:0; z-index:20; width:60px; height:58px; margin-top:auto; margin-bottom:auto; background-color:rgba(0, 0, 0, 0.71);}
.photo .slick-prev {left:-71px;}
.photo .slick-next {right:-71px;}
.photo .slick-arrow:before {display:inline-block; width:16px; height:32px; background-image:url('/site/echoyouth/images/main/photo_sprite.png'); background-repeat:no-repeat;}
.photo .slick-prev:before {background-position:left -80px;}
.photo .slick-next:before {background-position:left -122px;}
@media all and (max-width:1220px) {
    .photo {padding-right:40px;}
}
@media all and (max-width:1000px) {
    .photo {float:none; width:auto; padding-right:0;}
}
@media all and (max-width:640px) {
    .photo {padding-top:30px; padding-bottom:37px;}
    .photo h2 {padding-right:20px; padding-left:20px; font-size:17px; line-height:19px;}
    .photo h2:before, .photo h2:after {width:13px; height:4px; background-size:229.99% 2200%;}
    .photo .photo_word {padding-right:39px;}
    .photo .photo_word img {width:88px; height:29px;}
    .photo .photo_word:after {width:31px; height:36px; background-position:left 16.83%; background-size:100% 290.56%;}
    .photo p {margin-top:10px; font-size:14px; line-height:16px;}
    .photo .photo_slider {padding-right:49px; padding-left:49px;}
    .photo .photo_list {width:240px; margin-top:24px;}
    .photo .photo_txt {padding-top:12px; padding-bottom:12px;}
    .photo a {height:32px; font-size:15px; line-height:17px;}
    .photo time {margin-top:10px;}
    .photo .slick-arrow {width:39px; height:37px;}
    .photo .slick-prev {left:-49px;}
    .photo .slick-next {right:-49px;}
    .photo .slick-arrow:before {width:10px; height:19px; background-size:287.5% 481.25%;}
    .photo .slick-prev:before {background-position:left 65.57%;}
    .photo .slick-next:before {background-position:left 100%;}
}

/* 부천시산울림청소년수련관 SNS */
.sns {float:left; position:relative; width:50%; padding-top:118px; padding-bottom:66px; padding-left:80px; font-size:0; line-height:0;}
.sns h2 {margin-bottom:65px; padding-right:92px; color:#fff; font-size:28px; line-height:30px; font-weight:400;}
.sns .sns_word {display:block; margin-top:13px; color:#efff87; font-size:52px; line-height:40px; font-weight:600;}
.sns .sns_link {overflow:hidden; position:relative;}
.sns ul {margin-top:-20px; margin-left:-20px;}
.sns li {display:inline-block; width:calc(50% - 20px); margin-top:20px; margin-left:20px; vertical-align:top;}
.sns li:nth-child(4) ~ li {display:none;}
.sns li a {display:block; position:relative; padding:26px 30px 25px 22px; text-decoration:none;}
.sns li a:before {display:block; position:absolute; top:0; left:0; width:100%; height:100%; z-index:10; border:1px solid #7f90af; box-sizing:border-box; transition-property:border-width, border-color; transition-duration:0.25s; transition-timing-function:linear;}
.sns li a:hover:before {border-width:2px; border-color:#efff87;}
.sns li a:after {display:block; position:absolute; bottom:0; right:0; z-index:20; width:30px; height:30px; background-color:#efff87;}
.sns .sns_title {display:block; overflow:hidden; position:relative; height:40px; color:#fff; font-size:18px; line-height:20px; transition-property:color, font-weight; transition-duration:0.25s; transition-timing-function:linear;}
.sns a:hover .sns_title {color:#efff87; font-weight:600;}
.sns time {display:block; margin-top:36px; color:#d7e4fc; font-size:15px; line-height:17px;}
.sns time:before {display:block; position:absolute; bottom:9px; right:9px; z-index:30; width:13px; height:13px; background:url('/site/echoyouth/images/main/sns_sprite.png') no-repeat left top;}
.sns .sns_more {position:absolute; top:116px; right:0;}
.sns .sns_more a{position:relative; display:inline-block; margin:0 0 0 5px; width:92px; height:92px; padding:22px 5px 26px; border-radius:50%; box-sizing:border-box; background-color:#efff87; color:#29354c; font-size:16px; line-height:18px; text-align:center; text-decoration:none;}
.sns .sns_more a:before {display:block; position:absolute; right:0; bottom:13px; left:0; width:13px; height:13px; margin-right:auto; margin-left:auto; background:url('/site/echoyouth/images/main/sns_sprite.png') no-repeat left top;}
@media all and (max-width:1220px) {
    .sns {padding-left:40px;}
}
@media all and (max-width:1000px) {
    .sns {float:none; width:100vw; margin-left:-2vw; padding-right:2%; padding-left:2%; background-color:#16356d;}
    .sns .sns_more {right:2%;}
}
@media all and (max-width:640px) {
    .sns {padding-top:40px; padding-bottom:42px;}
    .sns h2 {margin-bottom:30px; padding-right:74px; font-size:17px; line-height:19px;}
    .sns .sns_word {margin-top:5px; font-size:30px; line-height:32px;}
    .sns ul {margin-top:-8px; margin-left:0;}
    .sns li {width:100%; margin-top:8px; margin-left:0;}
    .sns li a {padding-top:19px; padding-bottom:20px; padding-left:30px;}
    .sns .sns_title {height:32px; font-size:15px; line-height:30px;}
    .sns time {margin-top:11px; font-size:14px; line-height:16px;}
    .sns .sns_more {top:27px; width:74px; height:74px; padding-top:17px; padding-bottom:22px; font-size:14px; line-height:16px;}
    .sns .sns_more:before {bottom:9px;}
}

/* 오늘의 행사 */
.event {padding-top:71px; padding-bottom:73px; background-color:#f2f3f4; font-size:0; line-height:0;}
.event h2 {position:absolute; top:0; left:0; color:#5f5f5f; font-size:26px; line-height:37px; font-weight:400;}
.event .event_word {color:#16356d; font-weight:600;}
.event .event_control {margin-bottom:24px; text-align:center;}
.event .event_control button {display:inline-block; width:6px; height:12px; background-image:url('/site/echoyouth/images/main/event_sprite.png'); background-repeat:no-repeat;}
.event .event_prev {background-position:left top;}
.event .event_next {background-position:left -22px;}
.event .event_control time {display:inline-block; margin-right:27px; margin-left:27px; color:#242424; font-size:35px; line-height:37px; vertical-align:middle;}
.event .event_month {font-weight:600;}
.event .owl-item {display:inline-block; float:none; vertical-align:middle;}
.event .event_day {display:block; width:100%; padding-right:5px; padding-left:5px;}
.event .event_day time {display:block; position:relative; color:#737373; font-size:14px; line-height:16px; font-weight:600; text-align:center;}
.event .sat time {color:#16356d;}
.event .sun time {color:#ed1c24;}
.event .event_day.active time {padding-bottom:13px; color:#000;}
.event .event_day time:before {display:block; opacity:0; position:absolute; bottom:0; right:0; left:0; width:9px; height:8px; margin-right:auto; margin-left:auto; background:url('/site/echoyouth/images/main/event_sprite.png') no-repeat left -44px;}
.event .event_day.active time:before {opacity:1;}
.event .event_schedule {overflow:hidden; position:relative; margin-top:8px; padding:18px 17px; border:1px dotted #5e5f5f; background-color:#fff; text-align:center;}
.event .event_schedule ul {margin-top:-14px; margin-left:-34px;}
.event .event_schedule li {display:inline-block; position:relative; margin-top:14px; margin-left:34px; padding-left:13px;}
.event .event_schedule li:before {display:block; position:absolute; top:7px; left:0; width:4px; height:4px; border-radius:50%; background-color:#000;}
.event .event_schedule a {display:block; color:#2a2a2a; font-size:15px; line-height:17px; text-decoration:none;}
.event .event_more {display:block; position:absolute; top:0; right:0; width:37px; height:37px; border:1px solid #cbcbcb; border-radius:50%; background-color:#fff; line-height:37px; text-align:center;}
.event .event_more:before {display:inline-block; width:21px; height:21px; background:url('/site/echoyouth/images/main/event_sprite.png') no-repeat left -62px; vertical-align:middle;}
@media all and (max-width:640px) {
    .event {padding-top:26px; padding-bottom:34px;}
    .event h2 {font-size:18px;}
    .event .event_control {margin-bottom:28px;}
    .event .event_control time {margin-right:15px; margin-left:15px; font-size:22px;}
    .event .event_day time {font-size:15px; line-height:17px;}
    .event .event_day.active time {padding-bottom:12px;}
    .event .event_schedule {text-align:left;}
    .event .event_schedule ul {margin-left:0;}
    .event .event_schedule li {display:block; margin-left:0;}
    .event .event_schedule li:before {top:6px;}
    .event .event_schedule a {font-size:14px; line-height:16px;}
}