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

/* ******************  메인 비주얼 ********************** */
@media all and ( max-width:1780px ) {
	.nav-tit {padding-left:var(--area-padding2);}
	.events-arrow, .news-arrows {right:var(--area-padding2);}
	.pro-2dep-arrow, .app-2dep-arrow {right:0;}
}
@media all and ( max-width: 1280px ){
	/* 공통 :: 레이아웃 */
	#fullpage .section:not(#mainVisual){height:auto !important;}
	#fullpage .fp-section .fp-tableCell{height:auto !important;}
	/* .slider-nav-box {display:flex; justify-content:space-between; padding:2rem 0; align-items:center; height: auto;}
	.nav-tit {padding-left:var(--area-padding2); width: auto;}
	.slider-nav {display:none !important;}
	.slider-nav-box .nav-arrows {left:initial; transform:translateY(0); right:var(--area-padding2); top:initial; display:flex;}
	.slider-nav-box .nav-arrows:before , .slider-nav-box .nav-arrows:after {display:none;} */
}
@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:initial; margin-top:12.5rem;}
	.main-visual-txt-box .main-visual-txt1{font-size:2.4rem}
	.main-visual-txt-box .main-visual-txt2 {font-size:4rem;}
	/* 메인 비주얼 :: Dots */
	.main-visual-con .slick-dots-wrapper{text-align:center; bottom:10px;}
	/* 메인 비주얼 :: 화살표 */
	.main-visual-con .slick-arrow{display:none !important;}
	/* 메인 비주얼 :: 스크롤아이콘 */
	.main-scroll-icon{display:none}
	/* 메인 비주얼 :: navigation */
	.slider-nav-box {height: auto; flex-wrap:wrap; border-top:0;}
	.nav-tit {width: calc(70% - var(--area-padding2)); order:0; padding:2rem 0 2rem var(--area-padding2); font-size:3rem;}
	.slider-nav {width: 100%; height:17.5rem; order:2; border-top:1px solid rgba(255,255,255,0.5)}
	.slider-nav-box .nav-arrows {position:static; transform:translateY(0); order:1; width: calc(30% - var(--area-padding2));     display: flex; align-items: center; justify-content: flex-end; padding-right: var(--area-padding2);} 
	.slider-nav-box .nav-arrows:before , .slider-nav-box .nav-arrows:after {display:none;}
}

/* ******************  메인 컨텐츠 ********************** */
/* -------- 메인 컨텐츠 :: 공통 -------- */
@media all and ( max-width: 800px ){
	/* 공통 :: 타이틀 */
	.main-tit-box{margin-bottom:30px;}
	.main-tit-box .main-tit{font-size:30px;}
	.main-tit-box .main-sub-tit{font-size:13px;}
	.main-tit-box .main-sub-tit span{display:block;}
}

@media all and (max-width:480px){
	/* .pause {top:0;} */
}

/* -------- 메인 컨텐츠 :: 컨텐츠1 -------- */
@media all and (max-width:1780px){
	#mainContent1 .area-box {padding:0; margin:0 var(--area-padding2);}
}

@media all and (max-width:1280px){
	.box-container .box .inner {width: calc((100% - 9.2rem) / 4); padding-top:10.2%;}
	.box-container .box .inner:nth-of-type(4n) {margin-right: 0;}
	.box-container .box .inner:nth-of-type(5n) {margin-right: 2.3rem;}
	.main-2dep-arrow, .events-arrow {right:var(--area-padding2);}
	.events-slide {padding-right:0;}
	.events-slide .slick-list, .events-slide .slick-track {margin:-4.5rem 0 0 0.7rem;}
}

@media all and (max-width:800px){
	#proContent {padding-top: 6rem;}
	.pro-main-2dep, .app-main-2dep {margin:0;}
	#mainContent1 {/* padding:6rem 0; */ padding:0 0 6rem;}
	.main-2dep-item {margin:0;}
	.main-2dep-item.on:after {bottom:-20px; border-top: 20px solid var(--main-color); border-left: 25px solid transparent; border-right: 25px solid transparent;}
	.main-2dep-item span img {width:100%;}
	.box-container .box {padding:3.5rem 0;}
	.box-container .box .inner {width: calc((100% - 1.399rem) / 2); padding-top:23.799%; margin-right: 1.399rem; margin-bottom: 1.399rem;}
	.box-container .box .inner img {width: 100%;}
	.box-container .box .inner:nth-of-type(2n) {margin-right: 0;}
	.box-container .box .inner:nth-of-type(4n) {margin-right: 0;}
	.box-container .box .inner:nth-of-type(5n){margin-right: 1.399rem;}
	.pro-3dep-tit {font-size:1.7rem; padding:0 2rem; line-height:1.2em;}
}
/*   @media all and (max-width:1220px){
	.main-quick-menu-list .quick-menu-item .item-txt-box .item-tit{font-size:20px}
	.main-quick-menu-list .quick-menu-item .item-txt-box .item-sub-tit{font-size:14px; margin-bottom:0; line-height:18px;}
	.main-quick-menu-list .quick-menu-item .item-txt-box .item-sub-txt{display:none}
	.main-quick-menu-list .quick-menu-item .over-thum::before,
	.main-quick-menu-list .quick-menu-item .over-thum::after {
		top: 10px;
		right: 10px;
		bottom: 10px;
		left: 10px;
	}
 }
 @media all and (max-width:800px){
	.main-quick-menu-list{margin:0 -1%;}
	.main-quick-menu-list .quick-menu-item {width:48%; margin:1%;}
	.main-quick-menu-list .quick-menu-item .item-txt-box{bottom:10%;}
	.main-quick-menu-list .quick-menu-item .item-txt-box .item-tit{margin-bottom:0; font-size:18px; text-align:center;}
	.main-quick-menu-list .quick-menu-item .item-txt-box .item-sub-tit{display:none;}
} */

/* -------- 메인 컨텐츠 :: 컨텐츠2 -------- */
@media all and (max-width:1780px){
	#mainContent2 .area-box {padding:0; margin:0 var(--area-padding2);}
}

@media all and (max-width:800px){
	#mainContent2 {padding: 0 0 6rem;}
}

/* -------- 메인 컨텐츠 :: 컨텐츠3 -------- */
@media all and (max-width:1280px){
	#mainContent3:before {width: 46%;}
	#mainContent3 .main-tit-box {width: 35%;}
	.events-slide {width: calc(100% - 35%);}
	.events-item {margin:0 1rem;}
	.events-date .date-container {width: calc(100% - 2.5rem); padding-right:1rem; box-sizing:border-box;}
	.events-item .events-date i {font-size:1.6rem; top:2px;}
	.events-item .events-date em {font-size:1.4rem; margin-left: 0.5rem;}
	.events-item .events-date .events-go-arrow {width: 2.5rem;}
}

@media all and (max-width:800px){
	#mainContent3 {padding:5rem 0 6rem;}
	#mainContent3:before {width: 100%;}
	#mainContent3 .area-box {flex-direction:column;}
	#mainContent3 .main-tit-box {width: 100%; order:0;}
	.events-slide {width: 100%; order:2;}
	.events-slide .slick-list, .events-slide .slick-track {padding:0; margin:0;}
	.events-item {margin:0;}
	.events-item.slick-current {transform:translateY(0);}
	.events-item .events-top {padding:3.95rem 3rem;}
	.events-item .events-date {padding:0 3rem;}
	.main-tit-box .main-sub-tit02 {line-height:1.5em;}
	.events-arrow {order:1; position:static; justify-content:flex-end; margin-bottom: 2rem;}
}

/* -------- 메인 컨텐츠 :: 컨텐츠4 -------- */
@media (max-width:800px) {
	#mainContent4 {padding:6rem 0; margin-bottom: 6rem;}
	#mainContent4 .news-container .news-item {flex-wrap:wrap;}
	#mainContent4 .news-container .news-con {width: 100%;}
	#mainContent4 .news-container .news01 {padding-right:0;}
	#mainContent4 .news-container .news01 a {height: auto; flex-wrap:wrap;}
	#mainContent4 .news-container .news01 .news-img-box {width: 100%;}
	#mainContent4 .news-container .news01 .news01-txt-box {width: 100%;}
	#mainContent4 .news-container .news01 .news-img-box > span {padding-top:56.34%; width: 100%;}
	#mainContent4 .news-container .news01 .news-img-box img {width: 100%;}
	#mainContent4 .news-container .news01 .news01-date {margin-bottom: 2rem;}
	.news01-txt {display:none;}
	#mainContent4 .news-container .news02 {display:none;}
}

/* -------- 메인 컨텐츠 :: 컨텐츠5(FIXED 배너) -------- */
@media all and (max-width:800px){
	.main-lab-container {flex-direction:column;}
	/* #mainContent5:before {display:none;} */
	#mainContent5 {border-bottom:1px solid #ddd; padding:5.5rem 0 6.5rem;}
	#mainContent5:before {width: 100%; height: 50%; top:initial; bottom:0;}
	.main-lab-container .lab-con {width: 100%; margin-right: 0; margin-bottom: 2rem;}
	.main-lab-container .lab-con:last-child {margin-bottom: 0;}
	.main-lab-container .lab-con .lab-tit-box {padding:0 2.5rem 8.98%;}
	.lab-img-box img {width: 100%;}
	.main-lab-container .lab-con .arrow {transform:translateX(-10px;)}
	.main-lab-container .lab-con:hover .arrow {transform:translateX(0);}
}

/* ******************  메인 오른쪽 퀵메뉴 ********************** */
/* @media all and ( max-width: 1440px ){
	#rightBar{right:-56px;}
	#rightBar.fixed{visibility:hidden;opacity:0;}
} */
@media all and (max-width:1280px){
	#rightBar {top:auto; bottom:70px; right:0; margin-top:0; display:block;}
	#rightBar .open-quick-search-btn {width: 65px; height: 65px;}
	#rightBar .open-quick-search-btn .txt {display:none;}
	#rightBar .open-quick-search-btn .arrow {margin-top: 0; width: 35px; height: 35px;}
	#rightBar .open-quick-search-btn .arrow i {font-size:18px;}
	.quick-search-box {position: fixed; top: 50%; margin-top: -17.5rem; left: 50%; margin-left: -40%; width: 80%; height: 39rem; opacity: 0; visibility: hidden;}
	#rightBar.open .quick-search-box {opacity:1; visibility:visible;}
}
@media all and (max-width:800px){
	.quick-search-box {margin-top: -14.5rem; margin-left: -45%; width: 90%; height: 29rem; padding: 3rem;}
	.quick-search-box .tit {font-size:2.8rem;}
	.quick-search-box .form-box {margin-top:2.5rem; padding-right:4rem;}
	.quick-search-box .form-box input {font-size:1.6rem; height:5rem;}
	.quick-search-box .form-box button {width:3.5rem; height:5rem;}
	.quick-search-box .form-box button i {font-size:2.4rem;}
	.quick-search-box .ex {margin-top:4.5rem; padding-left:4.5rem; font-size:1.6rem;}
	.quick-search-box .ex span {margin-top: -1.6rem; width: 3.2rem; height: 3.2rem; line-height: 3.2rem; font-size: 1.4rem;}

	#rightBar {bottom:283px;}
}
/* ******************  메인 오른쪽 퀵메뉴 (Fullpage) ********************** */
@media all and (max-width:1366px){
	#fp-nav{right:10px;}
}
@media all and (max-width:1024px){
	#fp-nav{display:none;}
}