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

/* ******************  메인 비주얼 ********************** */
@media all and ( max-width: 1740px ){
	.active .main-scroll-icon {right: var(--area-padding);}
}
@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 .main-visual-txt1 {font-size: 6rem;}
	.main-visual-txt-box .main-visual-txt1 img {height: 40px;}
	
	.main-scroll-icon {right: auto; top: auto; transform: none; bottom: 13rem; left: -5rem;}
	.active .main-scroll-icon {right: auto;  left: var(--area-padding);}
}

/* ******************  메인 컨텐츠 ********************** */
/* -------- 메인 컨텐츠 :: 공통 -------- */
@media all and ( max-width: 800px ){
	.main-tit-box {margin-bottom: 6rem;}
	.main-tit-box .main-tit {font-size: 3.5rem;}
	
}

/* -------- 메인 컨텐츠 :: 컨텐츠1(제품) -------- */
@media all and (max-width:1540px){
	.main-prd-con .tab-con {padding-right: 0;}
}
@media all and ( max-width: 1280px ){
	.main-prd-list .list-item .inner {padding: 10rem 6rem;}
}
@media all and ( max-width: 800px ){
	#mainPrdCon {padding: 12rem 0 5rem;}
	.main-prd-con {display: flex; flex-direction:column-reverse; height: auto;}
	.main-prd-con:before {display: none;}
	.main-prd-con .list-con {width: 100%; position: relative;height: 65rem;}
	.main-prd-list .slick-list,
	.main-prd-list .slick-track {height: 100%;}
	.main-prd-list .slick-list {margin: 0 ;}
	.main-prd-list .slick-slide {margin: 0 ;}
	.main-prd-list .list-item {height: 60rem;}
	.main-prd-list .list-item .inner {padding: 5.5rem 2.5rem; display: flex; flex-direction:column; justify-content: space-between; height: 100%; box-sizing: border-box;}
	.main-prd-list .list-item .tit {font-size: 3rem;}
	.main-prd-list .list-item .txt {font-size: 1.6rem;}
	.main-prd-list .list-item.slick-active .txt-box { opacity: 1; -webkit-transform: none;  transform: none;}
	.main-prd-list .list-item a {width: 100%; }
	.main-prd-list .slick-dots {position: absolute; bottom: -4rem;width: 100%; display: flex !important; justify-content: center;}
	.main-prd-list .slick-dots li {margin: 0 0.4rem;}
	.main-prd-list .slick-dots li button {width: 0.8rem; height: 0.8rem; border-radius: 0.8rem; background-color: rgba(255,255,255,0.2); font-size: 0; text-indent: -99999px;}
	.main-prd-list .slick-dots li.slick-active button {background-color: var(--main-color);}
	
	.main-prd-con .tab-con {width: 100%; text-align: left; margin-bottom: 3rem;}
	.main-prd-con .tab-list li {margin: 0;}
	.main-prd-con .tab-list li:before {display: none;}
	.main-prd-con .tab-list li em {color: rgba(0,0,0,0.6); font-size: 1.4rem;}
	.main-drop-menu-style{position:relative; width: 100%;}
	.main-drop-open-btn-style{display:block; position:relative; padding:0 2rem; height:60px; line-height:60px; font-size:16px; font-weight: 700; letter-spacing: -0.025em; background-color:var(--main-color2); box-sizing:border-box; border-radius: 3.3rem;}
	.main-drop-open-btn-style span{color:#fff; }
	.main-drop-open-btn-style .arrow{color:#fff; position:absolute; top:50%; right:2rem; margin-top:-0.8rem}
	.main-drop-open-btn-style.open .arrow{transform:rotate(180deg)}
	
	.main-drop-menu-style ul{display:none; margin:0; height:auto; position:absolute; top:100%; left:0px; right:0px; background-color:#fff; z-index:11; box-sizing:border-box; border-radius: 3.3rem;}
	.main-drop-menu-style ul li{position:static; display:block; float:none; border:0; width:auto; background-color:transparent; margin: 0;}
	.main-drop-menu-style ul li:first-child{border-top:0; border-left:0}
	.main-drop-menu-style ul li a{display:block; width:auto; height:auto; padding: 1rem 2rem; border:0;}
	.main-drop-menu-style ul li a em{font-size:13px;}
	.main-drop-menu-style ul li.selected{background-color:transparent;}
	.main-drop-menu-style ul li.selected a em{color:var(--main-color2); font-weight:600; }
}


/* -------- 메인 컨텐츠 :: 컨텐츠2(사업영역) -------- */
@media all and ( max-width: 1280px ){
	.main-business-con .info-con li .inner {padding: 3rem;}
	.main-business-con .info-con li .inner:before {width: 14rem; left: -14rem;}
	.main-business-con .info-con li .inner:after {left: -14.9rem;}
}
@media all and ( max-width: 800px ){
	#mainBusinessCon {padding: 12rem 0 0;}
	.main-business-con {display: block;}
	.main-business-con .img-con {width: 100%}
	.main-business-con .img-con:before {display: none;}
	.main-business-con .img-con .arrow  {width: 4.5rem; height: 2.8rem;}
	.main-business-con .info-con {width: 100%; padding: 0;}
	.main-business-con .info-con li .inner:before,
	.main-business-con .info-con li .inner:after {display: none;}
}


/* -------- 메인 컨텐츠 :: 컨텐츠3(고객사례) -------- */
@media all and ( max-width: 1540px ){
	#mainPartnerCon .main-tit-box {padding-left: 0;}
}
@media all and ( max-width: 1280px ){
	.main-partner-list {gap:2rem}
	.main-partner-list .list-item {width: calc(25% - 1.5rem);}
	.main-partner-list .list-item a {padding: 3rem; height: 34rem;}
}
@media all and ( max-width: 800px ){
	#mainPartnerCon {padding: 12rem 0 5rem;}
	#mainPartnerCon .main-tit-box {text-align: center;}
	#mainPartnerCon .main-tit-box .main-tit br {display: none; }
	#mainPartnerCon .bg {width: 150%; left: 50%; transform:translateX(-50%); top: 27rem;}
	
	.main-partner-list .slick-list {margin: 0 -0.5rem;}
	.main-partner-list .slick-slide {margin: 0 0.5rem;}
	.main-partner-list .list-item a {height: 30rem;}
	.main-partner-list .slick-dots {position: absolute; bottom: -4rem;width: 100%; display: flex; justify-content: center;}
	.main-partner-list .slick-dots li {margin: 0 0.4rem;}
	.main-partner-list .slick-dots li button {width: 0.8rem; height: 0.8rem; border-radius: 0.8rem; background-color: rgba(255,255,255,0.2); font-size: 0; text-indent: -99999px;}
	.main-partner-list .slick-dots li.slick-active button {background-color: var(--main-color);}
}

/* -------- 메인 컨텐츠 :: 컨텐츠4(핵심 성과) -------- */
@media all and ( max-width: 1280px ){
	.main-ach-con .main-tit-box {margin-bottom: 10rem;}
	.main-ach-list {flex-wrap: wrap; gap:3rem 2rem}
	.main-ach-list li {width: calc(50% - 1rem);}
	.main-ach-list li .number {justify-content: center;}
}
@media all and ( max-width: 800px){
	#mainAchievementsCon {padding: 12rem 0 0;}
	.main-ach-con {height: auto;}
	.main-ach-con .inner {padding: 8rem var(--area-padding);}
	.main-ach-list {gap:4rem 0}
	.main-ach-list li {width: 100%;}
	
	.count-num-box {font-size: 25px;}
	.count-num-box > p {font-size:50px; line-height: 50px;}
	.count-num-item-wrap .count-num-item-box {height: 500px;}
	.count-num-item-wrap .count-num-item-box .count-num-item {font-size: 50px;}
	.count-unit {font-size: 28px;}
	.main-ach-list li .txt {margin-top: 1.5rem;}
}
/* @media all and (max-width:480px){
	.ios-os .count-num-item-wrap .count-num-item-box{position: relative; }
	.ios-os .count-num-item-wrap .count-num-item-box.down .count-num-item {position: relative; }
} */

/* -------- 메인 컨텐츠 :: 컨텐츠5(리소스) -------- */
@media all and ( max-width: 800px){
	#mainResourceCon {padding: 10rem 0 12rem;}
	
	.main-resource-con {display: block;}
	.main-resource-con .resource-main-list {width: 100%; margin-bottom: 4rem;}
	.main-resource-con .resource-main-list li {position: relative;}
	.main-resource-con .resource-main-list li:not(:first-child) {display: none;}
	.resource-main-list li a .txt-box {padding: 2.5rem;}
	.main-resource-con .resource-sub-list {width: 100%; padding-left: 0;}
	.resource-main-list li a .tit ,
	.resource-sub-list li a .tit {font-size: 2.1rem;}
	.resource-sub-list li a {padding: 3.9rem 0;}
}