.worksPresentation{width: 98%; max-width: 1024px; margin: 40px auto; }
.worksPresentation *{box-sizing: border-box; }
.worksPresentation > div > h2{}
.worksPresentation > div > h3{font-size: 32px;font-weight: lighter; text-align: center; color: #333; margin-bottom: 32px; line-height: 1.5; }
.worksPresentation > div > h3 > span{font-weight: 500; color:#2196f3; }
.worksPresentation .wBlue { color:#2196f3; }
.worksPresentation > div > h6{font-size: 14px; color: #797979; font-weight: 600; text-align: center; line-height: 1.5; word-break: keep-all; width: 75%; margin: 0 auto; }

.searchBox{margin: 20px auto 40px; text-align: center; }
.searchBox > div{margin: 4px; vertical-align: middle; }
.searchBox > .selectric-wrapper{display: inline-block; }
.searchBox > .selectric-wrapper .selectric{height: 30px; border: 1px solid #ccc; border-radius: 30px; background-color: transparent; }
.selectric-search1{width: 120px; }
.selectric-search2{width: 180px; }
.selectric .label{height: 24px; line-height: 28px; }
.selectric .button{height: 28px; line-height: 28px; background-color: transparent; }
.selectric-items{border-radius: 12px; margin-top: 4px; overflow: hidden; }
.searchBox > .searchInput{width: 100%; display: inline-block; position: relative; }
.searchBox > .searchInput > input{width: 100%; height: 30px; border: 1px solid #ccc; border-radius: 30px; text-indent: 12px; }
.searchBox > .searchInput > button{ width: 30px;height: 30px;position: absolute;background-color: transparent;border: 0;right: 0;top: 0;padding: 0; }
.searchBox > .searchInput > button.searchBtn{border-radius: 50%; background-color: #2196f3; }
.searchBox > .searchInput > button.resetBtn{right: 34px; }
.searchBox > .searchInput > button > svg{color: #ccc; }
.searchBox > .searchInput > button.searchBtn > svg{color: #fff; }

/* svg 변경 */
.searchInput .resetBtn object{width: .6875em; vertical-align: -0.125em;}
.searchInput .searchBtn object{width: 1em; vertical-align: -0.125em;}

.worksPresentation > h3{font-size: 20px; font-weight: bold; color: #707070; margin-bottom: 24px; text-align: center; }
.worksPresentation > ul{background-color: #fcfcfc; border-top: 1px solid #ccc; margin-bottom: 72px; }
.worksPresentation > ul > li{border-bottom: 1px solid #ccc; padding: 16px 8px; }
.worksPresentation > ul > li *{vertical-align: middle; font-size: 14px; }
.worksPresentation > ul > li:hover{background-color: #fff; }
.worksPresentation > ul > li.inforLi{display: none; }
.worksPresentation > ul > li > .listElement1{}
.worksPresentation > ul > li > .listElement1 > h5{font-weight: normal; color: #acacac; margin-right: 4px; float: left; }
.worksPresentation > ul > li > .listElement1 > h6{font-weight: normal; color: #acacac; float: left; }
.worksPresentation > ul > li > h6{font-weight: 500; color: #999; margin: 8px 0 16px; }
.worksPresentation > ul > li > p{width: 100%; font-weight: 500; color: #595959; display: block; margin-bottom: 16px; }
.worksPresentation > ul > li > .listElement2{}
.worksPresentation > ul > li > .listElement2 > div{font-weight: normal; color: #acacac; float: left; }
.worksPresentation > ul > li > .listElement2 > div > p{font-weight: 500; color: #acacac; }
.worksPresentation > ul > li > .listElement2 > div > p:nth-of-type(1){margin-bottom: 8px; }
.worksPresentation > ul > li > .listElement2 > a{background-color: #2196F3; color: #fff; font-weight: bold; font-size: 12px; width: 56px; height: 24px; line-height: 24px; border-radius: 20px; text-align: center; }
.worksPresentation > ul > li > .listElement2 > a:hover{background-color: #2D3380; box-shadow: 0 2px 5px rgba(0,0,0,.15); }



@media all and (min-width: 480px){
	.worksPresentation{width: 95%; }
	.searchBox > .searchInput{width: 280px; }
}

@media all and (max-width: 767px){
	.worksPresentation > ul > li > p{overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;/*  라인수 */-webkit-box-orient: vertical;word-wrap:break-word; line-height: 1.5; }
}

@media all and (min-width: 768px){
	.worksPresentation{width: 80%; }
	.worksPresentation > div > h6{font-size: 16px; width: 100%; }
	.worksPresentation > ul > li > .listElement1{}
	.worksPresentation > ul > li > .listElement1 > h5{font-size: 14px; }
	.worksPresentation > ul > li > .listElement1 > h6{font-size: 14px; }
	.worksPresentation > ul > li > h6{font-size: 14px; }
	.worksPresentation > ul > li > p{font-size: 14px; }
	.worksPresentation > ul > li > .listElement2{}
	.worksPresentation > ul > li > .listElement2 > div{}
	.worksPresentation > ul > li > .listElement2 > div > p{font-size: 14px; }
	.worksPresentation > ul > li > .listElement2 > a{font-size: 14px; }
}

@media all and (min-width: 1280px){
	.worksPresentation{width: 100%; }
	.worksPresentation > ul > li{padding: 0; }
	.worksPresentation > ul > li:after{content: ''; display: block; clear: both; }
	.worksPresentation > ul > li.inforLi{display: block; }
	.worksPresentation > ul > li.inforLi > h4{float: left; text-align: center; height: 28px; line-height: 28px; color: #595959; font-weight: 500; font-size: 12px; }
	.worksPresentation > ul > li.inforLi > h4:nth-of-type(1){width: 7%; }
	.worksPresentation > ul > li.inforLi > h4:nth-of-type(2){width: 10%; }
	.worksPresentation > ul > li.inforLi > h4:nth-of-type(3){width: 13%; }
	.worksPresentation > ul > li.inforLi > h4:nth-of-type(4){width: 30%; }
	.worksPresentation > ul > li.inforLi > h4:nth-of-type(5){width: 15%; }
	.worksPresentation > ul > li.inforLi > h4:nth-of-type(6){width: 15%; }
	.worksPresentation > ul > li.inforLi > h4:nth-of-type(7){width: 10%; }
	.worksPresentation > ul > li *{float: left; line-height: 50px; padding: 0; margin: 0; text-align: center; }
	.worksPresentation > ul > li > .listElement1{width: 17%; }
	.worksPresentation > ul > li > .listElement1 > h5{width: 41.17647058823529%; margin-right: 0; }
	.worksPresentation > ul > li > .listElement1 > h5 > span{display: none; }
	.worksPresentation > ul > li > .listElement1 > h6{width: 58.82352941176471%; }
	.worksPresentation > ul > li > h6{width: 13%; margin: 0; }
	.worksPresentation > ul > li > p{width: 30%; text-align: left; white-space: nowrap;overflow: hidden;text-overflow: ellipsis; margin: 0; }
	.worksPresentation > ul > li > .listElement2{width: 40%; }
	.worksPresentation > ul > li > .listElement2 > div{width: 75%; }
	.worksPresentation > ul > li > .listElement2 > div > p{width: 50%; }
	.worksPresentation > ul > li > .listElement2 > div > p:nth-of-type(1){margin-bottom: 0; }
	.worksPresentation > ul > li > .listElement2 > a{width: 20%; margin: 12px 2.5%; height: 26px; line-height: 26px; }
}