@charset "utf-8";

/*-----------------------------------------------------------------------------------
	충남도서관 다국어 main Style    
	Last : 2018.04.12
-----------------------------------------------------------------------------------*/

.visual {width:100%; height:350px}
.visualImg {width:100%; height:100%; font-size:0; background:url('../../images/encn/main/visual.jpg') no-repeat center 0; background-size:cover}


.content {overflow:hidden; position:relative; width:1200px; margin:0 auto; padding:70px 0; background-color:#fff}

.box1 {overflow:hidden; margin:0 20px}
.box1 li {float:left; width:230px; margin-left:80px}
.box1 li:nth-child(1) {margin-left:0}
.box1 li h2 {position:relative; padding:20px 0 10px 0; line-height:26px; text-align:center; font-size:18px; color:#585858}
.box1 li h2:after {content:''; display:block; position:absolute; top:0; left:50%; width:24px; height:2px; margin-left:-12px; background-color:#000}
.box1 li h2 em {font-family:'NanumGB'; color:#000}
.box1 li .link {position:relative; width:230px; height:100px}
.box1 li .link a {width:100%; height:100%}
.box1 li .link a i {display:block; position:absolute; top:0; left:0; width:100%; height:100%; background-color:none; transition:all 0.5s ease; transform:scale(0.5);}
.box1 li .link a img {position:relative; width:100%; height:100%}
.box1 li .link a:hover i {width:100%; height:100%; background-color:rgba(0,0,0,0.4); z-index:10; transform:scale(1);}
.box1 li .text {padding:10px; font-size:14px; word-break:keep-all; word-spacing:2px}



@media screen and (max-width:1200px){
	.visual {height:320px}

	.content, .box1 li {-webkit-transition:all 0.3s ease; -moz-transition:all 0.3s ease; -ms-transition:all 0.3s ease; transition:all 0.3s ease}
	
	.content {width:100%}
	
	.box1 {width:100%; margin:0 auto}
	.box1 li {width:21%; margin:0 2%} 
	.box1 li:nth-child(1) {margin-left:2%}
	.box1 li .link {width:100%}

}



@media screen and (max-width:1024px){
	.box1 li {width:44%; margin:0 3%}
	.box1 li:nth-child(1) {margin-left:3%}
}



@media screen and (max-width:820px){
	.visual {height:200px}
	

}




@media screen and (max-width:760px){

}




@media screen and (max-width:640px){
	.visual {height:140px}
	.visualImg {background-position:0 0}

	.content {padding:20px 0 70px 0}
	
	.box1 {width:90%}
	.box1 li {width:100%; margin:50px 0 0 0}
	.box1 li:nth-child(1) {margin-left:0}
	.box1 li .text {text-align:center}
}



@media screen and (max-width:460px){
	.visual {height:90px}
	
	.box1 li:nth-child(1) {margin-top:30px}
}