#mainVisual {overflow: hidden;position: relative;margin-top: 100px;}
#mainVisual .swiper-slide {height: 700px;background-repeat:no-repeat;background-position: 50% 0;
background-size: cover;}

#mainVisual .mainVisual01 {background-image: url("../images/main/mainVisual01.jpg");}
#mainVisual .mainVisual02 {background-image: url("../images/main/mainVisual02.jpg");}

#mainContents .company {padding:60px 0;text-align: center;}
#mainContents .company .main {font-size: 1.9rem;  color: #333;  font-weight: 700;  position: relative;font-family: 'NanumSquare', sans-serif !important;}
/*#mainContents .company .main:after {content:"";display:block;width: 30px;height: 4px;
background: #333;position: absolute;bottom: 0;left: 50%;margin-left: -15px;
}*/
#mainContents .company ul {margin-top: 60px;}
#mainContents .company li {float: left;width: 33.33%;}
/* #mainContents .company li img {width: 50%;} */
#mainContents .company li strong {display: block;font-size: 1.5rem;font-weight: 700;color: #0081cb;
margin: 20px 0 20px;
}
#mainContents .company li span {display: block;}
#mainContents .company li .more {display: block;width: 100px;height: 40px;line-height: 36px;
border: 2px solid #0081cb;margin: 10px auto 0;}


/* blog post */
#mainContents .blog {padding: 30px 0 20px;background:#E91E63;} 
#mainContents .blog h2 {text-align: center;font-size: 45px;font-weight: 100;line-height: 1;
letter-spacing: -0.05;color: #fff;font-family: NanumSquareR,'나눔스퀘어';
} 
/* #mainContents .blog h2:after {content: "";display: block;width: 50px;height: 4px;background: #000;
margin: 0 auto;margin-top: 30px;margin-bottom: 30px;} */
#mainContents .blog h2 strong {font-weight: 700;} 
#mainContents .blog .desc {text-align: center;}

#mainContents .blog li {width: 295px;}
#mainContents .blog li a {display: block;width: 100%;}
#mainContents .blog li a img {width: 100%;}
#mainContents .blog li .txt {height: 180px;padding: 20px;background: #fff;}
#mainContents .blog li .txt .title {font-size: 18px;font-weight: 500;width: 100%;
white-space:nowrap;overflow: hidden;text-overflow:ellipsis;
}

#mainContents .blog li .txt .desc {text-align: left;margin: 10px 0;height: 80px;}
#mainContents .blog .mask {overflow: hidden;margin-top: 30px;}
#mainContents .blog .btns {text-align: center;margin-top: 30px;}
#mainContents .blog .btns a {display: inline-block;width:50px;height: 50px;line-height: 36px;border: 2px solid #000;
font-size: 40px;font-weight: 700;margin: 0 5px;
}


/* blog post */
#mainContents .blog1 {padding: 60px 0 80px;background: #f3f3f3;} 
#mainContents .blog1 h2 {text-align: center;font-size: 45px;font-weight: 100;line-height: 1;
letter-spacing: -0.05;
} 
#mainContents .blog1 h2:after {content: "";display: block;width: 50px;height: 4px;background: #000;
margin: 0 auto;margin-top: 30px;margin-bottom: 30px;}
#mainContents .blog1 h2 strong {font-weight: 700;} 
#mainContents .blog1 .desc {text-align: center;}

/* #mainContents .blog1 li {width: 20%;} */
/* #mainContents .blog1 li a {display: block;width: 100%;}
#mainContents .blog1 li a img {width: 100%;} */
#mainContents .blog1 li .txt {height: 180px;padding: 20px;background: #fff;}
#mainContents .blog1 li .txt .title {font-size: 18px;font-weight: 500;width: 100%;
white-space:nowrap;overflow: hidden;text-overflow:ellipsis;
}

#mainContents .blog1 li .txt .desc {text-align: left;margin: 10px 0;height: 80px;}
#mainContents .blog1 .mask {overflow: hidden;margin-top: 30px;}
#mainContents .blog1 .btns {text-align: center;margin-top: 30px;}
#mainContents .blog1 .btns a {display: inline-block;width:50px;height: 50px;line-height: 36px;border: 2px solid #000;
font-size: 40px;font-weight: 700;margin: 0 5px;
}


#mainContents .quickMenu {padding: 50px 0;}
#mainContents .quickMenu li {width: 23%;height: 250px;margin: 1%;float: left;overflow: hidden;}
#mainContents .quickMenu li:hover a {margin-top: -250px;}
#mainContents .quickMenu li a {display: block;text-align: center;color: #fff;
transition:all 0.5s ease-out;
}
#mainContents .quickMenu li a .top {display: table;width: 100%;}
#mainContents .quickMenu li a .top .inner {display: table-cell;vertical-align: middle;height: 250px;}
#mainContents .quickMenu li a .top .inner .title {font-size: 28px;font-weight: 700;}
#mainContents .quickMenu li a .top .inner .img {padding: 20px 0;}
#mainContents .quickMenu li a .top .inner img {width: 20%;}

#mainContents .quickMenu li a .bottom {display: table;width: 100%;}
#mainContents .quickMenu li a .bottom .inner {display: table-cell;vertical-align: middle;height: 250px;}

#mainContents .quickMenu li a .bottom .inner p {font-size: 28px;font-weight: 700;}
#mainContents .quickMenu li a .bottom .inner .more {display: inline-block;padding: 10px 25px;
border: 1px solid #fff;
}

#mainContents .quickMenu li:nth-child(1) a .top {background: #008ed7;}
#mainContents .quickMenu li:nth-child(2) a .top {background: #19cbc9;}
#mainContents .quickMenu li:nth-child(3) a .top {background: #2cadef;}
#mainContents .quickMenu li:nth-child(4) a .top {background: #4159d6;}

#mainContents .quickMenu li:nth-child(1) a .bottom {background: #0071a5;}
#mainContents .quickMenu li:nth-child(2) a .bottom {background: #009a95;}
#mainContents .quickMenu li:nth-child(3) a .bottom {background: #007bba;}
#mainContents .quickMenu li:nth-child(4) a .bottom {background: #273580;}


.sub {font-size: 17px;}











@media all and (max-width:1240px){
	#mainVisual .swiper-slide {height: 500px;}
	
}

@media all and (max-width:768px){
	#mainVisual {margin-top: 60px;}
	#mainVisual .swiper-slide {height: 300px;}
	#mainContents .company {padding: 30px 10px;}
	#mainContents .company ul {margin-top: 20px;}
	#mainContents .company .main {font-size: 1.25rem;}
	#mainContents .company p br {content:"";}
	#mainContents .company li {float: left;width: 31%; margin:0 1%}
	#mainContents .company li img {width: 100%;}
	#mainContents .blog {padding: 40px 10px 20px;}
	#mainContents .blog h2 {font-size: 28px;}

	#mainContents .quickMenu li {width: 48%;}
}

@media all and (max-width:480px){
	#mainContents .quickMenu {padding: 30 10px;}
	#mainContents .quickMenu li {width: 100%;margin: 10px 0 0 0;}
	#mainContents .company li {float:none;width: 100%;margin-top: 20px; margin:0 1%}

}



/* 반응형 코딩시작 * /

@media all and (max-width:640px) {
	html,body { font-size: 12px;}
	.container {width: 100px;}
	#product .productBox {width: 100%;}
	#product li {width: 48%;margin: 1%;}
}
@media all and (max-width: 420px;) {
	#product li {width: 98px;margin: 1%;
}

/* 반응형 코딩 끝 */