@charset "utf-8";

@import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css);
		

/* 메인 공통 */
.more{position: relative; padding: 0 0 4px; font-size: 13px; font-weight: 700; letter-spacing: 1px; color: #a50034;}
.more:before{content: ""; position: absolute; bottom: 0; left: 0; display: block; width: 100%; height: 2px; background: #a50034;}

.more_arrow{font-size: 0; text-indent: -9999px; display: block; width: 58px; height: 27px; background: url(/img/more_arrow.png) no-repeat;}

.tit_inbox{box-sizing: border-box; /*padding: 0 0 0 60px;*/ padding: 0 0 0 3.2017vw;}
.tit_inbox h2{line-height: 120%; padding: 0 0 17px; /*font-size: 32px;*/ font-size: 1.723vw; font-weight: 500;}
.tit_inbox .desc{line-height: 145%; padding: 0 0 17px;}

.tit h2{font-size: 30px; font-weight: bold; text-align:left; font-family: 'Nanum Gothic', sans-serif;}
.tit h2 a{font-weight: bold; }
.tit span{font-size: 15px; color: #555; letter-spacing:-1px}

.board{float: left; width: calc(100% - 194px);}
.board ul li{padding: 0 0 20px; box-sizing: border-box;}
.board ul > li:last-child{padding-bottom: 0;}
.board ul li a{display: block;}
.board ul li a:after{content: ""; display: block; clear: both;}
.board ul li a .img{float: left; position: relative; width: 159px; height: 115px; overflow: hidden; background: #e7e7e7 url(../img/main/no_image.jpg) no-repeat center; background-size: 50%;}
.board ul li a .img img{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: block; width: 100%; /*height: 100%;*/ max-width: none; min-height: 100%; min-width: 100%; object-fit: cover;}
.board ul li a .list_txt{float: left; width: calc(100% - 159px); box-sizing: border-box; padding: 0 0 0 18px;}
.board ul li a .list_txt .list_type{
	display: inline-block; 
	line-height: 150%; 
	padding: 4px 10px; 
	font-size: 14px; 
	color: #fff;
	background:#972c3a;
	min-width:80px; 
	text-align:center; 
}
.board ul li a .list_txt .list_title{display: block; padding: 20px 0 5px; font-size: 18px; letter-spacing:-1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.board ul li a .list_txt .list_cont{display: -webkit-box; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 20px; height: 40px; font-size: 14px; color: #555;}
.board ul li a .list_txt .list_date{display: block; font-size: 14px; color: #555; padding: 0 0 0;}
@media all and (max-width: 1800px){
    .tit_inbox .desc{font-size: 15px;}
}
@media all and (max-width: 1600px){
    .tit_inbox{padding: 0 0 0 30px;}
    .board ul li a .list_txt{padding: 0 0 0 4%;}
}
@media all and (max-width: 1400px){
    .tit_inbox h2{font-size: 30px;}
    .tit_inbox .desc{font-size: 14px;}
    .board{width: calc(100% - 170px);}
}
@media all and (max-width: 1200px){
    .tit_inbox{padding: 0 0 0 20px;}
    .tit_inbox h2{font-size: 26px;}
}
@media all and (max-width: 1024px){
    .board ul li{padding: 0 0 10px;}
}
@media all and (max-width: 768px){
    .tit_inbox h2{font-size: 22px;}
    .tit h2{font-size: 24px;}
    .board{width: calc(100% - 160px);}
    .board ul{margin: 12px 0 0;}
}
@media all and (max-width: 568px){
    .more{font-size: 11px; letter-spacing: 0.5px;}
    .more:before{height: 1px;}
    .tit_inbox{padding-left: 15px;}
    .tit_inbox h2{padding: 0 0 10px; font-size: 18px;}
    .tit_inbox .desc{padding: 0 0 7px; font-size: 12px;}
    .tit h2{font-size: 20px; line-height: 120%;}
    .board{float: none; width: 100%;}
    .board ul li:nth-child(n + 3){display: none;}
    .board ul li a .img{width: 110px; height: 90px;}
    .board ul li a .list_txt{width: calc(100% - 110px);}
    .board ul li a .list_txt .list_title{padding: 15px 0 5px; font-size: 15px; }
    .board ul li a .list_txt .list_cont{font-size: 13px;}
    .board ul li a .list_txt .list_date{font-size: 12px;}
	
	.board ul li a .list_txt .list_type{
		line-height: 150%; 
		padding: 3px 4px; 
		font-size: 12px; 
		min-width:60px; 
	}
	
}


/* 설치사례 */
.installation_case{float: left; position: relative; width: calc(50% - 20px); box-sizing: border-box; padding: 48px 30px 50px 40px; border: 2px solid #ddd; overflow:hidden;}
.installation_case:before{content: ""; position: absolute; bottom: 0; left: 0; display: block; width: 161px; height: 423px; border-radius: 0 35px 0 0; background: #f6f6f6; z-index:0;}
.installation_case:after{content: ""; display: block; clear: both;}


.installation_case .tit{float: left; position: relative; width: 194px;}
.installation_case .tit h2{padding: 0 0 14px;}
.installation_case .tit span{display: block; line-height: 140%;}
.installation_case .tit .more_arrow{margin: 30px 0 0;}
@media all and (max-width: 1400px){
    .installation_case{width: 49.333%;}
    .installation_case .tit{width: 170px;}
}
@media all and (max-width: 1280px){
    .installation_case{float: none; width: 100%; margin: 0 0 50px; padding: 35px 30px;}
    .installation_case:before{height: 403px;}
}
@media all and (max-width: 1024px){
    .installation_case:before{height: 384px;}
}
@media all and (max-width: 768px){
    .installation_case{padding: 25px 20px;}
    .installation_case .tit{width: 160px;}
    .installation_case .tit h2{padding: 0 45px 14px 0;}
    .installation_case .tit .more_arrow{background-size: contain; width: 40px; height: 20px;}
}
@media all and (max-width: 568px){
    .installation_case{margin: 0 0 30px; padding: 20px 10px; border-width: 1px;}
    .installation_case:before{width: 130px; height: 274px; border-radius: 0 15px 0 0;}
    .installation_case .tit{float: none; width: 100%;}
    .installation_case .tit span br{display: none;}
    .installation_case .tit .more_arrow{position: absolute; top: 0; right: 0; margin: 0;}
}

/* 공지사항 */
.notice{float: right; position: relative;  width: calc(50% - 20px); box-sizing: border-box; border-radius: 0 35px 0 0; padding: 48px 30px 50px 40px; border: 2px solid #e9e7e2; background: #f2f0ec;}
.notice:after{content: ""; display: block; clear: both;}
.notice .tit{float: left; position: relative; width: 194px;}
.notice .tit h2{padding: 0 0 14px;}
.notice .tit span{display: block; line-height: 140%;}
.notice .tit .more_arrow{margin: 30px 0 0;}
.notice .board ul li a .list_txt .list_title{display: -webkit-box; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 22px; height: 42px; white-space: initial;}
@media all and (max-width: 1400px){
    .notice{width: 49.333%;}
    .notice .tit{width: 170px;}
}
@media all and (max-width: 1280px){
    .notice{float: none; width: 100%; padding: 35px 30px;}
}
@media all and (max-width: 768px){
    .notice{padding: 25px 20px;}
    .notice .tit{width: 160px;}
    .notice .tit h2{padding: 0 45px 14px 0;}
    .notice .tit .more_arrow{background-size: contain; width: 40px; height: 20px;}
}
@media all and (max-width: 568px){
    .notice{padding: 20px 10px; border-width: 1px; border-radius: 0 15px 0 0;}
    .notice .tit{float: none; width: 100%;}
    .notice .tit span br{display: none;}
    .notice .tit .more_arrow{position: absolute; top: 0; right: 0; margin: 0;}
}

.sec4{margin: 100px auto 100px;}
@media all and (max-width: 1280px){
    .sec4{margin: 50px auto;}
}
@media all and (max-width: 569px){
    .sec4{margin: 30px auto;}
}	
	
	

.row::before, .row::after { 
  content: "";
  display: block;
  }
.row::after { clear: both; } 
	
.notice li a, .notice li.empty_li {   color: #333;  padding: 0px 0;   font-size: 1.4em;}