@charset "utf-8";
/* *******************************************************
 * filename : main_responsive.css
 * description : 메인 레이아웃 및 컨텐츠 반응형 CSS
 * date : 2019-02-01
******************************************************** */

/* ******************  메인 비주얼 ********************** */
@media all and (max-width:1530px){
	.main-visual-item .main-visual-txt-con .main-visual-txt1 {left: 15px;}
}
@media all and (max-width:1330px){
	.main-visual-item .main-visual-txt-con {top: 115px;}
	.main-visual-item .main-visual-txt-con .main-visual-txt1 {top: -65px;}
	.main-visual-item .main-visual-txt-con .main-visual-txt1 img{height: 90px;}
	.main-visual-con .slick-dots {top: 210px;}
	.main-visual-con .slick-arrow {top: 210px;}
	.main-visual-item .main-visual-txt-con .main-visual-txt2 {font-size: 30px; line-height: 1.2;}
}
@media all and ( max-width: 800px ){
	#mainVisual{height: auto;}
	/* 메인 비주얼 :: 이미지 */
	.main-visual-item .main-visual-pc-img{display:none;}
	.main-visual-item .main-visual-m-img{display:block;}
	.main-visual-m-img img{width:100%;}
	/* 메인 비주얼 :: 텍스트 */
	.main-visual-item .main-visual-txt-con{top: 10%;}
	.main-visual-item .main-visual-txt-con .main-visual-txt1{top: -15px; left: 10px;}
	.main-visual-item .main-visual-txt-con .main-visual-txt1 img {height: 35px;}
	.main-visual-item .main-visual-txt-con .main-visual-txt2{font-size:17px; line-height: 1.3;}
	/* 메인 비주얼 :: 버튼 */
	.main-visual-con .slick-dots{top: 23%;}
	.main-visual-con .slick-dots li{display:inline-block; margin:0 3px;}
	.main-visual-con .slick-dots li button{width:7px; height:13px;}
	.main-visual-con .slick-dots li.slick-active button{width: 7px;}
	.main-visual-con .slick-dots li button:before{width: 0; height: 13px;}
	/* 메인 비주얼 :: 화살표 */
	#mainVisual .slick-arrow{top: 23%; width: 20px; height: 20px;}
	.main-visual-con .slick-arrow.slick-prev {margin-right: 30px; background-size: 30%; background-size: 30%;}
	.main-visual-con .slick-arrow.slick-next {margin-left: 30px; background-size: 30%; background-size: 30%;}
}
@media all and (max-width: 640px){
	/* 메인 비주얼 :: 버튼 */
	.main-visual-con .slick-dots{top: 26%;}
	/* 메인 비주얼 :: 화살표 */
	#mainVisual .slick-arrow{top: 26%;}
}
@media all and (max-width: 480px){
	.main-visual-item .main-visual-txt-con .main-visual-txt1{top: -15px; left: 10px;}
	.main-visual-item .main-visual-txt-con .main-visual-txt1 img {height: 30px;}
	.main-visual-item .main-visual-txt-con .main-visual-txt2 {font-size: 15px;}

	/* 메인 비주얼 :: 버튼 */
	.main-visual-con .slick-dots{top: 30%;}
	/* 메인 비주얼 :: 화살표 */
	#mainVisual .slick-arrow{top: 30%;}
}

/* ******************  메인 컨텐츠 ********************** */
/* -------- 메인 컨텐츠 :: 공통 -------- */
@media all and ( max-width: 800px ){
	/* 공통 :: 타이틀 */
	.main-tit{font-size:19px; margin-bottom:20px;}
}



/* -------- 메인 컨텐츠 :: 컨텐츠1(공지사항,기업소개,온라인문의) -------- */
@media all and (max-width:800px){
	#mainContent1{padding:35px 0 55px;}
	.main-customer-con{margin: 0 -3%;}
	.main-customer-con .customer-inner{width: 94%; position: static;}
	.main-customer-con .customer-inner:before{position: static; width: 100%; height: 1px; margin: 25px 0;}
	/* 공지사항 */
	.customer-inner .main-board-tit{font-size:17px; padding-bottom:17px;}
	.customer-inner .board-more-btn{font-size:12px;}
	.customer-inner .board-more-btn i{font-size:12px;}
	.customer-inner li{margin-top:15px}
	.customer-inner li:first-child{margin-top:8px;}
	.customer-inner li .bbs-tit{font-size:12px;}
	/* 배너 */
	.customer-inner .img-con a .main-board-banner-thumb{padding-top:47.25%;}
	.customer-inner .img-con a .main-board-banner-thumb img{position:absolute; top:0px; left:0; margin-left: 0; width:100%; height:100%;}
}



/* -------- 메인 컨텐츠 :: 컨텐츠2(product) -------- */
@media all and (max-width:800px){
	#mainContent2 .area-box{padding-top:33px; padding-bottom: 35px;}
	ul.main-prd-list{margin: 0 -5px; height: 130px;}
	ul.main-prd-list li{margin: 0 5px; height: 130px; position: static;}
	ul.main-prd-list li a{position: static; height: 130px; padding: 20px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
	ul.main-prd-list li a .img-con{width: 100%; padding-left: 0; display: block; height: 60px; text-align: center;}
	ul.main-prd-list li a .img-con span{display: inline-block; max-width: 95%; max-height: 60px; text-align: center;}
	ul.main-prd-list li a .img-con span img{max-width: none; max-height: 60px;}
	ul.main-prd-list li a .txt-con{margin-top: 12px; float: left; width: 100%; padding-right: 0; display: block; height: auto; text-align: center;}
	ul.main-prd-list li a .txt-con p{padding-left: 0; display: inline-block; font-size: 11px; line-height: 1.2;}
	ul.main-prd-list li a .txt-con p br{display: none;}

	ul.main-prd-list .slick-arrow{top: -40px; width: 28px; height: 28px; line-height: 28px;}
	ul.main-prd-list .slick-arrow.slick-prev{left: 5px;}
	ul.main-prd-list .slick-arrow.slick-next{right: 5px;}
	ul.main-prd-list .slick-arrow.slick-prev i, .slick-arrow.slick-next i{font-size: 11px;}
}




/* -------- 메인 컨텐츠 :: 컨텐츠3(연구기술) -------- */
@media all and ( max-width: 1024px ){
	/* .main-quick-menu-list .quick-menu-item .item-sub-tit br{display: none;} */
	.main-quick-menu-list .quick-menu-item .item-tit{font-size:26px;}
	.main-quick-menu-list .quick-menu-item .item-sub-tit{font-size:14px; line-height: 1.5;}
}
@media all and ( max-width: 800px ){
	#mainContent3 {padding: 35px 0 30px;}

	.main-quick-menu-list .quick-menu-item{margin-top: 15px; width:100%;}
	.main-quick-menu-list .quick-menu-item:first-child{margin-top: 0;}
	.main-quick-menu-list .quick-menu-item a{padding-top:74%;}
	.main-quick-menu-list .quick-menu-item a .quick-menu-thumb .pc-img{display: none;}
	.main-quick-menu-list .quick-menu-item a .quick-menu-thumb .m-img{display: block;}
	.main-quick-menu-list .quick-menu-item .item-txt-box {top:13%;}
	.main-quick-menu-list .quick-menu-item .item-txt-box strong{margin-bottom:10px;}
	.main-quick-menu-list .quick-menu-item .item-tit{font-size:17px;}
	.main-quick-menu-list .quick-menu-item .item-sub-tit{font-size:12px; line-height: 1.5;}

	.main-quick-menu-list .quick-menu-item .item-txt-box .cir{width: 30px; height: 30px;}
	.main-quick-menu-list .quick-menu-item .item-txt-box .cir i{font-size: 13px; line-height: 30px;}
}




/* -------- 메인 컨텐츠 :: 컨텐츠4(경영방침) -------- */
@media all and ( max-width: 1290px ){
	ul.main-rule-list li a .rule-list-inner .txt-box{margin: 0 15px; max-width: none; padding: 0 15px; width: calc(100% - 60px);}
	ul.main-rule-list li a .rule-list-inner .txt-box .cir {margin-right: 0;}
}
@media all and ( max-width: 800px ){
	ul.main-rule-list li{width: 100%; margin-top: 20px;}
	ul.main-rule-list li:first-child{margin-top: 0;}
	ul.main-rule-list li a .rule-list-inner .txt-box{height: 80px; margin: 0 20px; padding: 0 20px; width: calc(100% - 80px);}
	ul.main-rule-list li a .rule-list-inner .txt-box .txt-box-inner{width: 100%; padding-right: 40px; display: table-cell; vertical-align: middle; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
	ul.main-rule-list li a .rule-list-inner .txt-box .tit{display: block; width: auto; font-size: 15px;}
	ul.main-rule-list li a .rule-list-inner .txt-box .sub-tit{margin-top: 7px; display: block; width: 100%; font-size: 12px;}
	ul.main-rule-list li a .rule-list-inner .txt-box .cir{margin-top: 25px; width: 30px; height: 30px;}
	ul.main-rule-list li a .rule-list-inner .txt-box .cir i{font-size: 13px; line-height: 30px;}
}




/* -------- 메인 컨텐츠 :: 컨텐츠5(퀵메뉴) -------- */

@media all and ( max-width: 1220px ){
	.icon-list-wrapper li a > div{width: calc(100% - 30px); padding: 0 15px;}
	.icon-list-wrapper li a p{font-size: 20px;}
	.icon-list-wrapper li a p .arrow{margin-top: 10px; font-size: 13px;}
}
@media all and ( max-width: 1024px ){
	.icon-list-wrapper li{width: 50%;}
	.icon-list-wrapper li:nth-child(3):before{display: none;}
	.icon-list-wrapper li:nth-child(2)~*{margin-top: 30px;}
	.icon-list-wrapper li:nth-child(1) a > div, .icon-list-wrapper li:nth-child(3) a > div{padding-left: 0; width: calc(100% - 15px);}
	.icon-list-wrapper li:nth-child(2) a > div ,.icon-list-wrapper li:nth-child(4) a > div{padding-right: 0; width: calc(100% - 15px);}
}
@media all and ( max-width: 800px ){
	#mainContent5{padding: 45px 0;}
	.icon-list-wrapper li:before{height: 60px;}
	.icon-list-wrapper li:first-child:before{display: none;}
	.icon-list-wrapper li a{display: block; width: 100%; height: 60px;}
	.icon-list-wrapper li a > div{height: 60px;}
	.icon-list-wrapper li a .cir-icon{top: 50%; margin-top: -20px; width: 40px; height: 40px; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0;}
	.icon-list-wrapper li.li-01 .cir-icon, .icon-list-wrapper li.li-02 .cir-icon, .icon-list-wrapper li.li-03 .cir-icon, .icon-list-wrapper li.li-04 .cir-icon{-webkit-background-size: contain; background-size: contain;}

	.icon-list-wrapper li:nth-child(1) a > div, .icon-list-wrapper li:nth-child(3) a > div{width: calc(100% - 30px); padding-right: 30px;}
	.icon-list-wrapper li:nth-child(2) a > div ,.icon-list-wrapper li:nth-child(4) a > div{width: calc(100% - 30px); padding-left: 30px;}

	.icon-list-wrapper li a p{padding-left: 65px; font-size: 15px;}
	.icon-list-wrapper li a p .arrow{margin-top: 7px; font-size: 12px;}
}
@media all and ( max-width: 480px ){
	.icon-list-wrapper li a .cir-icon{margin-top: -15px; width: 30px; height: 30px;}
	
	.icon-list-wrapper li:nth-child(2)~*{margin-top: 15px;}

	.icon-list-wrapper li:nth-child(1) a > div, .icon-list-wrapper li:nth-child(3) a > div{width: calc(100% - 15px); padding-right: 15px;}
	.icon-list-wrapper li:nth-child(2) a > div ,.icon-list-wrapper li:nth-child(4) a > div{width: calc(100% - 15px); padding-left: 15px;}

	.icon-list-wrapper li a p{padding-left: 45px; font-size: 14px;}
}