@charset "utf-8";
/************************************************************************
 * filename : sub_style3.css
 * description :JUNO ACADEMY >SHOW&SEMINAR > 서브 페이지
 * date : 2017.10.13
************************************************************************/
@font-face {
   font-family: 'Noto Sans KR';
   font-style: normal;
   font-weight: 300;
   src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Light.woff2) format('woff2'),
        url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Light.woff) format('woff'),
        url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Light.otf) format('opentype');
 }
.hidden{overflow:hidden !important}
#show .section_tit .bar{display: block;width: 1px;background: #b2b2b2;height: 60px;margin: 38px auto 43px auto}
#show .section_filter{text-align: center;margin-bottom: 37px;}
#show .section_filter ul{overflow: hidden;display: inline-block;}
#show .section_filter ul li{float: left;width: 240px;height: 40px;box-sizing: border-box;margin-left: 10px;border:1px solid #93959a;text-align: center;line-height: 40px}
#show .section_filter ul li br{display: none}
#show .section_filter ul li:first-child{margin-left: 0;}
#show .section_filter ul li a{display: block;font-size:18px;color:#231f20;font-weight: 300}
#show .section_filter ul li a br{display: none}
#show .section_filter ul li.active {background: #998778;border:1px solid #998778;}
#show .section_filter ul li.active a{display: block;font-weight: 600;color:#fff;}
#show .section_txt{background: #f7f7f7;text-align: center;padding:27px 0;margin-bottom: 50px;}
#show .section_txt p{font-size:20px;font-weight: 300;color:#231f20;line-height: 30px;margin-top: 14px;}
#show .section_txt p:first-child{margin-top: 0;}
#show .section_txt p span{font-weight:700}

#show .show_item{width: 470px;position: relative;overflow: hidden;margin-bottom: 20px;;position: relative}
#show .show_sizer{width: 470px;}
#show .show_gutter{width: 10px;}

#show .show_item .show_img{overflow: hidden}
#show .show_item .show_img img{float: left;width: 100%;}
#show .show_item>.si_nm{line-height: 60px;text-align: center;font-size:18px;color:#000;font-weight: 600;margin:0 10px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis}
#show .show_item .si_over{position: absolute;bottom:-210px;left:0;right:0;background: #998778;text-align: center;color:#fff;padding:25px 20px 33px 20px;transition: .2s}
#show .show_item:hover .si_over{bottom:0;}
#show .show_item .si_over .bar{width: 25px;height: 1px;background: #fff;display: block;margin:10px auto 17px auto;}
#show .show_item .si_over .si_nm{display: block;font-weight: 600;font-size: 24px;line-height: 24px;margin-bottom: 15px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
#show .show_item .si_over .si_link{width: 195px;height: 46px;line-height:46px;box-sizing: border-box;border:1px solid #fff;position: relative;color:#fff;}
#show .show_item .si_over .si_link span{font-size:16px;}
#show .show_item .si_over .si_link img{position: absolute;right:23px;top:17px;width: 7px;}

#show .section1 {padding-bottom: 210px;}
#show .layerpop{display: none;;position: fixed;top:0;right:0;bottom:0;left:0;width: 100%;height:100%;z-index: 3000;overflow-x: hidden;overflow-y: scroll;-webkit-overflow-scrolling: touch;}
#show .layerpop .pop_img{margin:auto;margin:10px auto 100px auto;margin-top:100px;}
#show .layerpop .pop_img img{width: 100%;} /* 삭제 */
#show .layerpop .pop_close{position: fixed;top:25px;right:40px}

#show .show_more_btn{background: #231f20;width: 130px;line-height: 40px;text-align: center;font-weight: 300;color:#fff;display: block;margin:100px auto 125px auto}


@media all and (max-width:1440px){
	#show .show_item{height: auto}
	#show .show_item,
	#show .show_sizer{width: 334px;margin-bottom: 11px;}
	#show .show_gutter{width: 11px;}
	#show .section_txt p {margin-top: 10px;font-size: 18px;line-height: 24px;}
	#show .layerpop .pop_img{margin-top: 170px;}
	
	#show .show_item .si_over{padding:25px 20px}
	#show .show_item .si_over strong.si_nm{margin-bottom: 20px;}
}

@media all and (max-width:1024px){
	#show .show_item,
	#show .show_sizer{width: 376.5px;margin-bottom: 15px;}
	#show .show_gutter{width: 15px;}
	#show .show_item .ii_img{height: 310px;}
	#show .section_filter ul li {width: 145.6px;}
	#show .section_filter ul li a{font-size: 16px;}
	#show .section_filter{margin-bottom: 30px;}
	
	#show .section_txt p {font-size: 16px;word-break: keep-all}
	#show .layerpop .pop_close{position: absolute}	
}
@media all and (max-width:768px){
	.section_content{width: 100%;}
	#show .section_tit .bar{display: none}
	#show .section_filter{margin-bottom:15px;}
	#show .section_filter ul{display: block;}
	#show .section_filter ul li {width: 24.5%;margin-left: 0.5%;line-height:17px;padding:5px 0;height: auto}
	#show .section_filter ul li br{display: block;}
	#show .section_filter ul li:first-child{line-height: 34px}
	#show .section_filter ul li a{font-size: 13px;}
	#show .section_filter ul li a br{display:block}
	
	#show .show_item,
	#show .show_sizer{width: 49.5%;margin-bottom: 1%;}
	#show .show_gutter{width: 1%;}
	
	#show .section_txt{margin-bottom: 30px;padding:15px 10px}
	#show .section_txt p {font-size: 14px;margin-top:8px;line-height: 20px}
	#show .section_txt p br{display: none}
	
	#show .section1{padding-bottom: 70px;}
	#show .layerpop .pop_close {right:25px}
	#show .layerpop .pop_close img{width: 25px;}
	
	#show .show_more_btn{margin:40px auto 70px auto;font-size:13px;line-height: 35px;height: 35px}
	
	#show .section_txt p span{display: inline;}
	
	#show .show_item>p.si_nm{font-size:15px;line-height: 40px;}
	#show .show_item .si_over{height: 100%;width:100%;bottom:-100%;box-sizing: border-box;padding:0;}
	#show .show_item .si_over .si_over_inner{padding:4%;position: absolute;left:50%;margin-left:-50%;width: 100%;box-sizing: border-box;top: 50%;margin-top: -45px;}
	
	#show .show_item .si_over strong.si_nm{font-size:15px;margin-bottom: 11px;}
	#show .show_item .si_over .bar{margin:8px auto}
	#show .show_item .si_over .si_link{width: 90%;line-height: 29px;height: 30px;max-width: 170px}
	#show .show_item .si_over .si_link span{font-size:13px;}
	#show .show_item .si_over .si_link img{top:10.5px;right:8px;width: 5px;}
}

@media all and (max-width:420px){
	#show .show_item,
	#show .show_sizer{width: 100%;margin-bottom: 5%;}
}

@media all and (max-width:360px){
	#show .section_filter ul li {width: 49.5%;margin-left: 1%;line-height: 22px !important}
	#show .section_filter ul li:first-child{margin-left: 0;margin-bottom: 1%;}
	#show .section_filter ul li:first-child+li{margin-bottom: 1%;}
	#show .section_filter ul li:first-child+li+li{margin-left: 0;}
	
	#show .section_filter ul li a{font-size: 13px;}

	#show .section_filter ul li a br{display: none}
}