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

/* ******************  메인 비주얼 ********************** */
@media all and ( max-width: 1024px ){
	/* 비주얼 영역 :: 텍스트 */
	.main-visual-txt-con .main-visual-tit{font-size:55px; line-height:1.125}
	.main-visual-txt-con .main-visual-tit br{display:block;}
	.main-visual-txt-con .main-visual-txt{font-size:12px;}
}

@media all and ( max-width: 800px ){
	/* 메인 비주얼 :: 이미지 */
	.main-visual-item .main-visual-pc-img{display:none;}
	.main-visual-item .main-visual-m-img{display:block;}
}
@media all and ( max-width: 640px ){
	/* 비주얼 영역 :: 텍스트 */
	.main-visual-txt-con .main-visual-tit{/* font-size:40px; */ font-size:30px;}
	.main-visual-txt-con .main-visual-btn{width:100px; height:30px; line-height:30px;}
	/* 비주얼 영역 :: Paging */
	.main-visual-container .main-visual-dots{bottom:50px !important;}
	/* 메인 비주얼 :: 스크롤아이콘 */
	.main-scroll-icon{display:none}
}

/* ******************  메인 컨텐츠 ********************** */
@media all and (max-width:1220px){
	#mainContent{margin-left:0}
}

/* ******************  메인 제품 ********************** */
@media all and (max-width:1684px){
	/* -------- 제품 :: 정보 -------- */
	/* 제품 :: 정보 :: 텍스트 */
	.main-prd-info-box1 .main-prd-item dl,
	.main-prd-img-container .prd-name{font-size:15px}
}
@media all and (max-width:1536px){
	/* -------- 제품 :: 정보 -------- */
	/* 제품 :: 정보 :: 텍스트 */
}
@media all and (max-width:1366px){
	/* -------- 제품 :: 정보 -------- */
	/* 제품 :: 정보 :: 텍스트 */
	.main-prd-info-box1 .main-prd-item dl{padding:10%;}
	.main-prd-info-box1 .main-prd-item dl{font-size:13px}
	/* 제품 :: 정보 :: 화살표 */
	.main-prd-info-box1 .main-prd-controls{margin-right:-10px}
	.main-prd-info-box1 .main-prd-controls .main-prd-prev-btn{margin-right:34px}
	.main-prd-info-box1 .main-prd-controls button i{font-size:34px;}
	/* 제품 :: 정보 :: Dots */
	.main-prd-info-container .slick-dots{margin-bottom:7px}
	/* -------- 제품 :: 이미지 -------- */
	.main-prd-img-container .prd-name{font-size:13px;}
}
@media all and (max-width:1024px){
	/* 제품 :: 정보 :: 텍스트 */
	.main-prd-info-box1 .main-prd-item dl .main-prd-tit{font-size:27px;}
	.main-prd-info-box1 .main-prd-item dl .main-prd-txt em{height:3.2em;}
	/* 제품 :: 정보 :: 화살표 */
	.main-prd-info-box1 .main-prd-controls .main-prd-prev-btn{margin-right:14px}
}
@media all and (max-width:800px){
	/* -------- 제품 :: 레이아웃 -------- */
	.main-prd-info-box-size1{width:50%;}
	.main-prd-info-box-size2,
	.main-prd-info-box-size3{float:none; width:100%; transition-duration:1s !important; }
	.main-prd-info-box-size2 .main-prd-info-layout,
	.main-prd-info-box-size3 .main-prd-info-layout{padding-top:62.5%;}
	/* -------- 제품 :: 제품정보 -------- */
	.main-prd-info-box1 .main-prd-item dl{padding:10%;}
	.main-prd-info-box1 .main-prd-item dl .hidden{ transform:translateY(0);}
	/* 제품정보 :: 화살표, Dots */
	.main-prd-info-box1 .main-prd-controls{right:auto; left:10%; margin-right:0; margin-left:-12px}
	.main-prd-info-box1 .main-prd-controls .main-prd-prev-btn{margin-right:20px;}
	.main-prd-info-box1 .slick-dots{margin-bottom:60px}

	/* -------- 제품 :: 이미지 -------- */
	.main-prd-list-wrapper{height:auto; padding-top:0;}
	.main-prd-info-box2{margin-left:50%; }
	.main-prd-info-box3{clear:both;}
	.main-prd-list-wrapper .slick-list{position:relative; top:auto; left:auto; width:100%; height:100%;}
	.main-prd-img-container .prd-name{font-size:13px; }

}
@media all and (max-width:640px){
	/* -------- 제품 :: 제품정보 -------- */
	.main-prd-info-box1 .main-prd-item dl .main-prd-en-tit{font-size:0.7em; margin-bottom:1em}
	.main-prd-info-box1 .main-prd-item dl .main-prd-tit{height:1.2em; font-size:22px; margin-bottom:0.2em}
	.main-prd-info-box1 .main-prd-item dl .main-prd-tit em{white-space:initial; text-overflow:unset;}
	.main-prd-info-box1 .main-prd-item dl .main-prd-txt {/* display:none; */ }
	.main-prd-info-box1 .main-prd-item dl .main-prd-txt em{/* height:1.6em; */}
	/* 제품정보 :: 화살표, Dots */
	.main-prd-info-box1 .main-prd-controls{bottom:5%;}
	.main-prd-info-box1 .slick-dots{bottom:5%;margin-bottom:35px; transform:scale(0.8); transform-origin:0 0;}
	/* -------- 제품 :: 이미지 -------- */
	.main-prd-img-container .prd-name{left:15px; top:15px;}
	/* .main-prd-info-box4 .main-prd-img-container .prd-name{left:5%; top:7%} */

}

/* ******************  시설물 아코디언 리스트 ********************** */
@media all and ( max-width: 1024px ){
	.accordion-list-box .accordion-list{}
	.accordion-list .accordion-item{display:block; width:100%; height:auto; padding-left:0; }
	.accordion-list .accordion-item:first-child{margin-top:0}
	.accordion-list .accordion-item .accordion-inner{
		height:0; padding-top:110px; 
		background-size:cover !important;
		-webkit-transition:padding 0.4s;
		-moz-transition:padding 0.4s;
		-o-transition:padding 0.4s;
		-ms-transition:padding 0.4s;
		transition:padding 0.4s;
	}
	.accordion-list .accordion-item.active .accordion-inner{padding-top:52.83%; margin-bottom:110px}
}
@media all and ( max-width: 640px ){
	.accordion-list .accordion-item .accordion-inner{padding-top:60px;}
	.accordion-list .accordion-item.active .accordion-inner{margin-bottom:60px}
}

/* -------- 아모디언 내용 -------- */
@media all and ( max-width: 1024px ){
	/* 아코디언 내용 */
	.accordion-item .accordian-tit-box{width:100%;}
	.accordion-item.active .accordian-tit-box{ top:100%; height:110px}
	.accordian-tit-box .accordian-tit{top:50%; transform:rotate(0) translateY(-50%); box-sizing:border-box; padding:0 15px;}
	.accordian-tit-box .accordian-tit strong{font-size:22px;}
	/* 아코디언 타이틀 아이콘 */
	.accordian-tit-box .accordian-arrow{left:auto; right:10px; margin-left:0; bottom:50%; transform:translateY(50%)}
	.accordian-tit-box .accordian-link-icon{width:100%; height:100%; left:0; right:0; margin-left:0; bottom:0px;}
	.accordian-tit-box .accordian-link-icon i{position:absolute; top:50%; right:15px; transform:translateY(-50%)}
}
@media all and ( max-width: 640px ){
	/* 아코디언 내용 */
	.accordion-item.active .accordian-tit-box{height:60px}
	.accordian-tit-box .accordian-tit strong{font-size:18px;}
	.accordian-tit-box .accordian-arrow{width:auto; height:auto; right:15px;}
	.accordian-tit-box .accordian-arrow i,
	.accordian-tit-box .accordian-link-icon i{font-size:30px;}
}

/* ******************  메인 게시판영역 ********************** */
@media all and (max-width:1684px){
	#mainBoardContent{padding:150px 0;}
	/* 메인 게시판 :: 탭 */
	.main-board-tab-list{margin-bottom:40px;}
	/* 메인 게시판 :: 리스트 */
	.main-board-item dl{font-size:13px;}
	.main-board-item a:hover .main-board-txt{height:8em; -webkit-line-clamp: 4;}
	/* 메인 게시판 :: Arrow */
	.main-board-list .slick-prev,
	.main-board-list .slick-next{margin-bottom:1%;}

}
@media all and ( max-width: 800px ){
	#mainBoardContent{padding:10% 0;}
	/* 메인 게시판 :: 탭 */
	.main-board-tab-list{margin:0 15px 5%;}
	.main-board-tab-inner ul li{width:auto; margin-bottom:5px}
	.main-board-tab-inner ul li a{position:relative; font-size:13px; padding:12px 15px; border-bottom-width:3px;}
	.main-board-tab-inner ul li a:after{position:absolute; bottom:-3px; left:50%; width:0; height:3px; background-color:#333; content:""; transition:all 0.5s}
	.main-board-tab-inner ul li.active a:after{width:100%; margin-left:-50%;}
	.main-board-tab-inner .line{display:none;}
	/* 메인 게시판 :: 리스트 */
	.main-board-list-container .slick-slide > div{margin:0 5px;}
	.main-board-list-container{max-width:50%; margin:0px auto;}
	.main-board-item .main-board-info-inner{padding:20px 10px;}
	.main-board-item .main-board-info-inner .category{left:10px; padding:7px 10px; transform:translateY(-12px)}
	.main-board-item dl{font-size:11px;}
	.main-board-item .main-board-txt{height:4em; font-size:1.2em; -webkit-line-clamp:2; }
	/* 메인 게시판 :: Arrow */
	.main-board-list .slick-prev,
	.main-board-list .slick-next{width:30px; height:30px;}
}
@media all and ( max-width: 480px ){
	/* 메인 게시판 :: 리스트 */
	.main-board-list-container{max-width:80%; }

}

/* ******************  하단영역(기업소개로고/뉴스레터/홍보영상보기) ********************** */
@media all and (max-width:1770px){
	/* -------- 하단영역 :: 뉴스레터 -------- */
	.main-newsletter-con{padding:45px 30px}
	.newsletter-writer-btn{right:30px;}
	
	/* -------- 하단영역 :: 홍보영상보기 -------- */
	.main-pr-con{padding:20px 30px}
}
@media all and (max-width:1684px){
	/* -------- 하단영역 :: 기업 소개 로고  -------- */
	.main-company-intro-con .company-logo{bottom:30px; right:30px;}
	.main-company-intro-con .company-logo img{transform:scale(0.7)}
	/* -------- 하단영역 :: 뉴스레터 -------- */
	.main-newsletter-con{width:55%}
	.main-newsletter-con dl dt{margin-top:16px; font-size:30px;}
	.main-newsletter-con dl dd{display:none;}

	/* -------- 하단영역 :: 홍보영상보기 -------- */
	.main-pr-con{width:45%}
	.main-pr-con dl dd{display:none;}
}
@media all and (max-width:1024px){
	#mainBottomContent{padding-bottom:150px}
	/* -------- 하단영역 :: 기업 소개 로고  -------- */
	.main-company-intro-con .company-logo{bottom:150px;}
	/* -------- 하단영역 :: 뉴스레터 -------- */
	.main-newsletter-pr-con{height:auto;}
	.main-newsletter-con{float:none; width:auto; height:auto; }
	.main-newsletter-con dl dt{margin-top:0; vertical-align:middle; display:inline-block;}
	.main-newsletter-con dl dd{display:inline-block; vertical-align:middle; font-size:13px;}
	/* -------- 하단영역 :: 홍보영상보기 -------- */
	.main-pr-con{float:none; width:auto}
	.main-pr-con dl dd{display:inline-block; font-size:13px;}
}
@media all and (max-width:800px){
	#mainBottomContent{padding-top:80%}
	/* -------- 하단영역 :: 배경이미지  -------- */
	.main-bottom-bg.pc-bg{display:none;}
	.main-bottom-bg.m-bg{display:block;}
	/* -------- 하단영역 :: 기업 소개 로고  -------- */
	.main-company-intro-con .company-logo{bottom:130px; right:20px;}
	.main-company-intro-con .company-logo img{transform:scale(1); height:85px;}
	/* -------- 하단영역 :: 뉴스레터 -------- */
	.main-newsletter-con{padding:30px 15px;}
	.main-newsletter-con dl dd{display:block; margin-top:7px}
	.newsletter-writer-btn{width:140px; height:50px; line-height:50px; right:15px;}

	/* -------- 하단영역 :: 홍보영상보기 -------- */
	.main-pr-con{position:relative; height:auto; padding:25px 15px;}
	.main-pr-con dl{width:calc(100% - 150px);}
	.main-pr-con .main-pr-video-btn-box{position:absolute; top:50%; right:15px;width:140px; height:77px; transform:translateY(-50%)}
	.main-pr-con .main-pr-video-btn-box a img{width:100%; height:100%;}
	

}
@media all and (max-width:480px){
	#mainBottomContent{padding-top:128%}
	/* -------- 하단영역 :: 기업 소개 로고  -------- */
	.main-company-intro-con .company-logo{bottom:50px}
	/* -------- 하단영역 :: 뉴스레터 -------- */
	.main-newsletter-con dl dt{font-size:23px;}
	.main-newsletter-con dl dd{display:none;}
	/* -------- 하단영역 :: 홍보영상보기 -------- */
	.main-pr-con{padding:30px 15px;}
	.main-pr-con dl dt{font-size:22px;}
	.main-pr-con dl dd{display:none;}
	.main-pr-con .main-pr-video-btn-box,
	.main-pr-con .main-pr-video-btn-box a{height:50px}
	.main-pr-con .main-pr-video-btn-box a img{transform:translateY(-25%)}
	.main-pr-video-btn-box .play-btn  svg{transform:scale(0.6)}
}

/* -------- 뉴스레터, 홍보영상 리스트 모달 -------- */
@media all and (max-width:1536px) {
	.video-arrow-controls button{width:50px; height:50px; margin-top:-25px;}
	.video-arrow-controls .video-prev-btn{left:-80px;}
	.video-arrow-controls .video-next-btn{right:-80px;}
}
@media all and (max-width:1366px) {
	.video-list-con {margin:0 80px}
	.video-arrow-controls .video-prev-btn{left:10px;}
	.video-arrow-controls .video-next-btn{right:10px;}
}
@media all and (max-width:800px) {
	.video-list-wrapper{margin:20vh 15px}
	.video-list-wrapper .modal-close-btn{top:-41px;}
	.video-list-con {margin:0}
	.video-arrow-controls{display:none;}
	.video-list-wrapper .slick-dots {margin-top:15px;}
	.video-list-wrapper .slick-dots li{margin:0 5px;}
	/* 뉴스레터 모달 */
	#newsLetterApplyCon{margin:50px 15px}
	#newsLetterApplyCon .modal-close-btn{top:0px; right:0px;}
	.newsletter-apply-inner{padding:30px 15px;}
	.newsletter-apply-tit-box{font-size:12px; margin-bottom:20px;}
}