@charset "utf-8";
/************************************************************************
 * filename : sub_style3.css
 * description :JUNO ACADEMY >COLLECTION > 서브 페이지
 * date : 2017.10.17
************************************************************************/
@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}
.collection .section_tit .bar{display: block;width: 1px;background: #b2b2b2;height: 60px;margin: 38px auto 43px auto}
.collection .section_txt{text-align: center;padding: 7px 0 0 0;margin-bottom: 110px;}
.collection .section_txt p{font-size:20px;font-weight: 300;color:#231f20;line-height: 30px;margin-top: 14px;}
.collection .section_txt p:first-child{margin-top: 0;}
.collection .section_txt p span{font-weight:700}

.collection .section_filter{text-align: center;margin-bottom: 37px;}
.collection .section_filter ul{overflow: hidden;display: inline-block;position: relative;padding: 3.5px 62px;box-sizing: border-box;}
.collection .section_filter ul.m_filter_tab_list{display: none;}
.collection .section_filter ul li{float: left;width:100%;height: 40px;box-sizing: border-box;border:1px solid #93959a;text-align: center;line-height: 40px}
.collection .section_filter ul li:first-child{margin-left: 0;}
.collection .section_filter ul li a{display: block;font-size:18px;color:#231f20;font-weight: 300}
.collection .section_filter ul li a br{display: none}
.collection .section_filter ul li.active {background: #998778;border:1px solid #998778;}
.collection .section_filter ul li.active a{display: block;font-weight: 600;color:#fff;}
.collection .section_filter ul .owl-prev{position: absolute;left:0;top: 10px;}
.collection .section_filter ul .owl-next{position: absolute;right:0;top:10px}
.collection .section_filter ul .owl-prev img,
.collection .section_filter ul .owl-next img{width: 14px;}

.collection .collection_item{width: 470px;position: relative;overflow: hidden;margin-bottom: 20px;;position: relative}
.collection .collection_sizer{width: 470px;}
.collection .collection_gutter{width: 10px;}
.collection .collection_item .collection_img{overflow: hidden}
.collection .collection_item .collection_img img{float: left;width: 100%; height: 360px;}
.collection .collection_item>p.ci_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}
.collection .collection_item .ci_over{position: absolute;bottom:-210px;left:0;right:0;background: #998778;text-align: center;color:#fff;padding:25px 20px 33px 20px;transition: .2s}
.collection .collection_item:hover .ci_over{bottom:0;}
.collection .collection_item .ci_over .bar{width: 25px;height: 1px;background: #fff;display: block;margin:10px auto 17px auto;}
.collection .collection_item .ci_over strong.ci_nm{display: block;font-weight: 600;font-size: 24px;line-height: 24px;margin-bottom: 33px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
.collection .collection_item .ci_over .ci_link{width: 195px;height: 46px;line-height:46px;box-sizing: border-box;border:1px solid #fff;position: relative;color:#fff;}
.collection .collection_item .ci_over .ci_link span{font-size:16px;}
.collection .collection_item .ci_over .ci_link img{position: absolute;right:23px;top:17px;width: 7px;}

.collection .section1 {padding-bottom: 210px;}
.collection .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;}
.collection .layerpop .pop_img{margin:auto;margin:10px auto 100px auto;margin-top:100px;}
.collection .layerpop .pop_img img{width: 100%;} /* 삭제 */
.collection .layerpop .pop_close{position: fixed;top:25px;right:40px}

.collection .collection_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){
	.collection .collection_item{height: auto}
	.collection .collection_item,
	.collection .collection_sizer{width: 334px;margin-bottom: 11px;}
	.collection .collection_gutter{width: 11px;}
	.collection .section_txt p {margin-top: 10px;font-size: 18px;line-height: 24px;}
	.collection .layerpop .pop_img{margin-top: 170px;}

	.collection .collection_item .ci_over{padding:25px 20px}
	.collection .collection_item .ci_over strong.ci_nm{margin-bottom: 20px;}
}

@media all and (max-width:1024px){
	.collection .collection_item,
	.collection .collection_sizer{width: 376.5px;margin-bottom: 15px;}
	.collection .collection_gutter{width: 15px;}
	.collection .collection_item .ii_img{height: 310px;}
	.collection .section_filter ul li a{font-size: 16px;}
	.collection .section_filter{margin-bottom: 30px;}

	.collection .section_txt p {font-size: 16px;word-break: keep-all}
	.collection .layerpop .pop_close{position: absolute}
}
@media all and (max-width:768px){
	.section_content{width: 100%;}
	.collection .section_tit .bar{display: none}
	.collection .section_filter{margin-bottom:15px;}
	.collection .section_filter ul{display: block;padding:3.5px 30px}
	.collection .section_filter ul li {line-height:17px;padding:5px 0;height: auto}

	.collection .section_filter ul li a{font-size: 13px;}
	.collection .section_filter ul li a br{display:block}
	.collection .section_filter ul .owl-prev,
	.collection .section_filter ul .owl-next{top:5px}


	.collection .collection_item,
	.collection .collection_sizer{width: 49.5%;margin-bottom: 1%;}
	.collection .collection_gutter{width: 1%;}

	.collection .section_txt{margin-bottom: 0px;padding:15px 10px}
	.collection .section_txt p {font-size: 14px;margin-top:8px;line-height: 20px}
	.collection .section_txt p br{display: none}

	.collection .section1{padding-bottom: 70px;}
	.collection .layerpop .pop_close {right:25px}
	.collection .layerpop .pop_close img{width: 25px;}

	.collection .section_txt p span{display: inline;}

	.collection .collection_more_btn{margin:40px auto 70px auto;font-size:13px;line-height: 35px;height: 35px}

	.collection .collection_item>p.si_nm{font-size:15px;line-height: 40px;}
	.collection .collection_item .ci_over{height: 100%;width:100%;bottom:-100%;box-sizing: border-box;padding:0;}
	.collection .collection_item .ci_over .ci_over_inner{padding:4%;position: absolute;left:50%;margin-left:-50%;width: 100%;box-sizing: border-box;top: 50%;margin-top: -45px;}

	.collection .collection_item .ci_over strong.si_nm{font-size:15px;margin-bottom: 11px;}
	.collection .collection_item .ci_over .bar{margin:8px auto}
	.collection .collection_item .ci_over .ci_link{width: 90%;line-height: 29px;height: 30px;max-width: 170px}
	.collection .collection_item .ci_over .ci_link span{font-size:13px;}
	.collection .collection_item .ci_over .ci_link img{top:10.5px;right:8px;width: 5px;}
}

@media all and (max-width:420px){
	.collection .collection_item,
	.collection .collection_sizer{width: 100%;margin-bottom: 5%;}

}

@media all and (max-width:360px){
/*
	.collection .section_filter ul li {line-height: 22px !important}
	.collection .section_filter ul li:first-child{margin-left: 0;margin-bottom: 1%;}
	.collection .section_filter ul li:first-child+li{margin-bottom: 1%;}
	.collection .section_filter ul li:first-child+li+li{margin-left: 0;}
*/
	.collection .section_filter ul li a{font-size: 13px;}
	.collection .section_filter ul .owl-prev,
	.collection .section_filter ul .owl-next{top:4.5px}
/*	.collection .section_filter ul li a br{display:block}*/
}

.collection .layerpop .pop_img .inner {max-width:530px !important;}
.collection .layerpop {overflow-y:hidden !important;}