@charset "utf-8";
/****************************************/
/* Name: 부산광역시 수영구 미디어센터
/* PART: CONTENT STYLE 
/* Version: 1.0 / day: 2019-07-
/* Author: imtec 
/****************************************/

/* 슬라이드 기본설정 */
.swiper-container {
  margin-left: auto;
  margin-right: auto;
  position: relative;
  overflow: hidden;
  /* Fix of Webkit flickering */
  z-index: 1;
}
.swiper-wrapper{
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 1;
  display: flex;-ms-display: flexbox;  
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;-ms-display: flexbox;
  -webkit-transition-property: -webkit-transform;
  -moz-transition-property: -moz-transform;
  -o-transition-property: -o-transform;
  -ms-transition-property: -ms-transform;
  transition-property: transform;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;  
}
.swiper-wrapper.vertical {
  flex-direction: column;
}
.swiper-slide {
  -webkit-flex-shrink: 0;
  -ms-flex: 0 0 auto;
  flex-shrink: 0;
  width: auto;
  height: 100%;
  position: relative;
}


/*
=========================================================================
pc 콘텐츠 css
=========================================================================
*/


/* 비주얼 영역 */
.m_con_box_1{width: 100%;height: 840px;background: url(/img/media/main/m_visual.jpg) center center no-repeat;background-size: cover;}
.m_con_box_1 .vis_txt{width: 100%;text-align: center;padding-top: 177px;margin-bottom: 60px}
.m_con_box_1 .vis_txt h2{width: 357px;height: 63px;background: url(/img/media/main/m_visual_txt.png) no-repeat;background-size: contain;margin-bottom: 10px;text-indent: -9999px;display: inline-block;}
.m_con_box_1 .vis_txt p{font-family: 'NanumSquare';font-size: 18px;color: #fff;text-align: center;}

.m_vis_tab{position: relative;}
.m_vis_tab h3 a:hover,.m_vis_tab h3 a:focus,
.m_vis_tab a:hover h4,.m_vis_tab a:focus h4{text-decoration: underline;}
.m_vis_tab ul{display: flex;flex-direction: column;}
.m_vis_tab h3 a{display: inline-block;width: 160px;height: 133px;line-height: 133px;text-align: center;font-family: 'NanumSquare';font-size: 24px;color: #dae1f4;position: relative;background-color: rgba(36,60,108,0.9);font-weight: normal;}
.m_vis_tab h3 a::after{content: "";display: inline-block;width: 46px;height: 1px;background-color: rgba(255,255,255,0.3);position: absolute;bottom: -1px;z-index: 1;}
@media all and (min-width:1025px){
	.m_vis_tab h3 a::after{left: 50%;transform: translateX(-50%);-webkit-transform: translateX(-50%);}
}
.m_vis_tab li:last-child h3 a::after{display: none;}
.m_vis_tab h3 a.on{background-color: #8d3de7;color: #fff;z-index: 2;font-weight: bold;}
.m_vis_tab h3 a.on::before{content: "";display: inline-block;width: 5px;height: 5px;border-radius: 50%;background-color: #fff;position: absolute;left: 50%;bottom:39px;transform: translateX(-50%);-webkit-transform: translateX(-50%);}
.m_vis_tab h3 a.on::after{display: none;}

.m_vis_tab .con_box{display: flex;position: absolute;left: 180px;top: 0;}
.m_vis_tab .con_box > div{margin-right: 10px;flex-shrink: 0}
.m_vis_tab .youtube_box{width: 720px;height: 400px;}
.m_vis_tab .youtube_box > a{display: block;width: 100%;height: 100%;overflow: hidden;position: relative;background:#000}
.m_vis_tab .youtube_box img{width: 100%;height: auto;position: absolute;top: 50%;transform: translateY(-50%);-webkit-transform: translateY(-50%);}
.m_vis_tab .youtube_box iframe{width: 100%;height: 100%;}
.m_vis_tab .news_box{width: 340px;display: flex;flex-direction: column;}
.m_vis_tab .news_box a{display: block;}
.m_vis_tab .news_box .img_box{width: 100%;height: 240px;position: relative;overflow:hidden;}
.m_vis_tab .news_box .img_box iframe{width: 100%;height: 100%}
.m_vis_tab .news_box .img_box img{height: 100%;max-width:150%;position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);-webkit-transform: translate(-50%,-50%);}
.m_vis_tab .news_box .txt_box{width: 100%;height: 160px;background-color: rgba(0,0,0,0.7);padding: 40px;color: #fff;}
.m_vis_tab .news_box .txt_box h4{font-family: 'NanumSquare';font-size: 28px;font-weight: normal;line-height: 1;display: block;max-width: 100%;overflow: hidden;text-overflow: ellipsis;white-space:nowrap;margin-bottom: 25px}
.m_vis_tab .news_box .txt_box p{line-height: 1;font-size: 16px;color: #bdbdbd}

.ytp-large-play-button {position: absolute;left: 50%;top: 50%;width: 68px;height: 48px;margin-left: -34px;margin-top: -24px;-moz-transition: opacity .25s cubic-bezier(0.0, 0.0, 0.2, 1);-webkit-transition: opacity .25s cubic-bezier(0.0, 0.0, 0.2, 1);transition: opacity .25s cubic-bezier(0.0, 0.0, 0.2, 1);z-index: 63
}
.m_vis_tab .youtube_box > a:hover .ytp-large-play-button-bg {-moz-transition: fill .1s cubic-bezier(0.0, 0.0, 0.2, 1), fill-opacity .1s cubic-bezier(0.0, 0.0, 0.2, 1);-webkit-transition: fill .1s cubic-bezier(0.0, 0.0, 0.2, 1), fill-opacity .1s cubic-bezier(0.0, 0.0, 0.2, 1);transition: fill .1s cubic-bezier(0.0, 0.0, 0.2, 1), fill-opacity .1s cubic-bezier(0.0, 0.0, 0.2, 1);fill: #f00;fill-opacity: 1
}

.section_2{width: 100%;background: url(/img/media/main/m_content_bg.jpg) center top no-repeat;background-size: cover;padding-bottom: 70px}
.section_2 h2{font-family: 'NanumSquare';font-size: 40px;color: #333;text-align: center;line-height: 1;margin-bottom: 25px;}
/* 수영 sns */
.m_con_box_2{padding-top: 100px;position: relative;padding-bottom: 135px}
.m_con_box_2 .m_sns_tab_box{display: flex;justify-content: center;position: relative;margin-left: 1px}
.m_con_box_2 .m_sns_tab_box > li{height: 445px;display: inline-block;margin-left: -1px;}
.m_con_box_2 .m_sns_tab_box .tit{display: inline-block;width: 150px;height: 54px;line-height: 54px;border:1px solid #dadada;font-family: 'NanumSquare';font-size: 17px;text-align: center;}
.m_con_box_2 .m_sns_tab_box .tit:hover{text-decoration: underline;}
.m_con_box_2 .m_sns_tab_box .tit.on{color: #fff;background-color: #383a4a;border-color: #383a4a;}
.m_con_box_2 .m_sns_tab_box .tab_con_box{position: absolute;left: 0;top: 85px;width: 100%;height: 100%}
.m_con_box_2 .swiper-container{overflow: visible;margin: 0 -60px;}
.m_sns_slide ul{justify-content: space-between;padding-bottom: 20px;}
.m_sns_slide li{width: 380px;flex-shrink: 0;background-color: #fff}
.m_sns_slide li.side_list a{opacity: 0.4}
.m_sns_slide li a{display: block;width: 100%;box-shadow: 10px 10px 15px rgba(0,0,0,0.1)}
.m_sns_slide .img_box{width: 100%;height: 60px;overflow: hidden;position: relative;background-color: #fff}
.m_sns_slide .img_box.has_img{height: 240px}
.m_sns_slide .img_box img{width: 100%;position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);-webkit-transform: translate(-50%,-50%);}
.m_sns_slide .txt_box{width: 100%;max-height: 290px;padding: 40px 30px;position: relative;background-color: #fff}
.m_sns_slide .txt_box h3{font-family: 'NanumSquare';font-size: 24px;max-width: 100%;overflow: hidden;text-overflow: ellipsis;white-space:nowrap;margin-bottom: 7px}
.m_sns_slide a:hover .txt_box h3{text-decoration: underline;}
.m_sns_slide li.side_list a:hover .txt_box h3{text-decoration: none;}
.m_sns_slide .txt_box p{margin-bottom: 25px;line-height: 24px;max-height: 120px;}
.m_sns_slide .txt_box.has_img{height: 200px}
.m_sns_slide .txt_box.has_img p{max-height: 48px;margin-bottom: 20px}
.m_sns_slide .txt_box .date{color: #666}
.m_sns_slide .sns_ic{display: inline-block;width: 50px;height: 50px;border-radius: 50%;position: absolute;left: 50%;top:0;transform: translate(-50%,-50%);-webkit-transform: translate(-50%,-50%);}
.m_sns_slide .sns_ic::after{content: "";display: inline-block;position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);-webkit-transform: translate(-50%,-50%);}
.m_sns_slide .twt_con .sns_ic{background: #2999e4}
.m_sns_slide .twt_con .sns_ic::after{background: url(/img/common/com_img.png) -229px -156px;width: 23px;height: 16px;}
.m_sns_slide .blg_con .sns_ic{background-color: #3eb11f}
.m_sns_slide .blg_con .sns_ic::after{background: url(/img/common/com_img.png) -282px -156px;width: 20px;height: 20px;}
.m_sns_slide .fcb_con .sns_ic{background-color: #3162a8}
.m_sns_slide .fcb_con .sns_ic::after{background: url(/img/common/com_img.png) -263px -156px;width: 9px;height: 18px;}

.m_con_box_2 .control{position: absolute;right: 0;top: -64px;display: flex;}
.m_con_box_2 .control button{width: 74px;height: 64px;text-indent: -9999px;background: #d84351;border:1px solid #d84351;position: relative;transition: all 0.2s}
.m_con_box_2 .control button::after{content: "";display: inline-block;width: 27px;height: 10px;background: url(/img/common/com_img.png) no-repeat;position: absolute;left: 50%;top:50%;transform: translate(-50%,-50%);-webkit-transform: translate(-50%,-50%);}
.m_con_box_2 .control .nextSlide{border-left-color: #de5f6b}
.m_con_box_2 .control .nextSlide:hover,.m_con_box_2 .control .nextSlide:focus,
.m_con_box_2 .control .prevSlide:hover,.m_con_box_2 .control .prevSlide:focus{border-color: #d84351;background: #fff;}
.m_con_box_2 .control .prevSlide::after{background-position: 0 -155px;}
.m_con_box_2 .control .nextSlide::after{background-position: -35px -155px}
.m_con_box_2 .control .prevSlide:hover::after,
.m_con_box_2 .control .prevSlide:focus::after{background-position: -75px -155px;}
.m_con_box_2 .control .nextSlide:hover::after,
.m_con_box_2 .control .nextSlide:focus::after{background-position: -110px -155px}

/* 사진으로 만나는 수영 */
.m_photo_box > ul{display: flex;}
.m_photo_box > ul > li{width: calc(33.33% - 8px);max-width:380px;height: 360px;position: relative;border:1px solid #e3e3e3;background-color: #fff;margin-right: 32px}
.m_photo_box > ul > li:last-child{margin-right: 0}
.m_photo_box > ul > li a{display: block;width: 100%;height: 100%;overflow:hidden;position: relative;}
.m_photo_box .photo{display:inline-block;width:100%;height: 250px;position: relative;overflow: hidden;}
.m_photo_box .photo img{width:auto;max-width: 120%;position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);-webkit-transform: translate(-50%, -50%);-ms-transform: translate(-50%, -50%);-o-transform: translate(-50%, -50%);-moz-transform: translate(-50%, -50%);}
.m_photo_box .con{display: inline-block;width: 100%;min-height: 110px;padding:25px 40px;position: absolute;left: 0;bottom: 0;background: #fff;transition: all 0.3s}
.m_photo_box .tit{font-family: 'NanumSquare';font-weight: bold;font-size: 24px;color: #333;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;display: inline-block;width: 100%;line-height: 1.3}
.m_photo_box .data{color: #777;}
.m_photo_box .btn_more{display: none;width: calc(100% - 80px);height: 38px;line-height: 38px;background-color: #07998d;text-align: center;color: #fff;position: absolute;bottom: -28px}
.m_photo_box ul li:hover .con,
.m_photo_box ul li:focus .con{transform: translateY(-48px);}
.m_photo_box ul li:hover .btn_more,
.m_photo_box ul li:focus .btn_more{display: block;}

.m_con_box_3 .btn_photo_more{color: #666;position: absolute;display: inline-block;padding-right: 25px;top: 10px;right: 0}
.m_con_box_3 .btn_photo_more::after{content: "";display: inline-block;position: absolute;top: 9px;right: 0;width: 16px;height: 7px;background: url(/img/common/com_img.png) -189px -186px no-repeat;}


.section3{width: 100%;background: #fff;padding: 42px 0 36px 0}
/* 하단링크 */
.m_footer_link{display: flex;-ms-display: flexbox;justify-content: space-between;margin-bottom: 36px;}
.m_footer_link .list_box{position: relative;width: 232px;}
.m_footer_link .list_box > button,
.m_footer_link .list_box > a{width: 100%;height: 44px;padding: 0 40px 0 20px;text-align: left;line-height: 44px;border:1px solid #b3b3b3;background-color: #fff;position: relative;transition: all 0.2s;display: inline-block;}
.m_footer_link .list_box > button::before{content: "";display: inline-block;width: 15px;height: 1px;background: #c1c2c4;position: absolute;right: 20px;top: 21px;}
.m_footer_link .list_box > button::after{content: "";display: inline-block;width: 1px;height: 15px;background: #c1c2c4;position: absolute;right: 27px;top: 14px;}
.m_footer_link .list_box > a::after{content: "";display: inline-block;width: 15px;height: 13px;background: url(/img/common/com_img.png) -434px -186px no-repeat;position: absolute;right: 20px;top:15px;}
.m_footer_link .list_box > button:hover,
.m_footer_link .list_box > button:focus,
.m_footer_link .list_box > button.on,
.m_footer_link .list_box > a:hover,
.m_footer_link .list_box > a:focus{background: #383a4a;border-color: #383a4a;color: #fff;}
.m_footer_link .list_box > button:hover::before,
.m_footer_link .list_box > button:focus::before,
.m_footer_link .list_box > button:hover::after,
.m_footer_link .list_box > button:focus::after,
.m_footer_link .list_box > button.on::before,
.m_footer_link .list_box > button.on::after{background: #fff}
.m_footer_link .link_box{width: 474px;height: auto;padding: 30px 35px 24px 30px;background: #fff;border:1px solid #383a4a;position: absolute;bottom: 48px;left: 0;z-index: 50;display: none;}
.m_footer_link .link_box ul{width: 100%;display: flex;-ms-display: flexbox;-ms-flex-wrap: wrap;flex-wrap: wrap;}
.m_footer_link .link_box li{width: 33.33%;margin-bottom: 6px;}
.m_footer_link .link_box .btn_close{display: inline-block;text-indent: -9999px;width: 17px;height: 17px;position: absolute;right: 18px;top: 17px;}
.m_footer_link .link_box .btn_close::before{content: "";display: inline-block;width: 2px;height: 16px;background: #383a4a;position: absolute;right: 7px;top: 1px;transform: rotate(-45deg);}
.m_footer_link .link_box .btn_close::after{content: "";display: inline-block;width: 2px;height: 16px;background: #383a4a;position: absolute;right: 7px;top: 1px;transform: rotate(45deg);}


/* 서브 콘텐츠 css */
.sub_blog_box ul{display: flex;flex-wrap: wrap;width: 100%;}
.sub_blog_box li{width: calc(33.33% - 12px);height: 255px;margin-right: 18px;margin-bottom: 18px}
.sub_blog_box a{display: block;width: 100%;height: 100%;border:1px solid #dadada;padding:40px;position: relative;transition: all 0.2s}
.sub_blog_box a:hover{box-shadow: 6px 6px 10px rgba(0,0,0,0.08)}
.sub_blog_box a:hover h3{text-decoration: underline;}
.sub_blog_box h3{font-family: 'NanumSquare';font-size: 24px;line-height: 1.2;height: 60px;margin-bottom: 10px;}
.sub_blog_box .con_txt{height: 63px;margin-bottom: 25px;line-height: 1.3}
.sub_blog_box .date{display: inline-block;padding-left: 23px;position: relative;color: #777}
.sub_blog_box .date::before{content: "";display: inline-block;width: 16px;height: 14px;background: url(/img/common/com_img.png) -215px -186px no-repeat;position: absolute;left: 0;top: 5px;}
@media all and (min-width: 769px){
	.sub_blog_box li:nth-child(3n+3){margin-right: 0}
}


.news_info{position:relative; width:100%; background:#ffe073;}
.news_info .info_txt{background:url(/img/media/news_infoic.png) no-repeat 3px 9px; padding:8px 0 8px 28px; margin-left:13px; font-size:13px; color:#444;}
.news_info .info_txt span{text-decoration:underline;}


/*
=========================================================================
반응형 콘텐츠 css
=========================================================================
*/

/* tablet device */
@media all and (max-width: 1024px){
	#container .content_box{width: 640px}

	.m_con_box_1 .vis_txt{padding-top: 160px;margin-bottom: 40px}
	.m_vis_tab{width: 100%;}
	.m_vis_tab ul{flex-direction: row;}
	.m_vis_tab ul li{flex: 1;}
	.m_vis_tab h3 a{width: 100%;height: 80px;line-height: 80px;font-size: 24px;}
	.m_vis_tab h3 a.on::before{bottom: 15px}
	.m_vis_tab h3 a::after{bottom: 29px;right: -1px;width: 1px;height: 20px}
	
	.m_vis_tab .con_box{width: 100%;left:0;top: 100px}
	.m_vis_tab div.youtube_box{width: 100%;height: 355px;margin: 0}
	.m_vis_tab .news_box{display: none;}
	
	.m_con_box_2 .m_sns_tab_box .tab_con_box{top: 130px}
	.m_con_box_2 .m_sns_tab_box > li{height: 465px;}

	.m_con_box_2 .swiper-container{margin: 0;overflow: hidden;margin-left: 30px}
	
	.m_photo_box > ul > li{width: 380px;margin-right: 30px;flex-shrink: 0}
	.m_photo_box > ul > li:last-child{display: none;}
	
	.m_footer_link{flex-wrap: wrap;}
	.m_footer_link .list_box{width: calc(50% - 5px);margin-bottom: 10px}
	.m_footer_link .link_box{width: 100%;}
	.m_footer_link .link_box li{width: 50%}	

}


@media all and (max-width: 768px){
	.sub_blog_box li{width:calc(50% - 9px);}
	.sub_blog_box li:nth-child(even){margin-right: 0}
}

/* mobile device */
@media all and (max-width: 640px){

	#container .content_box{width: 300px}
	
	.m_con_box_1 .vis_txt{padding-top: 140px;margin-bottom: 12px;}
	.m_con_box_1 .vis_txt h2{display: none;}

	.m_con_box_1{height: 480px;}
	.m_vis_tab h3 a{font-size: 18px;height: 60px;line-height: 60px}
	.m_vis_tab h3 a.on::before{bottom: 9px}
	.m_vis_tab .con_box{top: 70px}
	.m_vis_tab div.youtube_box{height: 167px}
	
	.section_2{padding-bottom: 40px}
	.section_2 h2{font-size: 26px;text-align: left;margin-bottom: 20px;}

	.m_con_box_2{padding-top: 60px;padding-bottom: 20px}

	.m_con_box_2 .m_sns_tab_box .tab_con_box{top: 80px}
	.m_sns_slide .txt_box{padding: 40px 35px}
	.m_con_box_2 .m_sns_tab_box .tit{width: 100px}

	.m_con_box_2 .control{top: 140px;right: -20px;width: calc(100% + 40px);justify-content: space-between;}
	.m_con_box_2 .control button{z-index: 10;width: 45px;height: 50px;}

	.m_con_box_2 .swiper-container{width: 340px;margin: 0 auto}
	.m_sns_slide li{width: 300px;}

	.m_sns_slide .img_box.has_img{height: 189px}

	.m_photo_box > ul > li{width: 100%;height: 285px}
	.m_photo_box > ul > li:nth-child(2),
	.m_photo_box > ul > li:nth-child(3){display: none;}
	.m_photo_box .photo{height: 197px}
	.m_photo_box .con{padding: 20px 28px;min-height: 90px}
	.m_photo_box .tit{font-size: 22px}

	.m_con_box_3 .btn_photo_more{position: relative;top: 0;margin-top: 20px;width: 100%;height: 41px;line-height: 41px;border:1px solid #b9b9b9;text-align: center;padding-right: 0}
	.m_con_box_3 .btn_photo_more::after{right: 40px;top: 17px}
	

	.section3{padding: 30px 0}
	.m_footer_link .list_box{width: 100%}
	.m_footer_link .link_box{padding: 20px 35px 10px 20px}
	.m_footer_link .list_box:last-child{margin-bottom: 0}
	.m_footer_link .link_box li{line-height: 1.2;margin-bottom: 10px;}
	.m_footer_link .link_box .btn_close{right: 12px;top: 12px}	


	/* 서브 콘텐츠 css */
	.sub_blog_box li{width: 100%;margin-right: 0}
}