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

/* ******************  메인 비주얼 ********************** */
@media (max-width: 1860px){
	.main-visual-point  {right:var(--area-padding); }
}
@media all and ( max-width: 1560px ){
	.main-visual-txt-con {padding: 0;}	
	.main-visual-con .slick-dots-wrapper {padding: 0 var(--area-padding); }
}
@media all and ( max-width: 1279px ){
	/* 메인 비주얼 :: 텍스트 */
	.main-visual-txt-box {width: 100%; padding-top: 25% !important;}
	.main-visual-txt-box .main-visual-txt2 .txt {font-size: 4.4rem;}
	.main-visual-txt-box .main-visual-txt2 .line {margin: 0 3.9rem; width: 22rem;}
}
@media all and ( max-width: 800px ){
	.main-visual-point  {width: 6rem; height: 6rem; border-radius: 3rem 0 0 0;}
	.main-visual-point.on {width: 19rem;}
	.main-visual-point.hide {transform:translate(6rem, 6rem);}
	.main-visual-item {border-radius:5rem;}
	/* 메인 비주얼 :: 텍스트 */
	.main-visual-txt-box {align-items: center; padding: 0 var(--area-padding) !important}
	.main-visual-txt-inner {width: 100%; text-align: center;}
	.main-visual-txt-box .main-visual-txt2 {display: block;}
	.main-visual-txt-box .main-visual-txt2 .txt {}
	.main-visual-txt-box .main-visual-txt2 .line {display: block; width: 100%; margin: 5rem auto;}
	
	.main-visual-con .slick-dots-wrapper {top: auto; bottom: 25%;}
	.main-visual-con .slick-dots {display: flex; justify-content: center;}
	.main-visual-con .slick-dots li {float: none;}
	/* 메인 비주얼 :: 스크롤아이콘 */
	.main-scroll-icon{display:none}
	

}

/* ******************  메인 컨텐츠 ********************** */
/* -------- 메인 컨텐츠 :: 공통 -------- */
@media all and ( max-width: 1279px ){
	/* 공통 :: 타이틀 */
	.main-tit-box .main-sub-tit { font-size: 4rem;}
	.main-tit-box .main-btn {margin-top: 3.5rem;}
}
@media all and ( max-width: 800px ){
	/* 공통 :: 타이틀 */
	.main-tit-box .main-sub-tit { font-size: 3.6rem; margin-top: 1.5rem;}
	.main-tit-box .main-btn {margin-top: 2.5rem;}
	.cm-btn-style {width: 13rem; height: 4.5rem; border-radius: 5rem;}
	
}
/* -------- 메인 컨텐츠 :: 컨텐츠2(ABOUT US) -------- */
@media all and (max-width:1860px){
	.main-about-left-con .inner {padding: 10rem 0 5rem;}
}
@media all and ( max-width: 1560px ){
	.main-about-left-con .inner {padding: 7rem 0 5rem;}
}
@media all and ( max-width: 1279px ){
	.main-about-left-con .inner {padding: 1rem 0 0;}
	.main-about-left-con .inner {width: 40%;}
	.main-about-tab-content:before {width: 23.6rem; height: 23.6rem; margin: -11.8rem 0 0 -11.8rem;}
	.main-about-tab-con .bg-img-con:before {width: 9rem; height: 22rem;}
	.main-about-tab-con .icon-box {width: 14rem; height: 14rem; left: -7rem;}
	.main-about-tab ul li {padding: 1.5rem 0;}
}
@media all and ( max-width: 800px ){
	#mainAbout {    padding: var(--header-height) 0 10rem;}
	.main-about-left-con {position: relative;}
	.main-about-left-con .inner {width: 100%;}
	
	.main-about-tab-style {padding-top: 3rem;}
	.main-about-tab:before {top: 2rem;   height: calc(100% - 4.5rem);}
	.main-about-tab ul li {padding: 1rem 0;}
	.main-about-tab ul li.selected a strong {font-size: 2.6rem;}
	.main-about-tab ul li.selected a p {font-size: 2.4rem;}
	.main-about-tab-con {width: 100%;}
	.main-about-right-con {padding-top: 10rem;}
	.main-about-right-con:before {width: 19.6rem; height: 19.6rem; top: 0; margin: 0 0 0 -9.8rem;}
	.main-about-list {width: 100% ;}
	.main-about-list li .bg-img-con:before {width: 20rem; height:7.5rem; background: url(/images/main/main_about_svg_m.svg) no-repeat center / 100%; top: 0; left: 50%; transform: translateX(-50%);}
	.main-about-list li .icon-box {width: 12rem; height: 12rem; left: 50%; top: -6rem;transform: translateX(-50%); }
	.main-about-list li .icon-box span {width: 5.7rem; height: 5.3rem;}
}

/* -------- 메인 컨텐츠 :: 컨텐츠3(BUSINESS) -------- */
 @media all and (max-width:1279px){
	.business-cover-list .list-item .inner .txt-box{padding:3rem;}
	.business-cover-list .list-item .inner .txt-box .tit{font-size:3rem;}
}
@media all and ( max-width: 800px ){
	#mainBusiness {padding: 5rem 0 10rem;}
	.main-business-img-box{background:#fff;}
	.business-hover-bg {border-radius: 5rem 0 5rem 0;}
 	.business-cover-list{display: block; margin-top:5rem; border-radius: 5rem 0 5rem 0; overflow: hidden;}
	.business-cover-list .list-item{width:100%; height: 100%; margin-bottom:0.2rem;}
	.business-cover-list .list-item:last-child {margin-bottom: 0;}
	.business-cover-list .list-item .bg{background-size:100%; background-position:center !important; transform: none !important; height:100%; top:auto;}
	.business-cover-list .list-item .inner{padding-top:20rem; transform: none !important;}
	.business-cover-list .list-item .inner .plus{display: none;}
	.business-cover-list .list-item .inner:before,
	.business-cover-list .list-item .inner:after{display: none;}
	.business-cover-list .list-item .inner .txt-box {margin-bottom: 0; transform: translateY(0)}
	.business-cover-list .list-item .inner .txt-box .tit {padding-bottom: 0;}
	.business-cover-list .list-item .inner .txt-box .txt{display: none;}
	.business-cover-list .list-item:nth-child(even) .inner .txt-box{bottom:0;} 
}

/* -------- 메인 컨텐츠 :: 컨텐츠4(PERFORMANCE) -------- */
@media all and (max-width:1560px){
	.main-perform-wrap-bg {left: calc(-1*(var(--area-padding)));}
	.main-performance-flow-wrap {left: calc(-1*(var(--area-padding)));}
}
@media all and ( max-width: 1279px ){
	#mainPerformance {    padding: 5rem 0 0;}
	.main-performance-con .left-con {width: 40%; padding-right: 3rem; box-sizing: border-box;}
	.main-performance-con .left-con .main-performance-left-inner {padding-top: 15rem;}
	.main-performance-con .right-con {width: 60%;      min-height: calc(100vh + 30rem);   transform: translateY(30rem);}
}
@media all and ( max-width: 800px ){
	#mainPerformance {padding: 2rem 0 13rem; top: 0;}
	.main-performance-con {display: block;}
	.main-performance-con .left-con {width: 100%; padding-right: 0; padding-bottom: 6rem;}
	.main-performance-con .left-con .main-performance-left-inner {padding-top: 0; height: auto;}
	.main-performance-con .right-con {width: 100%;   min-height: 0;     transform: translateY(0); }
	.main-perform-wrap-bg {bottom: -49rem;}
	.main-performance-flow-wrap {bottom: -52rem;}
	.main-performance-list  {max-width: 30rem;}
	.main-performance-list .slick-list {overflow: visible; margin: 0 -1rem;}
	.main-performance-list .slick-slide {margin: 0 1rem;}
	.main-performance-list .list-item  {opacity: 1; transform:translateY(0); height: 30rem; padding: 4.5rem 3.5rem;}
	.main-performance-list .list-item .txt-box .txt {font-size: 1.8rem; margin-top: 1.5rem;}
	.main-performance-list .list-item .logo-box {height: 7rem; }
	
	.count-num-box {font-size: 2.2rem;}
	.count-num-item-wrap .count-num-item-box{height:44rem;}
	.count-num-item-wrap .count-num-item-box .count-num-item {font-size:4.4rem;}	 
	.count-unit {font-size: 2rem;}

	.main-performance-flow-wrap {height: 12rem;}
	.main-performance-flow-wrap .inner {height: 12rem;}
	.main-performance-flow-wrap .maskBg .marquee .absol h4 {font-size: 10rem;}
}


/* -------- 메인 컨텐츠 :: 컨텐츠5(CONTACT US) -------- */ 
@media all and ( max-width: 1279px ){
	#mainContact {padding: 17rem 0;}
}
@media all and ( max-width: 800px ){
	#mainContact {padding: 12rem 0 ;}
	.main-contact-list {display: block; margin-top: 5rem;}
	.main-contact-list .main-contact-item {width: 100%;}
	.main-contact-list .main-contact-item + .main-contact-item {margin-top: 2rem;}
	.main-contact-item a {height: 18rem;}
	.main-contact-item .tit {font-size: 3rem;}
	.main-contact-item .txt {font-size: 1.8rem;}
}


/* ****************** 메인 왼쪽 퀵메뉴 ********************** */
@media all and ( max-width: 1560px ){
	#leftBar {display: none;}
}

/* ****************** 메인 오른쪽 퀵메뉴 ********************** */
@media all and ( max-width: 800px ){
	.main-quick-menu {width: 5rem; height: 5rem;}
	.main-quick-menu a { border-radius: 2rem;}
	.main-quick-menu a i {width: 5rem; height: 5rem;}
	.main-quick-menu.bottom-fixed {bottom: 9rem;}
}