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

/* ******************  메인 load ********************** */
@media all and ( min-width: 1281px ){
	.main-page #header{top:calc(-1 * var(--header-height)); transition:top 1.5s;}
	.main-page.active-page.header-off #header{top:calc(-1 * var(--header-height));}
	.main-page #headerInnerWrap{background:transparent;}
	.main-page.active-page .nav-open-btn,
	.main-page.active-page #header{top:0;}
}
@media all and ( max-width: 1280px ){
	.main-page .nav-open-btn,
	.main-page #headerInnerWrap{top:calc(-1 * var(--header-height)); transition:top 0.8s, background 0.8s;}
	.main-page.active-page .nav-open-btn,
	.main-page.active-page #headerInnerWrap{top:var(--header-top);}
}

/* ******************  메인 비주얼 ********************** */
@media all and ( max-width: 1280px ){
	/* 공통 :: 레이아웃 */
	#fullpage .section:not(#mainVisual){height:auto !important;}
	#fullpage .fp-section .fp-tableCell{height:auto !important;}
}
@media all and ( max-width: 800px ){
	.main-visual-item .main-visual-pc-img{display:none;}
	.main-visual-item .main-visual-m-img{display:block;}
	/* 메인 비주얼 :: 텍스트 */
	.main-visual-txt-box{align-items:flex-end; justify-content:flex-start; text-align:left;}
	.main-visual-txt-inner{margin-bottom:14rem;}
	.main-visual-txt-box .main-visual-txt1 h5{font-size:3.8rem}
	.main-visual-txt-box .main-visual-txt2 p{font-size:1.8rem; margin-top:2.5rem;}
	/* 메인 비주얼 :: Dots */
	.main-visual-dot{display: block; width:100%; top:auto;}
	.main-visual-dot .slick-dots{display: flex;}
	.main-page.active-page .main-visual-dot{right:auto; left:var(--area-padding); bottom:6.5rem;}
	.main-visual-dot .slick-dots li + li{margin-top:0; margin-left:1rem;}
	/* 메인 비주얼 :: 스크롤아이콘 */
	.main-scroll-icon{display:none}
}

/* ******************  메인 컨텐츠 ********************** */
/* -------- 메인 컨텐츠 :: 공통 -------- */
@media all and ( max-width: 800px ){
	/* 공통 :: 타이틀 */
	.main-tit-box .main-tit.has-btn{padding:0 6.5rem; width:100%; text-align:center; box-sizing:border-box;}
}


/* -------- 메인 컨텐츠 :: 컨텐츠1(Education) -------- */
@media all and (max-width:1280px){
	#mainEducationCon{padding:8rem 0;}
}
@media all and (max-width:800px){
	/* Education 슬라이드 */
	.main-education-img .category{min-width:5rem; height:5rem; /* line-height:5rem; */ font-size:1.2rem;}
	.main-education-wrapper{overflow:visible; width: calc(100% - (2 * var(--area-padding))); margin-left: var(--area-padding); }
	.main-education-info{padding:0; opacity:0; transition:var(--transition-custom); margin-top:4rem;}
	.main-education-info-bottm{margin:2.5rem 0 0; padding:2rem 0 0;}
	.main-education-item.swiper-slide-visible .main-education-info{opacity:1;}

	/* 공유하기 팝업 */
	.modal-share-content .modal-close-btn {top: -35px;}
}

/* -------- 메인 컨텐츠 :: 컨텐츠2(Intro) -------- */
@media all and (max-width:1280px){
	#mainIntroCon{padding:8rem 0;}
}
@media all and (max-width:800px){
	#mainIntroCon{background:#4e4e4a; padding-top:0;}
	/* 배경 */
	#mainIntroCon .main-section-bg{position: relative; height:0; padding-top:114.325%;}
	#mainIntroCon .main-section-bg .main-section-bg-inner{position: absolute; top:0; left:0; background:url("../images/main/main_intro_bg_m.jpg") no-repeat 50% 50% / cover !important;}
	/* 타이틀 */
	#mainIntroCon .main-tit-box .main-tit{font-size:4.8rem;}
	/* 컨텐츠 */
	.main-intro-wrapper{display: block; margin-top:6rem;}
	.main-intro-list{width:100%; margin-bottom:4rem;}
	.main-intro-wrapper > .main-intro-link{height:100%; width:100%; background:var(--main-color);}
	.main-intro-wrapper > .main-intro-link .main-intro-icon{display: none;}
	.main-intro-wrapper > .main-intro-link .main-intro-tit{margin-top:0; padding:2.5rem 0;}
	.main-intro-txt{display: none;}
}

/* -------- 메인 컨텐츠 :: 컨텐츠3(Customer) -------- */
@media all and (min-width:801px){
	.main-customer-list.swiper-wrapper{display: block; transform: none !important;}
	.main-customer-item.swiper-slide{width: 100% !important;}
}

@media all and (max-width:1560px){
	.main-customer-item .item-image_wrapper {width: 30rem; height: 30rem;}
}
@media all and (max-width:1510px){
	.main-customer-inner.area{padding:5rem var(--area-padding);}
	.main-customer-more{right:var(--area-padding)}
}
@media all and (max-width:1280px){
	#mainCustomerCon{padding:10rem 0;}
}
@media all and (max-width:800px){
	.main-customer-wrapper{margin-top:4rem;}
	.main-press-wrapper{margin-top: 8rem; position: relative;}
	.main-customer-inner.area{padding-bottom:0;}
	.main-customer-list{border-top: none;}
	.main-customer-item{border-bottom: none;}
	.main-customer-item > a{display: block; height:auto; line-height: 1.3;}
	/* 왼쪽 날짜 */
	.main-customer-date{margin-top: 1rem; position:static; line-height: 1.3; opacity: 1; text-align:center; font-size:2rem;}
	.main-customer-date.new span:before{top:-1.2rem;}
	/* 오른쪽 타이틀 */
	.main-customer-txt{margin-top: 1rem; width:100%; padding: 0; text-align: left; }
	.main-customer-txt .tit{font-size:2.8rem; white-space: wrap; word-break: keep-all; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
	.main-customer-txt .txt {max-width: 100%; white-space: wrap; word-break: keep-all; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
	.main-customer-more{display: none;}
	/* 이미지 영역 */
	.main-customer-item .item-image_wrapper {margin: 6rem auto 0; position: relative; left: auto; right:auto; width: 32rem; height: 32rem; opacity: 1 !important; transform: none !important;}
}
@media all and (max-width:480px){
	/* 이미지 영역 */
	.main-customer-item .item-image_wrapper{width:26rem; height:26rem;}
}