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

/* ******************  메인 비주얼 ********************** */
@media all and ( max-width: 1280px ){
	/* 공통 :: 레이아웃 */
	#fullpage .section:not(#mainVisual){height:auto !important;}
	#fullpage .fp-section .fp-tableCell{height:auto !important;}

	#mainVisual {    height: 85.8rem;}
}
@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-item .main-visual-m-img img {max-width: 100%;}

	.main-visual-txt-box {top: auto; margin-top: 15rem;}
}

/* ******************  메인 컨텐츠 ********************** */
@media all and ( max-width: 1280px ){
	#mainContent {background: transparent;}

	.line-section:before {width: 80rem; margin-left: -40rem;}
}
/* -------- 메인 컨텐츠 :: 공통 -------- */
@media all and ( max-width: 800px ){
	/* 공통 :: 타이틀 */
	.main-tit-box .main-tit img {height: 7.2rem;}


	.line-section:before {width: 37.8rem; height: 3.5rem; margin-left: -18.9rem;background: url(/images/main/main_section_line_m.png) no-repeat center / 100%;}
}

/* -------- 메인 컨텐츠 :: 컨텐츠1(상단 배너) -------- */
@media all and ( max-width: 1280px ){
	.main-top-menu {display: flex; justify-content: center;}
	.main-con01 {padding: 5rem 0 18rem;}
}
@media all and ( max-width: 800px ){
	.main-con01 { padding: 0 0 12rem;}
	.main-top-menu {width: 100%;}
	.main-top-menu li {margin:0; width: 20%;}
	.main-top-menu li a {position: relative; display: block;width: 7.7rem; height: 7rem; margin: 0 auto;}
	.main-top-menu li a img {position: absolute; width: 145%; height: 145%; left: 50%; top: 50%; transform: translate(-50%,-50%)}

	.main-con01-tit {margin: 3rem 0;}

	.main-con01-menu-list {flex-wrap: wrap; margin: -1.5rem 0;}
	.main-con01-menu-list li {width: 35%; margin: 1.5rem 0;}
}	

@media all and ( max-width: 480px ){
	.main-con01 {padding:2rem 0 12rem ;}
	.main-con01-menu-list li {width: 50%;}
}

/* -------- 메인 컨텐츠 :: 컨텐츠2 (메뉴 및 영상) -------- */
@media all and ( max-width: 800px ){
	.main-con02 {padding:6rem 0 12rem;}
}

/* -------- 메인 컨텐츠 :: 컨텐츠3 (TOPICS) -------- */
@media all and ( max-width: 800px ){
	.main-con03 {padding:8rem 0 16rem;}
	.main-topics-con {padding:5.5rem 0 0;}
	.main-topics-list {margin: -5.5rem 0;}
	.main-topics-list li {width: 100%; margin: 5.5rem 0;}
	.main-topics-list li .img-box {padding-top: 100%;}
	.main-topics-list li .txt-box {height: auto; padding: 3.5rem 4rem 8rem;}
}

/* -------- 메인 컨텐츠 :: 컨텐츠4 (SNS) -------- */
@media all and ( max-width: 800px ){
	.main-con04 {    padding: 7rem 0 12rem;}
	.main-con04 .main-tit-box .main-tit {    margin-left: 5rem;}
	.main-sns-con {padding: 5rem 0 0;}
	.main-sns-list {margin: -1.5rem 0;}
	.main-sns-list li {width: 100%; margin: 1.5rem 0;}
	.main-con04 .cm-link-btn {margin: 8rem auto 0;}
}

/* -------- 메인 컨텐츠 :: 컨텐츠5 (SCHEDULE) -------- */
@media all and ( max-width: 800px ){
	.main-con05 {padding: 7.5rem 0 10rem;}
	.main-schedule-con .schedule-list {    justify-content: center;}
	
	/* 스케줄 팝업 */
	.schedule-modal-content .modal-close-btn  {right: 0; top: -7rem;}
	.schedule-modal-content .modal-close-btn i {font-size: 3rem;}
	.schedule-inner-box { padding: 3rem 3rem 5.5rem;}
}

/* -------- 메인 컨텐츠 :: 컨텐츠6 (하단 배너) -------- */
@media all and ( max-width: 800px ){
	.main-con06 {padding: 0 0 10rem;}
	.main-banner-list {margin: -0.5rem 0;}
	.main-banner-list li {margin: 0.5rem 0;}
	.main-banner-list li.half-row {margin: 0.5rem -0.5rem;}
	.main-banner-list li.half-row .main-banner-item {width: calc(50% - 1rem); margin: 0 0.5rem;}
	.main-sns-banner-list {padding-top: 2rem; margin: 0 -0.9rem;}
	.main-sns-banner-list li { width: calc(100% - 1.8rem); margin: 0 0.9rem;}
}

/* ******************  메인 오른쪽 퀵메뉴 ********************** */
@media all and ( max-width: 800px ){
	.main-con02-video-box .video-iframe-box {border-radius: 4rem;}
	.main-con02-video-box .video-cover-box {border-radius: 4rem;}
}