@charset "utf-8";
.main_con1{ clear:both;overflow:hidden;margin-top :30px;margin-bottom :10px;}
.main_con2{ clear:both;overflow:hidden; padding-bottom :30px;}
.con_wrap{background:#eeeeee;}

.bbs_wrap{border:1px solid #cccccc;padding : 20px;background : #ffffff;width :390px;float:right;margin-bottom :10px;height: 161px;}
.bbs_tit{ font-size:18px;font-family: 'NanumSquareB';margin-bottom:20px;}
.photo_wrap .bbs_tit{margin-bottom:27px;}
.bbs_tit a{ float:right;font-size:18px;font-family: 'NanumSquareB';}

.bbs_wrap li { margin: 3px;position:relative;overflow: hidden;} 
.bbs_wrap li:before { content:" ";width : 5px;height:1px;top:9px;left:0px;background : #0570c2;position:absolute;}
.bbs_wrap li a{ width : calc( 100% - 83px );padding-left : 10px;overflow: hidden;text-overflow:ellipsis;white-space:nowrap;height: 21px;float: left;}
.bbs_wrap li span{ width : auto;display:block;float:right;}

.cs_wrap{  background : #26a2e2;padding : 20px;overflow:hidden;width :390px;float:right;height: 180px;}
.cs_tit{ font-size:18px;font-family: 'NanumSquareB';color : #ffffff;} 
.cs_icon{ width : 110px;float:left;padding-top: 20px;}
.cs_1{ color : #ffffff;width : calc( 100% - 115px );float:right;font-size:27px;font-family: 'NanumSquareB'; margin-top :5px;}
.cs_2{ color : #ffffff;width : calc( 100% - 115px );float:right; margin-top :15px;}
.cs_2 span{ color : #ffffff;padding : 3px 10px;border-radius: 15px;background : #00436e;font-size:14px;}
.cs_3{ color : #ffffff;width : calc( 100% - 115px );float:right;font-size:15px;margin-top :5px;}
.cs_3 span{ color : #ffffff;font-size:20px;font-family: 'NanumSquareB';}

.icon1_wrap{ background : #feae00; text-align:center; height: 154px; margin-bottom:10px; padding-top :20px; }
.icon2_wrap{ background : #4ab801; text-align:center; height: 154px; padding-top :20px;}
.icon3_wrap{ background : #b21261; text-align:center; height: 154px; margin-bottom:10px; padding-top :20px;}
.itxt1{ font-size:18px;color : #ffffff;  text-align:center; font-size:18px;font-family: 'NanumSquareB'; padding-top :10px; }
.icon1_wrap .itxt2{ color:#ffeeab; text-align:center; }
.icon2_wrap .itxt2{ color:#8aee86; text-align:center; }
.icon3_wrap .itxt2{ color:#f8c3dd; text-align:center; }

.lec_wrap{ width : 600px; float:left; overflow:hidden; margin-right : 10px; }
.photo_wrap{border:1px solid #cccccc;padding : 20px;background : #ffffff;}
.lec_wrap ul.mtab{ border-top:1px solid #cccccc;border-left:1px solid #cccccc;height: 43px;}
.lec_wrap ul.mtab li{ position:relative;width: 80px;line-height: 32px;float:left;display:inline-block;background : #eeeeee;border-right:1px solid #cccccc;border-bottom:1px solid #cccccc;text-align:center;padding : 5px 0px;}
.lec_wrap ul.mtab li.more{ width : calc( 100% - 400px );text-align:right; padding-right :10px;}
.lec_wrap ul.mtab li a {  font-size:18px;font-family: 'NanumSquareB';}
.lec_wrap ul.mtab li.more a { font-family:'맑은고딕', 'Malgun Gothic', '돋움', Verdana;color:#222;font-size:13px;}
.lec_info_wrap{clear:both; display:none;}
.lec_wrap ul.mtab li.on{ background : #ffffff;color : #0b296f;}
.lec_wrap ul.mtab li.on::before{position: absolute;width: 0;height: 0;border: 0 solid transparent;border-left-width: 8px;border-right-width: 6px;border-top: 8px #cccccc solid;content: " ";bottom: -8px;left: calc( 50% - 4px );} 
.lec_wrap ul.mtab li.on::after{position:absolute;width: 0;height: 0;border: 0 solid transparent;border-left-width: 6px;border-right-width: 6px;border-top: 6px #ffffff solid;content : " ";bottom: -6px;left : calc( 50% - 3px );} 
.lec_info_wrap{ background : #ffffff;border : 1px solid #cccccc;border-top : 0px;padding :20px;padding-top: 28px;}
.flec_wrap{ border-bottom : 1px dashed #cccccc;margin-bottom :17px;overflow:hidden;}
.flec_icon{ width : 80px;float:left;height : 95px;}
.lec_list ul li{ position:relative;padding: 4px 0px;padding-left : 10px;}
.lec_list ul li:before { content:" ";width : 4px;height:4px;top:13px;left:0px;background : #696969;position:absolute;}

.main_con22{ float:left; width : 190px;}
.pop1_wrap{ width :800px;height : 351px;border :1px solid #cccccc;overflow:hidden;float:left;}
.photo_wrap{ float:right; width : calc( 100% - 810px ); }
.thumb img { box-shadow: 0px 0px 0px 1px #cccccc;border: 5px solid #ffffff; margin-top: 2px;}
div.photo_wrap div{  margin-bottom : 4px;}
.photo{clear:both;overflow:hidden;}
.thumb{ float:left; width : 165px; padding-left :1px; }
.ptx1{padding-left :10px;font-size: 16px;color: #222222;height: 22px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;width: calc( 100% - 175px) ; float:left;}
.ptx2{padding-left :10px;display: -webkit-box;display: -ms-flexbox;display: box;margin-top: 10px;font-size: 14px;color: #767676;max-height: 88px;overflow: hidden;vertical-align: top;text-overflow: ellipsis;word-break: break-all;-webkit-box-orient: vertical;-webkit-line-clamp: 4;   width: calc( 100% - 175px ) ; float:left;}

.ftxt1{padding-left :10px;font-size: 18px; font-family: 'NanumSquareB';color: #222222;height: 26px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap; width : calc( 100% - 85px );float:left;}
.ftxt1 span{ font-family: 'NanumSquareB'; font-size: 18px;  color :#0067af;}
.ftxt2{padding-left :10px;display: -webkit-box; display: -ms-flexbox; display: box;margin-top: 10px;font-size: 13px;color: #555555;max-height: 43px;height:43px;overflow: hidden;vertical-align: top;text-overflow: ellipsis;word-break: break-all;-webkit-box-orient: vertical;-webkit-line-clamp: 2;    width : calc( 100% - 85px ); float:left;}

.lectit{height: 18px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap; width : calc( 100% - 145px ); display:inline-block;}
.date{width : 80px;display:inline-block; }

.catex{ color : #00436e; font-weight: bold; }

.lec_bg{background:#fff; border:1px solid #ccc; text-align:center; padding: 25px 0;}
.lec_qwrap{ display:inline-block; width: 17%; margin: 1%; border: 1px solid #ccc; background:#fff; border-radius: 10px; overflow:hidden;}
.lecq_img{ padding: 15px 0;}
.lecq_tit{color:#fff; background:#1696bb; padding: 10px 0;}
.t2.lec_qwrap{ background:#feae00;}
.t2 .lecq_tit{ background:#feae00;}
.mgb{ margin-bottom: 25px; }

@media screen and (max-width: 1230px) {
	.main_con1{ width : 800px; margin : 0 auto; }
	.main_con2{ width : 800px; margin : 0 auto;  margin-top: 15px; }
	.bbs_wrap{ float:left; margin-top : 10px; padding: 30px 20px;}
	.cs_wrap{ margin-top : 10px;  }
	.photo_wrap{ width : 100%; margin-top : 10px;  }
	.pop1_wrap{ margin-top :30px; }
}

@media screen and (max-width: 830px) {
	
	.main_con1, .main_con2 { width : 600px; height : auto; }
	.pop1_wrap{ width : 100%; height : auto; }
	.bbs_wrap{ width : 100%; }
	.cs_wrap{ width : 100%;margin-top : 0px; margin-bottom : 10px;  }
	.main_con22{ margin-top : 10px; } 
	.photo_wrap{ width : calc( 100% -  200px) ; float:right; margin-top : 10px;  }

}
@media screen and (max-width: 630px) {
	
	.date{ display:none; }
	.main_con1, .main_con2 { width : 400px; height : auto; }
	.pop1_wrap{ width : 100%; height : auto; }
	.bbs_wrap{ width : 100%; }
	.cs_wrap{ width : 100%;margin-top : 0px; margin-bottom : 10px;  }
	
	.main_con22{ width :  100%; }
	.main_con22 a { width:100% ; display: block;  }
	.icon1_wrap, .icon2_wrap, .icon3_wrap{padding:20px;}

    .icon2_wrap{margin-bottom:10px;}	
	
	
	.photo_wrap{ width :  100% ; float:left; margin-top : 0px;  }
	.lec_wrap{ width : 400px; }
	.lec_wrap ul.mtab li { width : 55px; padding : 5px 10px; }
	.lec_wrap ul.mtab li.more{ width : calc( 100% - 275px ) }
	.lectit{width : calc( 100% - 90px );}

	.lec_qwrap{ width: 32%; margin: 1%;}


}

@media screen and (max-width: 460px) {
	.lec_wrap ul.mtab li.more{ display:none; }
	.mtab{border-right: 1px solid #cccccc; }
}


@media screen and (max-width: 430px) {
	.main_con1, .main_con2 { width : 300px; height : auto; }
	.lec_wrap{ width : 300px; }
	.cs_icon{display:none;}	
	.cs_1{ width : 100%; }
	.cs_2{ width : 100%; }
	.cs_3{ width : 100%; }
	.flec_icon{display:none; }
	.ftxt1{ width : 100%; }
	.ftxt2{ width : 100%; margin-bottom: 30px; }
	.thumb{ width : 100%; text-align:center; }
	.ptx1{ width : 100%;}
	.ptx2{ width : 100%;}
	.lec_qwrap{ width: 49%; margin: 1%;}
}