@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{top:0 !important;}
	/* 메인 비주얼 :: 텍스트 */
	.main-visual-txt-box .main-visual-txt1{font-size:6rem}
}
@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-img-con .visual-img.img01{width:29.4rem; height:33.1rem; top: 100%; transform: translate(-50%, -120%); margin-left: 7rem;}
	.main-visual-img-con .visual-img.img02{width:11.8rem; height:14.9rem; top: 100%; transform: translate(-50%, -120%); margin-top: -17rem; margin-left: -7rem;}
	/* 메인 비주얼 :: 텍스트 */
	.main-visual-txt-box{align-items: flex-start; padding-top:calc(var(--header-height) + 8rem); width: 200vw; margin-left: calc(-50vw - var(--area-padding));}
	.main-visual-txt-box .main-visual-txt1{font-size:4.8rem; text-align:center; line-height:1.2;}
	.main-visual-txt-box .main-visual-txt1 + .plus-txt{display: block; font-size:2rem; line-height:1.5; letter-spacing:-0.04em; color:var(--main-color); text-align:center; margin-top:3rem; opacity:0;}

	.active-item .main-visual-txt-box .main-visual-txt1,
	.active-item .main-visual-txt-box .main-visual-txt1 + .plus-txt{ animation: text-active-mobile-animation 2s cubic-bezier(0.4, 0, 0.2, 1) both; }
	@keyframes text-active-mobile-animation {
		0% {opacity: 0; letter-spacing: 0.2em; }
		10%{opacity: 0;}
		100% {opacity: 1; letter-spacing: -0.025em; }
	}

	.active-item .main-visual-txt-box.after-active .main-visual-txt1,
	.active-item .main-visual-txt-box.after-active .main-visual-txt1 + .plus-txt{ animation: after-active-mobile-animation 1s cubic-bezier(0.4, 0, 0.2, 1) both; }

	@keyframes after-active-mobile-animation {
		0% {opacity: 1; letter-spacing: -0.025em; }
		50%{opacity: 0;}
		100% {opacity: 0; letter-spacing: 0.2em; }
	}
}
@media all and ( max-width: 480px ){
	.main-visual-img-con .visual-img.img01{margin-left: 4rem; margin-top: 3rem;}
}

/* ******************  메인 컨텐츠 ********************** */
/* -------- 메인 컨텐츠 :: 공통 -------- */
@media all and (max-width:800px){
	.main-tit-box .main-tit{margin-bottom:2.5rem;}
	.main-tit-box .main-sub-tit{font-size:3.6rem; line-height:1.33;}
	.main-tit-box .main-sub-txt{font-size:1.7rem; line-height:1.75; margin-top:2.5rem;}
}

/* -------- 메인 컨텐츠 :: 컨텐츠1(Product) -------- */
@media all and (min-width:801px){
	.main-prd-wrapper .main-prd-list .list-item a:hover{background:var(--main-color);}
}
@media all and (max-width:1280px){
	.main-prd-wrapper .main-prd-list .list-item a .txt{bottom:3rem;}
}
@media all and (max-width:800px){
	#mainContent1{position: relative; padding:5rem 0; margin-bottom:15rem;}
	#mainContent1 .main-tit-box{margin-bottom:8rem;}
	.main-prd-wrapper .main-prd-list .list-item:nth-child(odd) a{transform:translateY(-2rem);}
	.main-prd-wrapper .main-prd-list .list-item:nth-child(even) a{transform:translateY(2rem);}
	.main-prd-wrapper .main-prd-list .list-item a .txt{font-size:2rem; bottom:3.5rem;}

	.main-prd-wrapper .swiper-scrollbar{display: block; background: rgba(255,255,255,0.1); bottom:-6rem !important; left:50% !important; transform:translateX(-50%); min-width:200px; width:50vw !important;}
	.main-prd-wrapper .swiper-scrollbar-drag{background:#fff;}

	/* Mouse Pointer */
	.mouse-pointer{display: none;}
}
@media all and (max-width:480px){
	.main-prd-wrapper{width:80%; margin:auto;}
	.main-prd-wrapper .main-prd-list .list-item:nth-child(odd) a{transform:translateY(0rem);}
	.main-prd-wrapper .main-prd-list .list-item:nth-child(even) a{transform:translateY(0rem);}
	.main-prd-wrapper .main-prd-list .list-item.swiper-slide-active a{background:var(--main-color); transform:translateY(-2rem);}
}

/* -------- 메인 컨텐츠 :: 컨텐츠2(Business) -------- */
@media all and (min-width:801px){
	/* active */
	.business-cover-list .list-item.active a:after{opacity:1;}

	.business-cover-list .list-item:nth-child(1) a .item-bg{background-position:0% 0%;}
	.business-cover-list .list-item:nth-child(2) a .item-bg{background-position:16.66% 0%;}
	.business-cover-list .list-item:nth-child(3) a .item-bg{background-position:33.32% 0%;}
	.business-cover-list .list-item:nth-child(4) a .item-bg{background-position:49.98% 0%;}
	.business-cover-list .list-item:nth-child(5) a .item-bg{background-position:66.64% 0%;}
	.business-cover-list .list-item:nth-child(6) a .item-bg{background-position:83.3% 0%;}
	.business-cover-list .list-item:nth-child(7) a .item-bg{background-position:100% 0%;}
	/* active-wrap */
	.business-cover-list.active-wrap-01 .list-item a .item-bg{background-image:url('/images/main/main_business_active_bg01.jpg');}
	.business-cover-list.active-wrap-02 .list-item a .item-bg{background-image:url('/images/main/main_business_active_bg02.jpg');}
	.business-cover-list.active-wrap-03 .list-item a .item-bg{background-image:url('/images/main/main_business_active_bg03.jpg');}
	.business-cover-list.active-wrap-04 .list-item a .item-bg{background-image:url('/images/main/main_business_active_bg04.jpg');}
	.business-cover-list.active-wrap-05 .list-item a .item-bg{background-image:url('/images/main/main_business_active_bg05.jpg');}
	.business-cover-list.active-wrap-06 .list-item a .item-bg{background-image:url('/images/main/main_business_active_bg06.jpg');}
	.business-cover-list.active-wrap-07 .list-item a .item-bg{background-image:url('/images/main/main_business_active_bg07.jpg');}
}
@media all and (max-width:1280px){
	.business-cover-list{display: block; margin:0;}
	.business-cover-list .list-item{width:100%; height:25rem; margin:1rem auto; max-width:800px;}
	.business-cover-list .list-item a{align-items: center; border-radius:1rem !important; transform:none !important;}
	.business-cover-list .list-item a:before{display: none;}
	.business-cover-list .list-item a .item-bg{width:100%; height:100%; background-position:center !important; top:0; transform:none !important;}

	.business-cover-list .list-item a .txt-box .icon{position: absolute; opacity:1; top:50%; right:0; transform:translateY(-50%);}

	#mainContent2{margin-bottom:16rem;}
	#mainContent2 .bg{display: none;}
	#mainContent2 .main-tit-box{margin-bottom:8rem;}
	.business-cover-list .list-item.active a:after {display: none;}
	
	.business-cover-list .list-item a .item-bg{opacity:0.4}
	.business-cover-list .list-item:nth-child(1) a .item-bg{background-image:url('/images/main/main_business_active_bg01.jpg');}
	.business-cover-list .list-item:nth-child(2) a .item-bg{background-image:url('/images/main/main_business_active_bg02.jpg');}
	.business-cover-list .list-item:nth-child(3) a .item-bg{background-image:url('/images/main/main_business_active_bg03.jpg');}
	.business-cover-list .list-item:nth-child(4) a .item-bg{background-image:url('/images/main/main_business_active_bg04.jpg');}
	.business-cover-list .list-item:nth-child(5) a .item-bg{background-image:url('/images/main/main_business_active_bg05.jpg');}
	.business-cover-list .list-item:nth-child(6) a .item-bg{background-image:url('/images/main/main_business_active_bg06.jpg');}
	.business-cover-list .list-item:nth-child(7) a .item-bg{background-image:url('/images/main/main_business_active_bg07.jpg');}
}
/* @media all and (max-width:800px){
	#mainContent2{margin-bottom:16rem;}
	#mainContent2 .bg{display: none;}
	#mainContent2 .main-tit-box{margin-bottom:8rem;}
	
	.business-cover-list .list-item a .item-bg{opacity:0.4}
	.business-cover-list .list-item:nth-child(1) a .item-bg{background-image:url('/images/main/main_business_active_bg01.jpg');}
	.business-cover-list .list-item:nth-child(2) a .item-bg{background-image:url('/images/main/main_business_active_bg02.jpg');}
	.business-cover-list .list-item:nth-child(3) a .item-bg{background-image:url('/images/main/main_business_active_bg03.jpg');}
	.business-cover-list .list-item:nth-child(4) a .item-bg{background-image:url('/images/main/main_business_active_bg04.jpg');}
	.business-cover-list .list-item:nth-child(5) a .item-bg{background-image:url('/images/main/main_business_active_bg05.jpg');}
	.business-cover-list .list-item:nth-child(6) a .item-bg{background-image:url('/images/main/main_business_active_bg06.jpg');}
	.business-cover-list .list-item:nth-child(7) a .item-bg{background-image:url('/images/main/main_business_active_bg07.jpg');}
} */
@media all and (max-width:480px){
	.business-cover-list .list-item{height:16rem;}
}

/* -------- 메인 컨텐츠 :: 컨텐츠3(Certificate) -------- */
@media all and (max-width:1280px){
	.main-certi-list .slick-arrow{top:calc(100% + 7rem); left:50% !important; right:auto !important; transform:translate(-50%, -50%);}
	.main-certi-list .slick-arrow.slick-prev{margin-left:-4rem;}
	.main-certi-list .slick-arrow.slick-next{margin-left:4rem;}
}
@media all and (max-width:800px){
	#mainContent3{margin-bottom:16rem;}
	#mainContent3 .bg{display: none;}
	.main-certi-list .list-item.slick-current a{transform:none;}
	.main-certi-list .slick-arrow{top:calc(100% + 3rem);}
}
@media all and (max-width:480px){
	.main-certi-wrapper{width:80%;}
}

/* -------- 메인 컨텐츠 :: 컨텐츠4(Partner) -------- */
@media all and (max-width:800px){
	#mainContent4{margin-bottom:13rem;}
	.main-partner-flow{margin:3.5rem 0;}
	.main-partner-list .list-item{margin:0 3.5rem;}
	.main-partner-list .list-item img{height:3rem;}
}

/* -------- 메인 컨텐츠 :: 컨텐츠5(PR) -------- */
@media all and (max-width:1280px){
	#mainContent5 .main-tit-box{width:45%;}
	.main-pr-wrapper{width:55%;}
}
@media all and (max-width:800px){
	#mainContent5{padding:8rem 0;}
	#mainContent5 .area-box{display: block;}
	#mainContent5 .main-tit-box{width:100%; text-align:center; margin-bottom:8rem; padding-left:0;}
	#mainContent5 .main-tit-box .more-btn{margin:6rem auto 0;}
	.main-pr-wrapper{width:100%;}
}
@media all and (max-width:480px){
	.main-pr-list{display: block; margin:auto;}
	.main-pr-list .list-item{width:100%; margin:2rem 0;}
}

/* ******************  메인 오른쪽 퀵메뉴 ********************** */
@media all and (max-width:1280px){
	#rightBar{display: none;}
}