@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;}
}
@media all and (min-width:801px){
	.main-visual-txt-inner{position: absolute;}
	.main-visual-img-inner-wrap{position: relative; width:100%; height:100%; }
	.main-visual-img-inner-wrap .main-visual-img-inner{margin:auto; margin-right:0;}
}
@media (min-width:801px) and (max-width:1024px){
	.main-visual-img-inner{top:50%; transform:translateY(-50%);}
}
@media all and ( max-width: 800px ){
	#mainVisual{padding:0rem 0 0; height:calc(100vh + 1rem) !important;}
	.main-visual-txt-box{display: block;}
	.main-visual-txt-box.area{padding:0;}
	.main-visual-txt-inner{width:100%; margin-bottom:3rem;}
	.main-visual-txt-box .main-visual-txt1{font-size:5rem;}
	.main-visual-txt-box .main-visual-txt2{font-size:1.6rem;}
	.main-visual-img-inner{width:100%; height:auto; max-width:41.2rem; margin:auto;}
	.main-visual-img-inner .visual-logo{transform:none; left:auto; margin-top:5rem;}
	.main-visual-img-inner .visual-img{transform:none; left:auto;}

	.main-visual-con .slick-dots-wrapper{display: none;}
	.slick-arrow-wrapper{bottom:5rem; left:0;}

	.page-on .main-bottom-txt{height:19.7rem; margin-left:calc(-1 * var(--area-padding));}
	.page-on .main-bottom-txt svg{height:100%;}

	.active-item .main-visual-img-inner .visual-logo{transform:none; opacity:1;}
	.active-item .main-visual-img-inner .visual-img{transform:none; opacity:1;}
}

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

/* -------- 메인 컨텐츠 :: 컨텐츠1 -------- */
@media all and (min-width:801px){
	.main-product-wrap .product-list-wrap .product-item:hover{box-shadow: 14px 14px 40px 0px rgba(0, 0, 0, 0.08); z-index:1;}
}
@media all and (max-width:1480px){
	.main-product-wrap{padding:3rem 0;}
	.main-product-wrap .product-show-item .img-box{width:50%;}
}
@media all and (max-width:1280px){
	#mainContent1{padding:10rem 0;}
	.main-product-wrap{display: block; background:transparent; }
	.main-product-wrap:before{display: none;}
	.main-product-wrap .left-box{width:100%; padding:0; background:#fff; border-radius:3rem; padding:4.5rem var(--area-padding);}
	.main-product-wrap .product-show-item .txt-box{width:50%; box-sizing:border-box;}
	.main-product-wrap .product-show-item .img-box img{max-width:100%;}

	.main-product-wrap .right-box{width: calc(100% + 3rem); margin: 0 -1.5rem;}
	.main-product-wrap .product-list-wrap .product-item .img-box span{padding-top:150%;}
}
@media all and (max-width:800px){
	#mainContent1{padding:6rem 0;}
	/* 제품 왼쪽상품 */
	.main-product-wrap .product-show-item .txt-box{width:100%; padding-right:0; margin:0;}
	.main-product-wrap .product-show-item .txt-box .tit{font-size:2.5rem;}
	.main-product-wrap .product-show-item .txt-box .item-tit{font-size:6rem;}
	.main-product-wrap .product-show-item .txt-box .sub-tit{font-size:2rem;}
	.main-product-wrap .product-show-item .img-box{width:100%; position: relative; transform:none; margin:7rem 0; right: 0;}
	.main-product-wrap .product-show-item .img-box img{width:60%; max-width:100%;}
	/* 제품 왼쪽상품 :: 화살표 */
	.main-product-wrap .custom-btn{left:auto; right:0;}
	.main-product-wrap .custom-btn.btn-next{transform:translate(0); margin-left:0;}
	.main-product-wrap .custom-btn.btn-prev{transform:translateX(-100%); margin-right:3rem;}
	/* 제품 왼쪽상품 :: 점 */
	.main-product-wrap .slick-dots-wrapper{top:auto; bottom:0; transform:translateY(0%);}
	/* 제품 오른쪽상품 */
	.main-product-wrap .product-list-wrap .slick-list{height:auto !important;}
	.main-product-wrap .product-list-wrap .product-item{margin:2rem 0 0;}
	.main-product-wrap .product-list-wrap .product-item .txt-box{width:69%;}
	.main-product-wrap .product-list-wrap .product-item .img-box{margin-top:0; width:31%;}
	.main-product-wrap .product-list-wrap .product-item .img-box span{padding-top:100%;}
	.main-product-wrap .product-list-wrap .product-item .img-box img {left: 0;}

	.animated .main-product-wrap .slick-current .product-show-item .img-box{transform:none; opacity:1;}
}
@media all and (max-width:640px){
	.main-product-wrap .product-list-wrap .product-item .img-box span{padding-top:180%;}
}
@media all and (max-width:480px){
	.main-product-wrap .product-show-item .img-box img {width: 100%;}
}


/* -------- 메인 컨텐츠 :: 컨텐츠2 -------- */
@media all and (max-width:1820px){
	#mainContent2.animated:before{width:100%; border-radius:0;}
}
@media all and (max-width:1280px){
	#mainContent2:before{left:0; border-radius:0;}
	.main-connect-wrap .left-box{padding-left:0;}

	.main-connect-wrap .left-box{width:50%;}
	.main-connect-wrap .right-box{width:50%; margin-right:0; padding-left:0;}
	.main-connect-wrap .right-box:before{left:50%; transform:translateX(-50%);}
	.main-connect-wrap .right-box:after{left:50%; transform:translateX(-50%);}
	.center-active-list-con{margin:auto; padding-left:0;}
	.center-active-list-con .slick-list{}
	.center-active-list-con .slick-slide{height:auto; opacity:0; transition:all 0.5s;}
	.center-active-list-con .slick-slide.slick-current{opacity:1;}
	/* Arrow */
	.center-button-controls{display:none;}
}

@media all and (min-width:1025px){
	/* center */
	.center-active-list-con .slick-slide:not(.slick-current) .slide-inner-con{width:18rem; margin:10rem auto}
	.center-active-list-con .slick-slide.slick-current .slide-inner-con{width:100%; }
	.center-active-list-con .slick-slide.center-prev .slide-inner-con{position:absolute; top:0px; left: calc(100% - 510px);}
	.center-active-list-con .slick-slide.transition-none .slide-inner-con{-ms-transition:0; transition:0s}
}
@media all and (max-width:800px){
	#mainContent2{padding:8rem 0 0; margin-top:0;}
	#mainContent2:before{height:38rem;}
	.main-connect-wrap{display: block;}
	.main-connect-wrap .left-box{width:100%; text-align:center;}
	.main-connect-wrap .left-box .main-tit-box .main-txt{display: none;}
	.main-link-box{margin-top:5rem;}
	.main-link-box a{margin:1rem auto;}
	.main-connect-wrap .right-box{width:100%; margin-top:4rem; overflow:visible;}
}
@media all and (max-width:412px){
	.main-connect-wrap .right-box{overflow:visible}
}

/* -------- 메인 컨텐츠 :: 컨텐츠3 -------- */
@media all and (max-width:1820px){
	#mainContent3.animated:before{width:100%; border-radius:0;}
}
@media all and (min-width:481px){
	#mainContent3 .center-active-list-con .slick-slide.slick-current{width:48rem !important;}
}
@media all and (max-width:1280px){
	#mainContent3:before{left:0; border-radius:0;}
	.main-manager-wrap .left-box{padding-left:0;}

	.main-manager-wrap .left-box{width:50%;}
	.main-manager-wrap .right-box{width:50%; margin-right:0; padding-left:0; overflow:visible;}
	.main-manager-wrap .right-box:before{left:50%; transform:translateX(-50%);}
	.main-manager-wrap .right-box:after{left:50%; transform:translateX(-50%);}
	.center-active-list-con .slick-slide .slide-inner-con{transform:none; width:100%;}
	#mainContent3 .center-active-list-con{max-width:none; padding-left: 2.9rem;}
	#mainContent3 .center-active-list-con .slick-slide{/* width:48rem !important; */ margin-right:3rem;}
	#mainContent3 .center-active-list-con .slick-dots{transform:none;}
}
@media all and (max-width:800px){
	#mainContent3:before{height:30rem;}
	.main-manager-wrap{display: block; padding-top:0;}
	.main-manager-wrap .left-box{width:100%; text-align:center;}
	.main-manager-wrap .left-box .main-tit-box .main-txt{display: none;}
	.main-manager-wrap .right-box{width:100%; margin-top:5rem;}
	#mainContent3 .center-active-list-con{padding-left: 0rem;}
	#mainContent3 .center-active-list-con .slick-track{justify-content: center;}
	#mainContent3 .center-active-list-con .slick-slide{margin:0;}
}
@media all and (max-width:480px){
	.main-manager-wrap .right-box:before,
	.main-manager-wrap .right-box:after{width:100%; height:0; padding-top:76.48%;}
	.main-manager-wrap .right-box:after{border-radius:0rem;}
	#mainContent3 .center-active-list-con{padding-left:1rem;}
	#mainContent3 .center-active-list-con .slick-slide.slick-current .slide-inner-con{width:calc(100% - 1rem);}
	#mainContent3 .center-active-list-con .slick-dots{margin-top:-3rem;}
}


/* -------- 메인 컨텐츠 :: 컨텐츠4 -------- */
@media all and (max-width:1280px){
	#mainContent4 .main-product-wrap .product-list-wrap .product-item .img-box{width:65%; margin-top:0;}
	#mainContent4 .main-product-wrap .product-show-item .img-box{transform: translateY(-10%) !important;}
	#mainContent4 .main-product-wrap .product-show-item .img-box img{max-width:90%; width:90%}
}
@media all and (max-width:800px){
	#mainContent4 .main-product-wrap{padding:0;}
	#mainContent4 .main-product-wrap .product-show-item .img-box{margin-bottom:0;}
	#mainContent4 .main-product-wrap .product-show-item .txt-box{margin-bottom:0;}
	#mainContent4 .main-product-wrap .slick-dots-wrapper{top:auto;}

	#mainContent4.animated .main-product-wrap .slick-current .product-show-item .img-box{transform:none; right:auto;}
	#mainContent4 .main-product-wrap .product-list-wrap .product-item .img-box span{padding-top:42%;}
}
@media all and (max-width:480px){
	#mainContent4 .main-product-wrap .product-list-wrap .product-item .img-box span{padding-top:55%;}
}

/* -------- 메인 컨텐츠 :: 컨텐츠5 -------- */
@media all and (max-width:1680px){
	.main-partner-box{margin-left:0; width:100%;}
}
@media all and (max-width:1280px){
	.main-partner-box{padding:2rem 0;}
}
@media all and (max-width:800px){	
	#mainContent5{padding-top:0;}
	.main-partner-wrap .area-box{padding:0 1.5rem;}
	.main-partner-inner{display: flex; flex-wrap:wrap;}
	.main-partner-box{flex-direction:column; width:50%; padding:0;}
	.main-partner-box .partner-item{width:100%; height:5rem; margin-bottom:0.8rem; display: flex; align-items: center; justify-content: center}
	.main-partner-box .partner-item:last-child{margin-bottom:0;}

	#footerBottom{padding:4rem 0 3rem;}
	.footer-bottom-con{margin-top:4rem; padding-top:3rem; display: flex; flex-direction:column-reverse;}
	.footer-bottom-con .footer-copyright{float:none;}
	.footer-bottom-con .foot-menu{float:none; margin-bottom:3rem}
}