@charset "utf-8";
/************************************************************************
 * filename : sub_style4.css
 * description :JUNO ACADEMY >INSTRUCTOR > 서브 페이지
 * date : 2017.09.27
************************************************************************/
@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}
#instructor .section_tit .bar{display: block;width: 1px;background: #b2b2b2;height: 60px;margin: 38px auto 43px auto}
#instructor .section_filter{overflow:hidden;text-align: center;margin-bottom: 57px;}

#instructor .section_filter ul{display:block;}
#instructor .section_filter ul.m_filter_tab_list{display: none}
#instructor .section_filter ul li{float: left;width:240px;box-sizing:border-box;padding-left:8px;}
#instructor .section_filter ul li:first-child{padding-left: 0;}
#instructor .section_filter ul li a{display:block;font-size:18px;color:#231f20;font-weight: 300;border:1px solid #93959a;text-align: center;height: 40px;line-height: 40px;box-sizing:border-box;}
#instructor .section_filter ul li a br{display: none}
#instructor .section_filter ul li.active a{}
#instructor .section_filter ul li.active a{border-color:#998778;font-weight: 600;color:#fff;background: #998778;}

#instructor .section_filter.col3 ul li {width:33.3%;}
#instructor .section_filter.col3 ul li:last-child {width:33.4%;}
#instructor .section_filter.col4 ul li {width:25%;}
#instructor .section_filter.col4 ul li a {font-size:19px}
#instructor .section_filter.col5 ul li {width:20%;}
#instructor .section_filter.col5 ul li {width:20%;}
#instructor .section_filter.col5 ul li a {font-size:18px;}
#instructor .section_filter.col6 ul li {width:16.60%;}
#instructor .section_filter.col6 ul li a {font-size:17px;}
#instructor .section_filter.col7 ul li {width:14.2%;}
#instructor .section_filter.col7 ul li a {font-size:16px;}
#instructor .section_filter.col8 ul li {width:12.5%;}
#instructor .section_filter.col8 ul li a {font-size:16px;}

#instructor .instructor_item {width:470px;position:relative;overflow: hidden;margin-bottom: 11px;cursor: pointer;}
#instructor .instructor_item .ii_img{position:relative;overflow:hidden;height:360px;box-sizing: border-box;border:1px solid #b7b7b7;background-size:cover;background-repeat: no-repeat;background-position: center center;}
#instructor .instructor_item .ii_img img {width:100%;height:100%;-webkit-transition:all .4s;}
#instructor .instructor_item .ii_img .dimm {display:block;position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.7);opacity:0;-webkit-transition:all .4s;z-index:10}
#instructor .instructor_item .ii_img .btn {display:inline-block;position:absolute;top:40%;left:50%;width:192px;height:46px;line-height:46px;margin:0 0 0 -96px;text-align:center;border:1px solid #fff;opacity:0;-webkit-transition:all .4s;z-index:20}
#instructor .instructor_item .ii_img .btn span {font-size:18px;font-weight:400;color:#fff;padding-right:19px;background:url(/static_resources/images/junoacademy/sub/instructor/ico_viewarr.png) no-repeat 98% center;}
#instructor .instructor_item .ii_nm {line-height: 60px;text-align: center;font-size:18px;color:#000;font-weight: 600;}
#instructor .instructor_item .ii_img:hover img {-webkit-transform:scale(1.07,1.07);}
#instructor .instructor_item .ii_img:hover .dimm {opacity:1}
#instructor .instructor_item .ii_img:hover .btn {opacity:1}


#instructor .instructor_sizer{width: 470px;}
#instructor .instructor_gutter{width: 15px;}
#instructor .instructor_more_btn{background: #231f20;width: 130px;line-height: 40px;text-align: center;font-weight: 300;color:#fff;display: block;margin:100px auto 125px auto}

/* overlay */
.instructor_overlay{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;}
.instructor_detail_item{margin:auto;margin:10px auto 100px auto;margin-top:155px;}
.instructor_detail_item .inner{background: #fff;overflow: hidden;height: 645px;}
.instructor_detail_item .inner .detail_left{width: 594px;float: left;height: 645px;background-repeat: no-repeat;background-size:cover;background-position: center center}
.instructor_detail_item .inner .detail_right{width: 846px;float: right;box-sizing: border-box;padding:60px 40px}

.instructor_detail_item .inner .detail_right .dr_top .nm{display: block;color:#000;font-size:30px;line-height: 30px;font-weight: 600;}
.instructor_detail_item .inner .detail_right .dr_top .pos{display: block;font-size:18px;line-height: 30px;color:#828282;font-weight: 600}
.instructor_detail_item .inner .detail_right .dr_img{margin:25px auto 50px auto;height: 170px;overflow: hidden}
.instructor_detail_item .inner .detail_right .dr_img li{width:100%}
.instructor_detail_item .inner .detail_right .dr_img li .img{background-size:cover;background-position: center center;background-repeat: no-repeat;width: 256px;height: 170px;}
.instructor_detail_item .inner .detail_right .dr_btm{font-size:16px;line-height: 22px;color:#828282;font-weight: 300;position: relative;overflow: hidden;margin-top: 40px;}
.instructor_detail_item .inner .detail_right .dr_btm .dr_btm_inner{height: 400px;overflow: auto;/*width: 786px;padding-right: 20px;padding-bottom: 40px;*/word-break: keep-all;box-sizing: border-box}
.instructor_overlay .instructor_close{position: fixed;top:25px;right:40px}

@media all and (max-width:1440px){
	#instructor .instructor_item{height: auto}
	#instructor .instructor_item,
	#instructor .instructor_sizer{width: 330px;}
	#instructor .instructor_gutter{width: 17px;}
	#instructor .instructor_item .ii_img{height: 280px;}
	#instructor .instructor_item .ii_over{padding:25px 20px}
	#instructor .instructor_item .ii_over strong.ii_nm{margin-bottom: 20px;}
	#instructor .instructor_more_btn{margin:50px auto 90px auto}

	#instructor .section_filter ul {display:block}
	#instructor .section_filter ul li{width:25% !important;margin-bottom:10px;}
	#instructor .section_filter.col5 ul li:nth-of-type(5),
	#instructor .section_filter.col6 ul li:nth-of-type(5),
	#instructor .section_filter.col7 ul li:nth-of-type(5),
	#instructor .section_filter.col8 ul li:nth-of-type(5) {padding-left:0;}

	.instructor_detail_item{margin-top: 150px;}
	.instructor_detail_item .inner .detail_left{width: 380px;}
	.instructor_detail_item .inner .detail_right{width: 644px;}
	.instructor_detail_item .inner .detail_right .dr_img li .img{width: 100%;height: 0;padding-bottom: 66%;}
	.instructor_detail_item .inner .detail_right .dr_img{height: auto;margin:10px auto}
	.instructor_detail_item .inner .detail_right .dr_btm{margin-top: 30px;}
	.dr_slide .owl-dots{text-align: center;margin-top: 10px;}
	.dr_slide .owl-dot{float: none;display: inline-block;vertical-align: middle;width: 13px;height: 13px;}
}

@media all and (max-width:1024px){
	#instructor .instructor_item,
	#instructor .instructor_sizer{width: 376.5px;}
	#instructor .instructor_gutter{width: 15px;}
	#instructor .instructor_item .ii_img{height: 310px;}
	#instructor .section_filter ul li {width: 145.6px;}
	#instructor .section_filter ul li a{font-size: 16px;}
	#instructor .section_filter{margin-bottom: 30px;}
	.instructor_detail_item{margin-top: 110px;}
	.instructor_detail_item .inner{height: auto;width: 594px;}
	.instructor_detail_item .inner .detail_left{width: 100%}
	.instructor_detail_item .inner .detail_right{width: 100%;padding:30px 20px 50px 20px}
	.instructor_overlay .instructor_close{position: absolute}
	.instructor_detail_item .inner .detail_right .dr_btm .dr_btm_inner{height: 280px;}
	.instructor_detail_item .inner .detail_right .dr_btm{margin-top: 10px;}
}
@media all and (max-width:768px){
	.section_content{width: 100%;}
	#instructor .section_tit .bar{display: none}
	#instructor .section_filter{margin-bottom:15px;position: relative;background:#d6c5af}
	#instructor .section_filter ul {display:block;width:100%}
	#instructor .section_filter ul:after {content:'';display:block;clear:both;}
	#instructor .section_filter ul li {float:left;width:50% !important;padding-left:0;box-sizing:border-box;border:0;margin-bottom:0}
	#instructor .section_filter ul li.m_gb1 br{display: none;}
	#instructor .section_filter ul li a{font-size: 13px;border:0}
	#instructor .section_filter ul li a br{display:block}
	#instructor .section_filter .right{display: block;position: absolute;top: 0;right: -1px;height: 40px;width: 20px;z-index: 1;
    background: -moz-linear-gradient(right, rgba(247,247,247,1) 0%, rgba(247,247,247,0.58) 42%, rgba(247,247,247,0.31) 69%, rgba(247,247,247,0) 100%);
    background: -webkit-linear-gradient(right, rgba(247,247,247,1) 0%,rgba(247,247,247,0.58) 42%,rgba(247,247,247,0.31) 69%,rgba(247,247,247,0) 100%);
    background: linear-gradient(to left, rgba(247,247,247,1) 0%,rgba(247,247,247,0.58) 42%,rgba(247,247,247,0.31) 69%,rgba(247,247,247,0) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7f7f7', endColorstr='#00ffffff',GradientType=1 );pointer-events: none;}

	#instructor .instructor_item,
	#instructor .instructor_sizer{width: 49.5%;}
	#instructor .instructor_gutter{width: 1%;}
	#instructor .instructor_item .ii_img {height: 0;padding-bottom: 76%;background-position:center center}
	#instructor .instructor_item .ii_img img {display:none}
	#instructor .instructor_item .ii_img .btn {width:110px;height:36px;line-height:36px;margin:0 0 0 -55px;}
	#instructor .instructor_item .ii_img .btn span {padding-right:14px;font-size:14px;-webkit-background-size:5px auto;background-size:5px auto;}
	#instructor .instructor_item .ii_nm {font-size:15px;line-height: 40px;}
	#instructor .instructor_item .ii_nm {font-size:15px;line-height: 40px;}
	

	#instructor .instructor_more_btn{margin:40px auto 70px auto;font-size:13px;line-height: 35px;height: 35px}

	.instructor_detail_item .inner .detail_right{padding:20px 10px 40px 10x}
	.instructor_detail_item .inner .detail_right .dr_btm .dr_btm_inner{width: 100%;word-break: keep-all;font-size:14px;line-height: 18px;height: 150px}
}
@media all and (max-width:594px){
	.instructor_detail_item .inner{width: 90%;}
	.instructor_detail_item .inner .detail_left{height: 0;padding-bottom: 92%;}

	.instructor_detail_item .inner .detail_right .dr_top .nm{font-size:22px;line-height: 22px}
	.instructor_detail_item .inner .detail_right .dr_top .pos{font-size:16px;line-height: 28px}
	.instructor_overlay .instructor_close {right:25px}
	.instructor_overlay .instructor_close img{width: 25px;}
}