@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: calc(800px - var(--header-height));}
	.main-visual-item {max-height:450px;}
	
}
@media all and ( max-width: 800px ){
	/* 메인 비주얼 :: 이미지 */
	#mainVisual {margin-top: 9rem;}
	.main-visual-con {justify-content:flex-end;}
	.main-visual-item {max-height:458px; margin-top: 4rem;}
	.main-visual-item .main-visual-pc-img{display:none;}
	.main-visual-item .main-visual-m-img{display:block;}
	.active-item .main-visual-img {width: 100%;}
	/* 메인 비주얼 :: 텍스트 */
	.main-visual-txt-con {position:static;}
	.main-visual-txt-box .main-visual-txt1{font-size:7.8rem}
	.main-visual-txt-box .main-visual-txt2{font-size: 1.8rem; line-height:1.666em; margin-top: 4.5rem;}
	.main-tit-box .main-tit .tit01:before {bottom:5px;}
	/* 메인 비주얼 :: 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} */
	.main-scroll-icon .scroll-txt {color: #fff;}
	.main-scroll-box .line {background: rgba(255,255,255,0.2);}
	.main-scroll-box .line em {background: #fff;}
	.main-active .main-scroll-box {right: -1.5rem;}
	/* 메인 비주얼 :: 버튼 */
	.main-visual-txt-box .main-visual-more-btn {bottom: 3rem;}
}

/* ******************  메인 컨텐츠 ********************** */
/* -------- 메인 컨텐츠 :: 공통 -------- */
@media all and ( max-width: 800px ){
	/* 공통 :: 타이틀 */
	.main-tit-box{margin-bottom:30px;}
	.main-tit-box .main-tit{font-size:5.4rem;}
	.main-tit-box .main-tit .tit02 {font-size:4.6rem; line-height: 1.304em;}
	.main-tit-box .main-sub-tit{font-size:18px; line-height: 1.555em; margin-top: 1.7rem;}
	.main-tit-box .main-sub-tit span{display:block;}
}

/* -------- 메인 컨텐츠 :: 컨텐츠1 (about) -------- */
  @media all and (max-width:1280px){
  	#mainContent1 {padding: 7rem 0 8.5rem;}
	#mainContent1 .contents-container {flex-wrap:wrap;}
	#mainContent1 .main-tit-box {width: 100%; padding-right: 0;}	
	#mainContent1 .main-tit-box .main-sub-tit:first-of-type {margin-bottom: 2rem;}
	#mainContent1 .main-tit-box .main-sub-tit:last-of-type {margin-top: 0;}
	.about-count-list {width: 100%; padding-left: 0; margin-top: 5rem;}
	.about-count-list > li {margin-top: 3.5rem;}
	.about-count-list .num {margin: 2rem 0;}
 }

 @media all and (max-width:800px){
	.count-num-box {font-size:5rem;}
	#mainContent1 {padding: 7rem 0 4.25rem;}
	#mainContent1 .main-tit-box .main-sub-tit:first-of-type {margin-top: 1.7rem;}
	#mainContent1 .main-tit-box .main-sub-tit:last-of-type {margin-bottom: 2rem;}
	.about-count-list {margin-top: 4rem;}
	.about-count-list > li {flex-wrap:wrap; margin: -1.5rem;  margin-top: 2rem;}
	.about-count-list > li .num {width: calc((100% - 6rem) / 2); margin: 1.5rem;}
	.about-count-list .count-tit p {font-size:14px;}
	.about-count-list .num {width: calc(100% / 2); margin: 2.5rem 0;}
	.about-count-list .num:nth-child(3) {margin-top: 2rem;}
	.about-count-list .num:nth-of-type(even) {padding-left: 2rem; box-sizing:border-box;}
	.about-count-list.animated .count-tit:before {height: 12px;}

	.about-count-list .num:nth-child(1), .about-count-list .num:nth-child(2) {transition-delay:0.8s;}
	.about-count-list .num:nth-child(3), .about-count-list .num:nth-child(4) {transition-delay:1.5s;}
	.about-count-list .num:nth-child(5), .about-count-list .num:nth-child(6) {transition-delay:2.2s;}
	.about-count-list .num:nth-child(7), .about-count-list .num:nth-child(8) {transition-delay:2.9s;}
	.about-count-list .num:nth-child(9) {transition-delay:3.6s;}
 }


/* -------- 메인 컨텐츠 :: 컨텐츠2 (Product) -------- */
@media all and (max-width:1280px){
	.pro-control-box {position:static; padding-bottom:5rem;}
}

@media all and (max-width:800px){
	#mainContent2 {padding: 4.25rem 0 8rem;}
	#mainContent2 .main-tit-box .main-sub-tit {margin-bottom: 2rem;}
	/* .main-pro-list .pro-img span {padding-top: 48.64%;} */
	.main-pro-list .pro-img span img {width: 100%;}
	.main-pro-list .slick-slide {transform:translateY(0);}
}

/* -------- 메인 컨텐츠 :: 컨텐츠3 (global) -------- */
@media all and (max-width:1280px){
	#mainContent3 .global-map-con {top: 0;}
	.global-txt-con {position:static; padding: 0 var(--area-padding);}
}

@media all and (max-width:800px){
	#mainContent3 {padding: 6.4rem 0 3rem;}
}


/* -------- 메인 컨텐츠 :: 컨텐츠4( contact ) -------- */
@media (max-width:1280px) {
	.main-content-wrap {flex-wrap:wrap;}
	.main-content-wrap .main-tit-box, .main-content-wrap .main-contact-box {width: 100%;}
	.main-content-wrap .main-tit-box {margin-bottom: 0;}
	.main-content-wrap .main-contact-box {margin-left: 0;}
	.main-contact-list li a {padding-top: 40%;}
	.main-contact-box .inner-box {flex-direction:row;}
	.main-contact-box .inner-box > i {width: 4rem; margin-right: 2rem;}
	.main-contact-box .tit-box {width: calc(100% - 6rem); height: auto; margin-top: 0;}
	.main-contact-box .tit-box i {display:none;}
	.main-contact-box li.active .tit-box {height: auto;}
	.main-contact-box .tit-box p {height: auto;}
}

@media all and (max-width:800px){
	#mainContent4 {padding: 3rem 0;}
	.main-contact-box .main-contact-list {flex-wrap:wrap;}
	.main-contact-list li {width: 100%; margin-right: 0; margin-top: 1.6rem;}
	.main-contact-list li:first-child {margin-top: 0;}
	.main-contact-list li a {height: 10rem; padding-top: 0;}
	.main-contact-box .inner-box {padding: 0 3rem;}
	.main-contact-box .inner-box > i {margin-right: 4rem;}
	.main-contact-box .tit-box {text-align:left;}
	.main-contact-box .tit-box p {font-size:2rem;}
}

/* -------- 메인 컨텐츠 :: 컨텐츠5(FIXED 배너) -------- */
@media all and (max-width:800px){
	.main-fixed-con{font-size:10px;}
}
/* -------- 메인 컨텐츠 :: 컨텐츠6(사각, 원 배너들) -------- */
/* 배너 :: 사각배너 */
@media all and (max-width:800px){
	.main-banner-list-con li .banner-inner-box{font-size:12px;}
	.main-banner-list-con li .banner-inner-box .banner-sub-txt{display:none;}
}
@media all and (max-width:640px){
	.main-banner-list-con{margin:0;}
	.main-banner-list-con li{float:none; width:100%; margin:0; margin-bottom:15px;}
}


/* -------- 메인 컨텐츠 :: 컨텐츠7(100% 풀배너) -------- */
@media (max-width:1220px) {
	.main-full-banner-box .main-full-banner-left,
	.main-full-banner-box .main-full-banner-right{
		position:static; float:left; width:50%; padding:0;
	}
}
@media (max-width:800px) {
	.main-full-banner-box .full-banner-inner{width:auto; padding:50px 15px;}
	.main-full-banner-box .full-banner-inner strong{font-size:18px; padding-bottom:15px;}
	.main-full-banner-box .full-banner-inner p{font-size:13px; line-height:20px; word-break:keep-all;}
}

/* -------- 메인 컨텐츠 :: 컨텐츠8(Global Network) -------- */
@media all and ( max-width: 1220px ){
	/* .global-map-con{display:none;} */
	.global-map-con-m{display:block;}
	.global-map-con-m img{width:100%;}
}


/* -------- 메인 컨텐츠 :: 컨텐츠9(공지사항 게시판 + 배너) -------- */
@media all and (max-width:1220px){
	/* 컨텐츠 9 :: 공지사항 */
	.main-board-box .main-board-tit{font-size:17px; padding-bottom:18px; }
	.main-board-con{padding-top:15px;}
	.main-board-con li{margin-top:10px}
	.main-board-con li .bbs-tit{font-size:13px;}
	.main-board-con li .bbs-date{font-size:12px;}
}
@media all and (max-width:800px){
	/* 컨텐츠 9 :: 공지사항 */
	.main-board-box{float:none; width:100%; margin-bottom:15px;}
	/* 컨텐츠 9 :: 배너 */
	.main-board-banner-con{float:none; width:100%;}
	.main-board-banner-con ul{margin:0 -1%;}
	.main-board-banner-con ul li{width:48%; margin:0 1%;}
	.main-board-banner-con ul li a .main-board-thumb-cover p strong{font-size:14px}
}

/* ******************  메인 오른쪽 퀵메뉴 ********************** */
@media all and ( max-width: 1440px ){
	#rightBar{right:-56px;}
	#rightBar.fixed{visibility:hidden;opacity:0;}
}
/* ******************  메인 오른쪽 퀵메뉴 (Fullpage) ********************** */
@media all and (max-width:1366px){
	#fp-nav{right:10px;}
}
@media all and (max-width:1024px){
	#fp-nav{display:none;}
}