@charset "utf-8";
/* *******************************************************
 * filename : main_responsive.css
 * description : 메인 레이아웃 및 컨텐츠 반응형 CSS
 * date : 2019-02-01
******************************************************** */



@media all and ( max-height: 800px ) and ( min-width: 1101px ){
	.section, .fp-tableCell{height: 900px !important;}
	.fp-tableCell > div{padding-top: 0px;}
	#mainCustomer, #mainCustomer .fp-tableCell{height: 800px !important;}
}
@media all and ( max-width: 1100px ){
	.fp-tableCell > div{padding-top: 0px;}
}
@media all and ( max-width: 800px ){
	.section, .fp-tableCell{height: auto !important;}
	.fp-tableCell > div{padding-top: 0;}
}
/* ******************  메인 비주얼 ********************** */
@media all and ( max-width: 800px ){
	/* 메인 비주얼 :: 이미지 */
	#mainVisual{height: 475px !important;}
	#mainVisual .fp-tableCell{height: 100% !important;}
	.main-visual-item .main-visual-pc-img{display:block;}
	/* .main-visual-item .main-visual-m-img{display:block;} */
	.main-visual-m-img img{width:100%;}
	/* 메인 비주얼 :: 텍스트 */
	.main-visual-txt-con{margin-top: 0;}
	.main-visual-txt-con .main-visual-txt1{font-size:24px; line-height: 27px; margin-bottom:10px;}
	.main-visual-txt-con .main-visual-txt2{font-size:11px; line-height: 14px; margin-bottom:45px;}
	.main-visual-txt-con .main-visual-more-btn{width: 115px; height: 35px; line-height: 35px; font-size:11px; border:1px solid rgba(255,255,255,0.3); border-right: 1px solid #fff; border-left: 1px solid #fff;}
	.main-visual-txt-con .main-visual-more-btn:before,
	.main-visual-txt-con .main-visual-more-btn:after{top:-1px;}
	.main-visual-txt-con .main-visual-more-btn:before{left:0; width:15px; height:35px; border-top:1px solid #fff; border-bottom:1px solid #fff}
	.main-visual-txt-con .main-visual-more-btn:after{right:0; width:15px; height:35px; border-top:1px solid #fff; border-bottom:1px solid #fff}
	/* 메인 비주얼 :: 버튼 및 화살표 */
	.swiper-nav-btn{margin-top: 10px;}
	.swiper-button-next i, .swiper-button-prev i{font-size: 20px;}
	.swiper-button-prev{padding-left: 0 !important;}
	.swiper-pagination {margin: 0 4px;}
	.swiper-pagination .swiper-pagination-bullet{margin-top: 2px; width:5px; height:5px;}
	/* .main-visual-btn-wrapper{margin-top: 0;}
	.main-visual-btn-wrapper .prev-btn i, .main-visual-btn-wrapper .next-btn i{font-size: 20px;}
	.main-visual-btn-wrapper .custom-dots{margin: 0 5px;}
	.main-visual-btn-wrapper .custom-dots li {margin-left: 7px;}
	.main-visual-btn-wrapper .custom-dots li button {width:5px; height:5px;} */
}

/* ******************  메인 컨텐츠 :: product ********************** */
@media all and (max-width:1620px){
	.prd-main-txt-thum-inner{transition-delay: 0.6s;}
	.prd-main-list-container li.kwicks-expanded .prd-main-txt-thum-inner{left: 0; margin-left: 0; width: calc(100% - 91px);}
}
@media all and (max-width:1220px){
	.prd-main-inner-btn{width: 380px; margin: 40px auto 0;}
	.prd-main-inner-btn ul{text-align: center; margin: -5px;}
	.prd-main-inner-btn ul li{width: 180px; float: left; display: block; margin: 5px;}

	.prd-main-inner-btn.ver2{width: 380px;}
}
@media all and (max-width:800px){
	.horizontal-cm-tit{margin-bottom: 15px;}
	.horizontal-cm-tit h3{font-size: 25px;}
	.horizontal-cm-tit h3:after{margin: 0 0 0 20px; width: 20px; height: 2px;}
	.horizontal-cm-tit p{display: none;}
}
@media all and (max-width:800px){
	#mainBusiness .fp-tableCell > div{padding-top: 35px; padding-bottom: 35px;}
	.pc-accordian-list-box{display: none !important;}
	.accordian-list-box{display: block;}
	/* 아코디언 01 :: 레이아웃 */
	.accordian-list-box .accordian-list{ height:auto; }
	.accordian-item{display:block; width:100% !important;}
	/* 아코디언 01 :: 타이틀 및 내용 */
	.accordian-item .accordian-inner{height:75px; background-size:cover !important; padding:0 15px; -webkit-transition:height 0.4s;-moz-transition:height 0.4s;-o-transition:height 0.4s;-ms-transition:height 0.4s;transition:height 0.4s;}
	.accordian-item.active .accordian-inner{height:320px}
	.accordian-item .accordian-inner .accordian-tit{font-size:17px; right: 0; left: 0; width:auto; text-align:center; margin-top:-8.5px;}
	/* 제품 메인 :: 설명 */
	.prd-main-txt-thum-inner{width: calc(100% - 30px); left:15px; padding-bottom: 25px; z-index: 1;}
	.prd-main-list-inner-tit{font-size:22px;}
	.prd-main-inner-txt{margin-top: 10px; font-size:11px; line-height:16px;}
	.prd-main-inner-btn{margin: 20px auto 0; width: calc(100% - 30px);}
	.prd-main-inner-btn ul li{width: 48%; margin: 1%;}
	.prd-main-inner-btn ul li .btn-a{height: 40px;}
	.prd-main-inner-btn ul li .btn-a span{height: 38px; font-size: 12px; line-height: 1.4;}

	.prd-main-inner-btn.ver2{width: calc(100% - 30px); margin: 20px auto 0;}
	.prd-main-inner-btn.ver2 li{width: 100%; margin: 2px 0;}
	.prd-main-inner-btn.ver2 li .btn-a span em{padding: 0 15px;}
	.prd-main-inner-btn.ver2 li .btn-a span p{padding-left: 10px;}
	.prd-main-inner-btn.ver2 li .btn-a span p:before{top: 6px; left: 0; width: 4px; height: 4px;}

	.accordian-item.active .prd-main-txt-thum-inner{left: 15px;}
}



/* ******************  메인 컨텐츠 :: solution ********************** */
@media all and (max-width:800px){
	.vertical-cm-tit h3{font-size: 25px;}
	.vertical-cm-tit h3:after{margin: 15px auto 0; width: 20px; height: 2px;}
	.vertical-cm-tit p{display: none;}
}
@media all and (max-width:800px){
	#mainSolution .fp-tableCell > div{padding-top: 45px; padding-bottom: 50px;}
	.main-solution-wrapper{margin-top: 10px;}
	ul.main-solution-list{margin: -7.5px 0;}
	ul.main-solution-list li{float: left; width: 100%; margin: 7.5px 0;}
	ul.main-solution-list li a .tit-con{padding: 0 20px; width: 100%; height: 35px;}
	ul.main-solution-list li a .tit-con .inner{height: 35px;}
	ul.main-solution-list li a .tit-con p{font-size: 12px;}
	ul.main-solution-list li a .tit-con i{margin-top: -9px; font-size: 18px;}
}



/* ******************  메인 컨텐츠 :: about ********************** */
@media all and (max-width:800px){
	#mainAbout {height: 355px !important;}
	#mainAbout .fp-tableCell > div{padding-top: 45px; padding-bottom: 65px;}
	#mainAbout .vertical-cm-tit h3:after{margin: 15px auto;}
	#mainAbout .vertical-cm-tit p{display: block; font-size: 12px; line-height: 20px; -ms-word-break: keep-all; word-break: keep-all;}
	#mainAbout .vertical-cm-tit p .pc-br.m-br, #mainAbout .vertical-cm-tit p .m-br{display: block;}
	.main-about-wrapper{margin-top: 48px;}
	ul.main-about-list li{width: 32%;}
	ul.main-about-list li:before{height: 80px;}
	ul.main-about-list li a .img-con img{height: 43px;}
	ul.main-about-list li a .txt-con{margin-top: 10px; font-size: 14px;}
}



/* ******************  메인 컨텐츠 :: customer ********************** */
@media all and (max-width:1120px){
	.main-board-box{width: 49%;}
}
@media all and (max-width:1024px){
	#mainCustomer .fp-tableCell > div{padding-top: 45px; padding-bottom: 50px;}
	/* 공지사항 */
	.main-board-box{float:none; width:100%; margin-bottom:15px;}
	/* 자료실, 문의 */
	.main-menu-box{float: none; margin-top: 40px; width: 100%;}
}
@media all and (max-width:800px){
	#mainCustomer .fp-tableCell > div{padding-top: 35px; padding-bottom: 25px;}
	/* 공지사항 */
	.main-board-box .main-board-tit{font-size:18px; padding-bottom:15px; border-bottom:2px solid #333;}
	.main-board-con li{padding-left:15px; padding-top:15px; padding-bottom: 15px;}
	.main-board-con li:before{width:2px; height:2px; top:20px; left:9px;}
	.main-board-con li .bbs-tit{width:74%; font-size:12px;}
	.main-board-con li .bbs-date{padding-right: 10px; font-size:12px; width: 25%;}
	.main-board-box .board-more-btn{position:absolute; top:0px; right:0px;}
	.main-board-box .board-more-btn i{font-size:22px;}
	/* 자료실, 문의 */
	.main-menu-box{margin-top: 20px;}
	.main-menu-box ul li .inner{padding-top: 160px;}
	.main-menu-box ul li .inner > div{left: 10px; right: 10px;}
	.main-menu-box ul li .icon-con img{height: 42px;}
	.main-menu-box ul li .txt-con{margin-top: 15px;}
	.main-menu-box ul li .txt-con .tit{font-size: 15px;}
	.main-menu-box ul li .txt-con .txt{display: none;}
	.main-menu-box ul li .view-con{margin-top: 15px;}
	.main-menu-box ul li .view-con i{font-size: 16px;}
}


