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

/* ******************  메인 비주얼 ********************** */

@media all and (max-width:1280px){
	/* 메인 비주얼 :: 팝업 */
	.quick-menu-pop .quick-pop {width: 80%; overflow-y:scroll; max-height:450px;}
}

@media all and ( max-width: 800px ){
	/* 메인 비주얼 :: 텍스트 */
	.main-visual-txt-box .main-visual-txt1{font-size:3.8rem; margin-bottom:0;}
	.main-visual-txt-box .main-visual-txt2{font-size:1.6rem; letter-spacing:-0.02em; margin-top:1.5rem;}
	.main-visual-item:not(.first, .last) .main-visual-txt2 {color:rgba(17,17,17,1);}
	.main-visual-item.last .main-visual-txt-box {text-align:left; justify-content:flex-start;}
	.main-visual-item.last .main-visual-txt-box .main-visual-txt1 {font-size:1.6rem;}
	.main-visual-item.last .main-visual-txt-box .main-visual-txt1 strong {font-weight: 400;}
	.main-visual-txt-con {bottom:16rem; height:auto; top:initial;}
	.dots-list .slick-dots li.slick-active .dot {display:none;}

	/* 메인 비주얼 :: 팝업 */
	.quick-menu-pop .quick-pop {padding:2rem;}
	.quick-menu-pop table tr td {padding:15px 0;}
	.quick-menu-pop .bbs-inquiry-agree-con {margin-top:0;}
}

@media all and (max-width:480px){
	
	.main-visual-item .main-visual-pc-img {display:none;}
	.main-visual-item .main-visual-m-img {display:block;}
}

/* 메인 비주얼 :: 스크롤아이콘 */ 
@media all and (max-width: 1366px){
	.cm-scroll-icon .scroll-txt em {font-size:1rem;}
}
@media all and (max-width:800px){
	.cm-scroll-icon {display:none;}
	.cm-scroll-icon .scroll-txt {margin-bottom:5px;}

}

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

/* ******************  메인 컨텐츠 :: Product ********************** */
@media all and (min-width:801px){
	.main-prd-con .prd-list li:hover:before {opacity:1;}
	.main-prd-con .prd-list li:hover a {padding-bottom:9.9rem;}
	.main-prd-con .prd-list li:hover .plus-icon {height:9.9rem; background-color:var(--main-color); color:#fff;}
	.main-prd-con .prd-list li:hover .txt {opacity:0; height:0; }
	.main-prd-con .prd-list li:hover dd {height:14rem; background-color:#fff;}

	.main-prd-con .prd-list li:not(.slick-active) {opacity:0; visibility:hidden;}
	.main-prd-con .prd-list li.slick-active {opacity:1; visibility:visible;}
}
@media all and (max-width:1840px){
	.main-prd-con .prd-list {margin:0;}
	.main-prd-con .prd-list .slick-arrow.slick-prev {right:auto; left:0;} 
	.main-prd-con .prd-list .slick-arrow.slick-next {left:auto; right:0;}
}
@media all and (max-width:1280px){
	#mainProductCon .main-tit-box {display:block;}
	#mainProductCon .main-tit-box .main-tit {margin-bottom:2rem;}
	.main-tab-list-style {margin-top:4rem;}
}
@media all and (max-width:800px){
	#mainProductCon {padding:8rem 0 9.6rem;}
	#mainProductCon:before  {height:39rem;}
	#mainProductCon .arrow-list {top:0;}
	.main-tab-list-style ul li button em {font-size:1.9rem;}
	.main-prd-con .prd-list .slick-list {padding:0 0 10.4rem !important; overflow:visible;}
	.main-prd-con .prd-list li {background-color:#fff; margin:0 1.2rem;}
	.main-prd-con .prd-list li:before {opacity:1;}
	.main-prd-con .prd-list li a {padding-bottom:8.1rem;}
	.main-prd-con .prd-list li dl {padding-top:4.8rem;}
	.main-prd-con .prd-list li dd {height:16rem; margin-top:0;}
	.main-prd-con .prd-list li dd .name {font-size:2.8rem;}
	.main-prd-con .prd-list li .plus-icon {height:8.1rem;}
	.main-prd-con .prd-list li.slick-active {z-index: 9;}
	.main-prd-con .prd-list li.slick-active .plus-icon {background-color:var(--main-color); color: #fff;}
	.main-prd-con .prd-list .slick-arrow {top:auto; bottom:0; transform:none; margin-top:0; margin-bottom:4rem; font-size:2.6rem; z-index: 999;}
	.main-prd-con .prd-list .slick-arrow.slick-prev { left:50%; margin-left:-4.5rem;} 
	.main-prd-con .prd-list .slick-arrow.slick-next { right:auto; left:50%; margin-left:2rem;}
	.industry-list {flex-direction:column-reverse;}
	.industry-list .slick-dots {width: 100%; flex-direction:row; justify-content:flex-start; margin:0 -1rem;}
	.industry-list .slick-dots li {display:none;}
	.industry-list .slick-dots li.slick-active {display:block;}
	.industry-list .slick-dots li button {font-size:2.8rem; margin:0 1rem 3rem;}
	.industry-list .slick-list {width: calc(100% + 2rem);}
	.industry-list .slick-list .item .item-name {display:none;}
	.industry-list img {margin:0 auto;}
}




/* ******************  메인 컨텐츠 :: Process ********************** */
@media all and (max-width:1280px){
	#mainProcessCon {background:#fff;}
	.main-process-con {display:block; }
	.main-process-con .video-box {width:100%;}
	.main-process-con .txt-box {width:100%; margin-top:6rem;}
	.main-process-con .txt-box .inner {padding-left:0;}
	.main-process-con .more-btn {width:34.5rem; margin-left:calc(-1 * var(--area-padding)); margin-top:6rem;}

}
@media all and (max-width:800px){
	#mainProcessCon {padding:7rem 0 8.4rem;}
	#mainProcessCon .main-tit-box {display:block;}
	#mainProcessCon .main-tit-box .main-sub-tit {margin-left:0;margin-top:2.8rem; padding-bottom:0;}
	.main-process-con {margin-top:6rem;}
	.main-process-con .txt-box .tit {font-size:3.4rem; }
}

/* ******************  메인 컨텐츠 :: QuickMenu ********************** */
@media all and (min-width:1921px){
	.main-quickmenu-con .list-box {max-width:1920px;  justify-content:flex-end; }
}
@media all and (min-width:801px){
	.main-quickmenu-list li:hover .more {opacity:1;}	
	.main-quickmenu-list li.item01 {max-width:52rem; width:30.23%; margin-top:22rem;}
	.main-quickmenu-list li.item02 {max-width:51.6rem; width:30%; margin-left:5.39%; margin-top:5rem;}
	.main-quickmenu-list li.item03 {max-width:45.9rem; width:26.68%; margin-left:6.68%; margin-top:12.4rem;}
}
@media all and (max-width:1840px) and (min-width:801px){
	.main-quickmenu-list {width:100%;}
	.main-quickmenu-list li.item02 {margin-top:10rem;}
	.main-quickmenu-list li.item03 {margin-top:15rem;}
}
@media all and (max-width:1280px){
	.main-quickmenu-con .tit-box .inner-box .inner {position:static;} 
	.main-quickmenu-con .list-box {margin-top:4rem;}
	.main-quickmenu-list li.item01 , .main-quickmenu-list li.item02 , .main-quickmenu-list li.item03 {margin-top:0;}
}
@media all and (max-width:800px){
	#mainQuickMenu {background-color:#e4e7f3; padding:7rem 0 8rem;}
	#mainQuickMenu .bg  {display:none;}
	.main-quickmenu-con .tit-box .tit {font-size:6rem;}
	.main-quickmenu-list {display:block; width:100%; height:auto;}
	.main-quickmenu-list li {width:100% !important; margin-top:8rem !important; transition-delay:0s !important}
	.main-quickmenu-list li:first-child {margin-top:0 !important;}
}

/* ******************  메인 컨텐츠 :: News ********************** */
@media all and (min-width:801px){
	.main-news-con .tit-box a:hover {color: #1d3b9d; color: var(--main-color);}
	.main-news-list li a:hover .date-box i { margin-left:6rem; color: #111;}
}
@media all and (max-width:800px){
	#mainNewsCon {padding:8rem 0;}
	.main-news-con {display:block;}
	.main-news-con .tit-box {display:flex; align-items:center; justify-content:space-between; width:100%;}
	.main-news-con .tit-box a {margin-top:0;}
	.main-news-con .list-box {width:100%; margin-top:4rem;}
	.main-news-list li a {display:block; height:auto; padding:4rem 0 5rem;}
	.main-news-list li a .category-box {width:auto; text-align:left;}
	.main-news-list li a .tit-box {width:100%; margin-top:2rem;}
	.main-news-list li a .tit-box .tit {	display:block; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space:normal; line-height:1.71; max-height:3.42em;}
	.main-news-list li a .date-box { justify-content:space-between; width:100%; margin-top:3.5rem; }
}

/* ******************  메인 컨텐츠 :: Location ********************** */
@media all and (max-width:800px){
	.main-location-list {display:block;}
	.main-location-list li {width:100%; border-top:1px solid #fff;}
	.main-location-list li:first-child {border-top:0;}
	.main-location-list li a .m-img {display:block;}
	.main-location-list li a .pc-img {display:none;}
	.main-location-list li a img {opacity:1;}
	.main-location-list li a .tit {top:50%; transform:translateY(-50%); font-size:2.4rem; left: var(--area-padding);}
}